/* ============================================================
   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: 1600px;
}

*,*::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; }
.a-brand-home { display: inline-flex; align-items: center; gap: 12px; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; border-radius: 8px; transition: opacity var(--dur-fade); }
.a-brand-home:hover { opacity: 0.82; }
.a-brand-home:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 3px; }
/* 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: 11px; 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; }
.kpi-row-5 { grid-template-columns: repeat(5,1fr); }
.kpi-row-3 { grid-template-columns: repeat(3,1fr); } /* BENNYWORKS: KPI 카드 3장 */
.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; }
.autosave-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: var(--weight-medium); color: var(--text-quiet, var(--text-muted)); white-space: nowrap; }
.autosave-tag .ic { width: 13px; height: 13px; opacity: 0.85; }
.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-value.kpi-money { font-size: 23px; letter-spacing: -0.3px; margin-top: 10px; } /* 금액은 자릿수가 많아 살짝 작게 */
.kpi-value.kpi-money.sm { font-size: 20px; letter-spacing: -0.4px; } /* L4: 임계값 등 보조 금액용 — 인라인 font-size 대신 토큰으로 (같은 금액이 화면마다 다른 크기이던 것 통일) */
.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), filter var(--dur-fade); } /* L3: filter 도 트랜지션 — primary hover 밝기가 튀지 않고 부드럽게 */
.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 */
/* L1: 주요 버튼도 비활성 상태를 명확히 — 셀렉트·날짜셀엔 있는데 .btn 계열엔 없어 비활성 primary/ghost 가 풀 채도로 눌릴 것처럼 보이던 것 */
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: default; }
.btn:disabled:hover, .btn[disabled]:hover { filter: none; }

/* ── 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; }
/* K1: 고정폭 이름 트랙 — 긴 법인명이 옆 상태바 위로 넘치지 않게 말줄임(+ title 로 전체명 복구) */
.matrix-name { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: var(--weight-semibold); font-size: 13px; letter-spacing: -0.2px; }
.matrix-name .g-dot { flex: 0 0 auto; }
.mn-body { display: flex; flex-direction: column; min-width: 0; }
.mn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-name small { display: block; color: var(--text-quiet); font-weight: var(--weight-regular); font-size: 11px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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); min-width: 0; }
.snap-name .g-dot { flex: 0 0 auto; }
/* K3: 이름 열이 무한정 늘어 숫자 열을 밀어내며 가로스크롤 유발하던 것 — 상한 + 말줄임 */
.snap-name .sn-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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; }
/* 개요 주간 카드 — 대기 중인 결정 안건 직접 링크(HQ 결정 대기 목록) */
.dec-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.dec-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; text-align: left; font-size: 12px; color: var(--color-action-blue); padding: 3px 8px; border-radius: 8px; background: rgba(10,132,255,0.07); }
.dec-link:hover { background: rgba(10,132,255,0.13); }
.dec-link .ic { width: 12px; height: 12px; flex-shrink: 0; }
.dec-link-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dec-link small { flex-shrink: 0; color: var(--sys-red-text); font-weight: var(--weight-semibold); }
.dec-link.over { background: rgba(255,59,48,0.07); color: var(--sys-red-text); }
.dec-more { font-size: 11px; padding-left: 8px; }

.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; }
/* L2: 전역 검색·날짜필터도 다른 인풋과 동일한 포커스 링 — 탭 진입 시 시각 변화 없던 키보드 a11y·일관성 갭 (prop-select 포커스 재사용) */
.search:focus-within, .date-filter:focus-within { border-color: var(--color-focus-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.14); }

/* ── 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); position: relative; }
/* R6-QA: 주간보고 우선순위 완료 체크박스가 18px라 손가락 최소 44px에 크게 미달 — 터치 기기에서만 히트영역 확장(데스크톱은 정밀 클릭이라 오클릭 방지 위해 미적용) */
@media (hover: none) { .todo .box::before { content: ""; position: absolute; inset: -13px; } }
.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); }
/* 계열사 순서 드래그 (설정 → 조직) */
.sub-drag { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 28px; flex-shrink: 0; color: var(--color-ink); opacity: 0.4; cursor: grab; border-radius: 5px; touch-action: none; }
.sub-drag:hover { opacity: 0.85; background: var(--color-canvas-parchment); }
.sub-drag:active { cursor: grabbing; }
.setting-row.sub-dragging { opacity: 0.45; }
.setting-row.sub-dragover { border-color: var(--color-focus-blue); box-shadow: 0 -2px 0 0 var(--color-focus-blue) inset; }
.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; }
/* v249 결재선 에디터 (설정 → 결재) — 한도는 윗줄, 그 아래로 결재/합의 단계가 실행 순서대로 쌓인다 */
.setting-row.tier-row { flex-direction: column; align-items: stretch; gap: 8px; }
.tier-row .tier-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tier-row .tier-n { min-width: 20px; }
.tier-row .tier-top .btn-mini.x { margin-left: auto; }
.tier-row > * { min-width: 0; } /* 좁은 폭에서 단계 줄이 행 밖으로 밀려나가지 않게(플렉스 기본 min-width:auto 해제) */
.tier-row .tier-steps { display: flex; flex-direction: column; min-width: 0; }
.tier-step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 4px; padding: 6px 0 6px 4px; border-top: 1px solid var(--color-hairline); min-width: 0; }
.tier-step-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; }
.tier-step-nm { flex: 1 1 80px; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier-step-act { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.tier-empty { padding: 8px 0 8px 4px; border-top: 1px solid var(--color-hairline); font-size: 13px; }
.tier-add { padding-top: 2px; }
.tier-add-sel { max-width: 260px; }
@media (max-width: 640px) { .tier-step-nm { font-size: 13px; } .tier-add-sel { max-width: 100%; } }
.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; }
  /* 탭만 가로스크롤하고 CREAS TALK(메신저) 버튼은 항상 오른쪽에 고정 — 이전엔 subbar 전체가 스크롤돼 메신저 버튼이 화면 밖(384px~)으로 밀렸음 */
  .subbar { overflow: visible; padding: 0 14px; gap: 6px; }
  .tabs { flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .subbar-right { flex-shrink: 0; }
  .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) */
  .nav-install { height: 30px; padding: 0 10px; } .nav-install span { display: none; } /* 좁은 화면: "앱 설치" 필은 아이콘만 (라벨 숨김) */
  .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); display: inline-flex; align-items: center; gap: 6px; }
.scope-chip .ic { width: 14px; height: 14px; opacity: 0.75; }
/* HQ 데이터 범위 셀렉트 — 밋밋한 필터 select 와 구별되게 아이콘 + 강조 테두리(전 화면 데이터 문맥) */
.scope-wrap { display: inline-flex; align-items: center; gap: 6px; padding-left: 9px; border-radius: var(--radius-md); background: rgba(255,255,255,0.1); }
.scope-wrap .ic { width: 15px; height: 15px; color: #fff; opacity: 0.8; flex-shrink: 0; }
.scope-wrap .scope-select { background: transparent; border: none; color: #fff; font-weight: var(--weight-semibold); }
.nav-div { width: 1px; align-self: center; height: 20px; background: rgba(255,255,255,0.16); flex-shrink: 0; }
/* 중간폭(태블릿·분할화면 ~761–920px)에서 상단바가 안 들어가 페이지가 가로로 밀리던 것 방지 — 가장 덜 쓰는 언어 세그먼트/부가 토글을 숨김(둘 다 설정에도 있음). ≤760 은 모바일 규칙이 따로 처리 */
@media (max-width: 920px) and (min-width: 761px) {
  .a-nav-right .lang-seg { display: none; }
  .a-nav-right .nav-ic[data-action="autotr-toggle"], .a-nav-right .nav-ic[data-action="density-toggle"] { display: none; }
  .a-nav-right { gap: 10px; }
}

.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; }
/* 사진 아바타는 항상 cover 로 채워야 함. .ava.sm2/.big 등 크기 변형이 `background:` 단축으로 background-size 를 auto 로 리셋(소스 순서상 뒤) → 큰 사진이 좌상단만/흰 여백으로 보이던 버그. !important 로 이미지 표시 속성 고정 */
.ava.has-img { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; 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); }
/* R4-Mob2: 폰에서 매뉴얼·?·로그아웃 3버튼이 26px로 밀집 → 로그아웃 오탭 방지 위해 44px 근접 확대 */
@media (max-width: 480px) { .uc-out { width: 40px; height: 40px; } }

/* translated indicator */
.tl { font-size: 10px; opacity: 0.55; }
/* M1(R1): 드로어 본문 필드의 번역 어포던스 — 원문 보기 토글 + 읽기전용 원문 블록, 미번역 외국어 번역 버튼 */
.tr-fieldctl { margin-top: 4px; }
.tr-fieldbtn { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); padding: 2px 8px; border-radius: 6px; }
.tr-fieldbtn svg { width: 12px; height: 12px; }
.tr-fieldbtn:hover { background: var(--color-canvas-parchment); color: var(--color-ink); }
.tr-fieldbtn.on { color: var(--color-action-blue); }
.tr-orig { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-muted); background: var(--color-canvas-parchment); border-radius: var(--radius-sm); padding: 8px 12px; white-space: pre-wrap; }
.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; }
/* 버튼 로딩 스피너 (로그인·회원가입 등 비동기 제출 중) */
.btn.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; opacity: 0.92; cursor: progress; }
.btn-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; animation: btnspin 0.62s linear infinite; flex-shrink: 0; }
.btn.btn-ghost .btn-spin, .btn.btn-quiet .btn-spin { border-color: rgba(0,0,0,0.2); border-top-color: var(--color-action-blue); }
@keyframes btnspin { to { transform: rotate(360deg); } }
.login-err { color: var(--sys-red); font-size: 13px; }
.li-resend-btn { display: inline-block; margin-left: 4px; padding: 0; background: none; border: 0; color: var(--color-action-blue); font: inherit; font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.li-resend-btn:hover { filter: brightness(1.1); }
.li-resend-btn:disabled { color: var(--text-quiet); text-decoration: none; cursor: default; }
.li-resend-btn.ok { color: var(--sys-green); text-decoration: none; }
.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-sep { height: 1px; background: var(--color-hairline); margin: 6px 0; opacity: 0.7; } /* 드로어 속성 논리 그룹 구분(소유/분류/일정/검토) */
.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; }
}

/* 비용 내역(line items) 편집기 — 1건 요청에 품목·카테고리·금액 여러 행 */
.ci-hint { font-size: 11.5px; color: var(--text-quiet); font-weight: var(--weight-regular); margin-left: 6px; }
.ci-table { border: 1px solid var(--color-hairline); border-radius: var(--radius-md); overflow: hidden; margin-top: 4px; }
.ci-head, .ci-row { display: grid; grid-template-columns: 1fr 128px 118px 30px; gap: 8px; align-items: center; padding: 6px 8px; }
.ci-head { font-size: 11.5px; color: var(--text-muted); font-weight: var(--weight-semibold); background: var(--color-surface-pearl); border-bottom: 1px solid var(--color-hairline); }
.ci-head .ci-amt-h { text-align: right; }
.ci-row + .ci-row { border-top: 1px solid var(--divider-soft); }
.ci-name, .ci-amt { font-family: inherit; font-size: 13px; color: var(--color-ink); border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); padding: 6px 8px; background: var(--color-canvas); outline: none; width: 100%; transition: border-color var(--dur-fade); }
.ci-amt { text-align: right; font-variant-numeric: tabular-nums; }
.ci-name:focus, .ci-amt:focus { border-color: var(--color-focus-blue); }
.ci-cat { font-family: inherit; font-size: 13px; color: var(--color-ink); border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); padding: 6px 24px 6px 8px; 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='12' height='12' 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 7px center; }
.ci-name:disabled, .ci-amt:disabled, .ci-cat:disabled { opacity: 0.7; cursor: default; }
.ci-del { border: none; background: transparent; color: var(--text-quiet); font-size: 18px; line-height: 1; cursor: pointer; border-radius: var(--radius-sm); width: 28px; height: 28px; transition: color var(--dur-fade), background var(--dur-fade); }
.ci-del:hover { color: var(--sys-red-text); background: var(--color-surface-pearl); }
.ci-add { margin-top: 8px; }
.ci-total { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-hairline); }
.ci-total-l { font-size: 12px; color: var(--text-muted); margin-right: auto; }
.ci-total b { font-size: 16px; font-weight: var(--weight-bold); color: var(--color-ink); font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .ci-name, html[data-theme="dark"] .ci-amt { background: #242427; }
html[data-theme="dark"] .ci-cat { background-color: #242427;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' 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"); }
@media (max-width: 640px) {
  .ci-head { display: none; }
  .ci-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ci-row .ci-name { grid-column: 1 / -1; }
  .ci-row .ci-del { justify-self: end; }
}

/* 묶음 승인 — 전용 체크박스 열 + 안내 */
.bulk-hint { font-size: 12px; color: var(--text-muted); margin: 2px 0 10px; display: flex; align-items: center; gap: 5px; }
.bulk-hint svg { width: 13px; height: 13px; opacity: 0.7; flex: none; }
.cost-table th:first-child, .cost-table td:first-child { text-align: center; padding-left: 4px; padding-right: 4px; }
.cost-sel { cursor: pointer; width: 16px; height: 16px; accent-color: var(--color-action-blue); }

/* v235 법인별 결재선(subTiers) 오버라이드 카드 */
.subtier-card { border: 1px solid var(--color-hairline); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; }
.subtier-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.subtier-head b { font-size: 14px; min-width: 108px; }
.subtier-badge { margin-right: auto; font-size: 12px; }
.subtier-card .setting-list { margin-top: 10px; }

/* ============================================================
   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-bar.g-clipl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.g-bar.g-clipl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; z-index: 2; background: linear-gradient(to right, rgba(0,0,0,0.32), transparent); }
.g-bar.g-clipr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.g-bar.g-clipr::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 9px; z-index: 2; background: linear-gradient(to left, rgba(0,0,0,0.32), transparent); }
.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; } .group-row[data-action="g-fold"] { cursor: pointer; user-select: none; } .group-row .g-fold { display: inline-block; width: 14px; color: var(--text-quiet); font-size: 11px; margin-right: 2px; } .group-row.is-folded td { opacity: .8; }
.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) */
/* 터치: hover 가 없어 플로팅 액션(상세/열기/복제/+하위)이 안 닿았음 → ⋯ 트리거를 탭하면 그 행만 펼침(제목 아래 줄, 플로팅 아님) */
.row-more { display: none; } /* ⋯ 행액션 트리거 — 데스크톱은 hover 로 처리하므로 숨김 */
@media (hover: none) {
  .row-more { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; flex-shrink: 0; border-radius: 6px; color: var(--color-ink); opacity: 0.5; margin-left: auto; }
  .row-more .ic { width: 16px; height: 16px; }
  .row-more:active { opacity: 0.95; background: var(--color-canvas-parchment); }
  .task-row .row-actions { display: none; }
  .task-row.acts-open .row-actions { display: inline-flex; position: static; transform: none; background: none; box-shadow: none; padding: 0; margin-top: 4px; flex-wrap: wrap; flex-basis: 100%; }
  .cell-title .tt-wrap { flex-wrap: wrap; }
}
.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; }
/* Storage 첨부: 클릭 시 서명URL 발급 <button> — 앵커처럼 보이도록 버튼 크롬 제거(2-클래스 규칙이 박스형 재적용) */
.file-dl { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--color-ink); cursor: pointer; text-align: left; }
.file-dl:hover { color: var(--color-action-blue); }
.file-dl:disabled { opacity: .55; cursor: default; }
.file-link.file-dl { flex: 1; }
.chat-file.file-dl { margin-top: 5px; padding: 7px 12px; background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); border-radius: 9px; }
html[data-theme="dark"] .chat-file.file-dl { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
/* 드로어 첨부 이미지 썸네일 */
.file-item-img { align-items: center; }
.file-thumb-link { flex: none; line-height: 0; display: inline-block; }
.file-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-hairline); display: block; background: var(--color-surface-pearl); }
.file-thumb.simg:not([src]), .file-thumb.simg[src=""] { background: var(--color-surface-pearl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23aab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/22px no-repeat; }
html[data-theme="dark"] .file-thumb.simg { background-color: rgba(255,255,255,0.05); }
.file-item-img .file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.file-item-img .file-meta .file-link, .file-item-img .file-meta .file-link.file-dl { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item-img.simg-fail .file-thumb { display: 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-banner.past { background: rgba(120,120,128,0.12); color: var(--text-muted); font-weight: var(--weight-medium); } /* R4-W2: 과거/미래 주 — 중립 회색(제출 유도 아님) */
.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: 1px solid var(--color-hairline);
  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); }
/* J2: 액션바 원탭 빠른 반응(👍 ✅ 👀) — 이모지 피커 왕복 없이 가장 흔한 상호작용 1탭 */
.cm-quick { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 15px; line-height: 1; }
.cm-quick:hover { background: var(--color-surface-pearl); }
html[data-theme="dark"] .cm-quick:hover { background: rgba(255,255,255,0.08); }
/* J2: 반응자 팝오버(터치에서 title 툴팁이 안 떠 누가 반응했는지 못 보던 것 — 길게눌러/우클릭) */
.reactor-pop { padding: 8px; min-width: 180px; }
.reactor-pop .rp-head { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-quiet); padding: 2px 6px 6px; }
.reactor-pop .rp-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 13px; }
/* J4: 독 오버플로(⋯) 메뉴 섹션 헤더 */
.dock-morepop .dmore-sec { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-quiet); padding: 8px 8px 4px; margin-top: 4px; border-top: 1px solid var(--divider-soft); }
.dock-morepop .dmore-sec:first-child { border-top: 0; margin-top: 0; }
.dock-morepop .dmore-sec .ic svg { width: 13px; height: 13px; }
.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-send { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-action-blue); color: #fff; }
.cmt-send .ic { width: 16px; height: 16px; }
.cmt-send:hover { filter: brightness(1.06); }
.file-lim { font-size: 11px; color: var(--text-quiet); white-space: nowrap; }
.trash-kind { font-size: 11px; flex-shrink: 0; }
/* Dr1(R2): 휴지통 복구 남은 기간 칩 (임박 2일 이하 빨강) */
.trash-left { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.trash-left.trash-soon { color: var(--sys-red-text); font-weight: var(--weight-semibold); }
/* Gc2(R2): 기간 필터 켜졌을 때 줌 세그먼트 비활성 표시 */
.gz.gz-dim { opacity: 0.45; }
/* Gc1(R2): 캘린더 상단 지연 업무 스트립(지난 달 지연 포함) */
.cal-overdue { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-bottom: 14px; padding: 11px 14px; border-radius: var(--radius-md); background: rgba(255,59,48,0.07); border: 1px solid rgba(255,59,48,0.28); color: var(--sys-red-text); font-size: 13px; cursor: pointer; transition: filter var(--dur-fade); }
.cal-overdue:hover { filter: brightness(0.98); }
.cal-overdue .cal-od-ico { display: inline-flex; }
.cal-overdue .cal-od-ico svg { width: 16px; height: 16px; }
.cal-overdue .cal-od-hint { font-weight: var(--weight-regular); }
.cal-overdue .cal-od-go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-weight: var(--weight-semibold); white-space: nowrap; }
.cal-overdue .cal-od-go svg { width: 14px; height: 14px; }
html[data-theme="dark"] .cal-overdue { background: rgba(255,59,48,0.12); border-color: rgba(255,59,48,0.4); color: #ff9a92; }
.sub-item .sub-asg { flex-shrink: 0; padding: 2px 4px; min-width: 0; }
.sub-item .sub-asg-none { font-size: 11px; }
.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; }
.ca-main { display: block; }
/* K2: 큰 금액이 고정폭 셀에서 왼쪽(앞자리)으로 잘려 자릿수를 감추던 것 — 말줄임 + title 로 전체 금액 복구 (task-title 과 동일 패턴) */
.cost-table td .ca-main { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
td.num .eur-eq { display: block; margin-top: 2px; } /* 비용 금액 셀: 환산액을 아랫줄로 내려 주 금액 자릿수 정렬 유지 */
tr.row-overdue { background: rgba(255,59,48,0.045); }
tr.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--sys-red-text, #ff3b30); }

/* gantt small (subtask) bars */
.g-bar.g-sm { height: 13px; top: 8px; border-radius: 8px; 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: 1450; 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-row { display: flex; align-items: flex-start; } /* R5-B1: 알림행 = 본문 버튼 + ✓ 버튼 형제(중첩 인터랙티브 제거) */
.ntf { display: flex; align-items: flex-start; gap: 9px; flex: 1; min-width: 0; 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.unread { background: rgba(10,132,255,0.06); box-shadow: none; } /* 7px 점만으론 안읽음이 묻혀 좌측 강조+틴트 추가 */
.ntf.unread:hover { background: rgba(10,132,255,0.11); }
/* Nt-B5: 알림 트리아지 필터칩 */
.ntf-filters { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--divider-soft); flex-wrap: wrap; }
.ntf-filter { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: var(--weight-medium); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--color-hairline); background: transparent; color: var(--text-muted); cursor: pointer; }
.ntf-filter b { font-weight: var(--weight-semibold); font-size: 11px; opacity: 0.75; }
.ntf-filter:hover { background: var(--color-surface-pearl); }
.ntf-filter.on { background: var(--accent-soft, color-mix(in srgb, var(--color-accent) 12%, transparent)); color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); }
.ntf-sec { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-quiet); padding: 9px 10px 3px; }
.ntf-sec.ntf-sec-earlier { margin-top: 4px; }
.ntf small { font-size: 11px; color: var(--text-quiet); white-space: nowrap; margin-top: 2px; }
/* R3-Nt4: 내 처리 필요(actionable=결재/보완/의사결정/주간검토) 미읽음 알림 — FYI(파랑)와 구분되는 주황 좌측 강조 */
.ntf--action.unread { background: rgba(255,149,0,0.08); box-shadow: none; }
.ntf--action.unread .ntf-dot { background: var(--sys-orange); }
.ntf--action.unread:hover { background: rgba(255,149,0,0.13); }
/* R3-Nt3: 알림 개별 읽음(✓) — 클릭 이동 없이 그 자리에서 */
.ntf-read { flex-shrink: 0; align-self: flex-start; margin-top: 7px; width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-quiet); cursor: pointer; opacity: 0.45; transition: opacity .12s, background .12s, color .12s; }
.ntf-row:hover .ntf-read, .ntf-read:focus-visible { opacity: 1; }
.ntf-read:hover { background: rgba(10,132,255,0.12); color: var(--color-action-blue); opacity: 1; }
/* R4-Mob1: 터치엔 hover가 없어 ✓가 opacity .45로 안 보이고 24px는 작음 → 상시 노출 + 40px 히트영역 */
@media (hover: none) { .ntf-read { opacity: 1; color: var(--text-muted); width: 40px; height: 40px; margin: -8px -6px -8px 0; } }
/* R4-Mob4: 다크에서 actionable 주황 틴트가 캔버스에 거의 안 보임 → 호버 수준으로 보강(좌측 바에만 의존하지 않게) */
html[data-theme="dark"] .ntf--action.unread { background: rgba(255,149,0,0.16); }

/* 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-skip { margin-top: 8px; font-size: 12px; color: var(--text-muted); } /* v251 상신자 본인 단계 갈음 안내 */

/* v252 비용사용현황 표 (비용 → 항목별·월별) */
.sum-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 2px 12px; }
.sum-bar .card-note { margin: 0; }
.sum-bar > .btn:last-child { margin-left: auto; } /* v324: 버튼마다 auto 가 붙어 균등 분산되던 것 → 마지막 버튼(CSV)만 오른쪽 */
.sum-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sum-table th, .sum-table td { padding: 7px 10px; border-bottom: 1px solid var(--color-hairline); white-space: nowrap; }
.sum-table thead th { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); text-align: right; }
.sum-table thead th.sum-cat, .sum-table tbody th.sum-cat { text-align: left; font-weight: var(--weight-semibold); position: sticky; left: 0; background: var(--color-surface-card); z-index: 1; }
.sum-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sum-table .sum-zero { color: var(--text-quiet); }
.sum-table .sum-rowtot { font-weight: var(--weight-semibold); }
.sum-table .sum-cell { cursor: pointer; }
.sum-table .sum-cell:hover { background: var(--color-canvas-parchment); }
.sum-table .sum-foot th, .sum-table .sum-foot td { border-top: 1px solid var(--color-hairline); border-bottom: 0; font-weight: var(--weight-bold); }
.sum-table .sum-empty { text-align: center; color: var(--text-muted); padding: 18px 10px; }

/* v257 마스터 데이터 (설정 → 마스터) */
.m-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.m-tab {
  font-family: inherit; font-size: 13px; font-weight: 500; padding: 7px 13px;
  border: 1px solid var(--color-hairline); border-radius: var(--radius-pill);
  background: var(--color-surface-pearl); color: var(--text-muted); cursor: pointer;
}
.m-tab:hover { color: var(--color-ink); }
.m-tab.is-active { background: var(--color-ink); color: var(--text-on-dark); border-color: var(--color-ink); }
.m-tab.is-active .mini-chip { background: rgba(255,255,255,0.22); color: var(--text-on-dark); }
.m-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.m-bar .search { flex: 1 1 220px; max-width: 320px; }
.m-bar .card-note { margin: 0; margin-left: auto; }
.m-off-t { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.m-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.m-table th, .m-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-hairline-soft); vertical-align: middle; }
.m-table thead th {
  font-size: 11.5px; font-weight: var(--weight-semibold); color: var(--text-quiet);
  text-align: left; white-space: nowrap; background: var(--color-surface-pearl);
  border-bottom: 1px solid var(--color-hairline); position: sticky; top: 0; z-index: 1;
}
.m-table input.cell-text, .m-table select.cell-sel { width: 100%; min-width: 0; }
.m-table tr.m-off { opacity: 0.45; }
.m-table td.m-act { text-align: right; white-space: nowrap; }
.m-table td.m-empty { text-align: center; color: var(--text-muted); padding: 22px 8px; }
/* v259 마스터 — 참조 콤보 · BS/PL 갈래 · 행 삭제 */
.m-ref {
  font-family: inherit; font-size: 13px; text-align: left; width: 100%;
  padding: 5px 8px; border: 1px solid var(--color-hairline); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-ink); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-ref:hover { border-color: var(--color-ink); }
.m-ref .muted { color: var(--text-quiet); }
.m-seg { display: inline-flex; gap: 0; margin-bottom: 10px; border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); overflow: hidden; }
.m-seg-b {
  font-family: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px;
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
}
.m-seg-b + .m-seg-b { border-left: 1px solid var(--color-hairline); }
.m-seg-b:hover { color: var(--color-ink); }
.m-seg-b.is-active { background: var(--color-ink); color: var(--text-on-dark); }
.m-table td.m-act .btn-mini.x { margin-left: 4px; padding: 2px 7px; color: var(--text-quiet); }
.m-table td.m-act .btn-mini.x:hover { color: var(--color-danger, #b23); border-color: currentColor; }
.m-code { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--text-muted); white-space: nowrap; }
.wdg-grp {
  position: sticky; top: 0; z-index: 1;
  padding: 7px 12px 5px; font-size: 11px; font-weight: var(--weight-semibold);
  letter-spacing: 0.04em; color: var(--text-quiet); background: var(--color-surface-pearl);
  border-bottom: 1px solid var(--color-hairline-soft);
}
.wdg-grp:first-child { border-top: 0; }
/* v263 비용 두 갈래 — 지출 정보 · 내역의 세 축 */
.prop-pick { width: auto; min-width: 140px; max-width: 100%; }
.cost-cmp { margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.55; }
.cost-cmp.ok  { background: var(--color-ok-soft, rgba(26,122,52,.10)); color: var(--color-ok, #1a7a34); }
.cost-cmp.off { background: var(--color-warn-soft, rgba(138,84,0,.11)); color: var(--color-warn, #8a5400); }
/* 지출결의 내역: 품목 · 계정과목 · 매장 · 금액 · × (카테고리는 값만 남고 화면에서 빠진다 — 축은 계정과목이다) */
.ci-row.has-ax, .ci-head.has-ax { grid-template-columns: minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1fr) 118px 28px; }
.ci-row.has-ax .ci-cat { display: none; }
.ci-ax { font-size: 12px; padding: 5px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 드로어가 좁을 때(모바일·좁은 패널): 품목 한 줄, 계정|매장 한 줄, 금액|× 한 줄 — 6열로 구겨 넣지 않는다 */
@media (max-width: 640px) {
  .ci-row.has-ax { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ci-row.has-ax .ci-name { grid-column: 1 / -1; }
  .ci-row.has-ax .ci-acc { grid-column: 1; }
  .ci-row.has-ax .ci-st  { grid-column: 2; }
  .ci-row.has-ax .ci-amt { grid-column: 1; }
  .ci-row.has-ax .ci-del { grid-column: 2; justify-self: end; }
}
/* v264 지급일 묶음 */
.pb-hint { margin-left: auto; font-size: 12px; color: var(--text-quiet); }
.pb-grp + .pb-grp { border-top: 1px solid var(--color-hairline-soft); }
.pb-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: inherit; font-size: 14px; text-align: left;
  padding: 11px 4px; border: 0; background: transparent; color: var(--color-ink); cursor: pointer;
}
.pb-head:hover { background: var(--color-surface-pearl); }
.pb-date { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.pb-n { font-size: 12px; color: var(--text-muted); background: var(--color-surface-pearl);
  border-radius: var(--radius-pill); padding: 1px 8px; }
.pb-sum { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.pb-ready { font-size: 12px; color: var(--text-quiet); min-width: 92px; text-align: right; }
.pb-head.is-over .pb-date { color: var(--color-warn, #8a5400); }
.pb-table { min-width: 0; table-layout: auto; }
.pb-grp .table-wrap { min-height: 0; max-height: none; overflow: visible; }
.pb-table td { padding: 8px 10px; }
.pb-table .pb-ck { width: 34px; }
.pb-desc { font-size: 13px; }
.pb-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.pb-chip { font-size: 11px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--color-surface-pearl); color: var(--text-muted); white-space: nowrap; }
.pb-chip.ok  { background: var(--color-ok-soft, rgba(26,122,52,.10)); color: var(--color-ok, #1a7a34); }
.pb-chip.off { background: var(--color-warn-soft, rgba(138,84,0,.11)); color: var(--color-warn, #8a5400); }
.pb-chip.gap { background: var(--color-crit-soft, rgba(187,45,34,.10)); color: var(--color-crit, #bb2d22); }
tr.pb-gap { opacity: .72; }
.pb-foot { display: flex; align-items: center; gap: 10px; padding: 8px 4px 12px; flex-wrap: wrap; }
.pb-warn { font-size: 12px; color: var(--text-muted); }
/* v271 타니 걷기 — 콤보 보조 텍스트 · 넓은 팝오버 · 묶음 금액 · 접힌 사유칸 */
.wdg-combo { min-width: 320px; max-width: min(92vw, 460px); }
.wdg-combo .wdg-lb { display: flex; flex-direction: column; min-width: 0; }
.wdg-combo .wdg-item .wdg-lb { white-space: normal; overflow-wrap: anywhere; }
.wdg-sub { font-size: 11px; color: var(--text-quiet); font-variant-numeric: tabular-nums; margin-top: 1px; }
.pb-amt-m { display: none; margin-left: 8px; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.pb-sum-b { font-size: 11.5px; color: var(--text-quiet); font-weight: 400; }
@media (max-width: 640px) {
  .pb-amt-m { display: inline; }
  .pb-table td.num, .pb-table td:last-child { display: none; } /* 금액은 제목 옆에 붙였다 — 가로 스크롤을 없앤다 */
}
details.drawer-fold > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); padding: 8px 0 4px; list-style: none; }
details.drawer-fold > summary::before { content: "＋ "; }
details.drawer-fold[open] > summary::before { content: "− "; }
/* v273 첨부 드롭 · 마스터 memo 번역 줄 */
.file-drop { border: 1px dashed transparent; border-radius: var(--radius-sm); transition: border-color .12s, background .12s; }
.file-drop.is-over { border-color: var(--color-focus-blue); background: var(--color-accent-soft, rgba(0,102,204,.06)); }
.m-tr { font-size: 11.5px; color: var(--text-quiet); margin-top: 3px; white-space: normal; line-height: 1.35; }
/* v280 입금(매출) — 명세: 구분 · 유형/항목 · 계정 · 매장 · 금액 · × */
.ci-row.rc-row, .ci-head.has-rc { grid-template-columns: 84px minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) 118px 28px; }
.ci-row.rc-row.is-deduct .ci-amt { color: var(--color-warn, #8a5400); }
.rc-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-hairline); }
.rc-totals > div { display: flex; flex-direction: column; gap: 2px; }
.rc-totals b { font-variant-numeric: tabular-nums; font-size: 15px; }
.rc-totals .rc-net b { font-size: 17px; }
.rc-table td.num { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ci-row.rc-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ci-row.rc-row .rc-name, .ci-row.rc-row .rc-type { grid-column: 2; }
  .ci-row.rc-row .ci-acc { grid-column: 1; } .ci-row.rc-row .ci-st { grid-column: 2; }
  .ci-row.rc-row .ci-amt { grid-column: 1; } .ci-row.rc-row .ci-del { grid-column: 2; justify-self: end; }
  .rc-table td.num:not(:last-child) { display: none; }
  .rc-totals { grid-template-columns: 1fr; }
}
/* v282 입금 — 회차 · 통지액 대사 · 목록 선택 */
.rc-period-wrap { display: flex; gap: 6px; align-items: center; }
.rc-period-wrap #rc-period { flex: 1 1 140px; }
.rc-period-wrap #rc-half { flex: 0 0 auto; }
.rc-notice { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.rc-notice .ci-amt { width: 160px; }
.rc-table .pb-ck { width: 34px; }
.rc-table tr.is-sel { background: var(--color-accent-soft, rgba(0,102,204,.06)); }
/* v285 입금 1년치 — 월별 묶음 · KPI 필터 · 매출 요약 */
.rc-wrap { overflow-x: auto; } /* 목록용 260px 상자를 쓰지 않는다 — 145행을 두 줄씩 보게 하지 않는다 */
tr.rc-month { cursor: pointer; background: var(--color-surface-pearl); }
tr.rc-month th.rc-month-l { text-align: left; font-weight: var(--weight-semibold); white-space: nowrap; }
tr.rc-month .sec-caret { display: inline-flex; }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { border-color: var(--color-ink); }
.kpi.is-on { outline: 2px solid var(--color-ink); outline-offset: -2px; }
.sum-wrap { max-height: none; min-height: 0; overflow: auto; }
/* v287 입금 — 드로어 가로 넘침 차단 · 요약표 매장 열 고정 */
.drawer-body { overflow-x: hidden; }
.sum-sticky thead th.sum-cat, .sum-sticky tbody th.sum-cat { position: sticky; left: 0; background: var(--color-canvas, #fff); z-index: 1; box-shadow: 1px 0 0 var(--color-hairline); }
/* v295 명세 행 귀속월 — 두 달을 걸칠 때만 한 칸 더 */
.ci-row.rc-row.has-month { grid-template-columns: 84px 72px minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) 118px 28px; }
@media (max-width: 640px) { .ci-row.rc-row.has-month { grid-template-columns: 1fr 1fr; } .ci-row.rc-row.has-month .rc-month-sel { grid-column: 2; } }
/* v311c 정렬 · 시트 선택기 */
.pb-head { justify-content: flex-start; text-align: left; } .pb-head .pb-date { margin-right: 4px; }
.sheet-table thead th { text-align: center; } .sheet-table thead th:first-child { text-align: left; }
.sheet-pick { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sheet-ax { white-space: nowrap; }
/* v311b 큰 창 흔들림(바깥 클릭) */
.drawer.shake { animation: drawer-shake .28s ease; } @keyframes drawer-shake { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-6px); } 60% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .drawer.shake { animation: none; } }
/* v311 시트 3차 */
.sheet-amt.is-changed { border-color: var(--color-warn, #8a5400); background: color-mix(in srgb, var(--color-warn, #8a5400) 8%, transparent); font-weight: 600; }
.sheet-files { white-space: nowrap; } .sheet-files .file-btn { cursor: pointer; } .sheet-files .file-btn svg { width: 14px; height: 14px; }
/* v310 결의서·기안 큰 창 */
.drawer-overlay.is-modal { justify-content: center; align-items: center; padding: 28px; background: rgba(0,0,0,0.42); }
.drawer-overlay.is-modal .drawer { width: min(1180px, 100%); height: min(92vh, 100%); border-radius: 16px; overflow: hidden; transform: translateY(14px) scale(.985); box-shadow: 0 30px 80px rgba(0,0,0,0.28); }
.drawer-overlay.is-modal.open .drawer { transform: translateY(0) scale(1); }
.drawer-overlay.is-modal .drawer-body { padding: 8px 48px 36px; } .drawer-overlay.is-modal .drawer-head { padding: 16px 28px; }
.drawer-overlay.is-modal .prop-list { max-width: 820px; }
@media (max-width: 860px) { .drawer-overlay.is-modal { padding: 0; } .drawer-overlay.is-modal .drawer { width: 100%; height: 100%; border-radius: 0; } .drawer-overlay.is-modal .drawer-body { padding: 8px 20px 24px; } }
/* v309 일괄 지출결의 시트 */
.sheet-table th, .sheet-table td { padding: 12px 10px; vertical-align: middle; } .sheet-table tbody tr { height: 56px; } .sheet-table .sheet-v { font-weight: 600; white-space: nowrap; }
.sheet-in { width: 100%; min-width: 0; height: 38px; padding: 6px 10px; font-size: 14px; border: 1px solid var(--color-hairline); border-radius: 6px; background: transparent; color: inherit; font: inherit; }
.sheet-in:focus { outline: 2px solid var(--color-ink); outline-offset: -1px; } .sheet-amt { text-align: right; min-width: 120px; } .sheet-desc { min-width: 200px; } .sheet-date { min-width: 118px; }
.sheet-done td { color: var(--text-quiet); } .sheet-done.is-live td { color: inherit; } .sheet-act { white-space: nowrap; display: flex; gap: 8px; align-items: center; } .sheet-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; } .sheet-sum { margin-left: auto; font-size: 13px; }
.mini-chip.ok { color: var(--color-ok, #1e7a3b); } .mini-chip.warn { color: var(--color-crit, #bb2d22); }
.link-btn { background: none; border: 0; padding: 0; color: var(--color-link, var(--color-ink)); text-decoration: underline; cursor: pointer; font: inherit; }
/* v308 마감 상태 · 매장별 */
.cs-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.cs-title { font-size: 12px; color: var(--text-muted); margin-right: 4px; }
.cs-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--color-hairline); background: transparent; font: inherit; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.cs-chip svg { width: 12px; height: 12px; } .cs-chip.is-ok { color: var(--color-ok, #1e7a3b); border-color: currentColor; } .cs-chip.is-warn { color: var(--color-warn, #8a5400); border-color: currentColor; font-weight: 600; }
.cs-chip:hover { background: var(--color-wash, rgba(0,0,0,.04)); }
.pl-bystore th.sum-cat { font-weight: 600; }
/* v307 매장 다중 · 원가율 */
.st-multi { width: 300px; } .st-multi-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 6px 0; max-height: 220px; overflow: auto; }
.st-multi-row { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.st-multi-inline { display: flex; flex-wrap: wrap; gap: 4px 8px; } .st-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 6px; border: 1px solid var(--color-hairline); border-radius: 999px; cursor: pointer; } .st-chip:has(input:checked) { border-color: var(--color-ink); color: var(--color-ink); }
.st-multi-inline .ms-pop-pos { flex-basis: 100%; margin: 2px 0 0; }
.ci-split { margin-left: 2px; } .ci-split svg { width: 12px; height: 12px; }
.pl-cogs { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--text-muted); } .pl-cogs input { width: 64px; text-align: right; padding: 4px 6px; border: 1px solid var(--color-hairline); border-radius: 6px; background: transparent; color: inherit; font: inherit; }
/* v306 조정 항목 */
.adj-pop { width: 360px; } .adj-pop .ms-f { grid-template-columns: 64px 1fr; } .adj-pop .a-select { width: 100%; } .adj-pop .rc-period { display: flex; align-items: center; gap: 6px; } .adj-pop .prop-input { min-width: 0; }
.pl-pop-row.is-adj { cursor: default; } .pl-pop-row.is-adj:hover { background: transparent; }
/* v302 손익 */
.pl-table tr.pl-sec td, .pl-table tr.pl-grp td { border-bottom: 0; }
.pl-table tr.pl-sec th { white-space: nowrap; padding-top: 14px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-quiet); font-weight: 600; border-bottom: 0; }
.pl-table tr.pl-grp th { color: var(--text-muted); font-weight: 600; font-size: 12px; border-bottom: 0; padding-top: 8px; }
.pl-table tr.pl-sub th.sum-cat { padding-left: 22px; font-weight: 400; color: var(--text-muted); }
.pl-table tr.pl-profit td, .pl-table tr.pl-profit th { border-top: 2px solid var(--color-ink); font-weight: 700; }
.pl-table tr.pl-margin th, .pl-table tr.pl-margin td { color: var(--text-quiet); font-size: 12px; }
.pl-table td.pl-drill { cursor: pointer; text-decoration: underline dotted var(--color-hairline); text-underline-offset: 3px; }
.pl-table td.pl-drill:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }
.pl-table tr.pl-pending th, .pl-table tr.pl-pending td { font-style: italic; }
.pl-final { color: var(--color-ink); } .pl-final svg { width: 10px; height: 10px; vertical-align: -1px; }
.pl-pop { width: 340px; padding: 10px 12px; }
.pl-pop-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; width: 100%; text-align: left; padding: 6px 4px; border: 0; border-top: 1px solid var(--color-hairline); background: transparent; font: inherit; color: inherit; cursor: pointer; }
.pl-pop-row:hover { background: var(--color-wash, rgba(0,0,0,.04)); } .pl-pop-d { color: var(--text-quiet); font-size: 12px; } .pl-pop-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-table td.is-neg { color: var(--color-crit, var(--sys-red-text)); }
/* v296 월별 매출 — 셀 편집 · 출처 표식 · 정산서 대비 */
.ms-table td.ms-cell { cursor: pointer; }
.ms-table td.is-empty { color: var(--text-quiet); }
.ms-table td.is-manual { font-weight: var(--weight-semibold); box-shadow: inset 3px 0 0 var(--color-ink); }
.ms-table td.is-pos { box-shadow: inset 3px 0 0 var(--color-hairline); }
.ms-table td.is-partial { color: var(--text-muted); font-style: italic; }
.ms-mh { white-space: nowrap; }
.ms-lock { display: block; margin: 2px 0 0 auto; padding: 0 6px; height: 18px; line-height: 16px; font-size: 11px; font-weight: 500; border: 1px solid var(--color-hairline); border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; }
.ms-lock:hover { color: var(--color-ink); border-color: var(--color-ink); }
.ms-lock.is-on { color: var(--color-ink); border-color: var(--color-ink); } .ms-lock svg { width: 11px; height: 11px; vertical-align: -1px; }
.ms-empty { margin: 10px 0 0; padding: 12px 14px; border: 1px dashed var(--color-hairline); border-radius: var(--radius); color: var(--text-muted); font-size: 13px; }
.ms-inactive { font-size: 11px; color: var(--text-quiet); font-weight: 400; }
.ms-unmatched { margin-bottom: 16px; }
.ms-um-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-hairline); flex-wrap: wrap; }
.ms-um-row b { min-width: 140px; } .ms-um-arrow { color: var(--text-quiet); }
.ms-diff { font-size: 11px; color: var(--text-quiet); font-weight: 400; }
.ms-diff.up { color: var(--color-warn, #8a5400); } .ms-diff.down { color: var(--color-crit, #bb2d22); }
.ms-pop { position: absolute; z-index: 60; box-sizing: border-box; width: 290px; max-width: calc(100vw - 16px); padding: 12px 14px; border-radius: var(--radius); background: var(--color-canvas, #fff); border: 1px solid var(--color-hairline); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.12)); }
.ms-pop-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.ms-f { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; color: var(--text-muted); }
.ms-f .ci-amt { width: 100%; }
.ms-pop-pos { font-size: 11.5px; color: var(--text-quiet); margin: 8px 0; }
.ms-pop-diff { font-size: 11.5px; color: var(--text-quiet); min-height: 14px; margin: -4px 0 8px; } .ms-pop-diff.is-warn { color: var(--color-crit, #bb2d22); font-weight: 600; }
.ms-pop-b { display: flex; justify-content: flex-end; gap: 8px; } .ms-pop-b .ms-del { margin-right: auto; color: var(--color-crit, #bb2d22); }
/* v252 링크 타입 커스텀 컬럼 */
.cell-link, .prop-link-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cell-link input, .prop-link-cell input { flex: 1; min-width: 0; }
.cell-link-go, .prop-link-go { flex-shrink: 0; display: inline-flex; color: var(--color-action-blue); }
.cell-link-go .ic, .prop-link-go .ic { width: 14px; height: 14px; }
.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; }
/* PWA: "앱 설치" 필 — 설치 가능할 때만 노출. 어두운 네비 위에서 흰 알약으로 눈에 띄게. */
.nav-install { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 11px; border-radius: var(--radius-pill); background: #fff; color: var(--color-ink); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: -0.1px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.nav-install:hover { background: #f0f0f3; }
.nav-install .ic { width: 15px; height: 15px; }

/* 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; }
/* 셀프 메모(나와의 DM) 사이드바 항목 — 아이콘 강조 + 아래 구분선으로 상단 고정임을 표시 */
.chs-item.chs-self .chs-ic { color: var(--color-action-blue); }
.chs-item.chs-self { border-bottom: 1px solid var(--divider-soft); border-radius: 0; margin-bottom: 2px; padding-bottom: 8px; }
/* 인앱 알림 토스트 — 같은 탭(포그라운드)에서 크리스톡 메시지·결재 알림을 우상단에 팝업. 데스크톱 우상단(nav 아래) / 모바일 하단. FAB·독(우하단)과 겹치지 않게 */
#napp-host { position: fixed; top: 104px; right: 20px; z-index: 360; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; max-width: min(360px, calc(100vw - 32px)); }
.napp { pointer-events: auto; width: 340px; max-width: 100%; box-sizing: border-box; display: flex; align-items: flex-start; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,0.18); overflow: hidden; transform: translateX(26px); opacity: 0; transition: transform .24s var(--ease-out), opacity .24s; }
.napp.in { transform: translateX(0); opacity: 1; }
.napp-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 4px 12px 13px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; }
.napp-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--color-action-blue); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.napp-ic .ic, .napp-ic svg { width: 15px; height: 15px; }
.napp-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.napp-tx b { font-size: 13px; color: var(--color-ink); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.napp-b { font-size: 12px; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.napp-x { flex-shrink: 0; width: 32px; align-self: stretch; background: none; border: none; color: var(--text-quiet); font-size: 17px; cursor: pointer; }
.napp-x:hover { color: var(--color-ink); }
html[data-theme="dark"] .napp { background: #232326; border-color: var(--color-hairline); }
@media (max-width: 640px) { #napp-host { top: auto; bottom: 84px; left: 10px; right: 10px; max-width: none; align-items: stretch; } .napp { width: 100%; } }
.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%; }
/* omni 빈 화면 대신 검색 범주 안내 */
.os-hint { padding: 22px 14px; text-align: center; }
.os-hint-t { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-quiet); margin-bottom: 12px; }
.os-hint-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.os-cat-chip { font-size: 12px; color: var(--text-muted); background: var(--color-surface-chip, rgba(120,120,128,0.12)); padding: 5px 11px; border-radius: 20px; }
/* 주간 통합 시트: 행 클릭 가능 발견성(hover/커서) */
.wu-srow { cursor: pointer; }
.wu-srow:hover td { background: var(--color-canvas-parchment); }
.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); }
/* 단축키 도움말 오버레이 */
.sk-box { max-width: 460px; }
.sk-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.sk-row { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.sk-row kbd { flex-shrink: 0; min-width: 118px; font-family: inherit; font-size: 11.5px; padding: 4px 8px; text-align: center; background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); border-radius: 6px; color: var(--text-muted); font-weight: var(--weight-semibold); }
.sk-row span { color: var(--color-ink); }
.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: 8px; 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 1px 0 0 rgba(10,132,255,0.35); }
.task-row.depth-2 > .cell-title { box-shadow: inset 1px 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 1px 0 0 rgba(63,149,245,0.5); }
html[data-theme="dark"] .task-row.depth-2 > .cell-title { box-shadow: inset 1px 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; flex-wrap: wrap; }
.syncfail-diag { flex-basis: 100%; margin-top: 3px; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(255,255,255,0.9); word-break: break-all; }
/* 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: 1px solid var(--color-hairline); 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; }

/* 브라우저(OS) 팝업 알림 켜기/상태 — 알림 패널 하단 */
.ntf-bn-row { padding: 10px 14px 0; }
.ntf-bn { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 9px; font-size: 12px; font-weight: var(--weight-semibold); border: 1px solid transparent; text-align: left; }
.ntf-bn .ic, .ntf-bn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ntf-bn.is-cta { background: var(--color-action-blue); color: #fff; cursor: pointer; }
.ntf-bn.is-cta:hover { filter: brightness(1.06); }
.ntf-bn.is-on { background: rgba(10,125,51,0.12); color: #0a7d33; }
.ntf-bn.is-off { background: rgba(200,54,44,0.1); color: #c8362c; }
html[data-theme="dark"] .ntf-bn.is-on { background: rgba(48,209,88,0.14); color: #4ade80; }
html[data-theme="dark"] .ntf-bn.is-off { background: rgba(255,69,58,0.14); color: #ff9a92; }
/* 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%, #1d1d20 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); }
/* 모바일: 표/캘린더/완료·보관 세그먼트 터치 타깃 확대 (base 규칙 뒤에 둬야 미디어쿼리가 이김 — 소스 순서상 앞이면 덮어써짐) */
@media (max-width: 640px) { .gz-b { padding: 8px 13px; } }
.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-cell:focus-visible { outline: 2px solid var(--color-focus-blue); outline-offset: -2px; }
.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; }
/* N2(R1): 임계액 초과(사전승인 대상) 배너 — 반려(빨강)와 구분되는 경고 앰버 */
.breach-banner { background: rgba(255,149,0,0.10); border-color: rgba(255,149,0,0.38); color: var(--sys-orange-text); }
html[data-theme="dark"] .breach-banner { background: rgba(255,159,10,0.14); border-color: rgba(255,159,10,0.42); color: #ffb85c; }
.breach-inline { color: var(--sys-orange-text); font-weight: var(--weight-semibold); }
/* 보완요청 배너 — 반려(빨강)와 구분해 오렌지(경고) 톤 */
.rev-banner { background: rgba(255,159,10,0.09); border-color: rgba(255,159,10,0.32); color: var(--sys-orange-text); }
html[data-theme="dark"] .rev-banner { background: rgba(255,159,10,0.14); border-color: rgba(255,159,10,0.4); color: #ffcb6b; }
/* 비용 반려 이력 */
.rejhist-list { display: flex; flex-direction: column; gap: 8px; }
.rejhist-item { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 8px 10px; background: var(--color-surface-chip, rgba(120,120,128,0.1)); border-radius: 8px; }
.rejhist-t { font-size: 13px; color: var(--color-ink); }
.rejhist-item small { color: var(--text-quiet); white-space: nowrap; }
.cal-chip.cal-cost { background: rgba(255,159,10,0.14); color: var(--sys-orange-text); font-variant-numeric: tabular-nums; }
.cal-legend { margin-top: 12px; flex-wrap: wrap; }
.cal-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 20px 8px 4px; }
.filter-count { margin-left: auto; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
.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; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* 사용자 매뉴얼 진입 버튼 (홈 히어로 우측) */
.home-manual { flex-shrink: 0; margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--color-hairline); background: var(--color-canvas); color: var(--color-ink); font-size: 13px; font-weight: var(--weight-semibold); text-decoration: none; letter-spacing: -0.1px; transition: background var(--dur-fade), border-color var(--dur-fade), transform var(--dur-fade); }
.home-manual:hover { background: var(--color-canvas-parchment); border-color: var(--color-hairline-strong, #d2d2d6); transform: translateY(-1px); }
.home-manual svg { color: var(--color-action-blue); }
html[data-theme="dark"] .home-manual { background: #26262b; border-color: rgba(255,255,255,0.14); color: #f2f2f4; }
html[data-theme="dark"] .home-manual:hover { background: #303036; border-color: rgba(255,255,255,0.22); }
@media (max-width: 560px) { .home-manual span { display: none; } .home-manual { padding: 0 11px; margin-top: 2px; } }
.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.is-zero { cursor: default; opacity: 0.55; }
.home-stat.is-zero:hover { transform: none; box-shadow: none; } /* 0건은 클릭 대상 아님 — 헛동작 방지 */
.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; }
.home-item .hi-age { font-size: 11px; color: var(--text-quiet); } /* R6 W-H1: 미결 의사결정 경과주(방치기간) */
.home-item .hi-age.over { color: var(--sys-red-text); font-weight: var(--weight-semibold); }
.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-sheet-wrap { overflow-x: auto; border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); background: var(--color-surface); }
.wu-sheet { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.wu-sheet th { text-align: left; font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); padding: 11px 14px; border-bottom: 1px solid var(--color-hairline); background: var(--color-surface-pearl); white-space: nowrap; }
.wu-sheet td { padding: 12px 14px; border-bottom: 1px solid var(--divider-soft); vertical-align: middle; }
.wu-sheet tbody tr:last-child td { border-bottom: none; }
.wu-srow { cursor: pointer; transition: background var(--dur-fade); }
.wu-srow:hover, .wu-srow:focus-visible { background: var(--color-surface-pearl); outline: none; }
.wu-scell-name { font-weight: var(--weight-semibold); white-space: nowrap; }
.wu-scell-name .wk-ent-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.wu-num { text-align: center; font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.wu-num svg { width: 11px; height: 11px; vertical-align: -1px; }
.wu-risk { color: var(--text-muted); max-width: 340px; }
.wu-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: var(--weight-semibold); padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.wu-st small { font-weight: 400; opacity: .82; margin-left: 2px; }
.wu-st.ok { background: rgba(52,199,89,0.12); color: var(--sys-green-text); }
.wu-st.draft { background: rgba(255,159,10,0.12); color: var(--sys-orange-text); }
.wu-st.none { background: var(--color-surface-pearl); color: var(--text-quiet); }
.wu-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: var(--weight-semibold); padding: 2px 7px; border-radius: var(--radius-pill); margin-right: 4px; }
.wu-badge svg { width: 10px; height: 10px; }
.wu-badge.wait { background: rgba(255,159,10,0.14); color: var(--sys-orange-text); }
.wu-badge.ok { background: rgba(52,199,89,0.12); color: var(--sys-green-text); }
.wu-badge.no { background: rgba(255,59,48,0.12); color: var(--sys-red-text); }
/* 카드 제출 배지 */
.wu-submitted { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--sys-green-text); }
.wu-submitted small { font-weight: 400; color: var(--text-muted); }
.wu-draft { font-size: 12px; font-weight: var(--weight-semibold); color: var(--sys-orange-text); }
/* W-M1: 주간 제출 마감/지연 칩 */
.wu-dl-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: var(--weight-semibold); padding: 2px 8px; border-radius: 999px; background: var(--color-surface-pearl); color: var(--text-muted); border: 1px solid var(--color-hairline); white-space: nowrap; }
.wu-dl-chip .ic { width: 12px; height: 12px; }
.wu-dl-chip.soon { color: var(--sys-orange-text); border-color: color-mix(in srgb, var(--sys-orange-text) 30%, transparent); }
.wu-dl-chip.over, .wu-dl-chip.late { color: var(--sys-red-text); background: color-mix(in srgb, var(--sys-red-text) 8%, transparent); border-color: color-mix(in srgb, var(--sys-red-text) 30%, transparent); }
.wu-unsub { color: var(--text-muted); margin-left: 2px; }
/* 구조화 의사결정 — 컴팩트 카드 행 */
.dec-item { display: block; width: 100%; text-align: left; background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 10px 13px 11px 15px; margin-bottom: 7px; cursor: pointer; transition: border-color var(--dur-fade), box-shadow var(--dur-fade), transform var(--dur-fade); position: relative; font: inherit; overflow: hidden; }
.dec-item::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-hairline); transition: background var(--dur-fade); }
.dec-item:hover { box-shadow: 0 3px 12px rgba(15,23,42,0.06); transform: translateY(-1px); }
.dec-item:focus-visible { border-color: var(--color-action-blue); outline: none; }
.dec-item-head { display: flex; align-items: center; min-height: 16px; margin-bottom: 3px; }
.dec-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--text-muted); }
.dec-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dec-item-title { font-size: 14px; line-height: 1.4; color: var(--color-ink); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.dec-item-sub { margin-top: 5px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 11.5px; color: var(--text-muted); }
.dec-item-sub .rec { color: var(--color-action-blue); }
.dec-sep { font-style: normal; color: var(--text-muted); opacity: 0.5; }
.dec-due { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; }
.dec-due svg { width: 11px; height: 11px; }
.dec-due.soon { color: var(--sys-orange-text); font-weight: var(--weight-semibold); }
.dec-due.over { color: var(--sys-red-text); font-weight: var(--weight-semibold); }
/* W-M2: 대기 안건 등록 경과 — 메타 라인의 muted 시계 칩 */
.dec-age { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); }
.dec-age svg { width: 11px; height: 11px; }
.dec-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); padding: 1px 7px; }
.dec-meta svg { width: 10px; height: 10px; }
.dec-meta.late { color: var(--sys-red-text); background: rgba(255,59,48,0.1); border-color: transparent; }
.dec-meta.rec { color: var(--color-action-blue); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dec-item-rec { margin-top: 4px; }
.dec-chosen { margin-top: 5px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--sys-green-text); display: flex; align-items: center; gap: 4px; }
.dec-chosen svg { width: 12px; height: 12px; }
.dec-rej { margin-top: 5px; font-size: 12px; color: var(--sys-red-text); display: flex; align-items: flex-start; gap: 4px; }
.dec-directive { margin-top: 5px; font-size: 12px; color: var(--color-action-blue); display: flex; align-items: flex-start; gap: 4px; } /* R4-W3: HQ 지시(hqNote) — 파란 정보 라인 */
.dec-directive svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; }
/* 삭제 버튼: 우상단, 호버 시 노출 (평소엔 카드가 깔끔) */
.dec-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: opacity var(--dur-fade), background var(--dur-fade), color var(--dur-fade); }
.dec-del svg { width: 13px; height: 13px; }
.dec-item:hover .dec-del, .dec-del:focus-visible { opacity: 0.6; }
.dec-del:hover { opacity: 1; background: rgba(255,59,48,0.1); color: var(--sys-red-text); }
/* 상태별 좌측 색띠(::before) + 상태 도트 색 (A~D 다듬기) */
.dec-item.dec-st-wait::before { background: rgba(255,159,10,0.85); }
.dec-item.dec-st-over::before { background: var(--sys-red-text); }
.dec-item.dec-st-ok::before { background: var(--sys-green-text); }
.dec-item.dec-st-no::before { background: rgba(255,59,48,0.45); }
.dec-item.dec-st-over { background: rgba(255,59,48,0.04); }
.dec-st-wait .dec-badge { color: var(--sys-orange-text); }
.dec-st-over .dec-badge { color: var(--sys-red-text); }
.dec-st-ok .dec-badge { color: var(--sys-green-text); }
.dec-st-no .dec-badge { color: var(--sys-red-text); }
.dec-by-info { margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.dec-decided-by { font-size: 11px; color: var(--text-muted); }
/* #142: 프롬프트(반려사유 등) 텍스트영역 — 세련된 입력 */
.prompt-ta { width: 100%; box-sizing: border-box; margin: 6px 0 16px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--color-ink); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); resize: none; outline: none; transition: border-color var(--dur-fade), box-shadow var(--dur-fade); }
.prompt-ta::placeholder { color: var(--text-quiet, #6b6b70); } /* R2-QA(접근성M4): --text-faint 미정의(폴백 2.6:1)였음 → AA-safe --text-quiet 로 */
.prompt-ta:focus { border-color: var(--color-action-blue); box-shadow: 0 0 0 3px rgba(10,132,255,0.12); }
.prompt-ta.multi { min-height: 88px; resize: vertical; line-height: 1.55; }
/* R2-QA 접근성 배치: 신규 버튼 히트영역 확장 + 터치기기 노출 + 좁은 화면 컴포저 방어 */
.dec-del::before { content: ""; position: absolute; inset: -10px; } /* H2: 24px 버튼 터치 히트영역 44px 확보 */
.cmp-att-x { position: relative; }
.cmp-att-x::before { content: ""; position: absolute; inset: -8px; } /* M6: 첨부칩 × 터치 확장 */
.a-brand-home { padding: 6px 4px; margin: -6px -4px; } /* L1: 로고 홈버튼 세로 히트영역 */
.chat-composer .chat-in { min-width: 0; } /* M5: flex-wrap 컴포저에서 send 버튼 줄바꿈 방지 */
/* Msg-M4: 비활성 상대 DM — 컴포저 대신 안내(입력 자체를 막아 조용한 실패 제거) */
.chat-composer-off { justify-content: center; }
.cco-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); text-align: center; }
.cco-note .ic { width: 14px; height: 14px; flex-shrink: 0; }
@media (hover: none) { .dec-del { opacity: 0.55; } } /* H1: 호버 없는 터치기기에서 의사결정 삭제 버튼 노출 */
.wu-badge.wait.over { background: rgba(255,59,48,0.14); color: var(--sys-red-text); }
html[data-theme="dark"] .dec-item.dec-st-over { background: rgba(255,59,48,0.08); }
html[data-theme="dark"] .dec-item:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.3); }
html[data-theme="dark"] .dec-item { background: rgba(255,255,255,0.04); }
/* 의사결정 편집 모달 */
.dec-box { background: var(--color-canvas); border-radius: var(--radius-lg); width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.28); }
.dec-head { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--color-hairline); }
.dec-head b { font-size: 15px; }
.dec-head .btn-mini.x { margin-left: auto; }
.dec-stchip { font-size: 11px; font-weight: var(--weight-semibold); padding: 2px 9px; border-radius: var(--radius-pill); }
.dec-stchip.wait { background: rgba(255,159,10,0.14); color: var(--sys-orange-text); }
.dec-stchip.ok { background: rgba(52,199,89,0.12); color: var(--sys-green-text); }
.dec-stchip.no { background: rgba(255,59,48,0.12); color: var(--sys-red-text); }
.dec-body { padding: 4px 20px 16px; overflow-y: auto; }
.dec-l { display: block; font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); margin: 15px 0 5px; }
.dec-hint { font-weight: 400; color: var(--text-quiet); }
.dec-body #dec-bg, .dec-body #dec-opts { min-height: 56px; }
.dec-body #dec-note { min-height: 50px; }
/* 의사결정 모달 인풋 세련화 — 안건(텍스트)·기한(커스텀 데이트피커)을 앱 표준 인풋 스타일로 */
.dec-body .txt, .dec-body input.dp { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background-color: var(--color-canvas); color: var(--color-ink); outline: none; transition: border-color var(--dur-fade), box-shadow var(--dur-fade); }
.dec-body .txt::placeholder, .dec-body input.dp::placeholder { color: var(--text-quiet); }
.dec-body .txt:focus, .dec-body input.dp:focus { border-color: var(--color-focus-blue); box-shadow: 0 0 0 3px rgba(0,102,204,0.12); }
.dec-body #dec-title { font-size: 15px; font-weight: var(--weight-semibold); letter-spacing: -0.1px; }
.dec-body .txt:disabled, .dec-body input.dp:disabled { background-color: var(--color-canvas-parchment); color: var(--text-muted); cursor: default; }
/* 기한 date 인풋: 클릭 시 커스텀 달력 팝오버 + 달력 아이콘 */
.dec-body input.dec-date { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 36px; }
html[data-theme="dark"] .dec-body input.dec-date { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23aeaeb2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.dec-hq { margin-top: 18px; padding-top: 8px; border-top: 1px dashed var(--color-hairline); }
.dec-hq .field { margin-top: 14px; }
.dec-hq .field > label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); }
.dec-hq [data-act="revert"] { margin-top: 16px; }
.dec-actions { display: flex; gap: 8px; margin-top: 16px; }
.dec-chosen-ro { font-size: 13px; font-weight: var(--weight-semibold); color: var(--sys-green-text); display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.dec-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--color-hairline); }
.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: 12px; 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: 13px; 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: 12px; }
.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: 11px; 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: 13px; 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: 11px; 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-side-toggle { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; color: var(--color-ink); background: transparent; }
.chm-side-toggle:hover { background: var(--color-canvas-parchment); }
.chat-side-scrim { display: none; }
.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: 12px; 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: 13px; }
.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: 8px; }
.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: 8px; 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; }
/* Storage 이미지: 클릭 시 원본 열기 버튼 래퍼 + 서명URL 도착 전 로딩 플레이스홀더 */
.chat-imgwrap.simg-btn { appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: none; cursor: pointer; display: inline-block; }
.chat-img.simg { min-width: 120px; min-height: 84px; background: var(--color-surface-pearl); object-fit: cover; }
.chat-img.simg:not([src]), .chat-img.simg[src=""] { background: var(--color-surface-pearl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23aab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/28px no-repeat; }
html[data-theme="dark"] .chat-img.simg { background-color: rgba(255,255,255,0.05); }
.chat-imgwrap.simg-fail .chat-img { display: none; }
.chat-imgwrap.simg-fail::after { content: "🖼️"; font-size: 13px; opacity: .6; }
.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: 1px solid var(--color-hairline); 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: 13px; 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: 13px; }
/* 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; flex-wrap: wrap; }
/* #148: 전송 전 스테이징된 첨부 칩 (입력줄 위에 표시) */
.cmp-attaches { flex-basis: 100%; order: -1; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.cmp-att { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; padding: 4px 5px 4px 8px; background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); font-size: 12px; color: var(--color-ink); }
.cmp-att .ic { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }
.cmp-att-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-att-x { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 15px; line-height: 1; padding: 0 3px; border-radius: 4px; flex-shrink: 0; }
.cmp-att-x:hover { color: var(--sys-red-text); background: rgba(255,59,48,0.1); }
.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; }
/* J3: 보내기 버튼 상태 피드백 — 비었을 땐 딤/비활성, 내용·첨부 있을 때만 활성(Enter 준비 신호) */
.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), opacity var(--dur-fade); opacity: 0.4; cursor: default; }
.chat-send.is-ready { opacity: 1; cursor: pointer; }
.chat-send.is-ready:hover { filter: brightness(1.12); }
.chat-send svg { width: 16px; height: 16px; }
/* J1: 과거를 읽는 동안 최신으로 돌아올 플로팅 버튼 — 스크롤 컨테이너 하단 중앙에 sticky 로 고정 */
.chat-jump-anchor { position: sticky; bottom: 12px; z-index: 4; display: flex; justify-content: center; height: 0; overflow: visible; pointer-events: none; }
.chat-jump { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--color-action-blue); color: #fff; font-family: inherit; font-size: 12px; font-weight: var(--weight-semibold); box-shadow: 0 4px 14px rgba(0,0,0,0.18); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-fade), transform var(--dur-fade); }
.chat-jump.show { opacity: 1; transform: none; }
.chat-jump:not(.show) { pointer-events: none; }
.chat-jump:hover { filter: brightness(1.08); }
.chat-jump svg { width: 14px; height: 14px; }
.chat-jump .cj-badge { background: #fff; color: var(--color-action-blue); border-radius: 999px; padding: 0 6px; font-size: 11px; line-height: 16px; min-width: 16px; text-align: center; }
html[data-theme="dark"] .chat-jump .cj-badge { background: var(--color-canvas); color: #7fbcff; }
.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; position: relative; }
.thread-rs { position: absolute; left: -3px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 6; }
.thread-rs:hover, .chat-thread.resizing .thread-rs { background: var(--color-action-blue); opacity: 0.28; }
.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: 11px; 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; } }
/* 모바일 메신저: 데스크톱 2-pane 를 폰에 욱여넣던 68px 아이콘 레일을 폐기 → 대화는 전체폭, 채널 목록은 좌측 슬라이드 드로어(≡ 햄버거로 열고 스크림/채널선택으로 닫힘). .chat-side 는 인라인 flex-basis + 뒤쪽 base(.chat-side{position:relative}) 규칙이 있어 구조 속성은 !important 로 확실히 덮음(인라인·소스순서 함정 회피) */
@media (max-width: 760px) {
  .chm-side-toggle { display: inline-flex; }
  .chat-side {
    position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; z-index: 46 !important;
    flex: 0 0 auto !important; width: 84% !important; max-width: 300px !important;
    transform: translateX(-102%) !important; transition: transform 0.24s cubic-bezier(0.4,0,0.2,1); box-shadow: 10px 0 34px rgba(0,0,0,0.18);
  }
  .chat-side.is-open { transform: translateX(0) !important; } /* 요소 직접 클래스 — 자손 셀렉터 회피(확실한 매칭) */
  .chat-side-scrim { display: block; position: absolute; inset: 0; z-index: 45; background: rgba(0,0,0,0.34); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  .chat-side-scrim.is-open { opacity: 1 !important; pointer-events: auto !important; }
  /* 모바일 채널 헤더: 제목 truncate(남은 폭 차지) + 툴바는 필요 시 아래로 래핑 */
  .chm-head { flex-wrap: wrap; row-gap: 6px; }
  .chm-titlewrap { flex: 1 1 120px; min-width: 0; }
  .chm-tools { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .chm-search input { width: 108px; }
  /* 모바일 컴포저: 입력창을 한 줄 전체로(order:-1), 액션 버튼은 아래 줄 */
  .chat-main .chat-composer .chat-in { flex: 1 1 100%; order: -1; }
}
@media (max-width: 640px) {
  .chm-search { display: none; } /* 인채널 검색은 폰에서 숨김 — 상단 옴니서치로 대체, 헤더 1줄 유지 */
  .chm-topic { display: none; } /* 토픽 부제는 폰에서 숨김(채널 상세에서 확인) — 헤더 높이 절약 */
}
/* 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: 12px; 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); touch-action: none; cursor: grab; }
#chat-fab.dragging { cursor: grabbing; transition: none; }
#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: 8px; 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); }
/* R3-QA: DM 상세 팝오버의 "DM" 배지 — 마크업만 있고 스타일이 없어 맨텍스트로 렌더되던 것. 토큰 경유라 다크에서도 대비 유지 */
.cdp-dm { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: .04em; color: var(--text-quiet); background: var(--color-surface-chip); border: 1px solid var(--divider-soft); border-radius: 5px; padding: 1px 5px; line-height: 1.5; }
.cdp-topic { font-size: 12px; 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: 8px; 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: 12px; 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: 12px; }
/* 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: 13px; 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; }
  /* Q2(R1): 비용 드로어 결재(승인/반려) 버튼도 44px 터치타깃 — 나란히 붙은 두 버튼 오탭 방지 위해 간격도 확보 */
  .cost-approve .btn, [data-action="approve-cost-drawer"], [data-action="reject-cost-drawer"] { min-height: 44px; }
  [data-action="approve-cost-drawer"], [data-action="reject-cost-drawer"] { flex: 1; }
  /* Q3(R1): 드로어(전체폭)가 열려 있는 동안 채팅 FAB·독 숨김 — 하단 우측 겹침/오탭 제거 */
  body.drawer-open #chat-fab, body.drawer-open #chat-dock { display: none !important; }
}
/* 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; }
/* 폰: 채팅 헤더 팝오버(멤버/저장/핀/상세/더보기)는 헤더 버튼이 좁은 좌측에 몰려 right:0 앵커가 화면 왼쪽 밖으로 밀림 → 바텀시트로 고정(항상 화면 안, 앵커 위치 무관) */
@media (max-width: 640px) {
  .chat-memberpop, .chat-savedpop, .chat-pinpop, .chat-detailpop, .chat-morepop {
    position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px;
    width: auto; max-width: none; max-height: 62vh; overflow-y: auto;
  }
}
/* touch: reveal hover-only message actions (no hover on touch devices) */
/* 터치: 호버가 없어 예전엔 모든 메시지의 액션바를 상시 표시 → 메시지마다 메뉴가 떠 있는 것처럼 보였음. 이제 탭한 메시지(.acts-open)만 표시. focus-within 상시노출도 끔(탭 토글과 충돌 방지) */
@media (hover: none) {
  .chat-msg .cm-acts, .chat-msg:focus-within .cm-acts { display: none; }
  .chat-msg.acts-open .cm-acts { display: inline-flex !important; }
  .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: 12px; 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: 12px; 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,
  #save-indicator, .tour-overlay, /* R3-QA: 저장 인디케이터 + 온보딩 투어가 열린 채로 인쇄되면 종이에 떠버림 (다른 모달은 .os-overlay 로 이미 숨김) */
  .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; }
}

/* ── 일본 매출 대시보드 (jpsales) — sales.html 임베드 프레임 ─────────────────
   대시보드는 라이트 전용 디자인의 독립 페이지라 다크 모드에서도 내용은 라이트 유지 */
.jps-frame {
  width: 100%;
  height: calc(100vh - 176px); /* a-nav + subbar + 여백을 뺀 가용 높이 */
  min-height: 560px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background: #faf9f5; /* 대시보드 자체 배경색 — 로드 전 흰 플래시 방지 */
  display: block;
}
@media print { .jps-frame { display: none !important; } }

/* v311c 지급일 묶음: 캐럿이 오른쪽으로 밀리던 것(.sec-caret margin-left:auto) */
.pb-head .sec-caret { margin-left: 0; }

/* v311 시트 열 겹침 방지: 표 최소폭 + 계정·매장 세로 배치 */
.sheet-table { min-width: 1240px; } .sheet-ax { white-space: normal; } .sheet-ax .sheet-pick { display: block; max-width: 170px; margin-bottom: 4px; } .sheet-table td.sheet-v .sheet-pick { max-width: 170px; }

/* v312 전년 비교 */
.pl-yoy td { font-size: 11.5px; } .pl-yoy-v { color: var(--text-quiet); } .pl-yoy-p { margin-left: 4px; font-weight: 600; color: var(--color-ok, #1e7a3b); } .pl-yoy-p.is-neg { color: var(--color-crit, var(--sys-red-text)); }

/* v315 손익 툴바 정렬 · 겹침 경고 */
.pl-bar { justify-content: flex-start; gap: 8px; } .pl-bar > * { flex: 0 0 auto; margin: 0; } .pl-bar .pl-cogs { margin-left: auto; } .pl-bar .m-seg { margin: 0 4px; }
.rc-overlap { color: var(--color-warn, #8a5400); font-weight: 600; }

/* v316 월별 내역 · 비용 탭 법인 구분 */
.cost-subseg { margin: 0 0 12px; }
.mx-table td.mx-cell { cursor: pointer; text-decoration: underline dotted var(--color-hairline); text-underline-offset: 3px; } .mx-table td.mx-cell:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }
.mx-table td.is-pending { font-style: italic; color: var(--text-muted); } .mx-table th.is-last, .mx-table td.is-last { background: color-mix(in srgb, var(--color-ink) 4%, transparent); }
.mx-table td.mx-empty { color: var(--text-quiet); } .mx-n { font-size: 10px; color: var(--text-quiet); margin-left: 3px; }
.mx-delta.is-up { color: var(--color-crit, #bb2d22); font-weight: 600; } .mx-delta.is-down { color: var(--color-ok, #1e7a3b); font-weight: 600; }
.mx-v .ms-diff { font-weight: 400; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v316b 월별 내역: 거래처·내용 열 고정을 명시(표 최소폭으로 카드 안에서만 가로 스크롤) */
.mx-table { min-width: 1380px; }
.mx-table thead th:first-child, .mx-table tbody th.mx-v, .mx-table tbody tr.sum-foot th { position: sticky; left: 0; z-index: 2; background: var(--color-canvas, #fff); box-shadow: 1px 0 0 var(--color-hairline); min-width: 240px; }
.mx-table thead th:first-child { z-index: 3; }

/* v317 증감 사유 */
.mx-table { min-width: 0; } .mx-note-td { min-width: 220px; } .mx-note { height: 32px; font-size: 13px; }

/* v319 일별 내역 */
.dm-table td.is-ready { box-shadow: inset 0 0 0 2px var(--color-ok, #1e7a3b); font-style: normal; color: var(--color-ink); }
.dm-day .ms-lock { margin: 4px 0 0 auto; color: var(--color-ok, #1e7a3b); border-color: currentColor; font-weight: 600; }
.dm-pop { width: 380px; } .dm-item { padding: 8px 0; border-top: 1px solid var(--color-hairline); } .dm-item-h { display: flex; justify-content: space-between; gap: 10px; } .dm-item-m { font-size: 12px; color: var(--text-muted); margin: 4px 0 6px; } .dm-item-m .ok { color: var(--color-ok, #1e7a3b); } .dm-item-m .warn { color: var(--color-crit, #bb2d22); } .dm-item-b { display: flex; gap: 8px; justify-content: flex-end; }

/* v320 일별 합계 승인 */
.dm-foot td { vertical-align: top; } .dm-foot-act { margin-top: 6px; font-weight: 400; } .dm-foot-act .btn { white-space: nowrap; }

/* v321 지출결의 하위 보기 */
.cost-viewseg { margin: -6px 0 14px; } .cost-viewseg .m-seg-b { font-size: 12px; padding: 4px 10px; }

/* v322 입금 종류 */
.rc-nonstmt #rc-items-sec, .rc-nonstmt .rc-overlap { display: none; }

/* v324 손익·내역 툴바: .sum-bar 안 버튼의 margin-left:auto 가 항목마다 붙어 균등 분산되던 것 → 왼쪽으로 모으고 원가율만 오른쪽 */
.sum-bar.pl-bar > * { margin-left: 0 !important; margin-right: 0 !important; }
.sum-bar.pl-bar > .pl-cogs { margin-left: auto !important; }
.sum-bar.pl-bar .m-seg { margin: 0 !important; }

/* v325 시트 드롭 · 결의서 선택 항목 접기 */
tr.sheet-drop.is-over td, tr.sheet-drop.is-over th { background: color-mix(in srgb, var(--color-ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--color-ink); }
.prop-fold { grid-column: 1 / -1; margin: 2px 0 6px; } .prop-fold > summary { cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 4px 0; list-style: none; } .prop-fold > summary::before { content: "▸ "; } .prop-fold[open] > summary::before { content: "▾ "; }

/* v325 이번 달 누계 열 */
.mx-table .is-cum { border-left: 2px solid var(--color-hairline); font-weight: 600; }

/* v330 월·일별 내역: 입력 셀 · 입금 행 · 잔액 */
.mx-table td.mx-edit { padding: 4px 6px; } .mx-in { width: 110px; height: 32px; text-align: right; font-size: 13px; border-style: dashed; } .mx-in:focus { border-style: solid; }
.mx-table tr.mx-in-row th { font-weight: 400; } .mx-table tr.mx-cashin th, .mx-table tr.mx-cashin td { font-weight: 600; border-top: 2px solid var(--color-hairline); }
.mx-table tr.mx-net td { color: var(--text-muted); } .mx-table tr.mx-open .ms-diff { font-weight: 400; } .mx-open-in { width: 120px; height: 30px; text-align: right; font-size: 12px; } .mx-open-in.is-derived { color: var(--text-quiet); font-style: italic; }
.mx-table tr.mx-bal th, .mx-table tr.mx-bal td { border-top: 2px solid var(--color-ink); }
.mx-newrow th.mx-v { color: var(--text-muted); } .mx-newrow th .btn-mini.x { margin-left: 4px; }
.mx-addpop { width: 380px; }

/* v332 월·일별 내역 편의 */
.mx-table td.mx-plus { cursor: pointer; color: transparent; } .mx-table td.mx-plus:hover { color: var(--text-quiet); background: color-mix(in srgb, var(--color-ink) 4%, transparent); } .mx-plus-i { font-size: 16px; font-weight: 300; }
.mx-table tbody tr:hover td.mx-plus { color: var(--text-quiet); }
.mx-table thead th { position: sticky; top: 0; z-index: 2; background: var(--color-canvas, #fff); } .mx-table thead th:first-child { z-index: 4; }
.table-wrap.sum-wrap:has(.mx-table) { max-height: 72vh; overflow: auto; }
.mx-table th.mx-v { min-width: 260px; } .mx-v .ms-diff { max-width: 240px; }
.btn.is-on { border-color: var(--color-ink); color: var(--color-ink); }

/* v333 담아두기 → 한 번에 올리기 */
.mx-stage { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--color-ink); border-radius: 10px; position: sticky; bottom: 8px; background: var(--color-canvas, #fff); z-index: 3; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.mx-stage.is-empty { display: none; } .mx-stage-t { font-weight: 600; margin-right: auto; }
.mx-table td.is-staged { background: color-mix(in srgb, var(--color-ink) 7%, transparent); box-shadow: inset 0 0 0 1px var(--color-ink); } .mx-table td.is-staged input { font-weight: 600; }

/* v335 열 너비 드래그 */
.mx-table thead th, .sheet-table thead th { position: sticky; top: 0; }
.col-rz { position: absolute; top: 0; right: -6px; width: 12px; height: 100%; cursor: col-resize; z-index: 6; }
.col-rz:hover, .is-resizing .col-rz { background: color-mix(in srgb, var(--color-ink) 22%, transparent); }
table.is-resizing { user-select: none; cursor: col-resize; } table.is-resizing * { cursor: col-resize; }
table[style*="fixed"] td, table[style*="fixed"] tbody th { overflow: hidden; text-overflow: ellipsis; }

/* v337 월·일별 내역: 합계 열 고정·색, 툴바, 확정, 입력 편의 */
.mx-table { --mx-m-bg: color-mix(in srgb, var(--color-ink) 4%, var(--color-canvas, #fff)); }
.mx-table .mx-stk { position: sticky; z-index: 3; background: var(--mx-m-bg); } .mx-table thead .mx-stk { z-index: 5; }
.mx-table .mx-stk-last { border-right: 2px solid var(--color-hairline); } .mx-table .is-cum { border-left: 0; }
.mx-table th.dm-day, .mx-table td.is-last:not(.mx-stk) { background: transparent; }
.mx-table td.mx-plus { position: relative; } .mx-prev-ph { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-quiet); opacity: .55; font-size: 12px; pointer-events: none; }
.mx-table td.mx-plus:hover .mx-prev-ph { opacity: .9; } .mx-table td.mx-plus .mx-plus-i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.mx-st { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--color-hairline); border-radius: 999px; font-size: 11px; color: var(--text-quiet); }
.pl-bar { flex-wrap: wrap; row-gap: 6px; } .mx-tools { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mx-lockchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--color-ink); color: var(--color-canvas, #fff); font-size: 12px; }
.mx-table thead th.mx-stk, .mx-table tbody td.mx-stk, .mx-table tbody th.mx-stk { background-color: var(--mx-m-bg); } /* .is-cum/.is-last 의 반투명 배경보다 우선 — 고정 열은 불투명해야 밑의 일 열이 안 비친다 */
.mx-table td.mx-plus.mx-stk { position: sticky; } /* v340: .mx-plus 의 relative 가 고정 열의 sticky 를 이겨 left:444px 이 '상대 이동'이 돼 빈 누계 칸이 옆 열로 밀려 보였다 */

/* v341 행 매장 칩(누르면 바꾸기) */
button.mx-st { cursor: pointer; background: transparent; font: inherit; font-size: 11px; line-height: 1.5; } button.mx-st:hover { border-color: var(--color-ink); color: var(--color-ink); }
.mx-st.is-override { border-color: var(--color-ink); color: var(--color-ink); } .mx-st.is-none { border-style: dashed; }
.ms-pop { z-index: 320; } /* v342: 드로어(.drawer-overlay z 300) 안에서 연 팝오버(매장 나누기 등)가 오버레이 밑에 깔려 '눌러도 아무 일 없음'으로 보였다 */
/* v342 결의서 내역 행: '매장 나누기' 버튼이 금액 칸 자리를 차지해 금액이 28px 로 찌그러지고 × 가 다음 줄로 밀렸다 → 버튼 열을 따로 둔다 */
@media (min-width: 641px) {
  .ci-row.has-ax, .ci-head.has-ax { grid-template-columns: minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1fr) 28px 118px 28px; }
  .ci-head.has-ax .ci-amt-h { grid-column: 5; } .ci-head.has-ax .ci-x-h { grid-column: 6; }
  .ci-row.has-ax .ci-split { grid-column: 4; justify-self: center; margin-left: 0; }
  .ci-row.has-ax .ci-amt { grid-column: 5; } .ci-row.has-ax .ci-del, .ci-row.has-ax .ci-del-sp { grid-column: 6; }
}

/* v344 손익 제외 그룹 · 매출 미확정 칸 */
.pl-table tr.pl-off th, .pl-table tr.pl-off td { color: var(--text-quiet); font-style: italic; }
.ms-cell.is-draft { background: transparent; }

/* v348 홈 결재 대기 묶음 · 상신 완료 칩 */
.home-grp { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--text-quiet); letter-spacing: .01em; } .home-grp + .home-item { border-top: 0; } .home-grp-n { font-weight: 500; font-variant-numeric: tabular-nums; }
.home-item.home-goto .hi-t { color: var(--color-action-blue); font-weight: 600; }
.mx-donechip { background: var(--sys-green, #1a7f4b); }

/* v350 문서번호 */
.doc-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; letter-spacing: .02em; color: var(--text-quiet); background: var(--color-surface-chip, #f2f1ec); padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.drawer-crumb .doc-no { color: var(--color-ink); }

/* v353 은행 대사 */
.bk-table td { vertical-align: middle; } .bk-table tr.bk-open td { background: color-mix(in srgb, var(--color-warn, #b7791f) 7%, transparent); } .bk-table tr.bk-ign td { color: var(--text-quiet); }
.bk-doc { cursor: pointer; text-decoration: underline dotted; } .bk-doc:hover { color: var(--color-action-blue); } .bk-pick { max-width: 320px; }
.mx-table tr.mx-bank th, .mx-table tr.mx-bank-diff th { color: var(--text-muted); } .mx-table tr.mx-bank-diff td.is-neg { color: var(--color-crit, #b3261e); }

/* v355 월·일별 내역: 머리글 떨림(겹친 테두리 + sticky) 해결 · 승인 색 */
.mx-table { border-collapse: separate; border-spacing: 0; }
.mx-table thead th { position: sticky; top: 0; z-index: 2; background-clip: padding-box; box-shadow: inset 0 -1px 0 var(--color-hairline); border-bottom: 0; }
.table-wrap.sum-wrap:has(.mx-table) { overscroll-behavior: contain; }
.mx-table td.mx-cell.is-approved { color: var(--sys-green, #1a7f4b); } .mx-table td.mx-cell.is-pending { color: var(--color-warn, #b7791f); font-style: italic; }
.mx-table thead th.dm-day { background: var(--color-canvas, #fff); } /* v355: 고정 머리글 아래로 본문이 비치지 않게 */

/* v356 자금보고 */
.fr-table td, .fr-table th { font-size: 13px; } .fr-table .sum-empty { color: var(--text-quiet); text-align: center; padding: 14px; }

/* v359 법인카드 명세 검토 */
.card-rv { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.card-rv-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.card-rv-top .ms-f { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.card-rv-top .ms-f > span { font-size: 11.5px; color: var(--text-quiet); }
.card-rv-sum { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.card-rv-sum .warn { color: var(--color-warn, #b7791f); } .card-rv-sum .ok { color: var(--color-ok, #1a7f4b); }
.card-rv-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.card-rv-chips .chip { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--color-fill-quiet, rgba(0,0,0,.05)); }
.card-rv-hint { font-size: 12px; color: var(--text-quiet); }
.card-rv-wrap { max-height: 56vh; overflow: auto; }
.card-rv-t th { position: sticky; top: 0; z-index: 1; }
.card-rv-t td { vertical-align: middle; }
.card-rv-t .card-use { max-width: 220px; font-size: 12px; } .card-rv-t .card-use-in { width: 100%; min-width: 170px; font-size: 12px; } .card-rv-t .card-date { width: 128px; font-size: 12px; }
.card-rv-t .card-name { width: 100%; min-width: 180px; } .card-rv-t .card-pick.is-multi { border-color: var(--color-action-blue); }
.card-rv-t .card-who { font-size: 11.5px; color: var(--text-quiet); white-space: nowrap; }
.card-rv-t .num.neg { color: var(--color-crit, #b3261e); }
.card-rv-t tr.card-need td { background: color-mix(in srgb, var(--color-warn, #b7791f) 8%, transparent); }
.card-rv-t tr.card-dup .card-use::after { content: " \29c9"; color: var(--text-quiet); }
.card-pick.is-sugg { color: var(--text-quiet); font-style: italic; }
.card-pick.is-empty, #card-vendor-b.is-empty { border-color: var(--color-warn, #b7791f); }
.drawer-foot .drawer-foot-r { display: inline-flex; gap: 8px; margin-left: auto; }

/* v369 자동이체 배지 · 지급일 미정 날짜 입력 */
.pb-chip.auto, .mini-chip.auto { background: var(--color-info-soft, rgba(0,102,204,.10)); color: var(--color-info, #0066cc); }
.pb-setdate { width: 138px; margin-right: 8px; font-size: 12px; }
.mx-undated { color: var(--color-warn, #8a5400); }
.cd-auto-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* v370 모바일에서 묶음 머리글이 세로로 깨지지 않게 */
.pb-head { flex-wrap: wrap; row-gap: 4px; } .pb-head .pb-date { white-space: nowrap; }

/* v376 은행 표 가운데 정렬 (요청) */
.sum-table.bk-table thead th, .sum-table.bk-table td, .sum-table.bk-table td.num { text-align: center; } /* .sum-table thead th 의 right 보다 구체적으로 */

/* ═══════════════════════════════════════════════════════════════════════
   v378 디자인 정리 레이어 — 구조는 그대로 두고 표면만 다듬는다.
   원칙: 반경 하나(카드 14 · 컨트롤 10 · 칩 999), 헤어라인 하나, 그림자 하나, 칩 규격 하나,
        표 머리글 하나, 포커스 링 하나. 색은 새로 고르지 않고 토큰만 조정한다.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --color-hairline: #e6e6ea;
  --color-hairline-soft: rgba(0,0,0,0.06);
  --color-canvas-parchment: #f5f5f8;
  --color-surface-pearl: #f8f8fa;
  --color-surface-chip: rgba(120,120,128,0.14);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-pop: 0 8px 28px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
  --ring: 0 0 0 3px rgba(0,113,227,0.18);
  --radius-card: 14px; --radius-ctl: 10px;
}
html[data-theme="dark"] {
  --color-hairline: #2e2e33;
  --color-hairline-soft: rgba(255,255,255,0.08);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.55);
  --ring: 0 0 0 3px rgba(41,151,255,0.28);
}

/* ── 페이지 머리 ── */
.view-head h1 { font-size: 24px; font-weight: var(--weight-bold); letter-spacing: -0.02em; line-height: 1.2; }
.view-sub { font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.tab { font-size: 13px; }
.tab.is-active::after { background: var(--color-action-blue); height: 2px; left: 12px; right: 12px; }

/* ── 카드 · KPI ── */
.card, .kpi, .home-stat, .home-card { border-radius: var(--radius-card); border-color: var(--color-hairline); box-shadow: var(--shadow-card); }
.card { padding: 18px 20px; }
.kpi { padding: 16px 18px; }
.kpi-label { font-size: 11px; letter-spacing: 0.06em; color: var(--text-quiet); }
.kpi-value { font-size: 28px; letter-spacing: -0.02em; margin-top: 8px; }
.kpi-value.kpi-money { font-size: 22px; margin-top: 10px; }
.kpi-sub { font-size: 12px; margin-top: 6px; }
.sec-head { padding: 12px 16px 8px; }
.sec-title { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.sec-count { font-size: 11.5px; }

/* ── 버튼: 반경·높이·무게 통일 ── */
.btn { border-radius: var(--radius-ctl); height: 34px; padding: 0 14px; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12px; }
.btn-primary { background: var(--color-action-blue); box-shadow: 0 1px 2px rgba(17,17,19,0.22); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost, .btn-danger { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-ctl); box-shadow: 0 1px 1px rgba(0,0,0,0.03); }
.btn-ghost:hover { background: var(--color-surface-pearl); border-color: var(--color-hairline-strong); }
.btn-quiet { border-radius: 8px; }
.btn svg { width: 14px; height: 14px; }
html[data-theme="dark"] .btn-ghost, html[data-theme="dark"] .btn-danger { background: #232327; }
html[data-theme="dark"] .btn-ghost:hover { background: #2a2a2f; }

/* ── 세그먼트: 검은 알약 → 흰 선택 칩 ── */
.m-seg { border: 0; background: var(--color-surface-chip); padding: 3px; border-radius: var(--radius-ctl); gap: 2px; }
.m-seg-b { border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: var(--weight-medium); color: var(--text-muted); }
.m-seg-b + .m-seg-b { border-left: 0; }
.m-seg-b:hover { color: var(--color-ink); }
.m-seg-b.is-active { background: var(--color-canvas); color: var(--color-ink); font-weight: var(--weight-semibold); box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03); }
html[data-theme="dark"] .m-seg { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .m-seg-b.is-active { background: #2c2c31; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.cost-viewseg .m-seg-b { font-size: 12px; padding: 4px 10px; }

/* ── 표: 머리글 한 규격 · 행 hover · 숫자 정렬 ── */
.sum-table thead th, .cost-table thead th, .mx-table thead th, .task-table thead th, .pb-table thead th {
  font-size: 12px; font-weight: var(--weight-medium); color: var(--text-muted); letter-spacing: 0.01em; background: var(--color-surface-pearl); }
.sum-table th, .sum-table td { padding: 9px 12px; }
.sum-table tbody tr:hover td { background: rgba(0,0,0,0.018); }
html[data-theme="dark"] .sum-table tbody tr:hover td { background: rgba(255,255,255,0.03); }
.sum-table td.num, .cost-table td.num, .mx-table td.num { font-variant-numeric: tabular-nums; }
.table-wrap { border-radius: var(--radius-ctl); }

/* ── 칩 · 배지: 한 규격 ── */
.pb-chip, .mini-chip, .cs-chip, .lock-chip, .wait-chip, .badge, .doc-no, .tab-badge, .chip {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: var(--weight-semibold); line-height: 20px; letter-spacing: -0.005em; white-space: nowrap; vertical-align: middle; }
.doc-no { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: var(--weight-medium); font-size: 11px; background: var(--color-surface-chip); color: var(--text-muted); }
.cs-chip { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 999px; }
.tab-badge { height: 17px; min-width: 17px; padding: 0 5px; font-size: 11px; }
.badge-line { border: 1px solid var(--color-hairline); background: transparent; }

/* ── 입력·선택: 반경 8 · 파란 포커스 링 ── */
.sheet-in, .a-select, .prop-input, .cell-text, .os-in, .drawer input[type="text"], .drawer input[type="number"], .drawer input[type="date"], .drawer textarea, .card input.sheet-in, .m-ref.ci-ax {
  border-radius: 8px; }
.sheet-in { height: 34px; font-size: 13px; border: 1px solid var(--color-hairline); background: var(--color-canvas); }
.sheet-in:focus, .a-select:focus, .prop-input:focus, .cell-text:focus { outline: none; border-color: var(--color-focus-blue); box-shadow: var(--ring); }
.sheet-in:focus { outline: none; }
.a-select.light { border: 1px solid var(--color-hairline); border-radius: 8px; height: 32px; font-size: 13px; }
.m-ref.ci-ax { border: 1px solid var(--color-hairline); background: var(--color-canvas); padding: 3px 9px; font-size: 12px; }
.m-ref.ci-ax:hover { border-color: var(--color-hairline-strong); background: var(--color-surface-pearl); }

/* ── 지급일 묶음 ── */
.pb-grp { border: 1px solid var(--color-hairline); border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: var(--color-canvas); }
.pb-head { padding: 10px 14px; gap: 10px; }
.pb-head .pb-date { font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pb-head .pb-sum { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.pb-head .pb-n { background: var(--color-surface-chip); border-radius: 999px; padding: 0 7px; font-size: 11.5px; height: 20px; line-height: 20px; }
.pb-foot { padding: 8px 14px 12px; gap: 8px; }
.pb-desc { font-size: 13px; }
.pb-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }

/* ── 홈 ── */
.home-stat { padding: 16px 18px; }
.home-stat .hs-v { font-size: 28px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; }
.home-stat .hs-l { font-size: 11.5px; color: var(--text-quiet); }
.home-item { border-radius: 10px; padding: 10px 10px; }
.home-item:hover { background: var(--color-surface-pearl); }
.home-grp { font-size: 11.5px; color: var(--text-quiet); letter-spacing: 0.02em; padding: 10px 8px 4px; }

/* ── 드로어 ── */
.drawer { box-shadow: var(--shadow-pop); }
.drawer-head { padding: 14px 18px; }
.drawer-crumb { font-size: 12px; color: var(--text-quiet); letter-spacing: 0.01em; }
.drawer-head-title { font-size: 16px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.drawer-foot { border-top: 1px solid var(--color-hairline); }

/* ── 팝오버 · 토스트 ── */
.ms-pop, .wdg, .cf-box { border-radius: 12px; box-shadow: var(--shadow-pop); border: 1px solid var(--color-hairline); }
.toast { border-radius: 10px; }

/* ── 툴바 간격 ── */
.sum-bar { gap: 8px; padding-bottom: 12px; }
.mx-tools { gap: 6px; }
.cs-strip { gap: 6px; }
/* v378b 손익·요약 표 고정 첫 열이 반투명해 스크롤한 숫자가 비쳐 보이던 것 — 토큰(--color-surface-card)이 정의돼 있지 않았다 */
.sum-table thead th.sum-cat, .sum-table tbody th.sum-cat { background: var(--color-canvas); box-shadow: 1px 0 0 var(--color-hairline); }
html[data-theme="dark"] .sum-table thead th.sum-cat, html[data-theme="dark"] .sum-table tbody th.sum-cat { background: #1c1c1f; }
/* 번역 중 배지가 드로어 하단 버튼과 겹치던 것 — 왼쪽 아래(테스트 배지 옆)로 */
.tr-badge { left: 120px; transform: translateY(8px); } .tr-badge.show { transform: none; }

/* ═══════════════════════════════════════════════════════════════════════
   v379 재설계 — 밝은 헤더 · 쿨그레이 + 인디고 액센트 · 로그인 · SaaS 디테일 (DESIGN.md 참조)
   THESIS: 한 장의 밝은 종이 위에 얇은 선. OWN-WORLD: 중성색 한 벌 + 액센트 하나, 오렌지는 로고만.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --accent: #111113; --accent-hover: #2b2b31; --accent-soft: rgba(17,17,19,0.06); --accent-line: rgba(17,17,19,0.22);
  --color-action-blue: var(--accent); --color-focus-blue: var(--accent); --color-sky-link: var(--accent);
  --color-canvas-parchment: #f7f7f9; --color-surface-pearl: #fafafb; --color-hairline: #e6e7eb; --color-hairline-strong: #d5d7dd;
  --color-ink: #16181d; --text-muted: #6b7080; --text-quiet: #9096a4;
  --sys-green-text: #1f9d55; --sys-orange-text: #b7791f; --sys-red-text: #d23b3b;
  --ring: 0 0 0 3px rgba(17,17,19,0.16);
  --shadow-card: 0 1px 2px rgba(22,24,29,0.04), 0 0 0 1px rgba(22,24,29,0.02);
  --shadow-pop: 0 12px 32px -8px rgba(22,24,29,0.18), 0 2px 6px rgba(22,24,29,0.06);
}
html[data-theme="dark"] {
  --accent: #ececf0; --accent-hover: #ffffff; --accent-soft: rgba(236,236,240,0.12); --accent-line: rgba(236,236,240,0.32);
  --color-canvas-parchment: #0f1014; --color-canvas: #16171c; --color-surface-pearl: #1c1d23; --color-hairline: #272930; --color-hairline-strong: #343640;
  --color-ink: #ececf1; --text-muted: #9a9fae; --text-quiet: #6d7280;
  --ring: 0 0 0 3px rgba(124,140,248,0.28);
}
::selection { background: var(--accent-soft); }
* { scrollbar-width: thin; scrollbar-color: rgba(120,120,128,0.35) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: rgba(120,120,128,0.3); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(120,120,128,0.5); background-clip: content-box; border: 3px solid transparent; }

/* ── 헤더: 어두운 유리 → 밝은 표면 + 헤어라인 ── */
.a-nav { height: 56px; background: rgba(255,255,255,0.88); border-bottom: 1px solid var(--color-hairline); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); }
html[data-theme="dark"] .a-nav { background: rgba(22,23,28,0.88); }
.a-nav-left { gap: 10px; }
.a-logo { width: 26px; height: 26px; }
.a-nav-title { color: var(--color-ink); font-size: 15px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.a-nav-org { color: var(--text-muted); font-size: 12px; border-left: 1px solid var(--color-hairline); padding-left: 10px; }
.a-brand-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.a-nav-right { gap: 8px; }
.nav-ic, .bell { width: 32px; height: 32px; border-radius: 8px; background: transparent; color: var(--text-muted); }
.nav-ic:hover, .bell:hover { background: var(--color-surface-chip); color: var(--color-ink); }
.nav-ic.on { background: var(--accent-soft); color: var(--accent); }
.nav-ic svg, .bell svg { width: 16px; height: 16px; }
.bell-badge { top: 2px; right: 2px; min-width: 15px; height: 15px; font-size: 9.5px; background: var(--sys-red-text); border: 2px solid var(--color-canvas); }
/* 검색: 아이콘 + ⌘K 키캡 — 요즘 도구의 관용구 */
.nav-ic[data-action="omni-open"] { width: auto; padding: 0 8px 0 9px; gap: 7px; border: 1px solid var(--color-hairline); background: var(--color-canvas); color: var(--text-muted); }
.nav-ic[data-action="omni-open"]::after { content: "⌘K"; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-quiet); padding: 1px 5px; border-radius: 5px; background: var(--color-surface-chip); line-height: 1.3; }
.nav-ic[data-action="omni-open"]:hover { border-color: var(--color-hairline-strong); }
.lang-seg { background: var(--color-surface-chip); padding: 3px; border-radius: 8px; }
.lang-opt { color: var(--text-muted); font-size: 11px; padding: 4px 9px; border-radius: 6px; }
.lang-opt.is-active { background: var(--color-canvas); color: var(--color-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.10); }
.lang-seg.light .lang-opt.is-active { background: var(--color-canvas); color: var(--color-ink); }
.scope-chip, .scope-wrap { background: var(--color-canvas); border: 1px solid var(--color-hairline); color: var(--color-ink); border-radius: 8px; height: 32px; padding: 0 10px; font-size: 12px; font-weight: var(--weight-medium); }
.scope-chip .ic, .scope-wrap .ic { color: var(--text-muted); opacity: 1; width: 14px; height: 14px; }
.scope-wrap { padding-left: 9px; }
.a-nav .a-select, .scope-wrap .scope-select { color: var(--color-ink); font-weight: var(--weight-medium); background-color: transparent; border: 0; height: 30px; padding-right: 26px;
  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='%236b7080' stroke-width='1.4'/></svg>"); }
.a-nav .a-select option { color: #1d1d1f; }
.role-switch { background: var(--color-surface-chip); } .role-opt { color: var(--text-muted); } .role-opt.is-active { background: var(--color-canvas); color: var(--color-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.user-chip { background: transparent; border: 1px solid var(--color-hairline); padding: 3px 6px 3px 3px; gap: 8px; }
.user-chip:hover { border-color: var(--color-hairline-strong); }
.ava { background: linear-gradient(140deg, #4a4a52, #111113); width: 26px; height: 26px; font-size: 12px; }
.ava.big { background: linear-gradient(140deg, #4a4a52, #111113); }
.uc-meta b { color: var(--color-ink); font-size: 12px; } .uc-meta small { color: var(--text-quiet); font-size: 11px; }
.uc-out { color: var(--text-muted); width: 26px; height: 26px; border-radius: 6px; font-size: 13px; }
.uc-out:hover { background: var(--color-surface-chip); color: var(--color-ink); }
.nav-install { background: var(--accent-soft); color: var(--accent); border-radius: 8px; }
.subbar { top: 56px; background: rgba(255,255,255,0.88); border-bottom: 1px solid var(--color-hairline); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); }
html[data-theme="dark"] .subbar { background: rgba(22,23,28,0.88); }
.tab { padding: 11px 12px 10px; font-size: 13px; letter-spacing: -0.01em; }
.tab.is-active { font-weight: var(--weight-semibold); }
.tab.is-active::after { background: var(--accent); left: 12px; right: 12px; height: 2px; border-radius: 2px 2px 0 0; }
.week-label { font-size: 12px; }
.talk-btn { height: 30px; padding: 0 12px 0 10px; border-radius: 8px; background: var(--accent); box-shadow: none; font-size: 12px; }
.talk-btn:hover { transform: none; background: var(--accent-hover); box-shadow: 0 2px 8px rgba(17,17,19,0.22); filter: none; }
.talk-btn.is-active { background: var(--accent-hover); box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); }
.talk-btn .talk-badge { border-color: var(--color-canvas); background: var(--sys-red-text); }
.view-root { padding-top: 26px; }

/* ── 프라이머리 버튼: 액센트 단색 + 미세한 상단 하이라이트 ── */
.btn-primary { background: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1px 2px rgba(17,17,19,0.28); }
.btn-primary:hover { background: var(--accent-hover); filter: none; }
.btn:active { transform: scale(0.985); }
.btn-quiet { color: var(--accent); }
a, .link { color: var(--accent); }

/* ── 홈 통계: 활성만 액센트 테두리 ── */
.home-stat.warn, .home-stat.alert, .home-stat.info { border-color: var(--color-hairline); }
.home-stat.warn .hs-v { color: var(--sys-orange-text); } .home-stat.alert .hs-v { color: var(--sys-red-text); } .home-stat.info .hs-v { color: var(--accent); }
.kpi.alert .kpi-value { color: var(--sys-red-text); }

/* ── 로그인: 제품과 같은 톤 ── */
.login-wrap { background: radial-gradient(900px 520px at 12% -12%, var(--accent-soft), transparent 62%), var(--color-canvas-parchment); }
.login-card { width: min(400px, 100%); border-radius: 16px; padding: 32px 32px 28px; border: 1px solid var(--color-hairline); box-shadow: 0 1px 2px rgba(22,24,29,0.04), 0 28px 56px -28px rgba(22,24,29,0.22); animation: loginIn 480ms var(--ease-out) both; }
@keyframes loginIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }
.login-brand { gap: 10px; margin-bottom: 26px; }
.a-logo.big { width: 36px; height: 36px; }
.lb-title { font-size: 15px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.lb-org { font-size: 12px; color: var(--text-quiet); }
.login-h1 { font-size: 21px; font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.login-p { font-size: 13px; margin: 6px 0 22px; }
.login-card .field { gap: 6px; margin-bottom: 12px; }
.login-card .field label { font-size: 12px; font-weight: var(--weight-medium); color: var(--text-muted); }
.login-card .field input { height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; border: 1px solid var(--color-hairline); background: var(--color-canvas); transition: border-color 120ms, box-shadow 120ms; }
.login-card .field input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.login-remember { display: flex; gap: 16px; margin: 2px 0 10px; }
.login-remember .cp-row { font-size: 12px; color: var(--text-muted); padding: 2px 0; }
.login-remember .cp-row input { accent-color: var(--accent); }
.login-btn { height: 40px; border-radius: 8px; font-size: 14px; margin-top: 6px; }
.login-err { font-size: 12px; color: var(--sys-red-text); margin: 4px 0 8px; }
.login-signup { margin-top: 18px; font-size: 12px; }
.login-signup a { color: var(--accent); font-weight: var(--weight-medium); }
.login-top { top: 20px; right: 24px; }
.login-demo { margin-top: 20px; padding-top: 16px; }
.ld-label { font-size: 11px; letter-spacing: 0.06em; color: var(--text-quiet); }
.demo-acc { border-radius: 8px; background: var(--color-canvas); }
.demo-acc:hover { border-color: var(--accent-line); background: var(--accent-soft); }

/* ── 팝오버·토스트·드로어 ── */
.toast { border-radius: 10px; box-shadow: var(--shadow-pop); }
.drawer { box-shadow: var(--shadow-pop); }
.ms-pop, .wdg, .cf-box, .notif-pop, .os-box { border-radius: 12px; box-shadow: var(--shadow-pop); border: 1px solid var(--color-hairline); }

/* ── 상태 배지 색을 새 상태색으로 ── */
.pb-chip.ok { background: rgba(31,157,85,0.10); color: var(--sys-green-text); }
.pb-chip.off { background: rgba(183,121,31,0.12); color: var(--sys-orange-text); }
.pb-chip.gap { background: rgba(210,59,59,0.10); color: var(--sys-red-text); }
.pb-chip.auto, .mini-chip.auto { background: var(--accent-soft); color: var(--accent); }
.badge-hq { background: var(--accent-soft); color: var(--accent); }
.tab-badge, .chs-badge { background: var(--sys-red-text); }
/* v380 ── 헤더 셀렉트 화살표가 타일처럼 반복되던 것 · 로그인 화면의 채팅 FAB · 로그인 좌우 분할 */
.a-nav .a-select, .scope-wrap .scope-select { background-repeat: no-repeat; background-position: right 10px center; }
#app-shell[hidden] ~ #chat-fab, #app-shell[hidden] ~ #chat-dock { display: none !important; }
@media (min-width: 960px) {
  .login-wrap { display: grid; grid-template-columns: 5fr 6fr; align-items: center; justify-items: center; padding: 0; background: var(--color-canvas-parchment); }
  .login-wrap::before { content: ""; grid-column: 1; grid-row: 1; width: 100%; height: 100%; min-height: 100vh; min-height: 100dvh;
    background: radial-gradient(720px 480px at 18% 18%, rgba(255,255,255,0.10), transparent 62%), radial-gradient(520px 420px at 85% 92%, rgba(255,255,255,0.06), transparent 60%), linear-gradient(160deg, #26262b 0%, #171719 52%, #0c0c0e 100%); }
  .login-wrap::after { content: "BENNYWORKS"; grid-column: 1; grid-row: 1; align-self: end; justify-self: start; margin: 0 0 52px 56px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: var(--weight-regular); letter-spacing: 0.18em; line-height: 1.9; opacity: 0.96; }
  .login-card { grid-column: 2; grid-row: 1; box-shadow: 0 1px 2px rgba(22,24,29,0.04), 0 24px 48px -24px rgba(22,24,29,0.18); }
  .login-top { top: 20px; right: 24px; }
}
html[data-theme="dark"] .login-wrap::before { background: radial-gradient(720px 480px at 18% 18%, rgba(255,255,255,0.10), transparent 62%), linear-gradient(160deg, #2b3aa8 0%, #1c2470 52%, #101542 100%); }
/* v381 ── 두꺼운 측면 색 테두리(사이드탭)를 걷어낸다 — 강조는 틴트와 무게로 */
.pend-card { border-left: 1px solid var(--color-hairline); background: rgba(183,121,31,0.06); }
.chat-ref { border-left: 1px solid var(--color-hairline); }
.ntf.unread { box-shadow: none; background: var(--accent-soft); }
.ntf--action.unread { box-shadow: none; background: rgba(183,121,31,0.10); }
.task-row.depth-1 > .cell-title, .task-row.depth-2 > .cell-title, html[data-theme="dark"] .task-row.depth-1 > .cell-title, html[data-theme="dark"] .task-row.depth-2 > .cell-title { box-shadow: inset 1px 0 0 var(--color-hairline-strong); }
.detail-panel { border-left: 1px solid var(--color-hairline); }
/* v383 검색 버튼: grid 라 ⌘K 키캡이 아이콘 아래로 내려가던 것 */
.nav-ic[data-action="omni-open"] { display: inline-flex; align-items: center; justify-content: center; }

/* v384 ── 2차 다듬기: 홈 숫자 카드 4장 → 한 줄 스트립, 채팅 버튼 조용하게, 화면 전환 페이드, 눈썹 라벨 제거 */
.home-date { text-transform: none; letter-spacing: -0.005em; color: var(--text-muted); font-weight: var(--weight-medium); }
.home-strip { gap: 0; margin-top: 18px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
.home-strip .home-stat { min-width: 0; }
.home-stat { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 0; border-radius: 0; box-shadow: none; }
.home-stat + .home-stat { border-left: 1px solid var(--color-hairline); }
.home-stat:hover { transform: none; box-shadow: none; background: var(--color-surface-pearl); }
.home-stat .hs-l { order: 1; font-size: 12px; font-weight: var(--weight-medium); color: var(--text-muted); }
.home-stat .hs-v { order: 2; font-size: 22px; letter-spacing: -0.02em; }
.home-stat.is-zero { opacity: 1; } .home-stat.is-zero .hs-v { color: var(--text-quiet); }
.home-stat.alert, .home-stat.warn, .home-stat.info { border-color: var(--color-hairline); }
@media (max-width: 720px) { .home-strip { flex-wrap: wrap; } .home-strip .home-stat { flex: 1 1 50%; } .home-stat + .home-stat { border-left: 0; } .home-stat:nth-child(2n) { border-left: 1px solid var(--color-hairline); } .home-stat:nth-child(n+3) { border-top: 1px solid var(--color-hairline); } }
#chat-fab { width: 44px; height: 44px; background: var(--color-canvas); color: var(--accent); border: 1px solid var(--color-hairline); box-shadow: var(--shadow-pop); }
#chat-fab:hover { transform: translateY(-1px); background: var(--accent-soft); box-shadow: var(--shadow-pop); }
#chat-fab svg { width: 18px; height: 18px; }
html[data-theme="dark"] #chat-fab { background: #1c1d23; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.view-root > .view-head { animation: viewIn 220ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .view-root > .view-head { animation: none; } }
.view-title, .view-head h1 { font-size: 24px; font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.btn:focus-visible, .tab:focus-visible, .nav-ic:focus-visible, .m-seg-b:focus-visible { outline: none; box-shadow: var(--ring); }
.st-badge { border-radius: 999px; font-size: 11.5px; font-weight: var(--weight-semibold); padding: 0 8px; height: 20px; line-height: 20px; }
/* v385 ── 모바일 헤더: 820px 규칙(줄바꿈)이 v379 의 고정 높이 56px 에 덮여 컨트롤이 탭 위로 넘치던 것 */
@media (max-width: 820px) {
  .a-nav { height: auto; min-height: 52px; position: static; padding: 8px 12px; row-gap: 6px; }
  .subbar { top: 0; }
  .a-nav-right { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .nav-ic[data-action="autotr-toggle"], .nav-ic[data-action="density-toggle"], .uc-out[data-action="open-manual"], .uc-out[data-action="tour-open"] { display: none; }
  .nav-ic[data-action="omni-open"] { width: 32px; padding: 0; border: 0; background: transparent; }
  .nav-ic[data-action="omni-open"]::after { display: none; }
  .lang-seg { padding: 2px; } .lang-opt { padding: 3px 7px; font-size: 11px; }
  .scope-chip, .scope-wrap { height: 30px; font-size: 12px; max-width: 150px; overflow: hidden; }
  .user-chip { padding: 2px; border: 0; }
  .a-nav-title { font-size: 14px; }
}
/* v386 ── 마무리 리뷰 반영 (impeccable-finish-reviewer)
   ② 다크 로그인 바탕 ③ 다크 모드 액센트 채움색 대비(흰 글자 4.5:1) ④ 대문자·자간 라벨 → 문장체 12px/500
   ⑤ 반경을 계약대로(컨트롤 8 · 카드 12) ⑥ hover 들뜸 제거 ⑦ 그라데이션·옛 파란색 잔재 ⑧ 모바일 로그인 겹침 */
:root { --radius-ctl: 8px; --radius-card: 12px; --accent-fill: var(--accent); }
html[data-theme="dark"] { --accent-fill: #ececf0; }
/* 다크에서 액센트가 밝은 면이므로 그 위 글자는 잉크색으로 */
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .talk-btn, html[data-theme="dark"] .login-btn, html[data-theme="dark"] .nav-install { color: #111113; }
.btn-primary, .talk-btn, .login-btn, .nav-install { background: var(--accent-fill); }
.btn-primary:hover, .talk-btn:hover { background: var(--accent-hover); }
html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .talk-btn:hover { background: #5b76f5; }
.talk-btn.is-active { background: #3f57d1; }
html[data-theme="dark"] .login-wrap { background: var(--color-canvas-parchment); }
.card-title, thead th, .snap-table th, .ld-label, .drawer-sec-l, .cp-sec, .ntf-sec, .th-sort, .wu-sheet th, .user-table th, .chs-sec, .wu-section h4, .wu-auto h4, .kpi-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: var(--weight-medium); }
.card-title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-ink); }
.kpi-label { color: var(--text-muted); }
.login-card { border-radius: 12px; }
.home-item { border-radius: 8px; }
.card, .kpi, .home-card { border-radius: var(--radius-card); }
.home-stat:hover { transform: none; box-shadow: none; }
#chat-fab:hover { transform: none; }
.ava, .ava.big, .ava.sm2.me { background: var(--accent-fill); }
.mb-bar, html[data-theme="dark"] .mb-bar { background: var(--accent-fill); border-radius: 4px 4px 0 0; }
html[data-theme="dark"] .chs-item.on { background: var(--accent-soft); color: var(--accent); }
.a-nav, .subbar { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (max-width: 959px) { .login-wrap { padding-top: 72px; } }
/* v387 모바일: 탭 줄의 CREAS TALK 이 마지막 탭을 가림 — 하단 채팅 버튼이 있으니 숨긴다 */
@media (max-width: 640px) { .subbar-right .talk-btn { display: none; } .tabs { overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } }

/* v388 ── 헤더 정리: 아바타 메뉴 · 브레드크럼 · 빈 상태 */
.a-nav-crumb { color: var(--text-quiet); font-size: 13px; margin: 0 2px 0 8px; }
.a-nav-view { color: var(--color-ink); font-size: 13px; font-weight: var(--weight-medium); }
@media (max-width: 640px) { .a-nav-crumb, .a-nav-view { display: none; } }
.user-chip { position: relative; cursor: pointer; height: 32px; padding: 2px 8px 2px 3px; gap: 7px; border-radius: 8px; }
.user-chip svg { width: 12px; height: 12px; color: var(--text-quiet); }
.user-chip[aria-expanded="true"] { background: var(--color-surface-chip); }
.user-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 400; }
.a-nav-right { position: relative; }
.um-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.um-head .ava { width: 32px; height: 32px; font-size: 13px; }
.um-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.um-who b { font-size: 13px; color: var(--color-ink); } .um-who small { font-size: 11.5px; color: var(--text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-sec { padding: 4px 8px 8px; } .um-sec .lang-seg { display: flex; } .um-sec .lang-opt { flex: 1; text-align: center; padding: 5px 0; }
.um-div { height: 1px; background: var(--color-hairline); margin: 6px 4px; }
.um-item { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--color-ink); background: none; border: 0; cursor: pointer; font-family: inherit; }
.um-item:hover { background: var(--color-surface-pearl); }
.um-item[data-kbd]::after { content: attr(data-kbd); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--text-quiet); padding: 1px 6px; border-radius: 5px; background: var(--color-surface-chip); }
.um-sw { width: 30px; height: 18px; border-radius: 999px; background: var(--color-surface-chip); position: relative; flex: none; transition: background 160ms; }
.um-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-canvas); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 160ms var(--ease-out); }
.um-item.is-on .um-sw { background: var(--accent-fill); } .um-item.is-on .um-sw::after { transform: translateX(12px); }
.um-out { color: var(--sys-red-text); }
.um-out:hover { background: rgba(210,59,59,0.08); }
/* 빈 상태: 아이콘 타일 + 한 줄 */
.home-empty, .empty { color: var(--text-muted); }
.home-empty .ic { width: 36px; height: 36px; padding: 9px; box-sizing: border-box; border-radius: 10px; background: var(--color-surface-pearl); border: 1px solid var(--color-hairline); opacity: 1; color: var(--text-quiet); }
.home-empty span { font-size: 13px; }
/* v390 모바일 월·일별 내역: 툴바 버튼 묶음(.mx-tools)이 한 줄로 밀려 본문이 가로로 넘치던 것 · 토스트가 화면 밖으로 나가던 것 */
.mx-tools { flex-wrap: wrap; }
@media (max-width: 640px) { .sum-bar { flex-wrap: wrap; } .mx-tools { width: 100%; justify-content: flex-start; } .toast { left: 12px; right: 12px; max-width: calc(100vw - 24px); transform: none; } }

/* v392 ── 디자인·UX 워커 반영: 보조 텍스트 대비 AA(4.5:1) · 최소 글자 11px · 작은 강조 텍스트는 진한 액센트 */
:root { --text-muted: #5d6372; --text-quiet: #6f7585; --accent-text: #111113; }
html[data-theme="dark"] { --text-muted: #a3a8b6; --text-quiet: #8a90a0; --accent-text: #ececf0; }
.th-sort.on, .set-tab.on { color: var(--accent-text); }
.mb-v, .os-foot kbd, .g-asg, .g-bar.g-sm .g-txt { font-size: 11px; }
/* 상태 텍스트(초록·주황)는 v378 에서 밝아져 3.3~3.6:1 — 12px 배지·힌트에 쓰이므로 AA 로 되돌린다. 간트 바 파랑도 흰 글자 기준 4.6:1 */
:root { --sys-green-text: #177a43; --sys-orange-text: #9a6412; --sys-blue: #3d6fe0; }
.badge-hq { color: var(--accent-text); }
.save-indicator { color: var(--sys-green-text); }
html[data-theme="dark"] .save-indicator { color: #7ee2a0; }
.toast-act { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 8px; margin: -2px 0; border-radius: 6px; }
/* 모바일 탭 타깃 32px — 세그·칩·작은 아이콘 버튼 */
@media (max-width: 640px) {
  .btn, .seg-opt, .m-seg-b, .gz-b, .lang-opt, .um-item, .cs-chip, .toast-act { min-height: 32px; }
  .wa-task-t { min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
  .wa-star, .dec-del { min-width: 32px; min-height: 32px; }
}
/* 토스트가 채팅 FAB 를 가리던 것 — 데스크톱은 FAB 왼쪽(24+44+12), 모바일은 FAB 위 */
#toast-root { right: 80px; }
@media (max-width: 640px) { #toast-root { left: 12px; right: 12px; bottom: 76px; } .toast { max-width: 100%; } }
/* v393: 워커 2차 — 설정 탭 활성색·조용한 텍스트를 옅은 바탕(#f7f7f9)에서도 4.5:1 · 로그인 언어 버튼 폭 */
:root { --text-quiet: #6a7080; }
.set-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent-text); }
@media (max-width: 640px) { .lang-opt { min-width: 32px; } }
/* v394: 빨강 텍스트도 옅은 바탕에서 4.5:1 (#d23b3b 는 4.43) */
:root { --sys-red-text: #c93232; }
/* v395: 알림 배지가 종 아이콘을 반쯤 덮고 숫자가 아래로 처지던 것 — 모서리에 작고 또렷하게 */
.bell-badge { top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; font-size: 9px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-width: 1.5px; }
/* v397: 드로어 하단 버튼이 일본어 길이에 두 줄로 접히고 오른쪽이 잘리던 것 · 번역 배지는 헤더 아래 가운데 */
.drawer-foot { flex-wrap: wrap; row-gap: 8px; } .drawer-foot .btn { white-space: nowrap; }
.tr-badge { top: 64px; bottom: auto; left: 50%; transform: translateX(-50%) translateY(-6px); } .tr-badge.show { transform: translateX(-50%); }
/* v398 ── 타니 편의: 홈 결의 바로가기 강조 · 월별 표 오늘 열 · 모바일 세그먼트 가로 스크롤 · 모바일 월별 툴바 축소 */
.home-item.home-goto { background: var(--accent-fill); border-radius: 8px; justify-content: center; margin-top: 8px; padding: 10px 14px; }
.home-item.home-goto .hi-t, .home-item.home-goto .hi-ico { color: #fff; }
.home-item.home-goto:hover { background: var(--accent-hover); }
.mx-table th.is-today { background: var(--accent-soft); color: var(--accent-text); }
.mx-table td.is-today { background: var(--accent-soft); }
html[data-theme="dark"] .mx-table th.is-today { color: var(--accent); }
@media (max-width: 640px) {
  .m-seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .m-seg::-webkit-scrollbar { display: none; }
  .m-seg-b { white-space: nowrap; flex: 0 0 auto; }
  .mx-tools [data-action="mx-export"], .mx-tools [data-action="mx-copy-prev"], .mx-tools [data-action="mx-all-months"] { display: none; }
}
/* v399: 토스트를 헤더 아래 오른쪽으로 — 드로어·모달 하단 버튼과 채팅 FAB 를 가리지 않는다 */
#toast-root { top: 64px; bottom: auto; right: 24px; }
.toast { animation: fadeDown 0.2s var(--ease-out) both; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { #toast-root { top: 60px; bottom: auto; left: 12px; right: 12px; } }
/* v401 ── 정산서 가져오기 검토표 */
.settle-t td.settle-file { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.settle-t tr.is-off { opacity: 0.55; }
.settle-t .neg { color: var(--sys-red-text); }
.settle-t .ok { color: var(--sys-green-text); font-weight: 600; } .settle-t .warn { color: var(--sys-orange-text); font-weight: 600; }
/* v401 ── 월별 표: 지난달 값(placeholder)이 있는 칸은 + 를 숨겨 겹치지 않게 · 달 고르기 팝오버 */
.mx-table td.mx-plus:has(.mx-prev-ph) .mx-plus-i { display: none; }
.mx-table td.mx-plus:hover .mx-prev-ph { opacity: 1; color: var(--text-muted); }
.mx-months-pop { min-width: 220px; } .mx-months-list { max-height: 50vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 6px 0; }
.settle-t .settle-in { width: 108px; font-size: 12px; padding: 3px 6px; } .settle-t .settle-date { width: 128px; } .settle-t td { vertical-align: middle; }
/* v404 ── 월 마감 점검 */
.cl-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cl-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-hairline); border-radius: 8px; }
.cl-row .cl-ic { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cl-row .cl-ic svg { width: 13px; height: 13px; }
.cl-row.ok .cl-ic { background: rgba(23,122,67,0.12); color: var(--sys-green-text); } .cl-row.off .cl-ic { background: rgba(154,100,18,0.14); color: var(--sys-orange-text); }
.cl-row .cl-l { flex: 1; font-size: 13px; color: var(--color-ink); display: flex; flex-direction: column; } .cl-row .cl-l small { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.cl-row.ok .cl-l { color: var(--text-muted); }
.cl-sum { margin-top: 12px; font-size: 13px; font-weight: 600; } .cl-sum.ok { color: var(--sys-green-text); } .cl-sum.off { color: var(--sys-orange-text); }
.cl-danger { color: var(--sys-red-text); }
/* v404: 드로어·모달이 열려 있는 동안 채팅 FAB 를 숨긴다 — 푸터 버튼(확정·申請)을 가리던 것 */
body:has(.drawer-overlay) #chat-fab { display: none; }
/* v405 ── 미수·미지급 */
.arap-aging { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 8px 16px 6px; background: var(--color-surface-chip); }
.arap-seg { display: block; height: 100%; } .arap-seg.b0, .arap-legend i.b0 { background: var(--accent); } .arap-seg.b1, .arap-legend i.b1 { background: #e0b04a; } .arap-seg.b2, .arap-legend i.b2 { background: #e07a3a; } .arap-seg.b3, .arap-legend i.b3 { background: var(--sys-red-text); }
.arap-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 16px 10px; font-size: 12px; color: var(--text-muted); } .arap-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .arap-legend b { color: var(--color-ink); font-weight: 600; }
.arap-t td .small { font-size: 11.5px; } .arap-t .pb-chip.late { background: rgba(201,50,50,0.1); color: var(--sys-red-text); } .arap-t .pb-chip.warn { background: rgba(154,100,18,0.12); color: var(--sys-orange-text); }
.arap-kpis .kpi-sub .warn { color: var(--sys-orange-text); font-weight: 600; }
/* v407 ── 손익 고정 순서 · 정산서 직접 입력 */
.settle-t .settle-file.is-manual { color: var(--text-muted); font-style: italic; }
.drawer-foot .settle-add { margin-right: 8px; }
.settle-t .settle-mini { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
/* v408 ── 미도착 정산서 · 잠정 매출 · 수수료 검증 */
.rc-expect { margin-bottom: 12px; } .rc-expect .sec-head { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.rc-expect .sec-caret { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--text-muted); } .rc-expect .sec-caret svg { width: 14px; height: 14px; }
.rc-exp-t td, .rc-exp-t th { font-size: 12px; } .rc-exp-t tr.is-late td { color: var(--sys-orange-text); }
.rc-exp-t .rc-exp-b { display: block; font-size: 11px; font-weight: 400; } .rc-exp-t .rc-exp-a { text-align: right; }
.pl-prov { margin-bottom: 12px; color: var(--sys-orange-text); }
.settle-t .settle-fee { display: block; font-size: 11px; margin-top: 2px; }
/* v409 ── 소비세 · 자체회수 · 교체 */
.arap-own { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; padding: 4px 0 6px; } .arap-own b { font-variant-numeric: tabular-nums; }
.jct-t td, .jct-t th { font-size: 12px; } .jct-link { color: var(--color-accent); cursor: pointer; font-size: 12px; }
.jct-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .jct-f { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); } .jct-f .prop-input { width: 130px; }
.settle-t .settle-rep { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 2px; white-space: nowrap; }
/* v409 ── 채팅 버튼: 흰 원+실선은 카드 테두리 위에서 조각처럼 보였다 → 채운 액센트, 흰 아이콘. 어디에 놓여도 버튼으로 읽힌다 */
#chat-fab { background: var(--accent); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(79, 107, 237, 0.32), 0 1px 3px rgba(0,0,0,0.12); }
#chat-fab:hover { background: var(--accent); filter: brightness(1.08); box-shadow: 0 8px 22px rgba(79, 107, 237, 0.38), 0 1px 3px rgba(0,0,0,0.12); }
#chat-fab.open { background: var(--color-ink); }
html[data-theme="dark"] #chat-fab { background: var(--accent); color: #fff; }
/* v409b ── 채팅 버튼 아이콘 중앙: 래퍼(.ic)가 30px 인데 svg 는 18px 이라 좌상단으로 6px 치우쳤다 */
#chat-fab .ic { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
#chat-fab svg { display: block; }
/* v415 ── 전월 금액 가져오기 미리보기 */
.mx-cppop { width: min(560px, calc(100vw - 16px)); } .mx-cppop .cp-wrap { max-height: 46vh; overflow: auto; margin-top: 6px; }
.cp-t td, .cp-t th { font-size: 12px; padding: 5px 8px; } .cp-t .cp-v small { display: block; color: var(--text-muted); font-size: 11px; } .cp-t .cp-date { width: 138px; }
.mx-cppop .ms-pop-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* v416 ── 월 칸은 읽기 전용 · 전월 가져오기 같은 행 두 번째 줄 */
.mx-cum-ro { color: var(--text-muted); cursor: default; } .mx-cum-ro .mx-prev-ph { opacity: 0.7; }
.cp-t tr.cp-same td { border-top-color: transparent; }
/* v417 ── 고정 열(월)은 행 하이라이트에서도 불투명해야 밑의 날짜 칸이 안 비친다 · 비교할 달 토글 */
.mx-table tbody tr:hover td.mx-stk, .mx-table tbody tr:hover th.mx-stk { background-color: color-mix(in srgb, var(--mx-m-bg) 98%, #000 2%); }
html[data-theme="dark"] .mx-table tbody tr:hover td.mx-stk, html[data-theme="dark"] .mx-table tbody tr:hover th.mx-stk { background-color: color-mix(in srgb, var(--mx-m-bg) 97%, #fff 3%); }
/* v418 ── 날짜 칸 선택 */
.mx-table td.mx-plus { user-select: none; } .mx-table td.mx-plus.is-sel { box-shadow: inset 0 0 0 2px var(--accent); background-color: var(--accent-soft) !important; }
.mx-table td.mx-plus.is-sel .mx-plus-i { color: var(--accent); } .mx-sel-n { margin-left: 4px; font-weight: 600; color: var(--accent); }
/* v419 ── 작은 메뉴 · 입금 화면의 매장 보고 매출 구역 */
.mini-menu { position: fixed; z-index: 1000; min-width: 220px; padding: 6px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 10px; box-shadow: var(--shadow-pop); }
.mini-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 6px; text-align: left; font-size: 13px; color: var(--color-ink); cursor: pointer; }
.mini-item:hover { background: var(--accent-soft); } .mini-item svg { width: 14px; height: 14px; color: var(--text-muted); } .mini-caret { font-size: 10px; margin-left: 2px; opacity: .8; }
.rc-ms-sec { margin-top: 16px; } .rc-ms-sec .sec-head { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.rc-ms-sec .sec-caret { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--text-muted); } .rc-ms-sec .sec-caret svg { width: 14px; height: 14px; }
.rc-ms-body { margin-top: 10px; } .rc-ms-body > .card { box-shadow: none; border: 1px solid var(--color-hairline); }
/* v420 ── 월 마감 페이지 */
.cl-page .sec-head { display: flex; align-items: center; gap: 12px; } .cl-page .sec-title { display: inline-flex; align-items: center; gap: 8px; }
.cl-steps { display: flex; flex-direction: column; gap: 22px; margin-top: 14px; }
.cl-step h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; } .cl-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; align-items: center; justify-content: center; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .cl-step .card { box-shadow: none; border: 1px solid var(--color-hairline); margin-top: 8px !important; }
/* v421 ── 탭 묶음 · 보기 메뉴 */
.cost-groups .m-seg-b { font-weight: 600; } .cost-viewseg { margin-bottom: 14px; }
.mini-menu label.mini-item input { margin: 0; } .mini-sec { font-size: 11px; color: var(--text-muted); padding: 8px 10px 2px; }
.mini-sel { margin: 4px 10px 6px; width: calc(100% - 20px); }
/* v425 ── 시산표 */
.tb-page .sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tb-page .sec-title { display: inline-flex; align-items: center; gap: 8px; }
.tb-t td, .tb-t th, .tb-open-t td, .tb-open-t th, .tb-ledger td, .tb-ledger th { font-size: 12px; } .tb-code { color: var(--text-quiet); font-size: 11px; width: 64px; }
.tb-t tr.pl-sec th { text-align: left; } .tb-calc td { color: var(--text-muted); font-style: italic; }
.tb-open { margin: 12px 0; box-shadow: none; border: 1px solid var(--color-hairline); } .tb-open .sec-head { cursor: pointer; user-select: none; }
.tb-open .sec-caret { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--text-muted); } .tb-open .sec-caret svg { width: 14px; height: 14px; }
.tb-open-in { width: 140px; }
/* v430 ── UX 워커·수치 검사 결과: 대비·글자 크기·탭 크기·넘침 */
.mx-table td.mx-cell.is-approved { color: var(--sys-green-text); } .mx-table td.mx-cell.is-pending { color: var(--sys-orange-text); } /* #34c759 는 흰 바탕에서 2.2:1 */
.ms-diff, .mx-n, .ms-lock, .mini-caret, .sum-table small, .tb-ledger small, .cp-v small, .arap-own-t small { font-size: 11px; } /* 바닥선: 글자 11px 이상 */
.mini-item { min-height: 36px; } .btn-mini.x { min-width: 26px; text-align: center; }
.grid.cols-2 > *, .grid > .card { min-width: 0; } /* 표가 든 카드가 열을 밀어 본문이 가로로 넘치던 것(자금보고 1280px) */
@media (max-width: 480px) { .mini-item { min-height: 44px; } .drawer .btn-mini.x, .drawer .modal-x, .drawer .ci-del { min-width: 36px; min-height: 36px; } .drawer .m-ref, .drawer .btn-mini { min-height: 36px; } }
/* v431 ── 다크 테마 의미색 텍스트: 라이트 토큰(#1a7a34·#8a5400·#bb2d22)은 어두운 바탕에서 3:1 안팎 → 밝은 값 */
:root { --color-ok: #1e7a3b; --color-warn: #8a5400; }
html[data-theme="dark"] { --sys-green-text: #6fd39a; --sys-orange-text: #f2b35a; --sys-red-text: #ff8a80; --color-ok: #6fd39a; --color-warn: #f2b35a; }
html[data-theme="dark"] .cl-n { color: #0f1014; } /* 앱은 data-theme 로만 테마를 정한다(OS 설정 미디어쿼리 없음) */
:root { --color-crit: #bb2d22; } html[data-theme="dark"] { --color-crit: #ff8a80; } /* v432: 음수 금액·경고 텍스트 토큰 — 다크에서 2.99 → 7:1 */

/* v440 ── 회계사무소 시산표 대조 */
.tb-gyc { margin-top: 14px; } .tb-gyc-t td.tb-gyc-name { max-width: 280px; } .tb-gyc-t td.tb-gyc-name small { display: block; }
.tb-gyc-t tr.is-um td { background: color-mix(in srgb, var(--color-warn) 9%, transparent); } .tb-gyc-t tr.is-diff td:last-child b { color: var(--color-crit); }
.tb-gyc .tb-map-sel { max-width: 230px; } .tb-gyc .jct-f input[type="checkbox"] { margin: 0 4px 0 0; }

/* v441 ── 급여 분개(마감 2단계) */
.pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; margin: 10px 0 6px; } @media (max-width: 760px) { .pay-grid { grid-template-columns: 1fr; } }
.pay-col h5 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text-2, #6b6f76); letter-spacing: .02em; }
.pay-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; } .pay-f > span { flex: 1 1 auto; min-width: 0; } .pay-f .sheet-in { width: 140px; flex: 0 0 auto; }
.pay-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent, #111113) 6%, transparent); font-size: 13px; } .pay-sum b { font-variant-numeric: tabular-nums; }
/* v445 ── 채권채무: 회계사무소 보조원장 대조 */
.arap-gyc { margin-top: 14px; } .arap-gyc .tb-gyc-t td small { white-space: nowrap; }
/* v446 ── 고정자산 대장 */
.fa-block { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border, #e5e7eb); } .fa-line { font-size: 13px; } .fa-line .is-ok { color: var(--color-ok); } .fa-line .is-neg { color: var(--color-crit); }
.fa-t .sheet-in { min-width: 90px; } .fa-t .fa-date { width: 130px; } .fa-t .fa-n { width: 60px; } .fa-t td:first-child .sheet-in { min-width: 160px; }
/* v447 ── 차입금 대장·분개 대조 */
.fa-t .ln-ev { min-width: 220px; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; } .je-sum tr.is-diff td { background: color-mix(in srgb, var(--color-warn) 8%, transparent); } .je-lines td { font-size: 12px; }
/* v448 ── 선급 대장 */
.fa-t input[type="month"] { width: 120px; } .pp-cands td { font-size: 12px; }
/* v449 ── 재무제표·월말 재고 */
.fs-page .sec-head { flex-wrap: wrap; } .fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; } @media (max-width: 980px) { .fs-grid { grid-template-columns: 1fr; } }
.fs-card { margin-top: 0; } .fs-card + .fs-card, .fs-page > .fs-card { margin-top: 14px; } .fs-t td.fs-acc { padding-left: 22px; } .fs-t tr.fs-sub th { text-align: left; font-weight: 600; background: color-mix(in srgb, var(--accent, #111113) 5%, transparent); }
.fs-t tr.fs-tot td { font-weight: 600; border-top: 1px solid var(--border, #e5e7eb); } .fs-t tr.fs-grand td { font-weight: 700; background: color-mix(in srgb, var(--accent, #111113) 8%, transparent); } .fs-t td.num { font-variant-numeric: tabular-nums; } .fs-cf td:first-child { padding-left: 14px; }
.inv-row { align-items: center; flex-wrap: wrap; gap: 10px; } .inv-row .sheet-in { width: 150px; }
.fs-t tr.fs-detail td { padding-left: 12px; font-size: 12px; color: var(--text-2, #6b6f76); font-weight: 600; padding-top: 8px; }
/* v450 ── 재고 모듈 */
.inv-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 8px 0 12px; } .inv-map-grid .ms-f { display: flex; flex-direction: column; gap: 4px; } .inv-prev td, .inv-prev th { font-size: 12px; white-space: nowrap; }
.inv-t tr.is-diff td, .inv-d tr.is-diff td { background: color-mix(in srgb, var(--color-warn) 8%, transparent); } .inv-t td small, .inv-d td { font-variant-numeric: tabular-nums; } .inv-d th:first-child, .inv-d td:first-child { position: sticky; left: 0; background: #fff; z-index: 2; box-shadow: 1px 0 0 var(--color-hairline-soft); } .inv-d thead th:first-child { z-index: 3; } .inv-d tr.is-diff td:first-child { background: color-mix(in srgb, var(--color-warn) 8%, #fff); } .inv-d tfoot th:first-child { background: var(--color-surface-pearl); } .inv-d td:nth-child(2) { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inv-p .sheet-in { min-width: 120px; }
/* v452 ── 넓은 드로어(대장·매핑·대조): 표가 넓어 620px 에서 가로 스크롤만 남던 것 */
.drawer.is-wide { width: min(1080px, 100%); }
/* v454 ── 페르소나 하네스 지적: 작은 표적·긴 스크롤·마감 단계 접기 */
.m-seg-b { min-height: 28px; } .drawer-x { min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; position: relative; } .drawer-x::before { content: ""; position: absolute; inset: -6px; }
.cl-step h4 { cursor: pointer; user-select: none; } .cl-step h4:hover .cl-n { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #111113) 18%, transparent); } .cl-step.is-collapsed > *:not(h4) { display: none; } .cl-step.is-collapsed h4 { opacity: .75; margin-bottom: 0; }
.cl-h4-btn { margin-left: auto; font-weight: 500; }
/* v455 ── 모바일 탭 표적: 워커 smallTap 103건(.m-seg-b 46×28) → 36px */
@media (max-width: 767px) { .m-seg-b { min-height: 36px; padding: 8px 14px; } }
/* v456 ── 비용 탭 묶음 고정 */
.cost-tabs { position: sticky; top: 52px; z-index: 50; background: var(--color-canvas); display: flex; align-items: flex-start; gap: 8px 14px; flex-wrap: wrap; padding: 6px 0 6px; margin: -6px 0 10px; }
.cost-tabs-l { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } /* v463: 그룹 줄이 문서 줄 너비로 늘어나 빈 칸이 생기던 것 */ .cost-tabs .cost-viewseg { margin-bottom: 0; } .cost-tabs .cost-groups { margin-bottom: 0; } .cost-tabs-r { margin-left: 8px; align-self: flex-end; display: flex; align-items: center; gap: 10px; } /* v458: 문서 탭 바로 옆, 왼쪽 정렬(오른쪽 끝에 붙어 있던 것) */
@media (max-width: 767px) { .cost-tabs { position: static; } }
html[data-theme="dark"] .cost-tabs { background: var(--color-canvas); }
/* v457 ── 마감 진행 바·급여 블록 */
.cl-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; } .cl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--color-hairline); background: transparent; font: inherit; font-size: 12.5px; color: var(--text-muted); cursor: pointer; min-height: 30px; }
.cl-chip.is-open { color: var(--text); border-color: color-mix(in srgb, var(--accent, #111113) 40%, transparent); background: color-mix(in srgb, var(--accent, #111113) 6%, transparent); } .cl-chip .cl-n { width: 18px; height: 18px; font-size: 11px; } .cl-chip .cl-bad { color: var(--color-crit); font-weight: 700; } .cl-chip .cl-good { color: var(--color-ok); }
.cl-bar-r { margin-left: auto; display: flex; gap: 6px; } .pay-block { border-top: 1px dashed var(--border, #e5e7eb); margin-top: 12px; padding-top: 10px; } .btn.is-on { background: color-mix(in srgb, var(--accent, #111113) 12%, transparent); }
/* v460 ── 디테일 워커: 칩 아이콘-글자 간격 */
.mine-chip { display: inline-flex; align-items: center; gap: 6px; } .mine-chip svg { flex: 0 0 auto; }
/* v461 ── 드로어 안 표는 드로어 본문이 한 번에 스크롤(표 안쪽 434px 이중 스크롤 제거) */
.drawer .drawer-body .table-wrap { max-height: none; overflow-y: visible; }
/* v462 ── 디테일 워커 100회: 섹션 헤더 오른쪽 버튼 묶음 간격 0px, 선택상자 붙음, 토스트가 CREAS TALK 버튼을 덮음 */
.sec-head .drawer-foot-r { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.sec-title .a-select + .a-select, .sec-title select + select { margin-left: 8px; }
#toast-root { top: 104px; bottom: auto; right: 18px; } @media (max-width: 640px) { #toast-root { top: 116px; bottom: auto; left: 12px; right: 12px; } } /* v466: 토스트는 서브바(52+44px) 아래 — CREAS TALK 버튼을 덮던 것 */
/* v463b ── 재무제표 격자: 두 카드 상단 맞춤, 손익(4열)에 너비 더, 숫자 열 여백 축소 */
.fs-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .fs-grid > .fs-card { margin-top: 0 !important; }
.fs-t th.num, .fs-t td.num { white-space: nowrap; padding-left: 8px; padding-right: 8px; } .fs-t { font-size: 13px; } .fs-t td.fs-acc { padding-left: 16px; }
@media (max-width: 980px) { .fs-grid { grid-template-columns: 1fr; } }
/* v467 ── 접히는 카드(매장 보고 매출·정산 예정·기초잔액): 캐럿이 오른쪽으로 밀리던 것(.sec-caret margin-left:auto)과 접힌 카드가 77px 로 두껍던 것 */
.rc-ms-sec .sec-caret, .rc-expect .sec-caret, .tb-open .sec-caret { margin-left: 0; }
.rc-ms-sec.is-closed, .rc-expect.is-closed, .tb-open.is-closed { padding-top: 6px; padding-bottom: 6px; } .rc-ms-sec.is-closed .sec-head, .rc-expect.is-closed .sec-head, .tb-open.is-closed .sec-head { padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; }
/* v468 ── 모바일·영어: 보고 문서 줄(.cost-viewseg)이 582px 로 페이지를 옆으로 늘리던 것(.cost-tabs-l 이 내용 폭으로 커짐) → 줄이 줄어들고 가로 스크롤 */
.cost-tabs { max-width: 100%; min-width: 0; } .cost-tabs-l { flex: 0 1 auto; min-width: 0; max-width: 100%; } .cost-tabs-l > .m-seg { max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; } .cost-tabs-l > .m-seg::-webkit-scrollbar { display: none; }
/* v470 ── 지급일 묶음: 제외 사유 칩, 머리의 '남은 건 모두 승인' */
.pb-chip.why { background: var(--color-surface-chip); color: var(--color-ink-2, #5b6472); }
.pb-head .pb-chip { margin-left: 6px; }
/* v475 ── 재무제표 월별 보기: 첫 열 고정, 숫자 열 고정폭, 모드 토글 */
.fs-seg { margin-left: 8px; vertical-align: middle; } .fs-seg .m-seg-b { font-size: 12px; padding: 4px 10px; }
.fs-t.fs-m { min-width: 100%; } .fs-t.fs-m th:first-child, .fs-t.fs-m td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface, var(--surface, #fff)); min-width: 180px; }
.fs-t.fs-m tr.fs-sub th:first-child, .fs-t.fs-m tr.pl-sec th:first-child { position: static; } .fs-t.fs-m th.num, .fs-t.fs-m td.num { min-width: 96px; font-variant-numeric: tabular-nums; }
.fs-t.fs-m th.num:last-child, .fs-t.fs-m td.num:last-child { border-left: 1px solid var(--color-hairline, #e5e7eb); font-weight: 600; }
/* v476 ── 월별 표: 고정된 첫 머리 칸도 머리띠 배경, 합계 행은 위쪽 여백 */
.fs-t.fs-m thead th:first-child { background: var(--color-surface-pearl, #fafafb); z-index: 2; } .fs-t.fs-m tr.fs-grand td { border-top: 2px solid var(--color-hairline, #e5e7eb); }
/* v480 ── 키보드: 행·칸·토글 포커스 표시, 상신 바 단축키 안내 */
#view-root tr[tabindex]:focus-visible, #view-root td[tabindex]:focus-visible, #view-root div[tabindex]:focus-visible, #view-root h4[tabindex]:focus-visible, #view-root span[tabindex]:focus-visible { outline: 2px solid var(--color-focus-blue); outline-offset: -2px; }
.mx-stage-k { font-size: 11px; margin-left: 8px; }
@media (max-width: 640px) { .mx-stage-k { display: none; } }
/* v480b ── 대비(axe color-contrast): 기한 경과 칩·섹션 카운트 글자를 진하게 */
.pb-chip.off { color: #7a4a00; } html[data-theme="dark"] .pb-chip.off { color: #ffc27a; }
.sec-count { color: var(--color-ink-2, #4b5563); }
/* v480c ── 빈 항목이 있는 결의서 행: 투명도 대신 글자색으로 낮춤(axe color-contrast) */
tr.pb-gap { opacity: 1; } tr.pb-gap td, tr.pb-gap .pb-desc { color: var(--color-ink-2, #4b5563); } tr.pb-gap .pb-meta { color: var(--color-ink-2, #4b5563); }
/* v481 ── 작은 칩 글자 대비 4.19→4.5 이상(axe color-contrast) */
.mini-chip { color: #565c6b; } html[data-theme="dark"] .mini-chip { color: #c4c8d2; }
/* v482 ── 분개장 화면 */
.jr-page .sec-head { flex-wrap: wrap; gap: 8px; } .jr-seg { margin-left: 4px; } .jr-seg .m-seg-b { font-size: 12px; padding: 4px 10px; } .jr-q { min-width: 220px; }
.jr-t td.jr-ref { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--color-ink-2, #4b5563); white-space: nowrap; }
.jr-t tr.jr-first td { border-top: 1px solid var(--color-hairline, #e5e7eb); } .jr-t tbody tr:first-child td { border-top: 0; }
.jr-t .btn-mini { margin-left: 4px; } .jr-t .jr-open { background: var(--color-surface-chip); } .jr-t .jr-fix { color: var(--color-ink-2, #4b5563); }
.jr-page .pb-hint { display: block; margin: 4px 0 10px; }
/* v483 ── 최종 UX 워커: 다크 테마 대비(설정 탭·급여 소제목·기본 버튼), 마감 토글·칩의 터치 높이 */
html[data-theme="dark"] .m-tab.is-active { color: #16171c; } html[data-theme="dark"] .m-tab.is-active .mini-chip { background: rgba(0,0,0,0.12); color: #16171c; }
html[data-theme="dark"] .pay-col h5 { color: #a4a9b3; }
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .talk-btn { background: #4a66e8; } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .talk-btn:hover { background: #ffffff; }
.cl-chip { min-height: 32px; } #view-root h4[data-action] { min-height: 32px; display: flex; align-items: center; gap: 8px; }

/* BENNYWORKS: 법인이 하나라 조회 범위(법인) 선택은 숨긴다 — js/brand.js singleOrg */
html[data-single-org="1"] .scope-wrap { display: none !important; }