/* ============================================================
   HQ Console — Apple visual language
   Tokens adapted from apple-design system. One accent (Action
   Blue). Pill radius reserved for actions. Weight ladder
   300/400/600/700. iOS system colors used ONLY for status dots
   and badges (data legibility), never as decoration.
   ============================================================ */
:root {
  /* clean, neutral sans-serif — Pretendard (KO/Latin) + Noto Sans JP (Japanese) */
  --font-sans: "Pretendard Variable", "Pretendard", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-text: var(--font-sans);

  --weight-light: 300; --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700;
  --weight-medium: 500;

  --color-action-blue: #0066cc;
  --color-focus-blue:  #0071e3;
  --color-sky-link:    #2997ff;

  --color-canvas:           #ffffff;
  --color-canvas-parchment: #f5f5f7;
  --color-surface-pearl:    #fafafc;
  --color-surface-tile-1:   #272729;
  --color-surface-black:    #000000;
  --color-surface-chip:     rgba(210,210,215,0.64);

  --color-ink:          #1d1d1f;
  --text-muted:         #6e6e73;
  --text-quiet:         #86868b;
  --text-on-dark:       #f5f5f7;

  --color-hairline:      #e0e0e0;
  --color-hairline-soft: rgba(0,0,0,0.08);
  --divider-soft:        rgba(0,0,0,0.04);

  /* iOS system semantic (status only) */
  --sys-green:  #34c759;
  --sys-orange: #ff9f0a;
  --sys-red:    #ff3b30;
  --sys-gray:   #8e8e93;
  --sys-blue:   #0a84ff;
  /* readable text tones for small labels on light bg + soft badge fills */
  /* darkened to clear WCAG AA 4.5:1 as small text on white / faint status tints (a11y audit) */
  --sys-red-text:    #bb2d22;
  --sys-orange-text: #8a5400;
  --sys-green-text:  #1a7a34;
  --sys-purple-text: #7d3ba8;      /* hold/보류 — was undefined, hardcoded 3 ways across the file */
  --color-hairline-strong: #d0d0d4; /* hover borders — was an undefined-token fallback repeated raw */
  --red-soft-bg:     rgba(255,59,48,0.12);
  --amber-soft-bg:   rgba(255,159,10,0.14);

  --radius-sm: 8px; --radius-md: 11px; --radius-lg: 18px; --radius-pill: 9999px;

  --shadow-product: 3px 5px 30px 0 rgba(0,0,0,0.22);

  --press-scale: 0.96;
  --ease-out: cubic-bezier(0.28,0.16,0.22,1);
  --dur-press: 120ms; --dur-fade: 300ms;
  --blur-frosted: saturate(180%) blur(20px);

  --content-max: 1320px;
}

*,*::before,*::after { box-sizing: border-box; }
html,body {
  margin: 0; padding: 0;
  background: var(--color-canvas-parchment);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: 15px; line-height: 1.47; letter-spacing: -0.28px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-action-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
button:active { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-out); }
button:focus-visible { outline: 2px solid var(--color-focus-blue); outline-offset: 2px; }
h1,h2,h3,h4 { margin: 0; font-weight: var(--weight-semibold); }

/* ── Global nav ─────────────────────────────────── */
.a-nav {
  position: sticky; top: 0; z-index: 100;
  height: 52px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.82);
  backdrop-filter: var(--blur-frosted); -webkit-backdrop-filter: var(--blur-frosted);
}
.a-nav-left { display: flex; align-items: center; gap: 12px; }
/* CREAS CI logo — white squircle chip so the black C stays visible on the dark nav */
/* 로고: 흰 배경 칩·그림자 없이 로고 자체만 (creas-ci.png 는 투명 배경) */
.a-logo { width: 28px; height: 28px; display: inline-grid; place-items: center; flex-shrink: 0; }
.a-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.a-logo.big { width: 52px; height: 52px; }
.a-nav-title { color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-semibold); letter-spacing: -0.2px; }
.a-nav-org { color: rgba(255,255,255,0.55); font-size: 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.18); letter-spacing: -0.1px; }
.a-nav-right { display: flex; align-items: center; gap: 14px; }

.role-switch { display: inline-flex; background: rgba(255,255,255,0.12); border-radius: var(--radius-pill); padding: 3px; }
.role-opt { color: rgba(255,255,255,0.75); font-size: 12px; font-weight: var(--weight-semibold); padding: 5px 14px; border-radius: var(--radius-pill); transition: background var(--dur-fade), color var(--dur-fade); }
.role-opt.is-active { background: #fff; color: var(--color-ink); }

.a-select {
  height: 34px; box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.12) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.4'/></svg>") no-repeat right 12px center;
  color: #fff; font-size: 13px; font-family: inherit;
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md);
  padding: 6px 30px 6px 12px; outline: none; cursor: pointer;
}
.a-select option { color: #1d1d1f; }

/* ── Sub toolbar ────────────────────────────────── */
.subbar {
  position: sticky; top: 52px; z-index: 90;
  background: rgba(245,245,247,0.8);
  backdrop-filter: var(--blur-frosted); -webkit-backdrop-filter: var(--blur-frosted);
  border-bottom: 1px solid var(--color-hairline-soft);
  padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
}
.tabs { display: flex; gap: 2px; }
.tab {
  position: relative; padding: 14px 14px 13px; font-size: 14px; color: var(--text-muted);
  font-weight: var(--weight-regular); letter-spacing: -0.2px;
  transition: color var(--dur-fade);
}
.tab:hover { color: var(--color-ink); }
.tab.is-active { color: var(--color-ink); font-weight: var(--weight-semibold); }
.tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--color-ink); border-radius: 2px; }
.week-label { font-size: 12px; color: var(--text-quiet); letter-spacing: -0.1px; }
/* subbar 오른쪽: 주차 라벨 + CREAS TALK */
.subbar-right { display: flex; align-items: center; gap: 12px; }
/* CREAS TALK — 메신저 진입 강조 버튼 (탭에서 분리) */
.talk-btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 15px 0 13px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, #0a84ff, #0071e3);
  color: #fff; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: -0.1px;
  cursor: pointer; white-space: nowrap; -webkit-appearance: none;
  box-shadow: 0 2px 8px rgba(0,113,227,0.32);
  transition: transform var(--dur-fade), box-shadow var(--dur-fade), filter var(--dur-fade), background var(--dur-fade);
}
.talk-btn svg { width: 16px; height: 16px; }
.talk-btn .talk-label { line-height: 1; }
.talk-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,113,227,0.42); filter: brightness(1.05); }
.talk-btn:active { transform: translateY(0); }
.talk-btn.is-active { background: linear-gradient(135deg, #0071e3, #005bb5); box-shadow: inset 0 1px 4px rgba(0,0,0,0.28); }
.talk-btn .talk-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #d70015; color: #fff; font-size: 10.5px; font-weight: var(--weight-bold);
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-canvas);
}
@media (max-width: 640px) { .talk-btn { padding: 0 11px; } .talk-btn .talk-label { display: none; } }

/* ── Layout ─────────────────────────────────────── */
.view-root { max-width: var(--content-max); margin: 0 auto; padding: 28px 24px 72px; }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.view-title { font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-semibold); letter-spacing: -0.2px; }
.view-sub { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

.grid { display: grid; gap: 16px; }
.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 16px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.full { grid-column: 1 / -1; }

/* ── Card ───────────────────────────────────────── */
.card { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 20px 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.card-title { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); }
.card-note { font-size: 12px; color: var(--text-quiet); line-height: 1.5; }

/* KPI */
.kpi { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 18px 20px; }
.kpi-label { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); }
.kpi-value { font-family: var(--font-display); font-size: 34px; font-weight: var(--weight-semibold); letter-spacing: -0.5px; margin-top: 6px; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--text-quiet); margin-top: 8px; line-height: 1.5; }
.kpi-sub .up { color: var(--sys-red-text); } .kpi-sub .ok { color: var(--sys-green-text); }
/* HO-1: use the darkened -text tokens (raw --sys-orange on white was ~1.9:1) — matches the home strip */
.kpi.alert .kpi-value { color: var(--sys-red-text); }
.kpi.warn .kpi-value { color: var(--sys-orange-text); }

/* ── Buttons ────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 16px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: -0.2px;
  transition: transform var(--dur-press) var(--ease-out), background var(--dur-fade); }
.btn-primary { background: var(--color-action-blue); color: #fff; }
.btn-primary:hover { background: var(--color-action-blue); filter: brightness(1.1); }
.btn-ghost { background: var(--color-surface-pearl); color: var(--color-ink); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.btn-ghost:hover { background: #f0f0f2; }
.btn-quiet { color: var(--color-action-blue); padding: 0 8px; height: 30px; }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; }
.btn-danger { background: var(--color-surface-pearl); color: var(--sys-red-text); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); } /* C-R7 (R7-B[4]): --sys-red-text (AA-safe, remaps in dark) — raw --sys-red label was 3.40:1 light / 4.36:1 dark (<AA) on the danger confirm buttons */

/* ── Badges & status ────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: -0.1px; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.st-done  { background: rgba(52,199,89,0.12);  color: var(--sys-green-text); }
.st-prog  { background: rgba(10,132,255,0.12); color: var(--color-action-blue); }
.st-plan  { background: rgba(142,142,147,0.14);color: var(--text-muted); }
.st-hold  { background: rgba(142,142,147,0.14);color: var(--text-muted); }
.st-draft { background: transparent; color: var(--text-quiet); border: 1px dashed var(--color-hairline); }
.st-late  { background: rgba(255,59,48,0.12);  color: var(--sys-red-text); }
.dot-done{background:var(--sys-green);} .dot-prog{background:var(--sys-blue);}
.dot-plan{background:var(--sys-gray);} .dot-hold{background:var(--sys-gray);}
.dot-pend{background:var(--sys-orange);} /* 승인대기 — 보류(보라)와 혼동 방지 (QA 3R) */
.dot-late{background:var(--sys-red);}
.badge-hq   { background: rgba(0,102,204,0.10); color: var(--color-action-blue); }
.badge-self { background: var(--color-surface-chip); color: var(--color-ink); }
.badge-line { background: transparent; border: 1px solid var(--color-hairline); color: var(--text-muted); }
.prio-high { color: var(--sys-red-text); font-weight: var(--weight-semibold); } /* AA-contrast text token (was --sys-red ≈ 3.3:1) */
.prio-mid  { color: var(--text-muted); }
.prio-low  { color: var(--text-quiet); }

.review-미확인 { color: var(--sys-orange-text); } /* AA text tokens: raw --sys-orange/green were ~2:1 on white */
.review-확인   { color: var(--sys-green-text); }
.review-보완요청 { color: var(--sys-red-text); }

/* priority badges (cell combos) */
.prio-b   { border: 1px solid transparent; }
.prio-hi  { background: rgba(255,59,48,0.12);  color: var(--sys-red-text); border-color: rgba(255,59,48,0.22); }
.prio-md  { background: rgba(10,132,255,0.10); color: var(--color-action-blue); border-color: rgba(10,132,255,0.20); }
.prio-lo  { background: var(--color-surface-chip); color: var(--text-quiet); }
/* HQ-review badges (cell combos) */
.rev-b { border: 1px solid transparent; }
.rev-미확인   { background: rgba(255,159,10,0.12); color: var(--sys-orange-text); border-color: rgba(255,159,10,0.22); }
.rev-확인     { background: rgba(52,199,89,0.12);  color: var(--sys-green-text); border-color: rgba(52,199,89,0.22); }
.rev-보완요청 { background: rgba(255,59,48,0.12);  color: var(--sys-red-text); border-color: rgba(255,59,48,0.22); }

/* status badge (table cell — replaces the old pill <select>) */
.st-cell { padding: 2px 4px; margin: -2px -4px; }
.st-badge { border: 1px solid transparent; }
.st-badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.st-badge.st-done { border-color: rgba(52,199,89,0.22); }
.st-badge.st-prog { border-color: rgba(10,132,255,0.22); }
.st-badge.st-plan { border-color: rgba(142,142,147,0.24); }
.st-badge.st-hold { border-color: rgba(175,82,222,0.24); }
.st-badge.st-late { border-color: rgba(255,59,48,0.22); }
/* brighter status badges + review/priority already handled — in dark */
html[data-theme="dark"] .st-badge.st-done { background: rgba(48,209,88,0.2); color: #6fe08c; }
html[data-theme="dark"] .st-badge.st-prog { background: rgba(63,149,245,0.22); color: #7fbcff; }
html[data-theme="dark"] .st-badge.st-late { background: rgba(255,69,58,0.2); color: #ff8078; }

/* multiple category badges wrap inside the cell */
.cat-cell { flex-wrap: wrap; gap: 4px 4px; }
.cat-cell .badge { padding: 3px 10px; }

/* multi-select combo popover (checkbox list) */
.wdg-mi.sel { color: var(--color-ink); font-weight: var(--weight-regular); }
.wdg-cbx { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--color-hairline); display: inline-grid; place-items: center; font-size: 11px; line-height: 1; color: #fff; flex-shrink: 0; }
.wdg-cbx.on { background: var(--color-action-blue); border-color: var(--color-action-blue); }

/* ── Table ──────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: left; font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 0 12px 10px; border-bottom: 1px solid var(--color-hairline); white-space: nowrap; }
tbody td { padding: 12px; border-bottom: 1px solid var(--divider-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--color-canvas-parchment); }
td .task-title { font-weight: var(--weight-semibold); letter-spacing: -0.2px; }
td .muted { color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
th.num { text-align: right; }

/* progress bar */
.bar-wrap { background: #ececee; border-radius: 4px; height: 6px; overflow: hidden; width: 110px; }
.bar-fill { height: 100%; background: var(--color-action-blue); border-radius: 4px; }
.bar-fill.done { background: var(--sys-green); }
.bar-fill.late { background: var(--sys-red); }

/* subsidiary status matrix */
.matrix { display: grid; gap: 10px; }
.matrix-row { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 14px; }
.matrix-name { font-weight: var(--weight-semibold); font-size: 13px; letter-spacing: -0.2px; }
.matrix-name small { display: block; color: var(--text-quiet); font-weight: var(--weight-regular); font-size: 11px; line-height: 1.45; }
.stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #f0f0f2; }
.stack span { display: block; height: 100%; }
.seg-done{background:var(--sys-green);} .seg-prog{background:var(--sys-blue);}
.seg-plan{background:#c7c7cc;} .seg-hold{background:#e5e5ea;} .seg-late{background:var(--sys-red);}
.matrix-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); font-size: 14px; }

/* U1: per-entity weekly snapshot */
.snap-table { width: 100%; border-collapse: collapse; }
.snap-table th { text-align: left; font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-quiet); padding: 6px 12px; border-bottom: 1px solid var(--divider-soft); }
.snap-table td { padding: 10px 12px; border-bottom: 1px solid var(--divider-soft); font-size: 13px; vertical-align: middle; }
.snap-table tr:last-child td { border-bottom: none; }
.snap-c { text-align: center; }
.snap-n { text-align: right; }
.snap-name { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-medium); }
.snap-ok { color: var(--text-quiet); font-size: 12px; }
.snap-zero { color: var(--text-quiet); font-variant-numeric: tabular-nums; }
.snap-bad { color: var(--sys-red-text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.snap-amber { color: var(--sys-orange-text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.snap-warn { border: none; background: var(--red-soft-bg); color: var(--sys-red-text); font-size: 12px; font-weight: var(--weight-semibold); padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.snap-link { border: none; background: none; font: inherit; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.snap-link:hover { background: var(--color-surface-pearl); text-decoration: underline; }
.snap-warn:hover { filter: brightness(0.96); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }

/* alert list */
.alert-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider-soft); }
.alert-item:last-child { border-bottom: none; }
.alert-ico { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.alert-ico.red { background: rgba(255,59,48,0.12); color: var(--sys-red-text); } /* R20: -text token (its .orange sibling already uses -text) — raw --sys-red on the faint tint was ~3.3:1 and didn't flip in dark */
.alert-ico.orange { background: rgba(255,159,10,0.14); color: var(--sys-orange-text); }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: -0.2px; }
.alert-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }

.empty { text-align: center; color: var(--text-quiet); font-size: 13px; padding: 28px 0; }

/* ── Filters ────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* light-bg select variant (used in filters, week picker, import, settings — NOT just filters) */
.a-select.light { background: var(--color-canvas) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.4'/></svg>") no-repeat right 12px center; color: var(--color-ink); border: 1px solid var(--color-hairline); }
.search { display: flex; align-items: center; height: 34px; padding: 0 14px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); }
.search input { border: 0; outline: 0; font-family: inherit; font-size: 13px; width: 180px; background: transparent; }

/* ── Weekly cards ───────────────────────────────── */
.weekly-card .wu-section { margin-top: 14px; }
.wu-section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 6px; }
/* weekly entity header — a refined status dot beside the name (replaces the heavy colored left bar) */
.wk-ent { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: var(--weight-semibold); letter-spacing: -0.2px; color: var(--color-ink); }
.wk-ent-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.wu-section p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-ink); white-space: pre-wrap; }
.todo { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider-soft); }
.todo:last-child { border-bottom: none; }
.todo .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--color-hairline); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; cursor: pointer; background: var(--color-canvas); }
.todo.done .box { background: var(--color-action-blue); border-color: var(--color-action-blue); color: #fff; }
.todo.done .todo-text { color: var(--text-quiet); text-decoration: line-through; }
.todo-text { font-size: 14px; }
.todo-owner { font-size: 11px; color: var(--text-quiet); margin-left: auto; white-space: nowrap; }

/* ── Cost ───────────────────────────────────────── */
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--weight-semibold); color: var(--sys-red-text); }
.cost-approve { display: inline-flex; gap: 6px; }

/* ── Settings ───────────────────────────────────── */
.setting-list { display: flex; flex-direction: column; gap: 8px; }
.setting-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-surface-pearl); }
.setting-row .scope-cell { flex-basis: 100%; order: 9; }
.setting-row .inline-sel[data-deleg] { order: 8; }
.setting-row input.inline { flex: 1; border: 0; background: transparent; font-family: inherit; font-size: 14px; outline: 0; }
.chip-input { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; background: var(--color-surface-chip); border-radius: var(--radius-pill); font-size: 13px; }
.chip-input button { color: var(--text-muted); font-size: 14px; line-height: 1; position: relative; cursor: pointer; }
.chip-input button::before { content: ""; position: absolute; inset: -8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); }
.field input, .field select, .field textarea { font-family: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-canvas); outline: none; color: var(--color-ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-focus-blue); }
.field textarea { resize: vertical; min-height: 70px; }

/* ── Modal ──────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.32); backdrop-filter: blur(4px); z-index: 300; display: grid; place-items: center; padding: 24px; }
.modal { animation: fadeUp 0.16s var(--ease-out) both; background: var(--color-canvas); border-radius: var(--radius-lg); width: min(560px,100%); max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.24); }
.modal-head { position: sticky; top: 0; background: rgba(255,255,255,0.9); backdrop-filter: var(--blur-frosted); padding: 18px 22px; border-bottom: 1px solid var(--color-hairline-soft); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.3px; }
.modal-x { width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-pearl); color: var(--text-muted); font-size: 15px; display: grid; place-items: center; }
.modal-body { padding: 22px; display: grid; gap: 16px; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--color-hairline-soft); display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: #fff; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.section-label { font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -0.3px; margin: 8px 0 2px; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1000px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .full { grid-column: 1; }
}
@media (max-width: 640px) {
  .a-nav-org { display: none; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .view-root { padding: 20px 16px 60px; }
  .matrix-row { grid-template-columns: 110px 1fr 44px; }
}

/* QA#2 — top bar fits small screens: wrap to two rows, scrollable tabs */
@media (max-width: 820px) {
  .a-nav { height: auto; flex-wrap: wrap; gap: 8px; padding: 8px 14px; }
  .a-nav-right { flex-wrap: wrap; gap: 8px; row-gap: 8px; justify-content: flex-end; }
  .a-nav-right .a-select, .scope-chip { max-width: 150px; }
  .uc-meta { display: none; }
  .subbar { overflow-x: auto; }
  .tabs { flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
}
@media (max-width: 480px) {
  .lang-seg { padding: 2px; } .lang-opt { padding: 4px 7px; }
  .nav-ic, .bell { width: 30px; height: 30px; position: relative; }
  .nav-ic::before, .bell::before { content: ""; position: absolute; inset: -7px; } /* 44px tap area on the highest-traffic controls (visual stays 30px) */
  .g-resize, .col-rs { display: none; } /* mouse-only resizers are inert + un-tappable on touch — hide them */
  .chat-thread { width: 100%; flex-basis: 100%; left: 0; right: 0; } /* full-width thread panel instead of a 340px overlay covering the channel */
  .ad-stats { grid-template-columns: 1fr; } /* R15: admin dashboard 6-up stat grid never collapsed below 2 — cards overflowed on a phone; stack to 1 column */
  .grid-2 { grid-template-columns: 1fr; } /* R15: settings/modal 2-col field grids stack on phone (were a hard 1fr 1fr everywhere) */
  .proj-table { display: block; overflow-x: auto; } /* R15: cash projection table wasn't in a .table-wrap — let it scroll instead of forcing the page wide */
}

/* ============================================================
   v2 additions — nav (lang / user), login, drawer, inline status
   ============================================================ */

/* language segmented control (nav = on dark) */
.lang-seg { display: inline-flex; background: rgba(255,255,255,0.12); border-radius: var(--radius-pill); padding: 3px; }
.lang-opt { color: rgba(255,255,255,0.7); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.2px; padding: 4px 10px; border-radius: var(--radius-pill); transition: background var(--dur-fade), color var(--dur-fade); }
.lang-opt.is-active { background: #fff; color: var(--color-ink); }
.lang-seg.light { background: rgba(0,0,0,0.05); }
.lang-seg.light .lang-opt { color: var(--text-muted); }
.lang-seg.light .lang-opt.is-active { background: var(--color-action-blue); color: #fff; }
/* dark mode nav: active lang chip was white-bg + light-ink (invisible) — use blue chip + brighter inactive */
html[data-theme="dark"] .lang-seg:not(.light) { background: rgba(255,255,255,0.14); }
html[data-theme="dark"] .lang-seg:not(.light) .lang-opt { color: rgba(255,255,255,0.78); }
html[data-theme="dark"] .lang-seg:not(.light) .lang-opt.is-active { background: var(--color-action-blue); color: #fff; }

.scope-chip { color: #fff; font-size: 13px; font-weight: var(--weight-semibold); padding: 6px 12px; background: rgba(255,255,255,0.12); border-radius: var(--radius-md); }

.user-chip { display: inline-flex; align-items: center; gap: 9px; padding: 4px 6px 4px 4px; background: rgba(255,255,255,0.1); border-radius: var(--radius-pill); }
.ava { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(140deg,#2997ff,#0066cc); color: #fff; font-size: 13px; font-weight: var(--weight-semibold); display: grid; place-items: center; flex-shrink: 0; }
.ava.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }
.ava.sm { width: 30px; height: 30px; }
.ava.big { width: 40px; height: 40px; border-radius: 12px; background: conic-gradient(from 220deg,#2997ff,#0066cc 55%,#001a33); }
.uc-meta { display: flex; flex-direction: column; line-height: 1.15; }
.uc-meta b { color: #fff; font-size: 12px; font-weight: var(--weight-semibold); }
.uc-meta small { color: rgba(255,255,255,0.55); font-size: 10px; }
.uc-out { color: rgba(255,255,255,0.7); font-size: 15px; width: 26px; height: 26px; border-radius: 50%; }
.uc-out:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* translated indicator */
.tl { font-size: 10px; opacity: 0.55; }
.sub-line { font-size: 12px; margin-top: 2px; line-height: 1.5; }

/* inline status pill-select (Monday-ish) */
.pill-select { appearance: none; -webkit-appearance: none; border: none; border-radius: var(--radius-pill);
  font-family: inherit; font-size: 12px; font-weight: var(--weight-semibold); padding: 4px 22px 4px 12px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><path d='M1 1l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; }
.pill-select.st-done { background-color: rgba(52,199,89,0.14); color: var(--sys-green-text); }
.pill-select.st-prog { background-color: rgba(10,132,255,0.14); color: var(--color-action-blue); }
.pill-select.st-plan { background-color: rgba(142,142,147,0.16); color: var(--text-muted); }
.pill-select.st-hold { background-color: rgba(142,142,147,0.16); color: var(--text-muted); }

/* ---- login ---- */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background:
  radial-gradient(1100px 500px at 50% -10%, #eaf1fb 0%, var(--color-canvas-parchment) 55%); }
.login-top { position: absolute; top: 22px; right: 24px; }
.login-card { width: min(420px, 100%); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 20px; padding: 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.lb-title { font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-bold); letter-spacing: -0.3px; }
.lb-org { font-size: 12px; color: var(--text-muted); }
.login-h1 { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-semibold); letter-spacing: -0.2px; }
.login-p { color: var(--text-muted); font-size: 14px; margin: 6px 0 22px; }
#login-form { display: grid; gap: 14px; }
.login-btn { width: 100%; height: 42px; margin-top: 4px; }
.login-err { color: var(--sys-red); font-size: 13px; }
.login-demo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-hairline-soft); }
.ld-label { font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-quiet); margin-bottom: 10px; }
.demo-acc { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-surface-pearl); margin-bottom: 6px; text-align: left; transition: border-color var(--dur-fade), background var(--dur-fade); }
.demo-acc:hover { border-color: var(--color-action-blue); background: #fff; }
.da-meta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.da-meta b { font-size: 13px; }
.da-meta small { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-lang { font-size: 10px; font-weight: var(--weight-bold); color: var(--text-quiet); background: var(--color-surface-chip); border-radius: 6px; padding: 2px 6px; }

/* ---- drawer (right slide-over) ---- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.28); z-index: 300; display: flex; justify-content: flex-end; opacity: 0; transition: opacity var(--dur-fade); }
.drawer-overlay.open { opacity: 1; }
.drawer { width: min(520px, 100%); height: 100%; background: var(--color-canvas); display: flex; flex-direction: column;
  transform: translateX(24px); transition: transform var(--dur-fade) var(--ease-out); box-shadow: -18px 0 50px rgba(0,0,0,0.14); }
.drawer-overlay.open .drawer { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-hairline-soft); }
.drawer-crumb { font-size: 12px; color: var(--text-muted); font-weight: var(--weight-semibold); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.drawer-title { width: 100%; border: none; outline: none; background: transparent; font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-bold); letter-spacing: -0.2px; padding: 16px 0 8px; color: var(--color-ink); }
.drawer-title::placeholder { color: #c7c7cc; }
.drawer-hint { font-size: 12px; color: var(--text-quiet); background: var(--color-canvas-parchment); border-radius: var(--radius-sm); padding: 8px 12px; margin: 4px 0 12px; line-height: 1.5; }
.prop-list { display: flex; flex-direction: column; margin: 8px 0 4px; }
.prop-row { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 10px; padding: 7px 0; }
.prop-label { font-size: 13px; color: var(--text-muted); }
.prop-val { display: flex; align-items: center; gap: 8px; }
.prop-input { font-family: inherit; font-size: 14px; color: var(--color-ink); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 8px; background: transparent; outline: none; width: 100%; transition: background var(--dur-fade), border-color var(--dur-fade); }
.prop-input:hover { background: var(--color-surface-pearl); }
.prop-input:focus { background: #fff; border-color: var(--color-focus-blue); }
/* polished property dropdown — filled field + custom chevron (native select looked bare) */
.prop-select { font-family: inherit; font-size: 14px; font-weight: var(--weight-medium); color: var(--color-ink); border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); padding: 7px 30px 7px 11px; width: 100%; outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--color-surface-pearl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
  transition: border-color var(--dur-fade), background-color var(--dur-fade), box-shadow var(--dur-fade); }
.prop-select:hover { background-color: var(--color-canvas); border-color: var(--color-hairline-strong, #d0d0d4); }
.prop-select:focus { border-color: var(--color-focus-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.14); background-color: var(--color-canvas); }
.prop-select:disabled { opacity: 0.6; cursor: default; } /* keep the chevron (faded) so it still reads as a dropdown */
.prog-ctl { display: flex; align-items: center; gap: 10px; width: 100%; }
.prog-ctl input[type=range] { flex: 1; accent-color: var(--color-action-blue); }
.prog-ctl b { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 40px; }
.drawer-sec { margin-top: 18px; }
.drawer-sec-l { font-size: 12px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 8px; }
.drawer-desc { width: 100%; min-height: 88px; resize: vertical; font-family: inherit; font-size: 14px; line-height: 1.55; color: var(--color-ink); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); padding: 12px 14px; outline: none; background: var(--color-surface-pearl); }
.drawer-desc:focus { background: #fff; border-color: var(--color-focus-blue); }
.drawer-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--color-hairline-soft); }
.autosave { font-size: 12px; color: var(--sys-green-text); margin-right: auto; }

@media (max-width: 640px) {
  .uc-meta { display: none; }
  .prop-row { grid-template-columns: 96px 1fr; }
}

/* ============================================================
   v3 — gantt, task tree, inline cells, columns, files, weekly
   ============================================================ */

/* ---- gantt ---- */
.gantt { overflow-x: auto; }
.gantt { position: relative; }
.gantt-row { display: grid; grid-template-columns: var(--gl, 250px) 1fr; align-items: center; min-height: 30px; }
/* draggable divider to resize the task-name column */
.g-resize { position: absolute; top: 0; bottom: 26px; left: var(--gl, 250px); width: 9px; margin-left: -5px; cursor: col-resize; z-index: 6; }
.g-resize::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: transparent; transition: background var(--dur-fade); }
.g-resize:hover::after, body.g-resizing .g-resize::after { background: var(--color-action-blue); }
body.g-resizing { cursor: col-resize; user-select: none; }
.gantt-axis { min-height: 22px; }
.gantt-axis .g-track { height: 22px; }
.g-axis-l { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; color: var(--text-quiet); font-variant-numeric: tabular-nums; }
.gantt-group { margin-top: 6px; }
.gantt-group .g-label b { font-size: 12px; letter-spacing: -0.1px; }
.g-label { font-size: 13px; color: var(--color-ink); padding: 0 12px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-task { padding-left: 14px; color: var(--text-muted); cursor: pointer; }
.g-task:hover { color: var(--color-action-blue); }
.g-track { position: relative; height: 30px; border-left: 1px solid var(--color-hairline-soft); }
.g-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--divider-soft); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sys-red); opacity: 0.55; z-index: 2; }
.g-bar { position: absolute; top: 5px; height: 20px; border-radius: 10px; cursor: pointer; overflow: hidden; z-index: 1;
  transition: filter var(--dur-fade); }
.g-bar:hover { filter: brightness(0.94); }
.g-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.35); border-radius: 10px 0 0 10px; }
.g-txt { position: relative; display: block; font-size: 11px; font-weight: var(--weight-semibold); color: #fff; line-height: 20px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-prog { background: var(--sys-blue); }
.g-done { background: var(--sys-green); }
.g-late { background: var(--sys-red); }
.g-plan, .g-hold { background: #b9b9c0; } /* note: overridden by the !important .g-plan/.g-hold rules below (dark text on plan handles contrast) */

/* ---- task tree table ---- */
.task-table th { white-space: nowrap; }
.group-row td { padding: 14px 12px 8px; font-size: 13px; font-weight: var(--weight-bold); letter-spacing: -0.2px; border-bottom: 1px solid var(--color-hairline); }
/* R3: keep the entity name pinned to the left while the wide table scrolls horizontally */
.group-row .g-sticky { position: sticky; left: 12px; display: inline-flex; align-items: center; }
.g-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; background: var(--color-action-blue); margin-right: 8px; }
.g-count { color: var(--text-quiet); font-weight: var(--weight-regular); margin-left: 4px; }
.task-row.is-child td { background: #fbfbfd; }
.tree-caret { width: 23px; height: 23px; border-radius: 6px; color: var(--text-muted); font-size: 14px; display: inline-grid; place-items: center; transition: transform var(--dur-press) var(--ease-out); flex-shrink: 0; }
.tree-caret:hover { background: var(--color-surface-chip); color: var(--color-ink); }
.tree-caret.closed { transform: rotate(-90deg); }
.tree-caret-sp { width: 23px; flex-shrink: 0; display: inline-block; }
.tt-wrap { display: flex; align-items: center; gap: 7px; min-height: 24px; }
.mini-chip { font-size: 10px; font-weight: var(--weight-semibold); color: var(--text-muted); background: var(--color-surface-chip); border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap; }
/* hover actions float over the cell so they never squeeze the title */
.cell-title { position: relative; }
.cell-title .ce { flex: 0 1 auto; min-width: 0; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-actions { display: none; gap: 4px; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: #f7f9fd; box-shadow: -14px 0 12px -6px #f7f9fd; padding: 2px 2px 2px 8px; border-radius: 8px; z-index: 3; }
.task-row:hover .row-actions, .task-row:focus-within .row-actions { display: inline-flex; } /* R15 a11y: focus-within so keyboard users can reach Detail/Open/Add-sub/Duplicate (were hover-only) */
.btn-mini { font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-action-blue); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); padding: 3px 8px; white-space: nowrap; }
.btn-mini:hover { border-color: var(--color-action-blue); }
.btn-mini.x { color: var(--text-quiet); border: none; background: transparent; padding: 3px 6px; position: relative; }
.btn-mini.x:hover { color: var(--sys-red); }
/* #22 touch: invisibly enlarge the tap area of tiny delete ✕ buttons toward a comfortable target without growing the glyph */
.btn-mini.x::before { content: ""; position: absolute; inset: -8px; }

/* inline editable cells */
.ce { display: inline-block; min-width: 40px; max-width: 360px; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; outline: none; cursor: text; }
.ce:hover { background: var(--color-canvas-parchment); }
.ce:focus { background: #fff; box-shadow: 0 0 0 2px var(--color-focus-blue); }
.ce-ro { cursor: default; }
.ce-ro:hover { background: transparent; }
/* empty (untitled) task — show a faint placeholder so the row stays findable/clickable */
.ce[data-ph]:empty::before { content: attr(data-ph); color: var(--text-quiet); font-weight: var(--weight-regular); pointer-events: none; }
.cell-title .ce { font-weight: var(--weight-semibold); letter-spacing: -0.2px; }
.cell-date { font-family: inherit; font-size: 12px; color: var(--color-ink); border: none; background: transparent; border-radius: 6px; padding: 3px 4px; outline: none; width: 118px; }
.cell-date:hover:not(:disabled) { background: var(--color-canvas-parchment); }
.cell-date:focus { background: #fff; box-shadow: 0 0 0 2px var(--color-focus-blue); }
.cell-date:disabled { color: var(--text-muted); }
.cell-sel { font-family: inherit; font-size: 12px; color: var(--color-ink); border: none; background: transparent; border-radius: 6px; padding: 3px 4px; outline: none; max-width: 130px; cursor: pointer; }
.cell-sel:hover:not(:disabled) { background: var(--color-canvas-parchment); }
.cell-sel:disabled { appearance: none; -webkit-appearance: none; color: var(--text-muted); cursor: default; }
.prog-cell { display: flex; align-items: center; gap: 7px; }
.prog-n { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd { font-size: 11px; margin-top: 2px; }
.pill-select.mini { font-size: 11px; padding: 3px 18px 3px 10px; }
.pill-select:disabled { appearance: none; -webkit-appearance: none; background-image: none; cursor: default; }

/* quick add row */
.quick-row td { padding: 6px 12px 14px; }
.quick-add { width: 100%; max-width: 420px; font-family: inherit; font-size: 13px; color: var(--color-ink); border: 1px dashed var(--color-hairline); border-radius: var(--radius-md); background: transparent; padding: 8px 12px; outline: none; }
.quick-add:hover { background: var(--color-surface-pearl); }
.quick-add:focus { border-color: var(--color-focus-blue); border-style: solid; background: #fff; }

/* add-column popover */
.th-custom { position: relative; }
.th-x { color: var(--text-quiet); font-size: 12px; margin-left: 6px; opacity: 0; }
.th-custom:hover .th-x { opacity: 1; }
.th-x:hover { color: var(--sys-red); }
.col-pop { animation: fadeUp 0.16s var(--ease-out) both; position: absolute; right: 0; top: 42px; z-index: 50; width: 240px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(0,0,0,0.14); padding: 16px; display: grid; gap: 12px; text-align: left; }

/* lock chip */
.lock-chip { font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-quiet); background: var(--color-surface-chip); border-radius: var(--radius-pill); padding: 2px 8px; }

/* ---- drawer additions ---- */
.crumb-link { color: var(--color-action-blue); cursor: pointer; }
.sub-list { display: flex; flex-direction: column; }
.sub-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--divider-soft); }
.sub-item:last-child { border-bottom: none; }
.sub-title { flex: 1; font-size: 14px; color: var(--color-ink); cursor: pointer; }
.sub-title:hover { color: var(--color-action-blue); text-decoration: none; }
.file-list { display: flex; flex-direction: column; margin-bottom: 8px; }
.file-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--divider-soft); font-size: 13px; }
.file-item:last-child { border-bottom: none; }
.file-link { flex: 1; color: var(--color-ink); }
.file-link:hover { color: var(--color-action-blue); text-decoration: none; }
.file-btn { cursor: pointer; }
.drawer-desc.notes { min-height: 170px; }
.drawer { width: min(620px, 100%); }
.hq-note-ro { font-size: 12px; color: var(--text-muted); background: var(--color-canvas-parchment); border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 6px; width: 100%; }

/* ---- weekly v3 ---- */
.week-nav { display: flex; align-items: center; gap: 10px; }
.week-cur { font-size: 14px; font-weight: var(--weight-semibold); letter-spacing: -0.2px; min-width: 90px; text-align: center; }
.wk-banner { background: rgba(0,102,204,0.08); color: var(--color-action-blue); font-size: 13px; font-weight: var(--weight-semibold); border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: 16px; }
.wk-banner.warn { background: rgba(255,159,10,0.12); color: var(--sys-orange-text); }
.wk-banner.ok { background: rgba(52,199,89,0.1); color: var(--sys-green-text); }
.wk-item { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--divider-soft); }
.wk-item:last-of-type { border-bottom: none; }
.wk-ce { flex: 1; min-width: 160px; font-size: 14px; line-height: 1.45; }
.dec-chip { font-size: 11px; font-weight: var(--weight-bold); border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap; background: rgba(255,159,10,0.14); color: var(--sys-orange-text); flex-shrink: 0; }
.dec-chip.ok { background: rgba(52,199,89,0.12); color: var(--sys-green-text); }
.dec-chip.no { background: rgba(255,59,48,0.12); color: var(--sys-red-text); }
.dec-chip.static { cursor: default; }
.dec-set { display: inline-flex; gap: 4px; flex-shrink: 0; }
.dec-chip.go-ok { background: rgba(52,199,89,0.12); color: var(--sys-green-text); cursor: pointer; }
.dec-chip.go-no { background: rgba(255,59,48,0.10); color: var(--sys-red-text); cursor: pointer; }
.dec-chip.go-ok:hover, .dec-chip.go-no:hover { filter: brightness(0.96); }
.hq-note { width: 100%; font-family: inherit; font-size: 12px; color: var(--text-muted); border: none; border-left: 2px solid var(--color-hairline); background: transparent; padding: 4px 10px; outline: none; }
.hq-note-wrap { width: 100%; display: flex; flex-direction: column; }
.hq-note-by { font-size: 11px; color: var(--text-quiet); font-weight: var(--weight-semibold); margin: 3px 0 0 10px; }
.hq-note-ro .hq-note-by { margin: 0 5px 0 0; }
/* weekly auto-linked task list (reason/plan + focus star) */
.wa-list { display: flex; flex-direction: column; }
.wa-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--divider-soft); }
.wa-row:last-child { border-bottom: none; }
.wa-star { border: none; background: none; cursor: pointer; color: var(--text-quiet); padding: 2px; display: inline-flex; flex-shrink: 0; transition: color var(--dur-fade); }
.wa-star .ic { width: 16px; height: 16px; }
.wa-star.on { color: var(--sys-orange); }
.wa-task-t { border: none; background: none; cursor: pointer; text-align: left; font-size: 13px; color: var(--color-ink); padding: 2px 0; display: inline-flex; align-items: baseline; gap: 6px; flex-shrink: 0; max-width: 44%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-task-t:hover { color: var(--color-action-blue); }
.wa-task-t em { font-style: normal; font-size: 11px; color: var(--text-quiet); flex-shrink: 0; }
.wa-task-t.late em { color: var(--sys-red-text); font-weight: var(--weight-semibold); }
.wa-row.focus .wa-task-t { font-weight: var(--weight-semibold); }
.wa-note { flex: 1; min-width: 90px; font-family: inherit; font-size: 12px; color: var(--color-ink); border: none; border-bottom: 1px dashed var(--color-hairline); background: transparent; padding: 3px 4px; outline: none; }
.wa-note:focus { border-bottom-color: var(--color-focus-blue); border-bottom-style: solid; }
.wa-note-ro { flex: 1; font-size: 12px; color: var(--text-muted); }
.wu-sub-hint { font-size: 11px; color: var(--text-quiet); margin-bottom: 8px; line-height: 1.45; display: block; }
.hq-note:focus { border-left-color: var(--color-focus-blue); color: var(--color-ink); }
.wk-add { margin-top: 10px; }

@media (max-width: 900px) {
  .gantt-row { grid-template-columns: var(--gl, 140px) 1fr; }
}

/* ============================================================
   v4 — interactive polish, comments, inline detail, resize
   ============================================================ */

/* subtle view entrance */
.view-root > * { animation: fadeUp 0.24s var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* table: fixed layout so column widths are draggable */
.task-table { table-layout: fixed; min-width: 900px; }
.task-table td { overflow: hidden; }
/* 비용 테이블도 동일: 고정 레이아웃 + 리사이즈 + 줄바꿈 방지 */
.cost-table { table-layout: fixed; min-width: 1080px; }
.cost-table th { white-space: nowrap; }
.cost-table td { overflow: hidden; vertical-align: middle; }
/* 그룹행(법인명) td는 overflow:hidden이면 내부 sticky span의 스크롤 컨테이너가 돼 고정이 깨진다 → 예외 */
.task-table .group-row td, .cost-table .group-row td { overflow: visible; }
.cost-table thead th { position: sticky; top: 0; z-index: 12; background: var(--color-canvas); box-shadow: 0 1px 0 var(--color-hairline); }
.cost-table td.nowrap-cell { white-space: nowrap; }              /* 상태(대기일 배지)·플래그·액션이 아래줄로 내려오지 않게 */
.cost-table td.nowrap-cell .badge, .cost-table td.nowrap-cell .wait-chip, .cost-table td.nowrap-cell .flag { vertical-align: middle; }
.cost-table .cost-approve { flex-wrap: nowrap; }
.cost-table .cost-approve .btn { white-space: nowrap; flex-shrink: 0; }   /* 승인·반려 글자 잘림 방지 */
.cost-table td .task-title { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cost-table td .sub-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 비용 커스텀 컬럼 인라인 입력 */
.cost-table .cell-text { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 4px 6px; font-family: inherit; font-size: 13px; color: var(--color-ink); outline: none; }
.cost-table .cell-text:hover { background: var(--color-canvas-parchment); }
.cost-table .cell-text:focus { background: #fff; border-color: var(--color-focus-blue); }
html[data-theme="dark"] .cost-table .cell-text:focus { background: #2a2a2e; }
html[data-density="compact"] .cost-table td { padding: 6px 10px; font-size: 12px; }
/* 선택된 비용 행 음영 (전체선택 포함) */
.cost-table tr.is-sel td { background: rgba(10,132,255,0.07); }
.cost-table tr.is-sel:hover td { background: rgba(10,132,255,0.11); }
html[data-theme="dark"] .cost-table tr.is-sel td { background: rgba(63,149,245,0.12); }
html[data-theme="dark"] .cost-table tr.is-sel:hover td { background: rgba(63,149,245,0.17); }
.task-row { transition: background var(--dur-fade); cursor: pointer; }
.task-row:hover td { background: #f7f9fd; }
.task-row.is-open td { background: #f2f6fd; }
.task-row.is-child.is-open td, .task-row.is-child:hover td { background: #f4f7fc; }

/* column resize handle */
th { position: relative; }
.col-rs { position: absolute; right: -4px; top: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 5; }
.col-rs::after { content: ""; position: absolute; left: 4px; top: 20%; bottom: 20%; width: 1px; background: transparent; transition: background var(--dur-fade); }
th:hover .col-rs::after { background: var(--color-hairline); }
.col-rs:hover::after { background: var(--color-action-blue); }
body.col-resizing { cursor: col-resize; user-select: none; }
.th-lb { overflow: hidden; text-overflow: ellipsis; }

/* column settings popover */
.cp-sec { font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-quiet); }
.cp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.cp-row input[type="checkbox"] { accent-color: var(--color-action-blue); }
.cp-row span { flex: 1; }
.th-x.on { opacity: 1; }
.col-pop { width: 260px; max-height: 480px; overflow-y: auto; }

/* date filter */
.date-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); padding: 0 14px; height: 34px; }
.date-filter input { border: 0; outline: 0; font-family: inherit; font-size: 13px; background: transparent; color: var(--color-ink); }

/* done (completed) fold */
.done-row td { padding: 10px 12px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-quiet); cursor: pointer; background: var(--color-surface-pearl); border-top: 1px solid var(--divider-soft); }
.done-row:hover td { color: var(--color-ink); }

/* inline detail panel (Notion-style, opens under the row).
   sticky-left keeps it fully visible even when the wide table is
   scrolled horizontally; JS sets its width to the visible area. */
.detail-row td { padding: 2px 12px 18px; background: #f2f6fd; cursor: default; }
.detail-panel { position: sticky; left: 16px; box-sizing: border-box;
  background: var(--color-canvas); border: 1px solid var(--color-hairline); border-left: 3px solid var(--color-action-blue);
  border-radius: 14px; padding: 24px 28px; animation: fadeUp 0.2s var(--ease-out) both; box-shadow: 0 8px 26px rgba(0,0,0,0.05); }
.dp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; }
.dp-left { padding-right: 28px; }
.dp-right { border-left: 1px solid var(--color-hairline); padding-left: 28px; min-width: 0; }
.detail-panel .drawer-sec-l { margin-bottom: 8px; }
.dp-desc { min-height: 88px; }
.dp-notes { min-height: 150px; }
.detail-panel .cmt-list { max-height: 380px; }
.detail-panel textarea { white-space: pre-wrap; }
.quick-row.sub td { padding: 4px 12px 12px; background: #fbfbfd; }
.quick-add-sub { max-width: 440px; }
.dp-prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dp-prog input { flex: 1; accent-color: var(--color-action-blue); }
.dp-prog b { font-size: 12px; min-width: 36px; }
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.file-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); padding: 4px 6px 4px 12px; font-size: 12px; }
.file-chip a { color: var(--color-ink); }
.file-btn { cursor: pointer; }

/* ---- comments (Slack-like) ---- */
.cmt-list { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.cmt { display: flex; gap: 10px; }
.ava.sm2 { width: 26px; height: 26px; font-size: 12px; flex-shrink: 0; background: #c7c7cc; }
.ava.sm2.me { background: linear-gradient(140deg, #2997ff, #0066cc); }
.cmt-b { flex: 1; min-width: 0; }
.cmt-h { display: flex; align-items: baseline; gap: 8px; }
.cmt-h b { font-size: 13px; }
.cmt-h small { font-size: 11px; color: var(--text-quiet); }
.cmt-h .btn-mini.x { opacity: 0; margin-left: auto; }
.cmt:hover .cmt-h .btn-mini.x { opacity: 1; }
.cmt-t { font-size: 13px; line-height: 1.5; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.mention { color: var(--color-action-blue); font-weight: var(--weight-semibold); background: rgba(0,102,204,0.08); border-radius: 4px; padding: 0 3px; }
.cmt-r { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.react { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-canvas-parchment); border: 1px solid var(--color-hairline); }
.react.mine { background: rgba(0,102,204,0.1); border-color: rgba(0,102,204,0.35); color: var(--color-action-blue); }
html[data-theme="dark"] .react.mine { background: rgba(63,149,245,0.20); border-color: rgba(63,149,245,0.5); color: #7fbcff; } /* was near-invisible: 10% blue on the dark bubble */
.react:hover { border-color: var(--color-action-blue); }
.rx-wrap, .mm-wrap { position: relative; display: inline-flex; }
.rx-btn { font-size: 12px; color: var(--text-quiet); padding: 2px 7px; border-radius: var(--radius-pill); border: 1px dashed var(--color-hairline); opacity: 0; transition: opacity var(--dur-fade); }
.cmt:hover .rx-btn, .cmt-input .rx-btn { opacity: 1; }
.rx-pop, .mm-pop { position: absolute; bottom: calc(100% + 4px); right: 0; display: none; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0,0,0,0.14); padding: 6px; z-index: 60; white-space: nowrap; }
.rx-wrap:hover .rx-pop, .mm-wrap:hover .mm-pop { display: flex; gap: 2px; }
.mm-pop { flex-direction: column; max-height: 200px; overflow-y: auto; }
.rx-add { font-size: 15px; padding: 4px 6px; border-radius: 6px; }
.rx-add:hover { background: var(--color-canvas-parchment); }
.mm-item { font-size: 12px; text-align: left; padding: 6px 10px; border-radius: 6px; color: var(--color-ink); }
.mm-item:hover { background: rgba(0,102,204,0.08); color: var(--color-action-blue); }
.cmt-input { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cmt-in { flex: 1; font-family: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); outline: none; background: var(--color-canvas); }
.cmt-in:focus { border-color: var(--color-focus-blue); }
/* contentEditable composer: single-line feel, placeholder, mention chips inline */
div.cmt-in { min-height: 34px; max-height: 100px; overflow-y: auto; cursor: text; word-break: break-word; line-height: 1.45; }
div.cmt-in:empty::before { content: attr(data-ph); color: var(--text-quiet); pointer-events: none; }
.mchip { display: inline-block; margin: 0 1px; white-space: nowrap; }
.mm-item { display: flex; align-items: center; gap: 7px; }
.mm-orig { color: var(--text-quiet); font-size: 11px; margin-left: auto; }
/* mention float: 비댓글 필드는 JS가 래퍼를 relative로 만들고 입력창 아래 좌표를 인라인 지정
   (CSS static-position 방식은 composer를 덮거나 섹션 끝에 떨어지는 문제가 있어 제거 — 회귀 QA) */
.drawer-sec { position: relative; }
/* per-sub approval line chips (settings) */
.appr-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; }
.appr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--weight-semibold); background: var(--color-canvas); }
.appr-chip .appr-n { color: var(--text-quiet); font-weight: var(--weight-bold); font-size: 11px; }
.appr-chip .btn-mini.x { margin-left: 2px; }
.next-appr { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }

/* ---- weekly auto-link ---- */
.wu-auto { background: var(--color-canvas-parchment); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px; }
.wa-hint { font-size: 12px; color: var(--text-quiet); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; line-height: 1.5; }
.wa-hint svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--sys-orange); }
.wu-auto h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin: 0 0 2px; }
.wa-hint { font-size: 11px; color: var(--text-quiet); margin-bottom: 8px; }
.wa-g { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
.wa-l { font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-muted); white-space: nowrap; min-width: 88px; flex: 0 0 auto; } /* EN "Due / late this week"가 88px로 짓눌려 잘리던 것 방지 */
.wa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-chip { font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-canvas); border: 1px solid var(--color-hairline); color: var(--color-ink); transition: border-color var(--dur-fade); }
.wa-chip:hover { border-color: var(--color-action-blue); color: var(--color-action-blue); }
.wa-chip em { font-style: normal; color: var(--text-quiet); font-size: 11px; }
.wa-chip.late { border-color: rgba(255,59,48,0.4); }
.wa-chip.late em { color: var(--sys-red); }
.wa-chip.warn { border-color: rgba(255,159,10,0.5); }

/* currency */
.eur-eq { font-size: 11px; color: var(--text-quiet); font-weight: var(--weight-regular); white-space: nowrap; }

/* gantt small (subtask) bars */
.g-bar.g-sm { height: 13px; top: 8px; border-radius: 7px; opacity: 0.82; }
.g-bar.g-sm .g-txt { line-height: 13px; font-size: 10px; padding: 0 8px; }

@media (max-width: 900px) {
  .dp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v5 — datepicker, cash report, comment tools, mention float
   ============================================================ */

/* pretty datepicker */
input.dp { cursor: pointer; caret-color: transparent; }
.dp-pop { position: absolute; z-index: 400; width: 252px; background: var(--color-canvas); border: 1px solid var(--color-hairline);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.18); padding: 12px; animation: fadeUp 0.16s var(--ease-out) both; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-head b { font-size: 14px; letter-spacing: -0.2px; }
.dp-nav { width: 28px; height: 28px; border-radius: 8px; color: var(--text-muted); font-size: 15px; }
.dp-nav:hover { background: var(--color-canvas-parchment); color: var(--color-ink); }
.dp-dow { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: 10px; font-weight: var(--weight-bold); color: var(--text-quiet); margin-bottom: 4px; }
.dp-pop .dp-grid { display: grid; grid-template-columns: repeat(7,1fr) !important; gap: 2px; }
.dpc { height: 30px; border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--color-ink); display: grid; place-items: center; }
.dpc:hover { background: var(--color-canvas-parchment); }
.dpc.off { pointer-events: none; }
.dpc.sun { color: var(--sys-red); }
.dpc.today { box-shadow: inset 0 0 0 1.5px var(--color-action-blue); font-weight: var(--weight-bold); }
.dpc.sel { background: var(--color-action-blue); color: #fff; font-weight: var(--weight-bold); }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--divider-soft); }
.dp-today, .dp-clear { font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-action-blue); padding: 4px 10px; border-radius: var(--radius-pill); }
.dp-clear { color: var(--text-quiet); }
.dp-today:hover, .dp-clear:hover { background: var(--color-canvas-parchment); }
.date-filter input.dp { width: 104px; }

/* my-tasks chip */
.mine-chip { height: 34px; padding: 0 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: var(--weight-semibold);
  background: var(--color-canvas); border: 1px solid var(--color-hairline); color: var(--text-muted); transition: all var(--dur-fade); }
.mine-chip:hover { border-color: var(--color-action-blue); color: var(--color-action-blue); }
.mine-chip.on { background: var(--color-action-blue); border-color: var(--color-action-blue); color: #fff; }
.kpi-link { cursor: pointer; transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-fade); }
.kpi-link:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.07); transform: translateY(-1px); }

/* comment tools + inline edit + mention autocomplete */
.cmt-tools { display: inline-flex; gap: 6px; margin-left: auto; align-items: center; }
.cmt-tool { font-size: 11px; color: var(--text-quiet); padding: 2px 7px; border-radius: var(--radius-pill); opacity: 0; transition: opacity var(--dur-fade); }
.cmt:hover .cmt-tool { opacity: 1; }
.cmt-tool:hover { background: var(--color-canvas-parchment); color: var(--color-action-blue); }
.cmt-editwrap { position: relative; display: block; margin-top: 4px; }
.cmt-editin { width: 100%; font-family: inherit; font-size: 13px; padding: 7px 11px; border: 1.5px solid var(--color-focus-blue); border-radius: var(--radius-md); outline: none; }
.cmt-input { position: relative; }
.mm-float { position: absolute; bottom: calc(100% + 6px); left: 34px; z-index: 240; display: flex; flex-direction: column; min-width: 160px; max-height: 190px; overflow-y: auto;
  background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); box-shadow: 0 12px 34px rgba(0,0,0,0.16); padding: 5px; animation: fadeUp 0.14s var(--ease-out) both; }
/* anchor the comment @-mention popover to the composer itself (not the whole section) so it sits right above where you type, on top of everything */
.cmt-input, .cmt-editwrap { position: relative; }
.cmt-editwrap .mm-float { left: 0; }

/* member admin selects */
.inline-sel { font-family: inherit; font-size: 12px; color: var(--color-ink); border: 1px solid var(--color-hairline); background: var(--color-canvas); border-radius: var(--radius-sm); padding: 5px 8px; outline: none; }

/* ---- cash (자금 주보) ---- */
.cash-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.cash-bal { background: var(--color-canvas-parchment); border-radius: var(--radius-md); padding: 12px 16px; }
.cash-bal-v { font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-semibold); letter-spacing: -0.3px; margin-top: 4px; font-variant-numeric: tabular-nums; } /* R20: weight-semibold to match the KPI/home-stat metric family */
.cash-mini { border: 1px solid var(--color-hairline); border-radius: var(--radius-md); padding: 12px 14px; }
.cash-mini-v { font-size: 16px; font-weight: var(--weight-bold); margin-top: 6px; font-variant-numeric: tabular-nums; }
.cash-pos { color: var(--sys-green-text); }
.cash-neg { color: var(--sys-red-text); }
.cash-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.cash-meta input.cash-open { width: 130px; font-family: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); outline: none; }
.cash-meta input.dp { width: 112px; font-size: 13px; padding: 5px 9px; border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); background: var(--color-canvas); }
.cash-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.cash-add input, .cash-add select { font-family: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); outline: none; background: var(--color-canvas); }
.cash-add input.dp { width: 118px; }
.cash-add input:focus { border-color: var(--color-focus-blue); }
.badge.expected { opacity: 0.68; border: 1px dashed currentColor; background: transparent; }
.proj-table { width: 100%; }
.proj-table th { font-size: 10px; }
.proj-table td { padding: 8px 10px; }
.pj-bar { position: relative; height: 16px; min-width: 90px; background: var(--color-canvas-parchment); border-radius: 5px; overflow: hidden; }
.pj-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.pj-in { background: rgba(52,199,89,0.45); }
/* #20 a11y: outflow gets a diagonal stripe so it's distinguishable from inflow by texture, not only colour */
.pj-out { background: rgba(255,59,48,0.4); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0, rgba(255,255,255,0.35) 2px, transparent 2px, transparent 5px); }
.pj-bar em { position: relative; font-style: normal; font-size: 11px; line-height: 16px; padding: 0 6px; color: var(--color-ink); white-space: nowrap; }
.cash-strip { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cash-strip-total { font-family: var(--font-display); font-size: 30px; font-weight: var(--weight-bold); letter-spacing: -0.4px; padding-right: 16px; border-right: 1px solid var(--color-hairline); font-variant-numeric: tabular-nums; }
.cash-strip-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); }
.cash-strip-item b { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.cash-strip-item small { font-size: 11px; }

@media (max-width: 900px) {
  .cash-top { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   v6 — notifications, approval flow, audit trail, show-more
   ============================================================ */

/* notification bell */
.bell-wrap { position: relative; }
.bell { position: relative; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; display: grid; place-items: center; background: rgba(255,255,255,0.1); }
.bell:hover { background: rgba(255,255,255,0.2); }
.bell-badge { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--sys-red); color: #fff; font-size: 10px; font-weight: var(--weight-bold); line-height: 16px; text-align: center; }
.ntf-pop { position: absolute; top: calc(100% + 10px); right: -60px; width: 360px; max-height: 440px; display: flex; flex-direction: column; z-index: 300;
  background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 14px; box-shadow: 0 22px 60px rgba(0,0,0,0.22); animation: fadeUp 0.16s var(--ease-out) both; }
.ntf-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--divider-soft); }
.ntf-head b { font-size: 14px; color: var(--color-ink); }
.ntf-list { overflow-y: auto; padding: 6px; }
.ntf { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; padding: 10px 10px; border-radius: 10px; color: var(--color-ink); }
.ntf:hover { background: var(--color-canvas-parchment); }
.ntf-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; margin-top: 6px; flex-shrink: 0; }
.ntf.unread .ntf-dot { background: var(--color-action-blue); }
.ntf-t { flex: 1; font-size: 13px; line-height: 1.45; }
.ntf.unread .ntf-t { font-weight: var(--weight-semibold); }
.ntf small { font-size: 11px; color: var(--text-quiet); white-space: nowrap; margin-top: 2px; }

/* approval flow steps */
.flow-list { display: flex; flex-direction: column; gap: 6px; }
.flow-step { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-surface-pearl); font-size: 13px; }
.flow-n { width: 20px; height: 20px; border-radius: 50%; background: var(--color-surface-chip); color: var(--text-muted); font-size: 11px; font-weight: var(--weight-bold); display: grid; place-items: center; flex-shrink: 0; }
.flow-step.ok { border-color: rgba(52,199,89,0.45); background: rgba(52,199,89,0.06); }
.flow-step.ok .flow-n { background: var(--sys-green); color: #fff; }
.flow-step.no { border-color: rgba(255,59,48,0.4); background: rgba(255,59,48,0.05); }
.flow-step.no .flow-n { background: var(--sys-red); color: #fff; }
.flow-step.now { border-color: var(--color-action-blue); }
.flow-step.now .flow-n { background: var(--color-action-blue); color: #fff; }
.flow-st { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.flow-step.ok .flow-st { color: var(--sys-green-text); }
.flow-step.no .flow-st { color: var(--sys-red); }

/* audit trail */
.audit-list { display: flex; flex-direction: column; }
.audit-item { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--divider-soft); font-size: 12px; flex-wrap: wrap; }
.audit-item:last-child { border-bottom: none; }
.audit-item b { font-size: 12px; }
.audit-item span { color: var(--text-muted); font-weight: var(--weight-semibold); }
.audit-item em { font-style: normal; color: var(--text-muted); }
.audit-item small { margin-left: auto; color: var(--text-quiet); font-size: 11px; white-space: nowrap; }

/* show-more row */
.more-row td { padding: 9px 12px; text-align: center; font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-action-blue); cursor: pointer; background: var(--color-surface-pearl); }
.more-row:hover td { background: #eef4fd; }

/* ============================================================
   v7 — design overhaul: icons, sticky table, sort, bulk edit,
   trash toast, dark mode, compact density, omnisearch, a11y
   ============================================================ */

/* line icons (replace emoji) */
.ic { display: inline-flex; width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tl .ic { width: 11px; height: 11px; opacity: 0.5; }
.mini-chip .ic { width: 10px; height: 10px; vertical-align: -1px; }
.mini-chip .ic svg, .tl .ic svg { stroke-width: 2.4; } /* 10-11px에서 1.9는 서브픽셀로 뭉개짐 (QA 3R) */
.box .ic svg { stroke-width: 2.4; }
.nav-ic { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.1); color: #fff; }
.nav-ic:hover { background: rgba(255,255,255,0.2); }
.nav-ic.on { background: #fff; color: var(--color-ink); }
.nav-ic .ic { width: 16px; height: 16px; }
.bell .ic { width: 16px; height: 16px; }

/* a11y: contrast fixes (WCAG AA) */
:root { --text-quiet: #6b6b70; }
.mini-chip { font-size: 11px; color: var(--text-quiet); }
.dd { font-size: 12px; }

/* 예정 vs 보류 — distinct colors (colorblind feedback) */
/* 보류 = purple. background-color 롱핸드 — 쇼트핸드는 pill-select의 드롭다운 화살표 이미지를 지움 (회귀 QA) */
.st-hold, .pill-select.st-hold, .st-badge.st-hold { background-color: rgba(175,82,222,0.12); color: #7d3ba8; }
.dot-hold, .seg-hold { background: #af52de !important; }

/* reactions & comment tools discoverable without hover (touch) */
.rx-btn { opacity: 0.5; }
.cmt-tool { opacity: 0.55; }

/* ---- sticky table: header row + title column freeze ---- */
.table-wrap { max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); min-height: 260px; overflow: auto; }
.task-table thead th { position: sticky; top: 0; z-index: 12; background: var(--color-canvas); box-shadow: 0 1px 0 var(--color-hairline); }
.task-table th[data-colkey="title"] { position: sticky; left: 0; z-index: 14; }
.task-table td.cell-title { position: sticky; left: 0; z-index: 6; background: var(--color-canvas); box-shadow: 1px 0 0 var(--color-hairline-soft); }
.task-row:hover td.cell-title { background: #f7f9fd; }
.task-row.is-open td.cell-title { background: #f2f6fd; }
.task-row.is-child td.cell-title { background: #fbfbfd; }
.task-row.is-sel td { background: #eaf2fe; }
.task-row.is-sel td.cell-title { background: #eaf2fe; }
.th-sort { font-family: inherit; font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 2px 4px; margin: -2px -4px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.th-sort:hover { color: var(--color-ink); background: var(--color-canvas-parchment); }
.th-sort.on { color: var(--color-action-blue); }

/* row selection + bulk bar */
.row-sel { width: 16px; height: 16px; accent-color: var(--color-action-blue); opacity: 0; flex-shrink: 0; cursor: pointer; margin: 2px; }
.task-row:hover .row-sel, .row-sel:checked, .row-sel.stay { opacity: 1; }
.row-sel-sp { width: 20px; flex-shrink: 0; }
.bulk-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 250;
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  background: var(--color-surface-tile-1); color: #fff; border-radius: var(--radius-pill); box-shadow: 0 16px 44px rgba(0,0,0,0.32);
  animation: fadeUp 0.2s var(--ease-out) both; }
.bulk-bar b { font-size: 13px; }
.bulk-bar .a-select.light { background-color: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); }
.bulk-bar .date-filter { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
.bulk-bar .date-filter input { color: #fff; }

/* undo toast */
#toast-root { position: fixed; bottom: 18px; right: 18px; z-index: 400; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--color-surface-tile-1); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-md); font-size: 13px; box-shadow: 0 14px 40px rgba(0,0,0,0.3);
  animation: fadeUp 0.2s var(--ease-out) both; }
.toast-act { color: #6db2ff; font-weight: var(--weight-bold); font-size: 13px; }
.toast-act:hover { text-decoration: underline; }

/* omnisearch (Ctrl/⌘+K) */
.os-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(3px); z-index: 500; display: flex; justify-content: center; padding-top: 12vh; }
.os-box { width: min(600px, 92vw); height: fit-content; max-height: 60vh; background: var(--color-canvas); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.35); padding: 8px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: stretch; }
.os-box > .ic { position: absolute; margin: 20px 0 0 18px; color: var(--text-quiet); }
#os-in { width: 100%; font-family: inherit; font-size: 16px; padding: 14px 16px 14px 44px; border: none; outline: none; border-bottom: 1px solid var(--divider-soft); background: transparent; color: var(--color-ink); }
.os-list { overflow-y: auto; padding: 6px; width: 100%; }
.os-foot { display: flex; gap: 16px; padding: 8px 14px 6px; border-top: 1px solid var(--divider-soft); width: 100%; }
.os-foot span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-quiet); }
.os-foot kbd { font-family: inherit; font-size: 10px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); border-radius: 4px; color: var(--text-muted); }
.os-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; color: var(--color-ink); }
.os-item:hover, .os-item.focus { background: var(--color-canvas-parchment); }
.os-g { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-action-blue); background: rgba(0,102,204,0.08); border-radius: 6px; padding: 2px 7px; flex-shrink: 0; }
.os-l { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-item small { color: var(--text-quiet); font-size: 11px; white-space: nowrap; }
mark.hl { background: rgba(255,214,0,0.45); color: inherit; border-radius: 3px; padding: 0 1px; }
html[data-theme="dark"] mark.hl { background: rgba(255,214,0,0.32); color: #fff; }

/* v20 — avatars, onboarding tour, per-sub flow */
.ava.xs { width: 20px; height: 20px; font-size: 10px; border-radius: 50%; flex-shrink: 0; }
.asg-cell { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; }
.asg-cell .cell-asg { max-width: 118px; }
.tour-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 600; display: grid; place-items: center; padding: 24px; animation: fadeUp .2s var(--ease-out); }
.tour-card { width: min(400px, 92vw); background: var(--color-canvas); color: var(--color-ink); border-radius: 20px; padding: 30px 28px 22px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); text-align: center; }
.tour-ico { width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 14px; display: grid; place-items: center; background: rgba(0,102,204,0.1); color: var(--color-action-blue); }
.tour-ico .ic { width: 26px; height: 26px; }
.tour-step { font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.5px; color: var(--text-quiet); }
.tour-card h3 { font-family: var(--font-display); font-size: 20px; margin: 6px 0 8px; letter-spacing: -0.4px; }
.tour-card p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-hairline); }
.tour-dots span.on { background: var(--color-action-blue); width: 20px; border-radius: 4px; }
.tour-foot { display: flex; justify-content: space-between; align-items: center; }
html[data-theme="dark"] .tour-card { background: #232326; }
html[data-theme="dark"] .tour-ico { background: rgba(63,149,245,0.18); color: #7fbcff; }

/* v21 — searchable combo + emoji picker + combo cells */
.wdg { position: absolute; z-index: 1000; background: var(--color-canvas); border: 1px solid var(--color-hairline);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.2); overflow: hidden; animation: fadeUp .14s var(--ease-out); }
.wdg-search { padding: 8px; border-bottom: 1px solid var(--divider-soft); }
.wdg-in { width: 100%; font-family: inherit; font-size: 13px; padding: 8px 11px; border: 1px solid var(--color-hairline); border-radius: 9px; outline: none; background: var(--color-canvas-parchment); color: var(--color-ink); }
.wdg-in:focus { border-color: var(--color-focus-blue); background: var(--color-canvas); }
.wdg-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.wdg-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px; font-size: 14px; color: var(--color-ink); }
.wdg-item:hover, .wdg-item.focus { background: var(--color-canvas-parchment); }
.wdg-item.sel { color: var(--color-action-blue); font-weight: var(--weight-semibold); }
.wdg-item .wdg-lb { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdg-item .wdg-ck { color: var(--color-action-blue); }
.wdg-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; color: #fff; }
.wdg-empty { padding: 18px; text-align: center; color: var(--text-quiet); font-size: 13px; }
/* emoji picker */
.wdg-emoji .emoji-scroll { max-height: 280px; overflow-y: auto; padding: 6px 10px 10px; }
.emoji-g { font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-quiet); padding: 10px 2px 4px; position: sticky; top: 0; background: var(--color-canvas); }
.emoji-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-b { font-size: 19px; line-height: 1; padding: 6px; border-radius: 8px; }
.emoji-b:hover { background: var(--color-canvas-parchment); transform: scale(1.15); }
/* combo trigger cells (category / assignee) */
.cell-combo { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 6px; margin: -3px -6px; border-radius: 7px; font-family: inherit; font-size: 12px; color: var(--color-ink); text-align: left; }
.cell-combo:hover:not(:disabled) { background: var(--color-canvas-parchment); }
.cell-combo:disabled { cursor: default; }
.asg-btn .asg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] .wdg { background: #232326; }
html[data-theme="dark"] .wdg-in { background: #1c1c1e; }
html[data-theme="dark"] .wdg-item:hover, html[data-theme="dark"] .wdg-item.focus, html[data-theme="dark"] .emoji-b:hover { background: #2e2e33; }
html[data-theme="dark"] .emoji-g { background: #232326; }

/* v22 — owner filter, monthly spend, gantt assignee, completed dim */
.asg-filter { cursor: pointer; }
.asg-filter.on, .mine-chip.on { background: var(--color-action-blue); color: #fff; border-color: var(--color-action-blue); }
.month-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 130px; padding-top: 8px; }
.mb-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; }
.mb-bar { width: 60%; max-width: 46px; background: linear-gradient(180deg, var(--color-action-blue), #6db2ff); border-radius: 6px 6px 0 0; position: relative; min-height: 3px; transition: height .3s var(--ease-out); }
.mb-v { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mb-l { font-size: 11px; color: var(--text-quiet); }
.g-asg { display: inline-block; font-size: 10px; font-weight: var(--weight-semibold); margin-top: 2px; padding: 1px 7px; border-radius: var(--radius-pill); line-height: 1.5; letter-spacing: -0.1px; }
.task-row.is-done .cell-title .ce { text-decoration: line-through; text-decoration-color: var(--text-quiet); }
.task-row.is-done td { opacity: 0.6; }
.task-row.is-done:hover td { opacity: 0.85; }
.flow-st .ic { width: 12px; height: 12px; vertical-align: -1px; }
html[data-theme="dark"] .mb-bar { background: linear-gradient(180deg, #3f95f5, #2b6fc0); }

/* ============================================================
   v23 — pretty filter combos, cost sections, hierarchy depth
   ============================================================ */
/* filter-bar combo buttons (open searchable popover) */
.fc-btn { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--weight-medium); transition: background .12s, border-color .12s, color .12s; }
.fc-btn .ic { width: 13px; height: 13px; }
.fc-btn.on { background-color: rgba(10,132,255,0.10); border-color: rgba(10,132,255,0.35); color: var(--color-action-blue); }
.filters .a-select.light.fc-btn.on { background-color: rgba(10,132,255,0.10); border-color: rgba(10,132,255,0.35); color: var(--color-action-blue); }
html[data-theme="dark"] .fc-btn.on, html[data-theme="dark"] .filters .a-select.light.fc-btn.on { background-color: rgba(63,149,245,0.20); border-color: rgba(63,149,245,0.45); color: #7fbcff; }

/* cost view — active / closed sections */
.sec-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; }
.sec-title { font-size: 14px; font-weight: var(--weight-bold); letter-spacing: -0.2px; color: var(--color-ink); }
.sec-count { font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-quiet); background: var(--color-surface-chip); border-radius: var(--radius-pill); padding: 2px 8px; }
.sec-toggle { width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; border-radius: var(--radius-md); }
.sec-toggle:hover { background: var(--color-canvas-parchment); }
.sec-caret { margin-left: auto; color: var(--text-quiet); font-size: 12px; }
/* subsidiary-group sum in cost group headers */
.group-row .g-sum { margin-left: 10px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* task hierarchy depth — subtle left-accent + tint so nesting reads at a glance */
.task-row.depth-1 > .cell-title { box-shadow: inset 3px 0 0 rgba(10,132,255,0.35); }
.task-row.depth-2 > .cell-title { box-shadow: inset 3px 0 0 rgba(175,82,222,0.40); }
.task-row.depth-1 > td { background: rgba(10,132,255,0.025); }
.task-row.depth-2 > td { background: rgba(175,82,222,0.03); }
.depth-tick { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex: 0 0 auto; }
.depth-tick.d1 { background: rgba(10,132,255,0.6); }
.depth-tick.d2 { background: rgba(175,82,222,0.65); }
html[data-theme="dark"] .task-row.depth-1 > .cell-title { box-shadow: inset 3px 0 0 rgba(63,149,245,0.5); }
html[data-theme="dark"] .task-row.depth-2 > .cell-title { box-shadow: inset 3px 0 0 rgba(191,90,242,0.55); }
html[data-theme="dark"] .sec-toggle:hover { background: rgba(255,255,255,0.05); }
/* brighter badge text in dark mode */
html[data-theme="dark"] .prio-hi { background: rgba(255,69,58,0.2); color: #ff8078; border-color: rgba(255,69,58,0.4); }
html[data-theme="dark"] .prio-md { background: rgba(63,149,245,0.2); color: #7fbcff; border-color: rgba(63,149,245,0.4); }
html[data-theme="dark"] .rev-미확인   { background: rgba(255,159,10,0.2); color: #ffbf5e; border-color: rgba(255,159,10,0.4); }
html[data-theme="dark"] .rev-확인     { background: rgba(48,209,88,0.2);  color: #6fe08c; border-color: rgba(48,209,88,0.4); }
html[data-theme="dark"] .rev-보완요청 { background: rgba(255,69,58,0.2);  color: #ff8078; border-color: rgba(255,69,58,0.4); }

/* ============================================================
   v32 — savefail banner, settings nav, icon glyph swap, gantt period
   ============================================================ */
/* storage-quota failure: persistent warning (data would silently vanish otherwise) */
.savefail-banner { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md);
  background: #b3261e; color: #fff; font-size: 13px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); max-width: min(720px, 92vw); }
.savefail-banner .btn-mini.x { color: rgba(255,255,255,0.8); }
/* cloud-sync failure = less severe than storage-full (data IS saved locally), amber not red */
.savefail-banner.supa-syncfail { background: #9a6a00; }
/* signup / self-registration */
.login-signup { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-muted); }
.login-signup a { color: var(--brand, #3b6ef5); font-weight: 600; text-decoration: none; cursor: pointer; }
.login-signup a:hover { text-decoration: underline; }
.login-ok { background: rgba(26,122,52,0.12); color: var(--sys-green-text, #1a7a34); border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.su-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.su-row > .field { min-width: 0; } /* grid children default to min-width:auto → input intrinsic width overflows the 1fr track; force shrink */
.su-row .field input { width: 100%; box-sizing: border-box; }
@media (max-width: 460px) { .su-row { grid-template-columns: 1fr; } }
/* signup: wider card + 2-col grid so fields aren't cramped */
.login-card.signup { width: min(560px, 100%); }
.su-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.su-grid > .field { min-width: 0; }
.su-grid > .span2 { grid-column: 1 / -1; }
.su-grid .field input { width: 100%; box-sizing: border-box; }
@media (max-width: 480px) { .su-grid { grid-template-columns: 1fr; } .su-grid > .field { grid-column: 1 / -1; } }
/* login: remember id / password row */
.login-remember { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 2px 0; }
.login-remember .cp-row { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.login-remember .cp-row input { width: 15px; height: 15px; accent-color: var(--color-focus-blue); cursor: pointer; }
/* signup approval queue (admin console → members) */
.pend-card { border-left: 3px solid var(--amber, #d08700); background: rgba(208,135,0,0.05); margin-bottom: 14px; }
.pend-head { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.pend-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--amber, #d08700); color: #fff; font-size: 12px; font-weight: 700; }
.pend-list { display: flex; flex-direction: column; gap: 8px; }
.pend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg, #fff); flex-wrap: wrap; }
.pend-name { font-weight: 600; font-size: 14px; }
.pend-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pend-act { display: flex; gap: 8px; flex-shrink: 0; }
/* channel right-click context menu — reuses .col-pop content, positioned at the cursor */
.chan-ctx { position: fixed; z-index: 200; }
.chan-ctx .col-pop { position: static; left: auto; right: auto; top: auto; margin: 0; }
/* floating messenger dock — bottom-right resize grip */
.dock-rs { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 6; touch-action: none; }
.dock-rs::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-right: 2px solid var(--text-quiet); border-bottom: 2px solid var(--text-quiet); opacity: 0.55; }
#chat-dock.resizing { transition: none; user-select: none; }
@media (max-width: 480px) { .dock-rs { display: none; } }
/* settings section jump nav */
.set-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.set-nav-b { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); padding: 4px 10px;
  border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); background: var(--color-canvas); transition: color .12s, border-color .12s; }
.set-nav-b:hover { color: var(--color-action-blue); border-color: rgba(0,102,204,0.4); }
/* U-E: settings tabs */
.set-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 20px; border-bottom: 1px solid var(--color-hairline); }
.set-tab { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted); padding: 9px 16px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color var(--dur-fade); }
.set-tab:hover { color: var(--color-ink); }
.set-tab.is-active { color: var(--color-action-blue); border-bottom-color: var(--color-action-blue); }
.set-panel[hidden] { display: none; }
.set-panel > .section-label:first-child { margin-top: 0; }
/* rotating chevron icons (tree carets, section toggles, detail buttons) */
.ic svg { transition: transform 0.15s var(--ease-out); }
.ic.closed svg { transform: rotate(-90deg); }
.ic.flip svg { transform: rotate(180deg); }
.tree-caret .ic { width: 16px; height: 16px; }
.sec-caret .ic { width: 14px; height: 14px; color: var(--text-quiet); }
.uc-out .ic { width: 16px; height: 16px; }
.week-nav .ic, .cal-head .ic { width: 16px; height: 16px; vertical-align: -3px; }
.autosave .ic { width: 12px; height: 12px; color: var(--sys-green-text); }
.wdg-cbx svg { display: block; }
.dec-chip .ic, .wk-banner .ic { width: 12px; height: 12px; vertical-align: -2px; }
.box .ic { width: 12px; height: 12px; display: block; margin: auto; }

/* notification prefs footer */
.ntf-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--divider-soft); }
.ntf-foot-l { font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-quiet); }
.ntf-pref { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.ntf-pref input { accent-color: var(--color-action-blue); }

/* priority select tint */
.cell-prio.prio-cell-hi { color: var(--sys-red); font-weight: var(--weight-semibold); }
.cell-prio.prio-cell-lo { color: var(--text-quiet); }

/* ---- compact density ---- */
html[data-density="compact"] .task-table td { padding: 6px 10px; font-size: 12px; }
html[data-density="compact"] thead th { padding: 0 10px 8px; }
html[data-density="compact"] .task-table thead th { padding-top: 8px; }
html[data-density="compact"] .tt-wrap { min-height: 20px; gap: 5px; }
html[data-density="compact"] .kpi { padding: 12px 16px; }
html[data-density="compact"] .kpi-value { font-size: 26px; }
html[data-density="compact"] .card { padding: 14px 16px; }
html[data-density="compact"] .view-root { padding-top: 18px; }
html[data-density="compact"] .dd { display: inline; margin-left: 6px; }
html[data-density="compact"] .gantt-row { min-height: 24px; }
html[data-density="compact"] .g-track { height: 24px; }
html[data-density="compact"] .g-bar { top: 3px; }

/* ---- dark mode ---- */
html[data-theme="dark"] {
  color-scheme: dark; /* native controls (select popups, date, scrollbars) render dark — fixes black-on-dark option text */
  --color-canvas: #1c1c1e;
  --color-surface-black: #1c1c1e; /* was pure #000 from :root → dock/thread/pf-cam rendered harsher than every other dark panel */
  --color-canvas-parchment: #131315;
  --color-surface-pearl: #242427;
  --color-surface-chip: rgba(120,120,128,0.28);
  --color-ink: #f2f2f4;
  --text-muted: #a5a5ac;
  --text-quiet: #8e8e96;
  --color-hairline: #38383c;
  --color-hairline-soft: rgba(255,255,255,0.09);
  --divider-soft: rgba(255,255,255,0.06);
  --color-action-blue: #3f95f5;
  --color-focus-blue: #4aa0ff;
  --sys-red-text:    #ff8078;
  --sys-orange-text: #ffbf5e;
  --sys-green-text:  #7ee2a0;
  --sys-purple-text: #e0b3f5;      /* hold/보류 lifts for dark (matches .st-hold dark) */
  --color-hairline-strong: #48484c; /* hover borders visible on dark surfaces */
  --red-soft-bg:     rgba(255,59,48,0.20);
  --amber-soft-bg:   rgba(255,159,10,0.20);
}
html[data-theme="dark"] body { background: var(--color-canvas-parchment); color: var(--color-ink); }
html[data-theme="dark"] .subbar { background: rgba(19,19,21,0.85); border-bottom-color: var(--color-hairline-soft); }
html[data-theme="dark"] .tab.is-active::after { background: var(--color-ink); }
html[data-theme="dark"] .task-row:hover td, html[data-theme="dark"] .task-row:hover td.cell-title { background: #232329; }
html[data-theme="dark"] .task-row.is-open td, html[data-theme="dark"] .task-row.is-open td.cell-title { background: #20242e; }
html[data-theme="dark"] .task-row.is-child td, html[data-theme="dark"] .task-row.is-child td.cell-title { background: #202023; }
html[data-theme="dark"] .task-row.is-sel td, html[data-theme="dark"] .task-row.is-sel td.cell-title { background: #1d2a3f; }
html[data-theme="dark"] .detail-row td { background: #20242e; }
html[data-theme="dark"] .quick-row.sub td { background: #202023; }
html[data-theme="dark"] .row-actions { background: #232329; box-shadow: -14px 0 12px -6px #232329; }
html[data-theme="dark"] .more-row:hover td { background: #1d2a3f; }
html[data-theme="dark"] .ce:focus, html[data-theme="dark"] .cell-date:focus { background: #2a2a2e; }
html[data-theme="dark"] .prop-input:focus, html[data-theme="dark"] .drawer-desc:focus { background: #2a2a2e; }
html[data-theme="dark"] .prop-select { background-color: #242427; border-color: var(--color-hairline);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a5a5ac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .prop-select:hover { background-color: #2a2a2e; }
html[data-theme="dark"] .prop-select:focus { background-color: #2a2a2e; border-color: var(--color-focus-blue); }
html[data-theme="dark"] .modal-head, html[data-theme="dark"] .modal-foot { background: rgba(28,28,30,0.92); }
html[data-theme="dark"] .stack { background: #2a2a2e; }
html[data-theme="dark"] .bar-wrap, html[data-theme="dark"] .pj-bar { background: #2a2a2e; }
html[data-theme="dark"] .login-wrap { background: radial-gradient(1100px 500px at 50% -10%, #172033 0%, #131315 55%); }
html[data-theme="dark"] .demo-acc:hover { background: #242427; }
html[data-theme="dark"] .wk-banner { background: rgba(63,149,245,0.14); }
html[data-theme="dark"] .btn-ghost:hover { background: #2a2a2e; }
html[data-theme="dark"] .g-plan, html[data-theme="dark"] .g-hold { background: #55555c; }
html[data-theme="dark"] .dpc.sel { background: var(--color-action-blue); }
html[data-theme="dark"] .mention { background: rgba(63,149,245,0.18); }

/* ============================================================
   v17 — dark-mode audit fixes (icons, badges, overlays, dp)
   ============================================================ */
/* QA#1: active nav toggle must not be white-on-white in dark */
html[data-theme="dark"] .nav-ic.on { background: var(--color-action-blue); color: #fff; }
html[data-theme="dark"] .nav-ic.on .ic svg { stroke: #fff; }
/* QA#3: status badges/pills readable on dark surfaces
   (background-color longhand — the shorthand was wiping the pill-select dropdown arrow image) */
html[data-theme="dark"] .st-plan, html[data-theme="dark"] .pill-select.st-plan, html[data-theme="dark"] .st-badge.st-plan { background-color: rgba(142,142,147,0.22); color: #d6d6db; } /* R20: .st-badge.st-plan was the one status badge with no dark fill → near-invisible gray-on-gray "예정" pill */
html[data-theme="dark"] .st-hold, html[data-theme="dark"] .pill-select.st-hold, html[data-theme="dark"] .st-badge.st-hold { background-color: rgba(175,82,222,0.24); color: #e0b3f5; }
html[data-theme="dark"] .st-done { background-color: rgba(52,199,89,0.2); color: #7ee2a0; }
html[data-theme="dark"] .st-prog { background-color: rgba(10,132,255,0.22); color: #7fbcff; }
html[data-theme="dark"] .st-late { background-color: rgba(255,59,48,0.22); color: #ff9a92; }
html[data-theme="dark"] .badge-hq { background: rgba(63,149,245,0.2); color: #7fbcff; }
html[data-theme="dark"] .badge-line { border-color: var(--color-hairline); color: var(--text-muted); }
html[data-theme="dark"] .review-미확인 { color: #ffb340; } html[data-theme="dark"] .review-보완요청 { color: #ff9a92; } html[data-theme="dark"] .review-확인 { color: #7ee2a0; }
/* QA#16: overlays, datepicker, popovers, selects, chips in dark */
html[data-theme="dark"] .os-box, html[data-theme="dark"] .cf-box, html[data-theme="dark"] .dp-pop,
html[data-theme="dark"] .col-pop, html[data-theme="dark"] .ntf-pop, html[data-theme="dark"] .modal, html[data-theme="dark"] .mm-float, html[data-theme="dark"] .rx-pop, html[data-theme="dark"] .mm-pop { background: #232326; border-color: var(--color-hairline); color: var(--color-ink); }
html[data-theme="dark"] .dpc:hover, html[data-theme="dark"] .os-item:hover, html[data-theme="dark"] .os-item.focus, html[data-theme="dark"] .dpc.off:hover, html[data-theme="dark"] .mm-item:hover, html[data-theme="dark"] .rx-add:hover, html[data-theme="dark"] .demo-acc:hover, html[data-theme="dark"] .cp-row:hover { background: #2e2e33; }
html[data-theme="dark"] .a-select.light, html[data-theme="dark"] .search, html[data-theme="dark"] .date-filter, html[data-theme="dark"] .cmt-in, html[data-theme="dark"] .quick-add, html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .setting-row, html[data-theme="dark"] .inline-sel, html[data-theme="dark"] .cash-add input, html[data-theme="dark"] .cash-add select { background: #242427; color: var(--color-ink); border-color: var(--color-hairline); }
html[data-theme="dark"] .a-select.light { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a5a5ac' stroke-width='1.4'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
html[data-theme="dark"] .search input, html[data-theme="dark"] .date-filter input { color: var(--color-ink); background: transparent; }
/* option popups: neutralize the forced dark option text so they're readable on dark */
html[data-theme="dark"] select option, html[data-theme="dark"] .a-select option, html[data-theme="dark"] .prop-select option, html[data-theme="dark"] .cell-sel option, html[data-theme="dark"] .pill-select option, html[data-theme="dark"] .inline-sel option { background: #2a2a2e; color: var(--color-ink); }
html[data-theme="dark"] .chip-input, html[data-theme="dark"] .mini-chip, html[data-theme="dark"] .badge-self { background: rgba(120,120,128,0.3); color: var(--color-ink); }
html[data-theme="dark"] .toast-act { color: #7fbcff; }
html[data-theme="dark"] .save-indicator { background: rgba(255,255,255,0.14); }
html[data-theme="dark"] .cal-cost { background: rgba(255,159,10,0.2); color: #ffcb6b; }
html[data-theme="dark"] .reject-banner { background: rgba(255,59,48,0.12); border-color: rgba(255,59,48,0.4); color: #ff9a92; }

/* ============================================================
   v8 — gantt zoom, templates, tiers, sum rows, import
   ============================================================ */
.gz { display: inline-flex; gap: 2px; background: var(--color-surface-chip); border-radius: var(--radius-pill); padding: 2px; }
.gz-b { font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-muted); padding: 3px 11px; border-radius: var(--radius-pill); }
.gz-b.on { background: var(--color-canvas); color: var(--color-ink); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.tpl-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--divider-soft); }
.tpl-row:last-child { border-bottom: none; }
.tpl-row b { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-row td { background: var(--color-surface-pearl); border-top: 1px solid var(--color-hairline); font-size: 12px; padding-top: 8px; padding-bottom: 8px; }
.sum-v { color: var(--color-action-blue); font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .gz-b.on { background: #333338; }

/* ---- calendar view (v9) ---- */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cal-head b { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.3px; min-width: 110px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 11px; font-weight: var(--weight-bold); color: var(--text-quiet); text-transform: uppercase; padding: 4px 0 8px; }
.cal-wd.sun { color: var(--sys-red); }
.cal-cell { min-height: 96px; border: 1px solid var(--divider-soft); border-radius: 10px; padding: 6px; background: var(--color-canvas); cursor: pointer; transition: border-color var(--dur-fade); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-cell:hover { border-color: var(--color-action-blue); }
.cal-cell.off { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.today { border-color: var(--color-action-blue); box-shadow: inset 0 0 0 1px var(--color-action-blue); }
.cal-n { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); }
.cal-cell.today .cal-n { color: var(--color-action-blue); }
.cal-chip { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--weight-semibold); padding: 2px 7px; border-radius: 6px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; }
.cal-chip .g-dot { width: 6px; height: 6px; flex-shrink: 0; }
.cal-chip.st-prog { background: rgba(10,132,255,0.12); color: var(--color-action-blue); }
.cal-chip.st-done { background: rgba(52,199,89,0.12); color: var(--sys-green-text); }
.cal-chip.st-late { background: rgba(255,59,48,0.12); color: var(--sys-red-text); }
.cal-chip.st-plan { background: rgba(142,142,147,0.14); color: var(--text-muted); }
.cal-chip.st-hold { background: rgba(175,82,222,0.12); color: #7d3ba8; }
.cal-more { font-size: 10px; color: var(--text-quiet); padding-left: 4px; }
html[data-theme="dark"] .cal-cell { background: var(--color-canvas); }

/* ============================================================
   v10 — QA fixes (z-order, feedback layer, gantt colors, a11y)
   ============================================================ */

/* QA 깜빡임: 같은 화면 재렌더에서는 진입 애니메이션 미재생 */
.view-root.no-anim > * { animation: none !important; }

/* v12 — translating badge, reject banner, cost cal chip, trash search */
.tr-badge { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 360;
  background: rgba(30,30,32,0.9); color: #cfe6ff; font-size: 12px; font-weight: var(--weight-semibold);
  padding: 7px 16px; border-radius: var(--radius-pill); opacity: 0; transition: opacity .2s, transform .2s var(--ease-out); pointer-events: none; }
.tr-badge.show { opacity: 1; transform: translateX(-50%); }
.reject-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(255,59,48,0.08);
  border: 1px solid rgba(255,59,48,0.3); color: var(--sys-red-text); font-size: 13px; border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px; }
.reject-banner button { margin-left: auto; }
.cal-chip.cal-cost { background: rgba(255,159,10,0.14); color: var(--sys-orange-text); font-variant-numeric: tabular-nums; }
.os-g.os-trash { color: var(--text-quiet); background: var(--color-surface-chip); }
.ntf-t br + small { font-weight: var(--weight-regular); }

/* v13 — assignee datalist cell, column drag, week picker, scope admin */
.cell-asg { font-family: inherit; font-size: 12px; color: var(--color-ink); border: none; background: transparent; border-radius: 6px; padding: 3px 4px; outline: none; width: 100%; max-width: 130px; }
.cell-asg:hover:not(:disabled) { background: var(--color-canvas-parchment); }
.cell-asg:focus { background: #fff; box-shadow: 0 0 0 2px var(--color-focus-blue); }
th[draggable="true"] { cursor: grab; }
th[draggable="true"]:active { cursor: grabbing; }
th.col-drop { box-shadow: inset 2px 0 0 var(--color-action-blue); }
.wk-pick { display: inline-flex; gap: 6px; }
.wk-pick select { max-width: 150px; }
.scope-cell { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 11px; color: var(--text-muted); padding: 4px 8px; border: 1px dashed var(--color-hairline); border-radius: var(--radius-md); }
.scope-ck { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.scope-ck input { accent-color: var(--color-action-blue); }
html[data-theme="dark"] .cell-asg:focus { background: #2a2a2e; }

/* ============================================================
   v16 — Home redesign
   ============================================================ */
.home-hero { padding: 6px 0 4px; }
.home-date { font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-action-blue); letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 4px; }
.home-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.home-strip .home-stat { flex: 1 1 0; min-width: 140px; }
.home-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; border-radius: var(--radius-lg);
  background: var(--color-canvas); border: 1px solid var(--color-hairline); text-align: left; transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-fade), border-color var(--dur-fade); }
.home-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.08); }
.home-stat .hs-v { font-family: var(--font-display); font-size: 30px; font-weight: var(--weight-semibold); letter-spacing: -0.5px; line-height: 1; font-variant-numeric: tabular-nums; } /* R20: unify the "big number" weight with the KPI value (was 700 vs KPI 600 → mismatched when the cards sit together) */
.home-stat .hs-l { font-size: 12px; color: var(--text-muted); font-weight: var(--weight-semibold); }
.home-stat.alert { border-color: rgba(255,59,48,0.35); } .home-stat.alert .hs-v { color: var(--sys-red); }
.home-stat.warn { border-color: rgba(255,159,10,0.4); } .home-stat.warn .hs-v { color: var(--sys-orange-text); }
.home-stat.info { border-color: rgba(0,102,204,0.35); } .home-stat.info .hs-v { color: var(--color-action-blue); }

.home-card { display: flex; flex-direction: column; }
.home-list { display: flex; flex-direction: column; margin: -4px -6px; }
.home-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 8px; border-radius: 10px; color: var(--color-ink); border-bottom: 1px solid var(--divider-soft); }
.home-item:last-child { border-bottom: none; }
.home-item:hover { background: var(--color-canvas-parchment); }
.home-item .hi-t { flex: 1; min-width: 0; font-size: 14px; font-weight: var(--weight-semibold); display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.home-item .hi-sub { font-size: 12px; color: var(--text-quiet); font-weight: var(--weight-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-item .hi-quote { font-weight: var(--weight-regular); color: var(--text-muted); line-height: 1.5; }
.wait-inline { color: var(--sys-red-text); font-weight: var(--weight-semibold); }
.hi-badge { font-size: 11px; font-weight: var(--weight-bold); padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0; }
.hi-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.hi-ico .ic { width: 14px; height: 14px; }
.hi-ico.warn { background: rgba(255,159,10,0.14); color: var(--sys-orange-text); }
.hi-ico.late { background: rgba(255,59,48,0.12); color: var(--sys-red); }
.hi-d { font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.hi-amt { font-size: 13px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.hi-new { width: 8px; height: 8px; border-radius: 50%; background: var(--color-action-blue); flex-shrink: 0; }
.home-item.is-seen { opacity: 0.55; }
.home-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 0; color: var(--text-quiet); font-size: 13px; }
.home-empty .ic { width: 22px; height: 22px; opacity: 0.4; }
@media (max-width: 1000px) { .home-strip .home-stat { flex-basis: 40%; } }
.home-card.pulse { animation: cardPulse 1.1s var(--ease-out); }
@keyframes cardPulse { 0% { box-shadow: 0 0 0 0 rgba(0,102,204,0.5); } 100% { box-shadow: 0 0 0 10px rgba(0,102,204,0); } }

/* QA S1-1: popovers must paint ABOVE the sticky table (fadeUp
   animation gives every card its own stacking context, so the
   toolbar's context needs an explicit z-index) */
.view-head { position: relative; z-index: 60; }
.col-pop { z-index: 70; }

/* QA S2-9/10: gantt 예정/보류 — 보류=보라(다른 화면과 통일), 예정=밝은 회색+짙은 글씨 */
.g-hold { background: #af52de !important; }
.g-plan { background: #d4d4d9 !important; }
.g-plan .g-txt { color: #3a3a3f; }
.g-plan .g-fill { background: rgba(0,0,0,0.08); }
html[data-theme="dark"] .g-plan { background: #55555c !important; }
html[data-theme="dark"] .g-plan .g-txt { color: #e8e8ea; }

/* QA S2-5: global save indicator */
.save-indicator { position: fixed; top: 62px; right: 20px; z-index: 350;
  background: rgba(30,30,32,0.88); color: #7ee2a0; font-size: 12px; font-weight: var(--weight-semibold);
  padding: 6px 14px; border-radius: var(--radius-pill); opacity: 0; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s var(--ease-out); pointer-events: none; }
.save-indicator.show { opacity: 1; transform: none; }

/* QA S2-12: in-app confirm */
.cf-box { width: min(360px, 90vw); background: var(--color-canvas); border-radius: 16px; padding: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.3); margin: auto; animation: fadeUp 0.16s var(--ease-out) both; }
.cf-msg { font-size: 16px; font-weight: var(--weight-semibold); line-height: 1.45; margin-bottom: 18px; word-break: break-word; }
.cf-box:has(.cf-detail) .cf-msg { margin-bottom: 7px; }
.cf-detail { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 18px; word-break: break-word; }
.cf-btns { display: flex; justify-content: flex-end; gap: 8px; }
#cf-overlay { align-items: center; padding-top: 0; }

/* QA S2-14: calendar creation only via hover "+" */
.cal-cell { cursor: default; }
.cal-add { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 6px;
  color: var(--color-action-blue); background: rgba(0,102,204,0.08); font-size: 13px; font-weight: 700;
  opacity: 0; transition: opacity var(--dur-fade); line-height: 1; }
.cal-cell { position: relative; }
.cal-cell:hover .cal-add { opacity: 1; }

/* QA D-30: visible keyboard focus on custom controls */
.ce:focus-visible, .pill-select:focus-visible, .cell-sel:focus-visible, .tree-caret:focus-visible,
.cal-add:focus-visible, .th-sort:focus-visible,
[data-action][tabindex]:focus-visible { outline: 2px solid var(--color-focus-blue); outline-offset: 1px; } /* L2R4: focus ring for keyboard-activatable divs (weekly checkbox, gantt bar, calendar cell) */

/* ---- weekly: wide horizontal rows (법인당 한 줄, 내부 3단) ---- */
.weekly-card.wide { border-top: 1px solid var(--color-hairline) !important; }
.wu-grid { display: grid; grid-template-columns: 1.25fr 1fr 0.9fr; gap: 26px; align-items: start; }
.wu-grid .wu-section { margin-top: 6px; min-width: 0; }
.wu-grid .wu-section + .wu-section { border-left: 1px solid var(--divider-soft); padding-left: 26px; }
.weekly-card.wide .wu-auto { margin: 0 0 12px; }
.weekly-card.wide .wk-notes { min-height: 120px; }
@media (max-width: 980px) {
  .wu-grid { grid-template-columns: 1fr; }
  .wu-grid .wu-section + .wu-section { border-left: none; padding-left: 0; }
}

/* ============================================================
   v37 — QA 3라운드: 신규 컴포넌트 + 다크 잔여 보정
   ============================================================ */
/* 상세 패널 닫기 (요청: 상세 버튼 재클릭 외 닫기 수단) */
.detail-panel { position: relative; }
.dp-close { position: absolute; top: 10px; right: 12px; color: var(--text-muted); }
/* 일괄 결재 전체선택 */
.sec-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
/* 결재 경과일 배지 */
.wait-chip { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: var(--weight-semibold); color: var(--sys-orange-text); background: rgba(255,159,10,0.12); border-radius: var(--radius-pill); padding: 1px 7px; white-space: nowrap; }
html[data-theme="dark"] .wait-chip { color: #ffbf5e; background: rgba(255,159,10,0.2); }
/* 캘린더 일자 팝오버 */
.day-pop { position: absolute; z-index: 90; width: 300px; max-height: 340px; display: flex; flex-direction: column; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: 0 18px 44px rgba(0,0,0,0.16); animation: fadeUp 0.14s var(--ease-out) both; }
.day-pop-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font-size: 14px; }
.day-pop-list { overflow-y: auto; padding: 0 8px; }
.dp-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px; }
.dp-item:hover { background: var(--color-canvas-parchment); }
.dp-item .dpi-t { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-item .dpi-t small { display: block; color: var(--text-quiet); font-size: 11px; }
.day-pop-f { padding: 8px 12px 12px; border-top: 1px solid var(--color-hairline-soft); }
html[data-theme="dark"] .day-pop { background: #232326; border-color: var(--color-hairline); }
html[data-theme="dark"] .dp-item:hover { background: #2e2e33; }
/* 캘린더 연·월 점프 */
.cal-jump { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; padding: 4px 10px; border-radius: var(--radius-md); color: var(--color-ink); }
.cal-jump:hover { background: var(--color-canvas-parchment); }
.cal-jump .ic { width: 13px; height: 13px; color: var(--text-quiet); }
html[data-theme="dark"] .cal-jump:hover { background: #2e2e33; }
/* +N 버튼화 */
.cal-more { font-size: 10px; color: var(--color-action-blue); font-weight: var(--weight-semibold); padding: 1px 5px; border-radius: 6px; }
.cal-more:hover { background: rgba(0,102,204,0.08); }
/* 용량 미터 / 아카이브 도구 */
.usage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 멘션 화살표 포커스 */
.mm-item.focus { background: rgba(0,102,204,0.08); color: var(--color-action-blue); }
html[data-theme="dark"] .mm-item.focus { background: #2e2e33; color: #7fbcff; }
/* 댓글 줄바꿈(Shift+Enter) 표시 */
.cmt-t { white-space: pre-wrap; }
/* ── 다크 잔여 보정 (QA 3R 감사 #26-31) ── */
html[data-theme="dark"] .wk-banner.warn { background: rgba(255,159,10,0.14); color: #ffbf5e; }
html[data-theme="dark"] .wk-banner.ok { background: rgba(48,209,88,0.14); color: #7ee2a0; }
html[data-theme="dark"] .dec-chip { color: #ffbf5e; }
html[data-theme="dark"] .dec-chip.ok, html[data-theme="dark"] .dec-chip.go-ok { color: #7ee2a0; }
html[data-theme="dark"] .dec-chip.no, html[data-theme="dark"] .dec-chip.go-no { color: #ff8078; }
html[data-theme="dark"] .home-stat.warn .hs-v, html[data-theme="dark"] .hi-ico.warn, html[data-theme="dark"] .alert-ico.orange { color: #ffbf5e; }
html[data-theme="dark"] .flow-step.ok .flow-st, html[data-theme="dark"] .cash-pos { color: #7ee2a0; }
html[data-theme="dark"] .seg-plan { background: #55555c; }
html[data-theme="dark"] .appr-chip { background: #2a2a2e; }
html[data-theme="dark"] .st-badge.st-done { border-color: rgba(48,209,88,0.4); }
html[data-theme="dark"] .st-badge.st-prog { border-color: rgba(63,149,245,0.4); }
html[data-theme="dark"] .st-badge.st-late { border-color: rgba(255,69,58,0.4); }

/* ============================================================
   ADMIN CONSOLE + PERSONAL SETTINGS (v55)
   ============================================================ */
/* 내 설정 / 관리자 top-level switch */
.set-switch { display: inline-flex; gap: 2px; background: var(--color-canvas-parchment); border-radius: var(--radius-pill); padding: 3px; }
.ss-opt { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted); padding: 7px 16px; border-radius: var(--radius-pill); transition: background var(--dur-fade), color var(--dur-fade); }
.ss-opt .ic svg { width: 15px; height: 15px; }
.ss-opt.is-active { background: var(--color-canvas); color: var(--color-ink); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
html[data-theme="dark"] .set-switch { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .ss-opt.is-active { background: rgba(255,255,255,0.16); color: var(--text-on-dark); }

/* role / status badges */
.role-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: var(--weight-semibold); padding: 2px 9px; border-radius: var(--radius-pill); letter-spacing: -0.1px; white-space: nowrap; }
.rb-admin { background: rgba(175,82,222,0.14); color: #7c3aed; }
.rb-hq    { background: rgba(10,132,255,0.13); color: #0a6cd6; }
.rb-sub   { background: rgba(120,120,128,0.14); color: var(--text-muted); }
.us-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: var(--weight-semibold); padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.us-active   { background: rgba(52,199,89,0.15); color: var(--sys-green-text); }
.us-invited  { background: var(--amber-soft-bg); color: var(--sys-orange-text); }
.us-disabled { background: rgba(187,45,34,0.11); color: var(--sys-red-text); }
html[data-theme="dark"] .rb-admin { background: rgba(175,82,222,0.24); color: #cba6f7; }
html[data-theme="dark"] .rb-hq { background: rgba(10,132,255,0.22); color: #7cc0ff; }
html[data-theme="dark"] .rb-sub { background: rgba(255,255,255,0.12); color: #c7c7cc; }
html[data-theme="dark"] .us-active { color: #7ee2a0; }
html[data-theme="dark"] .us-invited { color: #ffbf5e; }
html[data-theme="dark"] .us-disabled { color: #ff8078; }

/* personal settings grid */
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pf-card { display: flex; flex-direction: column; gap: 12px; }
.pf-id { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; }
.ava.xl { width: 52px; height: 52px; font-size: 20px; border-radius: 16px; }
.pf-nm { font-size: 17px; font-weight: var(--weight-bold); letter-spacing: -0.2px; }
.pf-role { margin-top: 4px; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.pf-row { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.pf-lb { flex: 0 0 92px; font-size: 13px; color: var(--text-muted); font-weight: var(--weight-medium); }
.fnote { font-size: 11.5px; color: var(--text-quiet); margin-top: 5px; line-height: 1.45; }
.seg-pick { display: inline-flex; gap: 2px; background: var(--color-canvas-parchment); border-radius: var(--radius-md); padding: 3px; flex-wrap: wrap; }
.seg-opt { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--text-muted); padding: 6px 13px; border-radius: 8px; transition: background var(--dur-fade), color var(--dur-fade); }
.seg-opt .ic svg { width: 14px; height: 14px; }
.seg-opt.is-active { background: var(--color-canvas); color: var(--color-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
html[data-theme="dark"] .seg-pick { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .seg-opt.is-active { background: rgba(255,255,255,0.18); color: var(--text-on-dark); }

/* admin dashboard */
.ad-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ad-stat { display: flex; align-items: center; gap: 11px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); padding: 14px; }
.ad-stat .ad-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-canvas-parchment); color: var(--text-muted); flex: 0 0 auto; }
.ad-stat .ad-ic svg { width: 18px; height: 18px; }
.ad-stat b { font-size: 20px; font-weight: var(--weight-bold); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; display: block; line-height: 1.1; }
.ad-stat small { font-size: 11.5px; color: var(--text-muted); }
.ad-stat.warn .ad-ic { background: var(--red-soft-bg); color: var(--sys-red-text); }
/* QA 온보딩#1: 가입 승인 대기 — 전체폭 앰버 강조 카드(관리자가 신규 가입을 놓치지 않게) */
.ad-stat.pending-stat { grid-column: 1 / -1; background: rgba(255,159,10,0.10); border-color: rgba(255,159,10,0.32); cursor: pointer; text-align: left; width: 100%; transition: filter var(--dur-fade); }
.ad-stat.pending-stat:hover { filter: brightness(0.97); }
.ad-stat.pending-stat .ad-ic { background: rgba(255,159,10,0.18); color: #a86400; }
.ad-stat.pending-stat b, .ad-stat.pending-stat small { color: #a86400; }
html[data-theme="dark"] .ad-stat.pending-stat { background: rgba(255,159,10,0.14); border-color: rgba(255,159,10,0.32); }
html[data-theme="dark"] .ad-stat.pending-stat .ad-ic { background: rgba(255,159,10,0.2); color: #ffb84d; }
html[data-theme="dark"] .ad-stat.pending-stat b, html[data-theme="dark"] .ad-stat.pending-stat small { color: #ffb84d; }
.ad-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ad-bar-row { display: flex; align-items: center; gap: 12px; }
.ad-bar-row .ad-bl { flex: 0 0 96px; }
.ad-bar-row b { font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
.ad-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-hairline); } /* was flush against the role-distribution bars above — add breathing room + divider */
html[data-theme="dark"] .ad-stat { background: var(--color-surface-tile-1); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .ad-stat .ad-ic { background: rgba(255,255,255,0.08); }

/* users toolbar + table */
.users-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.users-search { flex: 1 1 220px; max-width: 300px; }
.users-tb-right { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.user-table { width: 100%; border-collapse: collapse; }
.user-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); font-weight: var(--weight-semibold); padding: 8px 10px; border-bottom: 1px solid var(--color-hairline); white-space: nowrap; }
.user-table td { padding: 10px; border-bottom: 1px solid var(--divider-soft); font-size: 13.5px; vertical-align: middle; }
.user-row:hover td { background: var(--color-canvas-parchment); }
.user-row.is-editing td { background: var(--color-surface-pearl); }
.ur-name { display: flex; align-items: center; gap: 10px; }
.ur-name .ur-nm b { font-weight: var(--weight-semibold); display: block; }
.ur-name .ur-nm small { font-size: 11.5px; color: var(--text-quiet); }
.ur-em { color: var(--text-muted); font-size: 12.5px; }
.ur-lang { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* NOT display:flex — a flex <td> won't stretch to the row height, so the icons sat high with an empty
   gap below and misaligned with the other (vertical-align:middle) cells. Keep it a normal table cell. */
.ur-act { text-align: right; white-space: nowrap; vertical-align: middle; }
/* scope the square icon-button look to the user table ONLY — a bare .btn-mini rule
   here would clobber the task-row hover actions (상세/열기/+하위 업무/복제) into 30px boxes */
.ur-act .btn-mini { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid transparent; background: none; border-radius: 8px; cursor: pointer; color: var(--text-muted); padding: 0; margin-left: 4px; vertical-align: middle; transition: background var(--dur-fade), color var(--dur-fade); }
.ur-act .mini-chip { vertical-align: middle; }
.ur-act .btn-mini svg { width: 16px; height: 16px; }
.ur-act .btn-mini:hover { background: var(--color-canvas-parchment); color: var(--color-ink); }
.ur-act .btn-mini.danger:hover { background: var(--red-soft-bg); color: var(--sys-red-text); }
.users-foot { margin-top: 12px; font-size: 12px; }
html[data-theme="dark"] .user-row:hover td { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .user-row.is-editing td { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .ur-act .btn-mini:hover { background: rgba(255,255,255,0.1); color: var(--text-on-dark); }

/* ============================================================
   ADMIN DESIGN & A11Y POLISH (v57) — from the 1M·2yr audit
   ============================================================ */
/* segmented controls: match the app's canonical blue-active convention (was iOS white-active) */
.ss-opt.is-active, .seg-opt.is-active { background: var(--color-action-blue); color: #fff; box-shadow: none; }
html[data-theme="dark"] .ss-opt.is-active, html[data-theme="dark"] .seg-opt.is-active { background: var(--sys-blue); color: #fff; }
/* role badge: stay within the single blue accent (admin = filled blue, hq = soft blue) — drop the 3rd hue (purple) + lift contrast to AA on hover surfaces */
.rb-admin { background: var(--color-action-blue); color: #fff; }
.rb-hq { background: rgba(10,132,255,0.13); color: #0a5cb8; }
.rb-sub { background: rgba(120,120,128,0.16); color: #5c5c61; }
.us-active { color: #15682c; }
html[data-theme="dark"] .rb-admin { background: var(--sys-blue); color: #fff; }
html[data-theme="dark"] .rb-hq { background: rgba(10,132,255,0.22); color: #7cc0ff; }
html[data-theme="dark"] .rb-sub { background: rgba(255,255,255,0.12); color: #c7c7cc; }
html[data-theme="dark"] .us-active { color: #7ee2a0; }
/* people avatars are always circles (the profile header was a rounded square) */
.ava.xl { border-radius: 50%; }
/* touch: expand the 30px action icons toward ~44px without growing the glyph (app's ::before idiom) */
.ur-act .btn-mini { position: relative; }
.ur-act .btn-mini::before { content: ""; position: absolute; inset: -7px; }
/* editor <select>s get the same custom chevron as the rest of settings (was native/unstyled) */
select.ue-in { -webkit-appearance: none; appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%236e6e73" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>'); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; }
html[data-theme="dark"] select.ue-in { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23aeaeb2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>'); }

/* sortable column headers */
.user-table th.us-sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--dur-fade); }
.user-table th.us-sortable:hover { color: var(--color-ink); }
.user-table th.us-sortable.sorted { color: var(--color-action-blue); }
html[data-theme="dark"] .user-table th.us-sortable:hover { color: var(--text-on-dark); }
/* checkbox + selection */
.user-table .ur-ck { width: 36px; text-align: center; padding-left: 6px; padding-right: 6px; }
.row-sel { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-action-blue); }
.user-row.is-sel td { background: rgba(10,132,255,0.07); }
html[data-theme="dark"] .user-row.is-sel td { background: rgba(10,132,255,0.14); }
.ur-joined { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 소속(법인명)이 중간 폭에서 세로로 줄바꿈되던 것 — 한 줄 고정 + 초과 시 말줄임 */
.ur-sub { white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   MESSENGER (v60) — Slack-style chat inside CREAS ORBIT
   ============================================================ */
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--sys-red); color: #fff; font-size: 10.5px; font-weight: var(--weight-bold); vertical-align: 1px; }
.chat-wrap { display: flex; height: calc(100vh - 174px); height: calc(100dvh - 174px); min-height: 460px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); overflow: hidden; } /* dvh: mobile URL bar no longer hides the composer/last messages */
/* sidebar */
.chat-side { flex: 0 0 232px; background: var(--color-surface-pearl); border-right: 1px solid var(--color-hairline); overflow-y: auto; padding: 14px 10px 18px; }
.chs-head { padding: 2px 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.chs-head b { font-size: 16px; letter-spacing: -0.2px; }
.chs-head small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.4; }
.chs-head small svg { width: 12px; height: 12px; flex-shrink: 0; }
.chs-sec { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.chs-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--text-muted); }
.chs-add:hover { background: var(--color-canvas); color: var(--color-ink); }
.chs-add svg { width: 14px; height: 14px; }
.chs-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; color: var(--text-muted); text-align: left; transition: background var(--dur-fade), color var(--dur-fade); }
.chs-item:hover { background: var(--color-canvas); color: var(--color-ink); }
.chs-item.on { background: var(--color-action-blue); color: #fff; }
.chs-item.on .chs-ic, .chs-item.on .chs-badge { color: #fff; }
.chs-item.unread { color: var(--color-ink); font-weight: var(--weight-semibold); }
.chs-ic { display: inline-flex; flex-shrink: 0; }
.chs-ic svg { width: 14px; height: 14px; }
.chs-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chs-badge { flex-shrink: 0; min-width: 18px; height: 17px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--sys-red); color: #fff; font-size: 10.5px; font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; }
.nch-form { display: flex; flex-direction: column; gap: 8px; margin: 6px 4px 10px; padding: 12px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.nch-form input[type=text], .nch-form input:not([type=checkbox]) { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--color-hairline); border-radius: 8px; outline: none; }
.nch-form input:focus { border-color: var(--color-focus-blue); }
/* main pane */
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--color-hairline); flex-shrink: 0; }
.chm-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chm-title b { font-size: 15px; white-space: nowrap; }
.chm-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.chm-title .ic svg { width: 15px; height: 15px; color: var(--text-muted); }
.chm-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.chm-search input { width: 190px; }
.chat-pinpop { right: 0; top: 38px; width: 300px; max-height: 320px; overflow-y: auto; }
.pin-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; }
.pin-row:hover { background: var(--color-surface-pearl); }
.pin-row b { font-size: 12px; }
.pin-row span { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* messages */
.chm-msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 18px 10px; }
.chat-older { display: flex; justify-content: center; padding: 4px 0 10px; }
.chat-day { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--color-hairline); }
.chat-day span { font-size: 11.5px; font-weight: var(--weight-semibold); color: var(--text-muted); background: var(--color-canvas); padding: 3px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); }
.chat-msg { position: relative; display: flex; gap: 10px; padding: 5px 10px 5px 6px; border-radius: 8px; }
.chat-msg:hover { background: var(--color-surface-pearl); }
.chat-msg.is-pinned { background: rgba(255,159,10,0.07); }
.chat-msg.flash { background: rgba(10,132,255,0.14); transition: background 1.2s ease; }
.chat-msg.deleted { padding: 4px 10px; font-size: 13px; }
.cm-gutter { flex: 0 0 32px; display: flex; justify-content: center; padding-top: 2px; }
.cm-time-h { font-size: 10px; color: var(--text-quiet); opacity: 0; padding-top: 4px; font-variant-numeric: tabular-nums; }
.chat-msg:hover .cm-time-h { opacity: 1; }
.cm-b { flex: 1; min-width: 0; }
.cm-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.cm-h b { font-size: 13.5px; }
.cm-h small { font-size: 11px; color: var(--text-quiet); font-variant-numeric: tabular-nums; }
.cm-pinmark svg { width: 11px; height: 11px; color: var(--sys-orange-text); }
.cm-text { font-size: 14px; line-height: 1.55; word-break: break-word; white-space: pre-wrap; }
.cm-fwd { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: var(--weight-medium); color: var(--text-quiet); margin-bottom: 3px; }
.cm-fwd svg { width: 12px; height: 12px; opacity: .8; }
.cm-rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cm-thread { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-action-blue); padding: 3px 8px; border: 1px solid transparent; border-radius: 7px; }
.cm-thread:hover { border-color: var(--color-hairline); background: var(--color-canvas); }
.cm-thread svg { width: 13px; height: 13px; }
/* hover actions */
.cm-acts { position: absolute; top: -12px; right: 10px; display: none; gap: 2px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 9px; padding: 2px; box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.chat-msg:hover .cm-acts { display: inline-flex; }
.cma { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--text-muted); }
.cma:hover { background: var(--color-surface-pearl); color: var(--color-ink); }
.cma.on { color: var(--sys-orange-text); }
.cma.danger:hover { background: var(--red-soft-bg); color: var(--sys-red-text); }
.cma svg { width: 15px; height: 15px; }
/* files / images / entity cards */
.chat-img { max-width: 300px; max-height: 220px; border-radius: 10px; border: 1px solid var(--color-hairline); margin-top: 5px; display: block; }
.chat-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 7px 12px; background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); border-radius: 9px; font-size: 13px; }
.chat-ref { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 9px 14px 9px 11px; background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); border-left: 3px solid var(--color-action-blue); border-radius: 9px; text-align: left; max-width: 420px; transition: border-color var(--dur-fade); }
.chat-ref:hover { border-color: var(--color-action-blue); }
.chat-ref svg { width: 16px; height: 16px; color: var(--color-action-blue); flex-shrink: 0; }
.chat-ref .cr-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-ref b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ref small { font-size: 11.5px; color: var(--text-muted); }
.chat-ref.dead { border-left-color: var(--sys-gray); }
/* inline edit */
.chat-editwrap { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.chat-editwrap .chat-editin { flex: 1; font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--color-focus-blue); border-radius: 8px; outline: none; }
/* empty */
.chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-quiet); gap: 8px; }
.chat-empty svg { width: 30px; height: 30px; opacity: 0.4; }
.chat-empty p { font-size: 13.5px; }
/* composer */
.chat-composer { display: flex; align-items: flex-end; gap: 7px; padding: 12px 16px 14px; border-top: 1px solid var(--color-hairline); flex-shrink: 0; }
.chat-composer .chat-in { flex: 1; min-height: 38px; max-height: 120px; }
.comp-plus { border: 1px solid var(--color-hairline); border-radius: 50%; width: 30px; height: 30px; margin-bottom: 3px; }
.chat-send { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--color-action-blue); color: #fff; margin-bottom: 1px; transition: filter var(--dur-fade); }
.chat-send:hover { filter: brightness(1.12); }
.chat-send svg { width: 16px; height: 16px; }
.chat-pluspop { left: 0; right: auto; bottom: 40px; top: auto; width: 180px; padding: 6px; gap: 0; }
.plus-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; text-align: left; }
.plus-item:hover { background: var(--color-surface-pearl); }
.plus-item svg { width: 15px; height: 15px; color: var(--text-muted); }
/* thread panel */
.chat-thread { flex: 0 0 340px; display: flex; flex-direction: column; border-left: 1px solid var(--color-hairline); min-width: 0; }
.thread-sep { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 11px; color: var(--text-muted); }
.thread-sep::after { content: ""; flex: 1; height: 1px; background: var(--color-hairline); }
/* v61 polish (from the 1M·3yr audit) */
.chat-msg:focus-within .cm-acts { display: inline-flex; } /* keyboard/touch reach the hover actions */
.chat-newline { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.chat-newline::before, .chat-newline::after { content: ""; flex: 1; height: 1px; background: var(--sys-red); opacity: 0.5; }
.chat-newline span { font-size: 10.5px; font-weight: var(--weight-bold); color: var(--sys-red-text); text-transform: uppercase; letter-spacing: 0.5px; }
html[data-theme="dark"] .chat-newline::before, html[data-theme="dark"] .chat-newline::after { background: #ff8078; } /* softer red on dark, matching the rest of the dark status family */
html[data-theme="dark"] .chat-newline span { color: #ff8078; }
.msg-link { color: var(--color-action-blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
/* badge contrast: darker red clears AA for white 10.5px bold; on active blue rows the badge inverts */
.tab-badge, .chs-badge { background: #d70015; }
.chs-item.on .chs-badge { background: #fff; color: var(--color-action-blue); }
html[data-theme="dark"] .chs-item.on { background: #0066cc; } /* white 13.5px on #0a84ff was 3.6:1 */
html[data-theme="dark"] .chat-thread { background: var(--color-canvas); } /* was resolving to pure black */
/* responsive */
@media (max-width: 1080px) { .chat-thread { position: absolute; right: 0; top: 0; bottom: 0; background: var(--color-canvas); box-shadow: -14px 0 40px rgba(0,0,0,0.14); z-index: 40; } .chat-wrap { position: relative; } }
@media (max-width: 760px) { .chat-side { flex-basis: 68px; } .chs-nm, .chs-head small, .chs-sec span { display: none; } .chm-search input { width: 110px; } }
/* dark */
html[data-theme="dark"] .chat-wrap { border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .chat-side { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .chs-item:hover, html[data-theme="dark"] .chs-add:hover { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .chs-item.on { background: var(--sys-blue); }
html[data-theme="dark"] .chat-msg:hover { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .chat-msg.is-pinned { background: rgba(255,159,10,0.1); }
html[data-theme="dark"] .chat-msg.flash { background: rgba(10,132,255,0.22); }
html[data-theme="dark"] .chat-day span, html[data-theme="dark"] .cm-acts { background: var(--color-surface-tile-1); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .cma:hover, html[data-theme="dark"] .plus-item:hover, html[data-theme="dark"] .pin-row:hover { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .chat-file, html[data-theme="dark"] .chat-ref { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .chat-ref { border-left-color: var(--sys-blue); }
html[data-theme="dark"] .nch-form { background: var(--color-surface-tile-1); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .nch-form input:not([type=checkbox]) { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--text-on-dark); }
html[data-theme="dark"] .chat-editwrap .chat-editin { background: rgba(255,255,255,0.06); color: var(--text-on-dark); }
html[data-theme="dark"] .chat-thread { border-color: rgba(255,255,255,0.1); }
/* bulk action bar */
.user-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px; background: rgba(10,132,255,0.06); border: 1px solid rgba(10,132,255,0.18); border-radius: var(--radius-md); }
.user-bulk .ub-count { font-weight: var(--weight-semibold); font-size: 13px; margin-right: 2px; }
html[data-theme="dark"] .user-bulk { background: rgba(10,132,255,0.12); border-color: rgba(10,132,255,0.3); }
/* pager + footer */
.users-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.user-pager { display: inline-flex; align-items: center; gap: 8px; }
.user-pager .up-info { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 56px; text-align: center; }
/* bulk-import preview: new/update chip */
.bi-mode { font-size: 10px; font-weight: var(--weight-semibold); padding: 1px 7px; border-radius: 5px; flex: 0 0 auto; }
.bi-mode.new { background: rgba(52,199,89,0.15); color: var(--sys-green-text); }
.bi-mode.update { background: var(--amber-soft-bg); color: var(--sys-orange-text); }
html[data-theme="dark"] .bi-mode.new { color: #7ee2a0; }
html[data-theme="dark"] .bi-mode.update { color: #ffbf5e; }
/* credential (temp password) modal */
.cred-box { max-width: 440px; width: 90vw; text-align: left; }
.cred-note { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 14px; line-height: 1.45; }
.cred-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--divider-soft); }
.cred-row .cred-k { flex: 0 0 84px; font-size: 12px; color: var(--text-muted); }
.cred-row .cred-v { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 14px; font-weight: var(--weight-semibold); background: var(--color-canvas-parchment); padding: 4px 10px; border-radius: 6px; letter-spacing: 0.2px; }
html[data-theme="dark"] .cred-row .cred-v { background: rgba(255,255,255,0.08); }
.audit-item.is-acct em { color: var(--color-action-blue); }
html[data-theme="dark"] .audit-item.is-acct em { color: #7cc0ff; }

/* ============================================================
   MESSENGER v62 — floating dock, per-msg translate, channel
   header popovers, slash palette, drag reorder, admin
   ============================================================ */
/* floating FAB (visible in every view except the full chat view) */
#chat-fab { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--color-action-blue); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: center; z-index: 900; transition: transform var(--dur-fade), box-shadow var(--dur-fade), background var(--dur-fade); }
#chat-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.30); }
#chat-fab .ic { width: 30px; height: 30px; vertical-align: 0; } /* .ic defaults to 14px → the 24px svg overflowed the box and pulled the icon off-centre */
#chat-fab svg { width: 30px; height: 30px; stroke-width: 2; }
#chat-fab.open { background: var(--color-ink); }
#chat-fab .fab-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #d70015; color: #fff; font-size: 11px; font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-canvas); }
/* dock window — chat while you work in another view */
#chat-dock { position: fixed; right: 24px; bottom: 92px; width: 384px; height: min(560px, calc(100vh - 150px)); height: min(560px, calc(100dvh - 150px)); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: 0 18px 54px rgba(0,0,0,0.26); display: flex; flex-direction: column; overflow: hidden; z-index: 899; animation: dockIn var(--dur-fade) var(--ease-out) both; }
.dock-head { touch-action: none; } /* let pointer-drag work without the browser scrolling/zooming */
.chat-side-rs { touch-action: none; }
.chs-sec-tools { display: inline-flex; align-items: center; gap: 2px; }
@keyframes dockIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.dock-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--color-hairline); flex: 0 0 auto; cursor: grab; }
.dock-head:active { cursor: grabbing; }
#chat-dock.dragging { transition: none; opacity: 0.96; box-shadow: 0 26px 70px rgba(0,0,0,0.34); }
.dock-ch { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--weight-semibold); font-size: 14px; color: var(--color-ink); padding: 5px 8px; border-radius: 7px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-ch:hover { background: var(--color-canvas-parchment); }
.dock-ch svg { width: 13px; height: 13px; flex-shrink: 0; }
#chat-dock .chm-msgs { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; }
#chat-dock .chat-composer { flex: 0 0 auto; padding: 10px 12px 12px; }
#chat-dock .chat-img { max-width: 220px; }
html[data-theme="dark"] #chat-dock { background: var(--color-surface-black, #1c1c1e); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .dock-head { border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .dock-ch:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 480px) { #chat-dock { right: 8px; left: 8px; width: auto; bottom: 84px; } #chat-fab { right: 16px; bottom: 16px; } }
/* channel header: title button + topic + popovers */
.chm-titlewrap { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chm-title { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 8px; color: var(--color-ink); min-width: 0; }
.chm-title:hover { background: var(--color-canvas-parchment); }
.chm-title > svg, .chm-title .ic svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.chm-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chm-title .chm-mute svg { width: 13px; height: 13px; color: var(--sys-orange-text); }
.chm-topic { font-size: 11.5px; padding-left: 6px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-detailpop { left: 0; right: auto; top: calc(100% + 6px); width: 250px; padding: 8px; gap: 2px; }
.chat-memberpop, .chat-savedpop { right: 0; top: calc(100% + 6px); width: 280px; max-height: 360px; overflow-y: auto; padding: 8px; gap: 4px; }
.cdp-name { display: flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold); font-size: 14px; padding: 4px 8px 2px; }
.cdp-name svg { width: 14px; height: 14px; color: var(--text-muted); }
.cdp-topic { font-size: 12.5px; color: var(--text-muted); padding: 0 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--divider-soft); line-height: 1.4; }
.cdp-move { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; color: var(--text-muted); }
.cdp-move .btn-mini { width: 28px; height: 26px; text-align: center; padding: 0; color: var(--color-ink); }
.cmp-head { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); padding: 4px 8px 8px; }
.cmp-list { display: flex; flex-direction: column; gap: 1px; }
.cmp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 7px; font-size: 13px; }
.cmp-row:hover { background: var(--color-canvas-parchment); }
.cmp-l { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
html[data-theme="dark"] .chm-title:hover, html[data-theme="dark"] .dock-ch:hover, html[data-theme="dark"] .cmp-row:hover, html[data-theme="dark"] .cm-tr:hover { background: rgba(255,255,255,0.08); }
/* per-message translate toggle */
.cm-tr { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); padding: 2px 7px; border-radius: 6px; }
.cm-tr svg { width: 12px; height: 12px; }
.cm-tr:hover { background: var(--color-canvas-parchment); color: var(--color-ink); }
.cm-tr.on { color: var(--color-action-blue); }
/* inline message formatting (chatFmt) */
.msg-code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; background: var(--color-canvas-parchment); padding: 1px 5px; border-radius: 5px; }
.mention-all { background: rgba(255,159,10,0.18); color: var(--sys-orange-text); border-radius: 4px; padding: 0 3px; font-weight: var(--weight-semibold); }
html[data-theme="dark"] .msg-code { background: rgba(255,255,255,0.12); }
/* slash-command palette (reuses .mm-float shell) */
.slash-float { min-width: 250px; }
.slash-item { display: flex; align-items: center; gap: 8px; }
.slash-item b { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--color-action-blue); font-size: 12.5px; }
/* channel mute + drag states */
.chs-item.muted .chs-nm { opacity: 0.55; }
.chs-mi { display: inline-flex; flex-shrink: 0; opacity: 0.5; }
.chs-mi svg { width: 12px; height: 12px; }
.chs-item[draggable="true"] { cursor: grab; }
.chs-item.dragging { opacity: 0.4; }
.chs-item.dragover { box-shadow: inset 0 2px 0 var(--color-action-blue); }

/* ============================================================
   MESSENGER v63 — profiles, avatar upload, clickable authors
   ============================================================ */
/* clickable message author + avatar → profile */
.cm-avabtn { background: none; border: 0; padding: 0; cursor: pointer; }
.cm-avabtn:hover .ava { filter: brightness(1.05); box-shadow: 0 0 0 2px var(--color-action-blue); }
.cm-author { cursor: pointer; }
.cm-author:hover { text-decoration: underline; text-underline-offset: 2px; }
.cmp-l { background: none; border: 0; padding: 4px 2px; cursor: pointer; text-align: left; color: inherit; font: inherit; border-radius: 6px; }
.cmp-l:hover { text-decoration: underline; }
/* avatar upload control (my settings) */
.pf-ava { position: relative; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.pf-ava:hover .ava { filter: brightness(0.9); }
.pf-ava-cam { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-action-blue); color: #fff; display: grid; place-items: center; border: 2px solid var(--color-canvas); }
.pf-ava-cam svg { width: 12px; height: 12px; }
/* profile card modal */
.prof-box { max-width: 340px; width: 90vw; text-align: center; position: relative; padding-top: 30px; }
.prof-hero { display: flex; justify-content: center; margin-bottom: 14px; }
.ava.prof { width: 96px; height: 96px; font-size: 38px; border-radius: 24px; }
.prof-nm { font-size: 19px; font-weight: var(--weight-bold); letter-spacing: -0.2px; }
.prof-sub { font-size: 13.5px; color: var(--text-muted); margin-top: 3px; }
.prof-meta { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.prof-row { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--text-muted); padding: 3px 0; }
.prof-row svg { width: 14px; height: 14px; }
.prof-acts { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.prof-acts .btn { flex: 1 1 auto; justify-content: center; }
html[data-theme="dark"] .pf-ava-cam { border-color: var(--color-surface-black, #1c1c1e); }
.ava.prof { border-radius: 50%; } /* people avatars are circles app-wide */

/* ---- v63 QA fixes (4-agent audit) ---- */
/* undefined chip classes: admin public-channel chip + profile-modal subsidiary pill rendered unstyled */
.chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: var(--weight-medium); padding: 2px 9px; border-radius: var(--radius-pill); background: var(--color-surface-pearl); color: var(--color-ink); border: 1px solid var(--color-hairline); }
.chip.st-ok { background: rgba(52,199,89,0.14); color: var(--sys-green-text); border-color: transparent; }
.chip.st-hold { background: rgba(175,82,222,0.14); color: var(--sys-purple-text, #8944b8); border-color: transparent; }
html[data-theme="dark"] .chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .chip.st-ok { background: rgba(52,199,89,0.2); color: #7ee2a0; }
html[data-theme="dark"] .chip.st-hold { background: rgba(191,90,242,0.22); color: #d9a6f5; }
/* profile modal must sit above the floating dock (899) and wdg popups (1000) */
#prof-overlay { z-index: 1300; }
/* channel-header topic reads as a secondary line, not full ink */
.chm-topic { color: var(--text-muted); }
/* pinned message tint was near-invisible in dark */
html[data-theme="dark"] .chat-msg.is-pinned { background: rgba(255,159,10,0.16); }
/* FAB badge ring matches the page, not pure white, so it reads over the .open (dark) FAB too */
#chat-fab .fab-badge { border-color: var(--color-canvas-parchment); }
/* clickable photo avatars get a visible hover affordance */
.cm-avabtn:hover .ava.has-img, .cmp-l:hover .ava.has-img { box-shadow: 0 0 0 2px var(--color-action-blue); }
/* touch targets ≥44px on the heavily-tapped messenger controls (visual size unchanged, hit area expanded) */
.cma, .chs-add, .comp-plus, .cm-tr, .cdp-move .btn-mini, .react, .cm-thread { position: relative; }
.cma::before, .chs-add::before, .comp-plus::before, .cm-tr::before, .cdp-move .btn-mini::before, .react::before, .cm-thread::before { content: ""; position: absolute; inset: -8px; }
.chat-send { min-width: 40px; min-height: 40px; }
@media (max-width: 640px) { .chat-send { min-width: 44px; min-height: 44px; } .cma, .comp-plus { width: 40px; height: 40px; } }
/* popovers must never exceed a phone viewport, and tall menus scroll instead of overflowing */
.wdg, .chat-detailpop, .chat-memberpop, .chat-savedpop, .chat-pinpop, .chat-morepop, .col-pop, .day-pop { max-width: calc(100vw - 16px); }
.chat-morepop { max-height: min(60vh, 320px); overflow-y: auto; }
/* touch: reveal hover-only message actions (no hover on touch devices) */
@media (hover: none) { .cm-acts { display: inline-flex; } .chs-item { min-height: 40px; } .react, .cm-thread { min-height: 30px; } }

/* ---- v65: sidebar resize, channel-create invite, message more-menu ---- */
.chat-side { position: relative; }
.chat-side-rs { position: absolute; top: 0; right: -3px; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; }
.chat-side-rs::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background var(--dur-fade); }
.chat-side-rs:hover::after, .chat-side.resizing .chat-side-rs::after { background: var(--color-action-blue); }
@media (max-width: 760px) { .chat-side-rs { display: none; } } /* icon-only sidebar isn't resizable */
.nch-hint { font-size: 11px; color: var(--text-muted); margin: -2px 2px 2px; line-height: 1.4; }
.nch-invite { display: flex; flex-direction: column; gap: 6px; }
.nch-invite-l { font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.nch-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nch-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 4px 3px 6px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); }
.nch-chip .btn-mini.x { padding: 0 4px; }
html[data-theme="dark"] .nch-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.chat-morepop { padding: 6px; gap: 0; }
.chat-morepop .plus-item.on { color: var(--sys-orange-text); }

/* responsive: admin console */
@media (max-width: 1100px) { .ad-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .user-table .ur-joined, .user-table th[data-key="created"] { display: none; }
  .users-tb-right { margin-left: 0; }
}
@media (max-width: 680px) {
  .ad-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-table .ur-em, .user-table th[data-key="email"], .user-table .ur-lang, .user-table .ur-sub, .user-table th[data-key="sub"] { display: none; }
}

/* user inline editor */
.user-editor { background: var(--color-canvas-parchment); border-radius: var(--radius-md); padding: 16px; margin: 4px 0; }
.ue-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ue-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-muted); font-weight: var(--weight-medium); }
.ue-in { font: inherit; font-size: 13px; color: var(--color-ink); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 8px; padding: 7px 9px; width: 100%; }
.ue-in:focus { outline: none; border-color: var(--color-focus-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.15); }
.ue-perms, .ue-scope { margin-top: 16px; }
.ue-perms-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--color-ink); margin-bottom: 10px; }
.ue-perms-h .ic svg { width: 15px; height: 15px; }
.ue-perm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.ue-scope-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cp-row.is-dim { opacity: 0.55; }
.ue-actions { display: flex; gap: 8px; margin-top: 18px; }
html[data-theme="dark"] .user-editor { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .ue-in { background: var(--color-surface-tile-1); border-color: rgba(255,255,255,0.14); color: var(--text-on-dark); }

/* bulk import preview modal */
.bulk-box { max-width: 620px; width: 92vw; text-align: left; }
.bulk-sum { display: flex; gap: 8px; margin: 4px 0 14px; }
.bulk-list { max-height: 44vh; overflow-y: auto; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.bulk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--divider-soft); font-size: 13px; }
.bulk-item:last-child { border-bottom: none; }
.bulk-item .bi-ic { display: inline-flex; color: var(--sys-green-text); flex: 0 0 auto; }
.bulk-item .bi-ic svg { width: 16px; height: 16px; }
.bulk-item.bad .bi-ic { color: var(--sys-red-text); }
.bulk-item .bi-nm { font-weight: var(--weight-semibold); flex: 0 0 auto; min-width: 72px; }
.bulk-item .bi-em { flex: 1 1 auto; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-item .bi-msg { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); text-align: right; }
.bulk-item.bad .bi-msg { color: var(--sys-red-text); }
html[data-theme="dark"] .bulk-list { border-color: rgba(255,255,255,0.12); }

/* responsive: stack admin grids on narrow viewports */
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: 1fr; }
  .ad-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ue-perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   TASK DETAIL DRAWER — polish pass (v58)
   Unify property field chrome, de-pill the comment composer,
   add section rhythm, turn files/subtasks into calm cards.
   ============================================================ */
/* every property value shares ONE resting silhouette (was: selects filled, text inputs borderless → ragged left edge = "AI-made" tell) */
.prop-input, .prop-val .dp-input { background: var(--color-surface-pearl); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 7px 11px; }
.prop-input:hover, .prop-val .dp-input:hover { background: var(--color-canvas); border-color: var(--color-hairline); }
.prop-input:focus, .prop-val .dp-input:focus { background: var(--color-canvas); border-color: var(--color-focus-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.14); }
.prop-select { font-weight: var(--weight-regular); }
.prop-val .prop-cat { width: 100%; justify-content: flex-start; background: var(--color-surface-pearl); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 10px; min-height: 34px; }
.prop-val .prop-cat:hover { background: var(--color-canvas); border-color: var(--color-hairline); }
/* row rhythm */
.prop-row { padding: 9px 0; gap: 12px; }
.prop-label { align-self: center; }
.prop-val { min-height: 34px; }
.prog-ctl { flex-wrap: wrap; }
.prog-ctl small { flex-basis: 100%; margin: 3px 0 0; }
/* section rhythm + hairline before the social (comments/audit) blocks */
.drawer-sec { margin-top: 26px; }
.drawer-sec.sec-social { border-top: 1px solid var(--divider-soft); padding-top: 24px; margin-top: 24px; }
/* persistent header title (context stays pinned while the body scrolls) */
.drawer-head { align-items: flex-start; }
.drawer-head .dh-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.drawer-head-title { font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* comment composer: a calm bordered box, not a consumer chat bubble */
.cmt-in { border-radius: var(--radius-md); }
div.cmt-in { padding: 9px 12px; }
.cmt-list { overflow-x: hidden; }
/* subtask rows: hover surface, clearer delete, inline progress bar */
.sub-item { padding: 6px 8px; border-radius: 8px; transition: background var(--dur-fade); }
.sub-item:hover { background: var(--color-surface-pearl); }
.sub-item .btn-mini.x { color: var(--text-muted); border-radius: 6px; }
.sub-item .btn-mini.x:hover { color: var(--sys-red); background: var(--red-soft-bg); }
.sub-prog { display: inline-flex; align-items: center; gap: 6px; }
.sub-prog .mini-bar { width: 46px; height: 5px; border-radius: 3px; background: var(--color-canvas-parchment); overflow: hidden; }
.sub-prog .mini-bar i { display: block; height: 100%; background: var(--color-action-blue); }
.qsub-wrap { display: flex; gap: 6px; align-items: center; max-width: 460px; }
.qsub-wrap .quick-add { flex: 1; }
.qsub-cancel { flex: 0 0 auto; }
/* file rows → chips */
.file-item { background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 6px; border-bottom: none; transition: border-color var(--dur-fade); }
.file-item:hover { border-color: #d0d0d4; }
/* centered empty states inside the drawer */
.drawer .empty { text-align: center; padding: 18px 0; color: var(--text-quiet); }
/* dark variants */
html[data-theme="dark"] .prop-input, html[data-theme="dark"] .prop-val .dp-input, html[data-theme="dark"] .prop-val .prop-cat { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .prop-input:hover, html[data-theme="dark"] .prop-input:focus, html[data-theme="dark"] .prop-val .dp-input:hover { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .sub-item:hover { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .file-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .sub-prog .mini-bar { background: rgba(255,255,255,0.12); }

/* ---- admin/user polish (v58, from the 5,000-user QA) ---- */
/* dashboard stat cards that drill into a filtered user list are real buttons now */
.ad-stat-btn { cursor: pointer; text-align: left; font: inherit; width: 100%; }
.ad-stat-btn:hover { background: var(--color-canvas-parchment); border-color: #d0d0d4; }
.ad-stat-btn:hover .ad-ic { background: var(--color-canvas); }
html[data-theme="dark"] .ad-stat-btn:hover { background: rgba(255,255,255,0.06); }
/* truncate long emails / names at 5,000-employee scale (was: rows stretched/wrapped) */
.ur-name .ur-nm { min-width: 0; }
.ur-name .ur-nm b, .pf-nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ur-em { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* lift load-bearing muted labels to a readable tone */
.ur-name .ur-nm small { color: var(--text-muted); }
.fnote { color: var(--text-muted); }

/* weekly reject reason shown to the subsidiary (red-toned, like the cost reject banner) */
.hq-note-ro.no { color: var(--sys-red-text); display: flex; align-items: center; gap: 5px; }
.hq-note-ro.no svg { width: 13px; height: 13px; }

/* screen-reader-only (visually hidden but announced) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* edge-content robustness: huge numbers / long unbroken strings must not force horizontal page scroll */
.kpi-value, .home-stat .hs-v { min-width: 0; overflow-wrap: anywhere; }
.chat-file { max-width: 100%; min-width: 0; }
.chat-file .cf-name, .chat-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ce { overflow-wrap: anywhere; }

/* FX-missing warning strip (cash/cost views) */
.fx-warn { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; font-size: 13px; font-weight: var(--weight-medium); color: var(--sys-orange-text); background: rgba(255,159,10,0.10); border: 1px solid rgba(255,159,10,0.28); border-radius: var(--radius-md); }
html[data-theme="dark"] .fx-warn { color: #f5b750; background: rgba(255,159,10,0.13); border-color: rgba(255,159,10,0.34); }

/* a11y: respect the OS "reduce motion" setting — neutralize slide/scale/fade animations and transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* R19 dark: raw var(--sys-red) used AS TEXT never flips in dark (only --sys-red-text does) → several small labels sat at ~4.2:1. Remap the text uses to the AA dark token (keep raw --sys-red for solid dots/fills/badges, which are correct). */
html[data-theme="dark"] .flow-step.no .flow-st,
html[data-theme="dark"] .home-stat.alert .hs-v,
html[data-theme="dark"] .hi-ico.late,
html[data-theme="dark"] .alert-ico.red,
html[data-theme="dark"] .cell-prio.prio-cell-hi,
html[data-theme="dark"] .wa-chip.late em { color: var(--sys-red-text) !important; }
html[data-theme="dark"] .dpc.sun:not(.sel) { color: var(--sys-red-text); } /* C-R2: datepicker Sunday digit — raw --sys-red was 4.42:1 on the dark popover (<AA); the -text token flips to the lighter dark red. Light mode keeps the vivid --sys-red. C-R7 (R7-B[2]): :not(.sel) so a SELECTED Sunday keeps .sel's white-on-blue (this rule came after .dpc.sel → red-on-blue 1.26:1 regression). */
/* R19 dark: calendar "보류" chip hardcoded #7d3ba8 on the dark cell = 2.19:1 (unreadable) — was missed by the .st-hold dark fix */
html[data-theme="dark"] .cal-chip.st-hold { color: #e0b3f5; background: rgba(175,82,222,0.20); }

/* R11: print — Ctrl+P previously printed the dark app chrome (fixed nav, FAB, dock, toast) over content on a solid dark ink block. Force a clean light report: hide floating/interactive chrome, drop dark backgrounds, keep tables intact across page breaks. */
/* L2R7 mobile fixes — placed LAST among screen rules so they win over earlier same-specificity @media blocks (source order) */
@media (max-width: 520px) {
  .ntf-pop { right: -8px; width: min(360px, calc(100vw - 16px)); } /* was right:-60px width:360px → pushed off the right edge → body h-scroll on a phone when the inbox opens */
  .ad-stats { grid-template-columns: 1fr; } /* the R15 ≤480→1fr intent was defeated by a later ≤900 repeat(3) rule; this reasserts the phone stack */
}
@media (max-width: 640px) {
  .gantt-row { grid-template-columns: 130px 1fr; } /* literal (not var(--gl)) so it overrides the always-inline --gl:250 that left ~90px for the timeline at 375px */
  .grid > .card { min-width: 0; } /* a wide card (gantt/snapshot table) inflated its 1fr grid track's auto-minimum past the viewport → page h-scroll; min-width:0 lets the track shrink and defers wide content to the card's inner overflow-x:auto scrollers */
}
@media print {
  /* L2R9: also restore the LIGHT (AA-on-white) text tokens — else a dark-mode user printing gets pale status-badge text (#ff8078/#7ee2a0…) on pale fills (~1.4:1, illegible), worsened by print-color-adjust:exact below */
  :root, html[data-theme="dark"] { --color-canvas: #fff; --color-canvas-parchment: #fff;
    --sys-red-text: #bb2d22; --sys-orange-text: #8a5400; --sys-green-text: #1a7a34; --sys-purple-text: #7d3ba8;
    --text-muted: #4a4a4e; --text-quiet: #5c5c61; }
  html, body { background: #fff !important; color: #000 !important; }
  /* floating & interactive chrome that has no place on paper */
  .a-nav, .subbar, #chat-fab, #chat-dock, #toast-root, .bulk-bar, .savefail-banner,
  #tr-badge, .os-overlay, .drawer-overlay, .fab-badge, .view-head button, .filters,
  .sec-all, .row-sel, .row-sel-sp, .chs-sec-tools, .g-resize, .col-rs { display: none !important; }
  /* neutralize dark surfaces so text is readable and toner isn't wasted */
  .card, .kpi, .home-card, .cost-table, .task-row, main, .view-root {
    background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .view-root { padding: 0 !important; }
  /* tables: repeat headers, don't split a row across pages */
  table { page-break-inside: auto; border-collapse: collapse; }
  thead { display: table-header-group; }
  tr, .task-row, .cost-table tr { page-break-inside: avoid; }
  /* let long content flow instead of clipping inside scroll containers */
  .table-wrap, .home-list, .view-root { overflow: visible !important; max-height: none !important; }
  a[href]::after { content: ""; } /* don't append raw URLs after links */
  /* R19: wide fixed-layout tables (min-width 900/1080) ran off the right page edge and clipped columns — let them fit the page */
  .task-table, .cost-table, table { min-width: 0 !important; table-layout: auto !important; width: 100% !important; font-size: 10px; }
  .cell-title .ce, .task-title { white-space: normal !important; }
  /* R19: status/value is encoded in background fills that browsers strip in print (gantt bars, cash/matrix/progress bars) → force them to print, else blank white lanes */
  .g-bar, .g-fill, .bar-fill, .mb-bar, .stack span, .seg-prog, .seg-done, .seg-late, .seg-hold, .seg-plan, .kpi, .home-stat, .badge, .chs-badge, .st-badge, .pill-select { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* R19: more floating popovers/overlays that would print as stray boxes if open */
  .ntf-pop, .col-pop, .cost, .day-pop, .dp-pop, .mm-float, .slash-float, .wdg, #prof-overlay, .os-foot { display: none !important; }
  /* R19: the messenger is a fixed-height scroll pane — it prints one clipped screen; hide it (use the CSV chat-log export instead) */
  .chat-wrap, .chat-side, #chat-dock { display: none !important; }
  /* R19: sticky cells/group headers misrender in print; keep a subsidiary group with its rows */
  .group-row .g-sticky, .task-table td.cell-title, .task-table thead th, .cost-table thead th { position: static !important; }
  .group-row { break-after: avoid; page-break-after: avoid; }
  /* R19: weekly report (most-printed) — stack the 3-col grid + let notes textareas expand instead of an inner scrollbar */
  .wu-grid { grid-template-columns: 1fr !important; }
  .wk-notes, textarea { height: auto !important; min-height: 0 !important; overflow: visible !important; border: 1px solid #ccc; }
}