/* KOG Ops One 공통 컴포넌트 — 시안 기준 */

/* 아이콘 전역 기본 크기 — 스코프(.btn .ic 등) 규칙이 덮어씀.
   미스코프 .ic(viewBox만 있는 SVG)가 컨테이너 폭으로 부풀어 화면을 덮는 사고 방지. */
.ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r-md); font-size: 14px; font-weight: 700;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-2); transition: .12s;
}
.btn .ic { width: 18px; height: 18px; }
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 8px 18px rgba(45,91,255,.22); }
.btn-primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 20px; font-size: 15.5px; border-radius: var(--r-md); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.btn-soft { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.btn-soft:hover { background: var(--primary-softer); }

/* ---------- links ---------- */
.tlink { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.tlink:hover { color: var(--text); }
.tlink .ic { width: 15px; height: 15px; }
.tlink.accent { color: var(--primary); }

/* ---------- avatars ---------- */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: -0.3px;
  background: var(--av-1); color: var(--av-1t); flex: 0 0 auto; overflow: hidden; }
.avatar.s { width: 30px; height: 30px; font-size: 11.5px; }
.avatar.lg { width: 40px; height: 40px; }
.avatar.a2 { background: var(--av-2); color: var(--av-2t); }
.avatar.a3 { background: var(--av-3); color: var(--av-3t); }
.avatar.a4 { background: var(--av-4); color: var(--av-4t); }

/* ---------- icon tiles ---------- */
.tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--surface-3); color: var(--text-muted); }
.tile .ic { width: 21px; height: 21px; }
.tile.blue { background: var(--tile-blue-bg); color: var(--tile-blue-fg); }
.tile.red { background: var(--tile-red-bg); color: var(--tile-red-fg); }
.tile.green { background: var(--tile-green-bg); color: var(--tile-green-fg); }
.tile.amber { background: var(--tile-amber-bg); color: var(--tile-amber-fg); }
.tile.purple { background: var(--tile-purple-bg); color: var(--tile-purple-fg); }
.tile.gray { background: var(--surface-3); color: var(--text-muted); }

/* ---------- live badge (사이드바 실시간 연결 상태) ---------- */
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px 0 10px; margin: 6px 12px 2px;
  height: 32px;
  border-radius: var(--r-pill); border: none;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--text-faint); background: transparent;
  transition: color .2s ease, background .2s ease;
  user-select: none;
}
.live-badge.on {
  color: #fff;
  background: var(--success);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--text-faint);
  transition: background .2s ease;
}
.live-badge.on .live-dot {
  background: #fff;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
  50%       { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-badge.on .live-dot { animation: none; }
}

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.4; }
.badge .ic { width: 13px; height: 13px; }
.badge.high  { background: var(--danger-soft);  color: var(--danger); }
.badge.mid   { background: var(--warning-soft); color: var(--warning); }
.badge.low   { background: var(--primary-soft); color: var(--primary); }
.badge.review{ background: var(--surface-3);    color: var(--text-muted); }
.badge.info  { background: var(--primary-soft); color: var(--primary); }
.badge.warn  { background: var(--warning-soft); color: var(--warning); }
.badge.ok    { background: var(--success-soft); color: var(--success); }
.badge.muted { background: var(--surface-3);    color: var(--text-muted); }
.badge.danger{ background: var(--danger-soft);  color: var(--danger); }
.badge .n, .badge { font-variant-numeric: tabular-nums; }
/* small fixed-width priority chip (task rows) */
.pchip { min-width: 46px; justify-content: center; letter-spacing: .01em; }

/* due text */
.due { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.due.today { color: var(--danger); }

/* ---------- panel / card ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 14px; }
.panel-head h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.panel-head h3 .spark { width: 20px; height: 20px; color: var(--ai); }
.panel-head .grow { flex: 1; }
.panel-body { padding: 0 22px; }
.panel-foot { padding: 8px 22px 18px; text-align: center; }
.panel-foot .tlink { font-size: 14px; color: var(--primary); }

/* card section title (mobile/sections) */
.sec-head { display: flex; align-items: center; gap: 10px; margin: 22px 2px 12px; }
.sec-head h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.sec-head .grow { flex: 1; }

/* ---------- greeting (desktop home) ---------- */
.greeting { margin: 10px 0 24px; }
.greeting h1 { font-size: 31px; line-height: 1.22; letter-spacing: -.025em; }
.greeting .sub { margin-top: 11px; font-size: 16px; color: var(--text-muted); }
/* 우선순위 숫자 강조 — 칩처럼 살짝 띄워 시선 유도 */
.greeting .sub b {
  color: var(--primary); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.head-row { display: flex; align-items: flex-start; gap: 20px; }
.head-row .grow { flex: 1; }

/* ---------- task rows ---------- */
.rows { display: flex; flex-direction: column; }
.task-row { display: flex; align-items: center; gap: 14px; padding: 15px 2px; border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: none; }
.task-row .pchip { flex: 0 0 auto; }
.task-row .tx { flex: 1; min-width: 0; }
.task-row .tx .t { font-size: 15px; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row .tx .s { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.task-row .right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.task-row .chev { color: var(--text-faint); }
.task-row .chev .ic { width: 18px; height: 18px; }

/* ---------- AI recommendation rows ---------- */
.ai-row { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--border); }
.ai-row:last-child { border-bottom: none; }
.ai-row .tx { flex: 1; min-width: 0; }
.ai-row .tx .t { font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.ai-row .tx .s { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.ai-row .chev { color: var(--text-faint); }
.ai-row .chev .ic { width: 18px; height: 18px; }

/* ---------- tabs (pill) ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--text-muted); }
.tab.active { background: var(--primary-soft); color: var(--primary); }
.tab .n { font-size: 12px; color: var(--text-faint); font-weight: 700; }
.tab.active .n { color: var(--primary); }

/* ---------- calendar banner ---------- */
.cal-banner {
  display: flex; align-items: center; gap: 14px; margin-top: 18px;
  background: var(--primary-softer); border: 1px solid var(--primary-soft); border-radius: var(--r-lg); padding: 16px 20px;
}
.cal-banner .tile { background: var(--surface); color: var(--primary); }
.cal-banner .tx { flex: 1; font-size: 14.5px; color: var(--text); font-weight: 500; }

/* ---------- mobile summary card ---------- */
.sumcard {
  display: flex; align-items: center; gap: 14px; background: var(--primary-softer);
  border: 1px solid var(--primary-soft); border-radius: var(--r-lg); padding: 16px; margin: 8px 0 4px;
}
.sumcard .tile { background: var(--surface); color: var(--primary); }
.sumcard .tx { flex: 1; }
.sumcard .tx .t { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.sumcard .tx .t b { color: var(--primary); }
.sumcard .tx .s { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.sumcard .chev { color: var(--text-faint); }

/* ---------- home grid ---------- */
.home-grid { display: grid; grid-template-columns: 1.62fr 1fr; gap: 20px; align-items: start; }
.home-grid.single { grid-template-columns: 1fr; }
@media (max-width: 980px) { .home-grid { grid-template-columns: 1fr; } }

/* mobile card variant of panel (no heavy padding) */
@media (max-width: 768px) {
  .panel { border-radius: var(--r-lg); }
  .panel-head { padding: 18px 18px 12px; }
  .panel-head h3 { font-size: 18px; }
  .panel-body { padding: 0 18px; }
  .greeting h1 { font-size: 24px; }
  .mb-gap { height: 18px; }

  /* 모바일 작업행 — 좁은 폭에서 제목 래핑 + 우측 컴팩트 */
  .task-row { align-items: flex-start; gap: 11px; padding: 14px 2px; }
  .task-row .pchip { margin-top: 1px; }
  .task-row .tile { width: 40px; height: 40px; }
  .task-row .tx { align-self: center; }
  .task-row .tx .t { white-space: normal; font-size: 14.5px; line-height: 1.35; }
  .task-row .right { flex-direction: column; align-items: flex-end; gap: 8px; align-self: center; }
  .task-row .due { font-size: 12.5px; }
  .ai-row .tx .t { white-space: normal; }
}

/* desktop spacing between stacked panels */
.stack-gap { height: 20px; }

/* ============================================================
   화면별 컴포넌트 (인박스·승인·지식·리포트·관리)
   ============================================================ */

/* ---------- page title (desktop) ---------- */
.page-title { margin: 8px 0 20px; }
.page-title .row { display: flex; align-items: flex-start; gap: 16px; }
.page-title .row .grow { flex: 1; }
.page-title h1 { font-size: 28px; }
.page-title h1 .ic { width: 26px; height: 26px; display: inline-block; vertical-align: -4px; }
.page-title .sub { margin-top: 8px; font-size: 15px; color: var(--text-muted); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip .meta { text-align: right; line-height: 1.25; }
.user-chip .meta b { font-size: 13.5px; color: var(--text-strong); display: block; }
.user-chip .meta span { font-size: 12px; color: var(--text-faint); }

/* page-title-row — 타이틀(좌) + 새 업무 버튼(우) 한 줄 flex 래퍼 */
.page-title-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 0 16px;
}
.page-title-text h1 { font-size: 28px; }
.page-title-text h1 .ic { width: 26px; height: 26px; display: inline-block; vertical-align: -4px; }
.page-title-text .sub { margin-top: 6px; font-size: 15px; color: var(--text-muted); }
/* page-title-new-task-btn — 타이틀 줄 우측 끝 새 업무 버튼 */
.page-title-new-task-btn {
  flex-shrink: 0;
  padding: 0 20px; height: 44px; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- stat strip — 2단(전체/내 업무) ---------- */
/* stat-strip-header — 구 KPI+버튼 래퍼. 버튼은 page-title-row로 이동. 하위호환 보존. */
.stat-strip-header {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px;
}
.stat-strip-header .stat-strip { flex: 1; min-width: 0; margin-bottom: 0; }
/* stat-new-task-btn — 구 KPI 우측 버튼. 현재 미사용(page-title-new-task-btn으로 대체). */
.stat-new-task-btn {
  flex-shrink: 0; align-self: flex-start;
  padding: 0 18px; height: 44px; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.stat-strip {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); margin-bottom: 22px;
  display: flex; flex-direction: column;
}
.stat-strip-row {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.stat-strip-row:last-child { border-bottom: none; }
/* 폴드 가로·태블릿(769~1100px)처럼 사이드바 때문에 본문이 좁아지면 1fr 셀이 글자 하나 폭까지 눌려
   라벨이 세로로 깨진다(2026-09-03 회의록 점검). 셀은 줄바꿈 없이 제 폭을 지키고, 넘치면 가로 스크롤. */
.stat-strip-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.stat-cell { display: flex; align-items: center; gap: 14px; padding: 14px 18px; position: relative; white-space: nowrap; }
.stat-cell + .stat-cell::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--border); }
.stat-cell .label { font-size: 12px; color: var(--text-muted); }
.stat-cell .value { font-size: 22px; font-weight: 800; color: var(--text-strong); margin-top: 3px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-cell .value.warn { color: var(--warning); }
.stat-cell .value.danger { color: var(--danger); }
/* KPI 셀 호버 — 클릭 가능 표시 */
.stat-cell.stat-clickable:hover { background: var(--primary-softer); }
/* KPI 카드 멀티셀렉트 액티브 — 테두리 없이 배경색으로만 강조(이부장님 요청) */
.stat-cell.stat-active { background: var(--primary-soft); }
.stat-cell.stat-active .label { color: var(--primary); font-weight: 700; }
.stat-cell.stat-active .value { color: var(--primary); }
/* active 셀 좌측 구분선(::before) — 배경 강조와 겹치므로 숨김 */
.stat-cell.stat-active::before { display: none; }

/* ---------- stat cards (separate, approvals) ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.stat-card .top { display: flex; align-items: flex-start; justify-content: space-between; }
.stat-card .label { font-size: 13px; color: var(--text-muted); }
.stat-card .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.stat-card .ico .ic { width: 18px; height: 18px; }
.stat-card .value { font-size: 30px; font-weight: 800; color: var(--text-strong); margin-top: 14px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- inbox table (desktop) ---------- */
/* overflow:hidden 제거 — 조상 overflow가 thead position:sticky를 깨뜨리므로(헤더 고정 복구). 모서리 클리핑보다 sticky 우선. */
.itable { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.itable .thead, .itable .trow { display: grid; grid-template-columns: 2.5fr 1.1fr 1.2fr 1fr 1.1fr; align-items: center; gap: 14px; padding: 15px 22px; }
.itable .thead { font-size: 12.5px; color: var(--text-faint); font-weight: 600; border-bottom: 1px solid var(--border); background: var(--surface); }
.itable .trow { border-bottom: 1px solid var(--border); }
.itable .trow:last-child { border-bottom: none; }
.itable .trow:hover { background: var(--surface-2); }
.itable .cmain { display: flex; align-items: center; gap: 13px; min-width: 0; }
.itable .cmain .t { font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.itable .cmain .s { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.itable .cproc { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.itable .kebab { color: var(--text-faint); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.itable .kebab:hover { background: var(--surface-3); }

/* ── 휴지통 (단계4) — itable 재사용 + 6컬럼 그리드·위험/고스트 버튼·일괄 액션바 ── */
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-muted); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.itable .trash-thead, .itable .trash-row { grid-template-columns: 40px minmax(0, 2.4fr) 0.9fr 1.4fr 1.1fr 200px; }
.trash-thead .tcell-check, .trash-row .tcell-check { display: flex; align-items: center; justify-content: center; }
.trash-row .tcell-deleted { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.trash-row .tcell-acts { display: flex; gap: 6px; justify-content: flex-end; }
.sel-action-bar { align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 14px; background: var(--primary-softer); border: 1px solid var(--border); border-radius: var(--r-md); }
.sel-action-bar .sel-count { font-weight: 700; color: var(--text-strong); margin-right: auto; }
.itable-foot { text-align: center; padding: 14px; border-top: 1px solid var(--border); }

/* ---------- search / filter / chips ---------- */
.search-row { display: flex; gap: 10px; margin: 4px 0 14px; }
.search-input { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); padding: 13px 16px; color: var(--text-faint); font-size: 14px; }
.search-input .ic { width: 18px; height: 18px; }
.fbtn { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md); padding: 0 16px; font-weight: 600; color: var(--text); }
.fbtn .ic { width: 17px; height: 17px; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 2px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.fchip { padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.fchip.active { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.fchip.more { padding: 9px 11px; }

/* ---------- inbox mobile cards ---------- */
.in-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 12px; }
.in-card .top { display: flex; gap: 13px; }
.in-card .top .tx { flex: 1; min-width: 0; }
.in-card .top .tx .t { font-size: 16px; font-weight: 700; color: var(--text-strong); margin: 7px 0 4px; }
.in-card .top .tx .s { font-size: 13px; color: var(--text-muted); white-space: normal; line-height: 1.4; }
/* received/sent 카드 — 상태·구분 배지 묶음. 배지 줄 다음 제목은 위 여백을 줄여 위계 정돈 */
.badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.badge-row + .t { margin-top: 9px; }
.in-card .kebab { color: var(--text-faint); align-self: flex-start; }
.in-card .foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.in-card .ai { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.in-card .ai .ic { width: 16px; height: 16px; color: var(--text-faint); }
.in-card .owner { display: flex; align-items: center; gap: 7px; }
.in-card .owner .ic { width: 16px; height: 16px; color: var(--text-faint); }
.in-card .owner .o { line-height: 1.2; } .in-card .owner .o .l { font-size: 11px; color: var(--text-faint); } .in-card .owner .o .n { font-size: 12.5px; color: var(--text); font-weight: 600; }
.in-card .grow { flex: 1; }

/* ---------- approvals desktop rows ---------- */
.ap-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ap-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ap-toolbar .grow { flex: 1; }
.fdrop { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.fdrop .ic { width: 15px; height: 15px; }
.ap-row { display: grid; grid-template-columns: minmax(200px,1.7fr) 112px 112px 128px 108px; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--border); position: relative; }
.ap-row:last-child { border-bottom: none; }
.ap-row.sel { border: 1.5px solid var(--primary); border-radius: var(--r-md); }
.ap-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ap-main .t { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.ap-main .s { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.ap-col .lab { font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
.ap-airec { display: flex; align-items: center; gap: 6px; }
.ap-suo { font-size: 11.5px; color: var(--ai); font-weight: 600; margin-top: 7px; display: inline-flex; align-items: center; gap: 2px; }
.risk { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.risk .ic { width: 16px; height: 16px; }
.risk.ok { color: var(--success); } .risk.warn { color: var(--warning); } .risk.high { color: var(--danger); }
.risk .n { color: var(--text-muted); font-weight: 600; }
.conf-top { display: flex; align-items: center; gap: 8px; }
.conf-top .pct { font-size: 16px; font-weight: 800; color: var(--text-strong); }
.confbar { height: 6px; border-radius: 99px; background: var(--surface-3); margin-top: 7px; overflow: hidden; }
.confbar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.ap-act { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ap-sla { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill); background: var(--warning-soft); color: var(--warning); white-space: nowrap; }
.ap-act .row2 { display: flex; align-items: center; gap: 6px; }

/* approvals right rail */
.rail { display: flex; flex-direction: column; gap: 18px; }
.insight-hero { display: flex; gap: 12px; padding: 4px 0 14px; }
.insight-hero .ck { width: 32px; height: 32px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; flex: 0 0 auto; }
.insight-hero .t { font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.insight-hero .s { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.insight-mini { display: flex; gap: 8px; padding: 14px 0 4px; border-top: 1px solid var(--border); }
.insight-mini .m { flex: 1; text-align: center; }
.insight-mini .m .ic { width: 18px; height: 18px; color: var(--primary); margin: 0 auto 6px; }
.insight-mini .m .v { font-size: 14px; font-weight: 800; color: var(--text-strong); }
.insight-mini .m .l { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.shortcut { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text); font-weight: 600; }
.shortcut:last-child { border-bottom: none; }
.shortcut .ic { width: 17px; height: 17px; color: var(--text-faint); }
.shortcut .grow { flex: 1; }
.shortcut .n { font-size: 12px; color: var(--text-faint); }

/* ---------- approvals mobile cards ---------- */
.apm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 12px; }
.apm-card.sel { border: 1.5px solid var(--primary); }
.apm-top { display: flex; gap: 13px; }
.apm-top .tx { flex: 1; min-width: 0; }
.apm-top .tx .t { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.apm-top .tx .s { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.apm-top .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.apm-metrics { display: flex; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.apm-metrics .m { flex: 1; }
.apm-metrics .m .l { font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 4px; }
.apm-metrics .m .l .ic { width: 13px; height: 13px; }
.apm-metrics .m .v { font-size: 13px; font-weight: 700; color: var(--text-strong); margin-top: 4px; }
.apm-policy { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.apm-policy .ic { width: 16px; height: 16px; color: var(--text-faint); flex: 0 0 auto; margin-top: 2px; }
.apm-policy .t { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.apm-policy .d { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.apm-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 13px; }
.btn-ok { border-color: var(--success); color: var(--success); }
.btn-rej { border-color: var(--danger); color: var(--danger); }
.btn-hold { border-color: var(--warning); color: var(--warning); }

/* ---------- knowledge ---------- */
.kn-top { display: grid; grid-template-columns: 1fr 380px; gap: 20px; margin-bottom: 22px; align-items: stretch; }
.kn-bigsearch { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 20px 22px; display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 15px; }
.kn-bigsearch .ic { width: 20px; height: 20px; }
.kn-ai { background: linear-gradient(135deg,var(--primary-softer),var(--primary-soft)); border: 1px solid var(--ai-soft); border-radius: var(--r-lg); padding: 20px; display: flex; gap: 14px; }
.kn-ai .tx { flex: 1; }
.kn-ai .tt { font-size: 15px; font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 7px; }
.kn-ai .tt .ic { width: 18px; height: 18px; color: var(--ai); }
.kn-ai .dd { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 14px; line-height: 1.5; }
.kn-ai .illus { width: 92px; flex: 0 0 92px; border-radius: 12px; background: var(--surface-glass, rgba(255,255,255,.6)); display: grid; place-items: center; color: var(--ai); }
.kn-ai .illus .ic { width: 34px; height: 34px; opacity: .5; }
.kn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.doc-row:last-child { border-bottom: none; }
.doc-row .tx { flex: 1; min-width: 0; }
.doc-row .tx .t { font-size: 14px; font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 7px; }
.doc-row .tx .s { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.ver { font-size: 11px; color: var(--text-muted); background: var(--surface-3); padding: 3px 8px; border-radius: var(--r-pill); font-weight: 700; flex: 0 0 auto; }
.topic-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.topic-row:last-child { border-bottom: none; }
.topic-row .tx { flex: 1; } .topic-row .tx .t { font-size: 14px; font-weight: 700; color: var(--text-strong); } .topic-row .tx .s { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.topic-row .n { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.tag { font-size: 10.5px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 2px 7px; border-radius: var(--r-pill); }

/* ---------- reports ---------- */
.rep-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.rep-toolbar .grow { flex: 1; }
.rep-toolbar h2 { font-size: 17px; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--text); }
.pill-btn .ic { width: 16px; height: 16px; color: var(--text-muted); }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.toggle .sw { width: 36px; height: 20px; border-radius: 99px; background: var(--primary); position: relative; }
.toggle .sw::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.brief-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 22px; margin-bottom: 20px; }
.brief-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 16px; }
.brief-head .ic { width: 19px; height: 19px; color: var(--primary); }
.brief-row { display: flex; align-items: flex-start; gap: 20px; }
.brief-metrics { display: flex; flex: 1; gap: 8px; }
.bm { flex: 1; }
.bm .l { font-size: 13px; color: var(--text-muted); }
.bm .v { font-size: 28px; font-weight: 800; color: var(--primary); margin-top: 8px; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; }
.bm .v .d { font-size: 12.5px; font-weight: 700; }
.delta.up { color: var(--success); } .delta.down { color: var(--danger); }
.bm .s { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.brief-summary { width: 280px; flex: 0 0 auto; font-size: 13px; color: var(--text-muted); line-height: 1.6; border-left: 1px solid var(--border); padding-left: 20px; }
.rep-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; }
.issue-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.issue-row:last-child { border-bottom: none; }
.issue-row .tx { flex: 1; min-width: 0; }
.issue-row .tx .t { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.issue-row .tx .s { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.issue-row .own { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.issue-row .st { font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--surface-3); padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.act-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.act-row:last-child { border-bottom: none; }
.act-row .tx { flex: 1; } .act-row .tx .t { font-size: 14px; font-weight: 700; color: var(--text-strong); } .act-row .tx .s { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.glance-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.glance-row:last-child { border-bottom: none; }
.glance-row .ic { width: 18px; height: 18px; color: var(--text-faint); }
.glance-row .l { flex: 1; font-size: 13.5px; color: var(--text); font-weight: 600; }
.glance-row .v { font-size: 15px; font-weight: 800; color: var(--text-strong); }
.glance-row .d { font-size: 12px; font-weight: 700; margin-left: 8px; }
.robot { width: 120px; flex: 0 0 auto; display: grid; place-items: center; font-size: 52px; }

/* reports mobile */
.repm-brief { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 14px; }
.repm-brief .hd { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.repm-brief .hd .ic { width: 17px; height: 17px; color: var(--primary); }
.repm-brief h2 { font-size: 20px; line-height: 1.35; margin: 12px 0 16px; }
.repm-metrics { display: flex; gap: 10px; }
.repm-metrics .m { flex: 1; }
.repm-metrics .m .l { font-size: 12px; color: var(--text-muted); }
.repm-metrics .m .v { font-size: 22px; font-weight: 800; color: var(--primary); margin-top: 5px; }
.repm-metrics .m .d { font-size: 11.5px; font-weight: 700; margin-top: 4px; }
.repm-metrics .m .s { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.spark-row { display: flex; gap: 10px; }
.spark-row .m { flex: 1; }
.spark-row .m .l { font-size: 12px; color: var(--text-muted); }
.spark-row .m .v { font-size: 19px; font-weight: 800; color: var(--text-strong); margin-top: 4px; }
.spark-row .m .v .d { font-size: 11px; font-weight: 700; margin-left: 5px; }
.spark-row .m svg { margin-top: 8px; width: 100%; height: 30px; }

/* ---------- admin ---------- */
.seg { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px; margin-bottom: 22px; width: 100%; box-shadow: var(--shadow-sm); }
.seg .tab { flex: 1; justify-content: center; padding: 12px; font-size: 14px; }
.seg .tab.active { background: var(--primary-soft); color: var(--primary); }
.seg .tab .n { background: var(--surface-3); color: var(--text-muted); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); display: grid; place-items: center; }
.seg .tab.active .n { background: var(--surface); color: var(--primary); }
.rv-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 12px; }
.rv-card .tx { flex: 1; min-width: 0; }
.rv-card .tx .t { font-size: 15.5px; font-weight: 700; color: var(--text-strong); }
.rv-card .tx .d { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.rv-meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.rv-meta .cat { font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--surface-3); padding: 3px 9px; border-radius: var(--r-pill); }
.rv-meta .time { font-size: 12px; color: var(--text-faint); }
.admin-banner { display: flex; align-items: center; gap: 12px; background: var(--primary-softer); border: 1px solid var(--primary-soft); border-radius: var(--r-lg); padding: 15px 18px; margin-top: 8px; font-size: 13.5px; color: var(--text); font-weight: 500; }
.admin-banner .ic2 { width: 22px; height: 22px; color: var(--primary); flex: 0 0 auto; }
.admin-banner .grow { flex: 1; }
.sec-count { font-size: 14px; color: var(--primary); font-weight: 800; }

/* ---------- fidelity fixes ---------- */
.panel-head h3 { white-space: nowrap; }
@media (max-width: 768px) {
  .in-card .foot { gap: 9px; }
  .in-card .ai { white-space: nowrap; flex: 0 0 auto; }
  .in-card .ai .badge { padding: 3px 8px; font-size: 11px; }
  .in-card .owner { white-space: nowrap; flex: 0 0 auto; }
  .in-card .owner .o .n { white-space: nowrap; }
  .in-card .foot .btn { white-space: nowrap; flex: 0 0 auto; padding: 8px 12px; }
  .apm-metrics { flex-wrap: wrap; }
  .apm-metrics .btn { flex: 0 0 auto; }
}

@media (max-width: 768px) {
  /* 모바일 stat 셀 — 세로 레이아웃(라벨 상단·값 하단·아이콘 우상단) */
  .stat-strip-row { flex-direction: column; }
  .stat-strip-cells { grid-auto-flow: column; }
  .stat-cell { position: relative; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 10px 11px; }
  .stat-cell .tile { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 9px; }
  .stat-cell .tile .ic { width: 15px; height: 15px; }
  .stat-cell .label { font-size: 11px; line-height: 1.3; padding-right: 28px; }
  .stat-cell .value { font-size: 20px; }
  .stat-cell + .stat-cell::before { top: 12px; bottom: 12px; }
}

/* ============================================================
   Detail Drawer(데스크톱) / Full-screen Sheet(모바일) + Toast
   ============================================================ */
.scrim { position: fixed; inset: 0; background: rgba(17,24,39,.34); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92vw; z-index: 61;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
/* 수정/새 업무 폼 전용 — Monday 패널 정도로 넓힘. 읽기 상세(.drawer 기본 480px)는 영향 없음. */
.drawer.drawer--wide { width: 640px; max-width: 92vw; }
.drawer--wide .d-head { padding-bottom: 12px; }
.drawer--wide .d-body { padding-top: 10px; }
.d-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
.d-head .grow { flex: 1; min-width: 0; }
.d-head h2 { font-size: 19px; line-height: 1.3; }
.d-sub { font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.d-close, .d-back { width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--text-muted); border: 1px solid var(--border); background: var(--surface); flex: 0 0 auto; }
.d-close:hover, .d-back:hover { background: var(--surface-2); }
.d-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.d-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.d-foot .grow { flex: 1; }
.d-sec { margin-bottom: 20px; }
.d-sec:last-child { margin-bottom: 0; }
.d-sec-h { font-size: 11.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .03em; margin-bottom: 9px; }
.d-kv { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.d-kv:last-child { border-bottom: none; }
.d-kv .k { color: var(--text-muted); flex: 0 0 92px; }
.d-kv .v { color: var(--text-strong); font-weight: 600; flex: 1; }
.d-rec { display: flex; gap: 11px; padding: 14px; border: 1px solid var(--ai-soft); background: var(--ai-soft); border-radius: var(--r-md); }
.d-rec .sp { width: 28px; height: 28px; border-radius: 8px; background: var(--ai); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.d-rec .sp .ic { width: 16px; height: 16px; }
.d-rec .t { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.d-rec .s { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.d-text { font-size: 14px; color: var(--text); line-height: 1.65; }

/* mobile = full-screen sheet (bottom) */
@media (max-width: 768px) {
  .drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; height: 94vh;
    border-left: none; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); }
  .drawer.open { transform: translateY(0); }
  .drawer.drawer--wide { width: 100%; max-width: 100%; }
  .d-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* toast */
/* z-index 300 — 모달(.chat-modal-overlay 200) 위. 90이던 시절 모달 안에서 띄운 토스트가
   뒤에 깔려 '눌러도 아무 일도 안 일어난다'로 보였다(2026-09-04 플라우드 로그인). */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 28px; z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
@media (max-width: 768px) { .toasts { bottom: calc(var(--bottomnav-h) + 18px); } }
.toast { display: flex; align-items: center; gap: 9px; background: var(--text-strong); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 12px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: .2s; max-width: 90vw; }
.toast .ic { width: 17px; height: 17px; color: #6EE7A8; }
/* 타입별 아이콘 색 — 어두운 알약 배경 대비 밝은 톤. 기본·성공은 위 초록 유지, 경고=앰버·실패=레드.
   좌측 3px 액센트로 실패·경고를 한눈에 구분(과거엔 에러도 초록 체크라 성공처럼 보이던 버그 수정). */
.toast--warn   .ic { color: #FBBF24; }
.toast--danger .ic { color: #FF8A8F; }
.toast--warn   { border-left: 3px solid #FBBF24; }
.toast--danger { border-left: 3px solid #FF8A8F; }
.toast.show { opacity: 1; transform: translateY(0); }
/* toast 액션 버튼 — 되돌리기 등 인라인 버튼. 터치 영역 최소 44px 확보. */
.toast-action { margin-left: 6px; background: none; border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-size: 12.5px; font-weight: 700; border-radius: 6px; padding: 5px 12px; cursor: pointer; min-height: 32px; min-width: 44px; white-space: nowrap; }
.toast-action:hover { background: rgba(255,255,255,.15); }
@media (max-width: 768px) { .toast-action { min-height: 40px; padding: 8px 14px; font-size: 13px; } }

/* clickable affordance */
.task-row, .ai-row, .trow, .in-card, .ap-row, .apm-card, .doc-row, .topic-row, .issue-row, .rv-card, .shortcut { cursor: pointer; }

/* ---------- todo row — 투두 행 체크박스 ---------- */
.todo-row { cursor: pointer; }
.todo-check {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--border-2); background: var(--surface);
  display: grid; place-items: center;
  transition: border-color .14s ease, background .18s cubic-bezier(.34,1.56,.64,1), transform .14s ease;
  cursor: pointer;
}
.todo-check:hover { border-color: var(--primary); }
.todo-check:active { transform: scale(.9); }
.todo-check.done {
  background: var(--primary); border-color: var(--primary);
  animation: check-pop .26s cubic-bezier(.34,1.56,.64,1);
}
.todo-check.done::after {
  content: ''; display: block; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  animation: check-draw .22s ease .04s both;
}
@keyframes check-pop {
  0% { transform: scale(.8); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes check-draw {
  0% { opacity: 0; transform: rotate(-45deg) translateY(-1px) scale(.4); }
  100% { opacity: 1; transform: rotate(-45deg) translateY(-1px) scale(1); }
}
/* 완료 행 페이드 — 박과장이 .todo-row.todo-done 부여 시 부드럽게 흐려짐 */
.todo-row { transition: opacity .2s ease; }
.todo-row.todo-done .tx .t.done { transition: color .2s ease; }

/* ---------- 완료 투두 토글 ---------- */
.completed-toggle-wrap { padding: 10px 2px 4px; }
.todo-row.todo-done .tx .t.done { text-decoration: line-through; color: var(--text-faint); }
.completed-rows { opacity: .75; }

/* new-request 구분 토글 */
.nr-kind-wrap { display: flex; gap: 20px; padding: 4px 0; }
.nr-kind-opt { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.nr-kind-opt input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

/* new-request 담당자·상태 2열 행 — 날짜 시작일|마감일 패턴 재사용 */
.nr-row-2col { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.nr-row-2col > .nr-col { flex: 1; min-width: 130px; }
.nr-row-2col > .nr-col .d-sec-h { font-size: 11.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .03em; margin-bottom: 9px; }

/* new-request Quill 에디터 높이 확장 */
#nr-body-editor .ql-editor { min-height: 360px; }

/* ---------- empty state — 연결됐으나 데이터 0건 ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 24px; gap: 8px; text-align: center;
}
/* 아이콘을 은은한 원형 배경 위에 — 더 부드럽고 의도적인 빈 상태 */
.empty-state > .ic {
  width: 30px; height: 30px; color: var(--primary);
  box-sizing: content-box; padding: 17px; margin-bottom: 6px;
  background: var(--primary-soft); border-radius: 50%;
  animation: empty-pulse 3.4s ease-in-out infinite;
}
.empty-state-title { font-size: 16.5px; font-weight: 700; color: var(--text-muted); margin-top: 2px; letter-spacing: -.01em; }
.empty-state-desc { font-size: 13.5px; color: var(--text-faint); line-height: 1.6; margin: 0; max-width: 280px; }
.empty-state .btn { margin-top: 12px; }
@keyframes empty-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,91,255,.10); }
  50% { box-shadow: 0 0 0 8px rgba(45,91,255,0); }
}

/* ---------- inbox search input + empty note ---------- */
.search-input input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--text-strong); padding: 0; }
.search-input input::placeholder { color: var(--text-faint); }
.search-input input::-webkit-search-cancel-button { -webkit-appearance: none; }
.empty-note { text-align: center; color: var(--text-muted); font-size: 13.5px; padding: 28px 0; }

/* ============================================================
   Admin Advanced (L3) — surface와 시각 분리
   ============================================================ */
.adv-banner { display: flex; align-items: center; gap: 13px; background: #1E2433; color: #E5E9F2;
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 20px; }
.adv-banner .ic { width: 22px; height: 22px; color: #A5B4FC; flex: 0 0 auto; }
.adv-banner .grow { flex: 1; }
.adv-banner b { color: #fff; font-size: 14.5px; }
.adv-banner .sub { font-size: 12.5px; color: #9AA4B8; margin-top: 3px; }

.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.adv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; cursor: pointer; transition: border-color .12s, box-shadow .12s; box-shadow: var(--shadow-sm); }
.adv-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.adv-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; }
.adv-ic .ic { width: 20px; height: 20px; }
.adv-card h3 { font-size: 15.5px; margin-top: 13px; }
.adv-card p { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.adv-list { display: flex; flex-direction: column; gap: 10px; }
.adv-card.mob { display: flex; align-items: center; gap: 13px; padding: 15px; }
.adv-card.mob .adv-ic { width: 38px; height: 38px; flex: 0 0 auto; }
.adv-card.mob .tx { flex: 1; min-width: 0; }
.adv-card.mob h3 { margin-top: 0; font-size: 15px; }
.adv-card.mob p { margin-top: 3px; }
.adv-card.mob .chev { color: var(--text-faint); }

.adv-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.adv-row:last-child { border-bottom: none; }
.adv-row .tx { flex: 1; min-width: 0; }
.adv-row .tx .t { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.adv-row .tx .m { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

.adv-entry { display: flex; align-items: center; gap: 14px; margin-top: 20px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.adv-entry:hover { border-color: var(--primary); }
.adv-entry .grow { flex: 1; }
.adv-entry .t { font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.adv-entry .d { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

.ro-note { display: flex; align-items: center; gap: 9px; background: var(--warning-soft); color: var(--warning);
  border: 1px solid #F3E0C2; border-radius: var(--r-md); padding: 11px 14px; margin-bottom: 16px; font-size: 12.5px; font-weight: 600; }
.ro-note .ic { width: 16px; height: 16px; flex: 0 0 auto; }

/* ============================================================
   Auth gate (Supabase)
   - body.auth-checking : 세션 확인 중 — 로딩 스플래시만(로그인 폼 숨김)
   - body.auth-pending  : 세션 없음 확정 — 로그인 오버레이 노출
   둘 다 앱은 블러 처리.
   ============================================================ */
.auth-overlay { display: none; }
.auth-splash { display: none; }

/* 확인 중 — 앱 블러 + 스플래시만, 로그인 폼·AI 숨김 */
body.auth-checking .app,
body.auth-checking .bottomnav,
body.auth-checking .sticky-cta { filter: blur(5px); pointer-events: none; user-select: none; }
body.auth-checking .auth-overlay { display: none; }
body.auth-checking .ai-fab,
body.auth-checking .ai-panel,
body.auth-checking .ai-scrim { display: none !important; }
body.auth-checking .auth-splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  position: fixed; inset: 0; z-index: 100;
  padding: 20px; padding-top: max(20px, env(safe-area-inset-top));
  /* 로그인 오버레이와 같은 레이어·배경 톤 재사용 */
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(45,91,255,.16), transparent 56%),
    radial-gradient(100% 80% at 100% 100%, rgba(45,91,255,.10), transparent 52%),
    linear-gradient(180deg, rgba(242,245,255,.62), rgba(17,24,39,.30));
  -webkit-backdrop-filter: saturate(1.05); backdrop-filter: saturate(1.05);
}
.auth-splash-status { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: -.01em; }
.auth-spinner { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--primary-soft); border-top-color: var(--primary); animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
body.auth-pending .app,
body.auth-pending .bottomnav,
body.auth-pending .sticky-cta { filter: blur(5px); pointer-events: none; user-select: none; }
body.auth-pending .auth-overlay {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100;
  padding: 20px; padding-top: max(20px, env(safe-area-inset-top));
  /* 브랜드 그라데이션 — 부드러운 방사형(primary-soft)을 좌상단에 얹고,
     하단을 primary-softer로 깔아 차분한 회사 컬러 베일. 앱 blur 위에 자연스럽게. */
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(45,91,255,.16), transparent 56%),
    radial-gradient(100% 80% at 100% 100%, rgba(45,91,255,.10), transparent 52%),
    linear-gradient(180deg, rgba(242,245,255,.62), rgba(17,24,39,.30));
  -webkit-backdrop-filter: saturate(1.05); backdrop-filter: saturate(1.05);
}
.auth-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: 40px 34px 34px; width: 100%; max-width: 396px;
  position: relative; overflow: hidden;
  animation: auth-rise .3s cubic-bezier(.22,.61,.36,1) both;
}
/* 카드 상단 브랜드 액센트 바 — 얇은 그라데이션 라인 */
.auth-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-strong));
}
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 로그인 2단 스플릿 — 좌측 입력 + 우측 화면 미리보기 ──
   부장님 2026-09-15 참조 화면(aside.com). 🔴 참조에서 가져온 것은 "좌우 2단" 골격뿐이다 —
   하늘 배경·민트 패널 같은 스킨은 옮기지 않고 옵스원 토큰으로 다시 그린다(CLAUDE.md Part 2).
   모바일은 지금까지의 1단 카드 그대로(PC/모바일 분리 설계) — 폰에서 2단은 의미가 없다. */
.auth-preview { display: none; }

@media (min-width: 900px) and (min-height: 600px) {
  .auth-card { max-width: 912px; padding: 0; display: grid; grid-template-columns: 404px 1fr; }
  .auth-pane { padding: 40px 34px 34px; min-width: 0; }
  .auth-preview {
    display: flex; flex-direction: column; gap: 18px; min-width: 0;
    padding: 40px 34px 34px; border-left: 1px solid var(--border);
    background: linear-gradient(180deg, var(--primary-softer), var(--surface-2));
  }
}

.apv-head { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); line-height: 1.35; }
.apv-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

.apv-link { display: inline-flex; align-items: center; min-height: var(--touch-min); margin-top: 2px;
  font-size: 13.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
.apv-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* 화면 목업 — 실제 옵스원 골격(좌 레일 + 메뉴 패널 + 본문)의 축소판. 글자·숫자는 넣지 않는다. */
.apv-shot {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 26px 92px 1fr;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.apv-rail { background: var(--text-strong); display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 10px 0; }
.apv-railmark { width: 13px; height: 13px; border-radius: 4px; background: var(--primary); flex: 0 0 auto; }
.apv-raildot { width: 13px; height: 13px; border-radius: 4px; background: rgba(255,255,255,.16); flex: 0 0 auto; }
.apv-raildot.is-on { background: rgba(255,255,255,.44); }
.apv-side { background: var(--surface-2); border-right: 1px solid var(--border); padding: 11px 9px; }
.apv-sidehead { font-size: 9.5px; font-weight: 700; color: var(--text-faint); letter-spacing: -.02em; margin: 9px 0 5px; padding-left: 5px; }
.apv-sidehead:first-child { margin-top: 0; }
.apv-navrow { display: flex; align-items: center; gap: 6px; padding: 4px 5px; border-radius: 6px; }
.apv-navrow.is-on { background: var(--primary-soft); }
.apv-navrow i { width: 8px; height: 8px; border-radius: 2px; background: var(--border-2); flex: 0 0 auto; }
.apv-navrow.is-on i { background: var(--primary); }
.apv-navrow b { height: 5px; border-radius: 3px; background: var(--border-2); flex: 1; }
.apv-navrow.is-on b { background: var(--primary); opacity: .45; }
.apv-body { padding: 11px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.apv-top { display: flex; align-items: center; justify-content: space-between; }
.apv-crumb { height: 7px; width: 78px; border-radius: 4px; background: var(--text-faint); opacity: .55; }
.apv-av { width: 15px; height: 15px; border-radius: 50%; background: var(--av-1); }
.apv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.apv-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 9px 10px; }
.apv-tile u { display: block; height: 5px; width: 60%; border-radius: 3px; background: var(--text-faint); opacity: .5; }
.apv-tile s { display: block; height: 10px; width: 42%; border-radius: 3px; background: var(--primary); opacity: .72; margin-top: 7px; }
.apv-tbl { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.apv-tr { display: grid; grid-template-columns: 1.6fr 1fr .7fr; gap: 10px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.apv-tr:last-child { border-bottom: 0; }
.apv-tr.is-head { background: var(--surface-2); }
.apv-tr span { height: 6px; border-radius: 3px; background: var(--border-2); }
.apv-tr.is-head span { background: var(--text-faint); opacity: .45; }
.apv-tr:not(.is-head) span:last-child { background: var(--primary-soft); }

/* 브랜드 마크 + 로고 묶음 */
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-mark { width: 34px; height: 34px; flex: 0 0 auto; display: block; }
.auth-logo { font-size: 25px; font-weight: 800; letter-spacing: -.03em; color: var(--text-strong); line-height: 1.1; }
.auth-logo .kog { color: var(--primary); }

/* ── 브랜드 마크 조립 모션 — video-demo/logo-anim.html v9 의 UI 이식판 ──
   v9: 두 원이 곡선으로 가속 진입 → "확" 충돌 → 임팩트(플래시·방사광선·파티클) → 워드마크 리빌.
   UI판은 매일 여는 화면이라 약 0.95초로 줄이고 플래시·글로우는 뺐다(DESIGN.md §8-3·§8-6).
   🔴 CSS 전용 — 스플래시는 dist/main.js 가 뜨기 전에 보여야 해서 JS·GSAP 에 의존할 수 없다.
   재생 트리거는 display:none → 노출 전환(body.auth-checking / body.auth-pending)이다. */
.auth-mark .mk-tile,
.auth-mark .mk-cf,
.auth-mark .mk-cb,
.auth-mark .mk-lens { transform-box: fill-box; transform-origin: 50% 50%; }
.auth-mark .mk-ring { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }

/* 🔴 한 요소의 transform 은 애니메이션 하나로만 몬다. transform 을 건드리는 애니를 둘 겹치면
   뒤에 선언된 쪽이 이기고, fill-mode:both 면 delay 구간에도 이겨서 앞 애니가 아예 안 보인다.
   그래서 '수렴 + 임팩트 오버슛'을 keyframe 하나에 합치고 페이드만 따로 뗀다. */
.auth-mark .mk-tile { animation: mk-tile .34s cubic-bezier(.22,.61,.36,1) both; }
.auth-mark .mk-cf { animation: mk-cf .8s cubic-bezier(.55,.085,.68,.53) both, mk-fade .3s linear both; }
.auth-mark .mk-cb { animation: mk-cb .8s cubic-bezier(.55,.085,.68,.53) both, mk-fade .3s linear both; }
/* 충격파 — v9 의 방사광선·파티클 폭발을 링 1겹으로 줄였고 타일 안에 가뒀다.
   base 가 opacity:0 이라 fill-mode 는 forwards — both 면 delay 내내 from(보임)이 적용된다. */
.auth-mark .mk-ring { animation: mk-ring .5s cubic-bezier(.16,.8,.3,1) .46s forwards; }
/* 렌즈 점등 — 두 원이 겹친 뒤에만 의미가 생긴다(d=r 교집합) */
.auth-mark .mk-lens { animation: mk-lens .26s ease-out .5s both; }

@keyframes mk-tile { from { opacity: 0; transform: scale(.84); } to { opacity: 1; transform: scale(1); } }
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }
/* 좌우 밖에서 멈춤 없이 가속해 들어온다(easeIn — 도착 순간이 최고속이라 "확" 붙는다).
   57.5%(=460ms)가 충돌 지점. 거기서부터 back.out 으로 오버슛 한 번. */
@keyframes mk-cf {
  0%    { transform: translateX(-13px) scale(1); }
  57.5% { transform: translateX(0) scale(1); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  75%   { transform: translateX(0) scale(1.13); }
  100%  { transform: translateX(0) scale(1); }
}
@keyframes mk-cb {
  0%    { transform: translateX(13px) scale(1); }
  57.5% { transform: translateX(0) scale(1); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  75%   { transform: translateX(0) scale(1.13); }
  100%  { transform: translateX(0) scale(1); }
}
@keyframes mk-ring { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(2.5); } }
@keyframes mk-lens { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: scaleX(1); } }

/* 워드마크 — v9 의 스캔 리빌을 좌→우 wipe 로만 남겼다(스캔바·글로우 제거) */
.auth-brand .auth-logo { animation: mk-wm .5s cubic-bezier(.22,.61,.36,1) .5s both; }
@keyframes mk-wm { from { clip-path: inset(0 100% 0 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* 마크가 조립된 뒤 상태문·문구가 따라 들어온다 */
.auth-splash-status { animation: mk-after .3s ease-out .78s both; }
.auth-tagline { animation: mk-after .34s ease-out .82s both; }
.auth-sub { animation: mk-after .34s ease-out .9s both; }
@keyframes mk-after { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.auth-tagline { font-size: 14px; font-weight: 600; color: var(--text); margin: 16px 0 4px; line-height: 1.45; letter-spacing: -.01em; }
.auth-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 24px; line-height: 1.5; }

.auth-input {
  width: 100%; border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 14px 15px; font-size: 16px; color: var(--text-strong); margin-bottom: 11px; outline: none;
  background: var(--surface); transition: border-color .14s ease, box-shadow .14s ease;
}
.auth-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,91,255,.14); }
.auth-input::placeholder { color: var(--text-faint); }
.auth-msg { font-size: 12.5px; color: var(--danger); min-height: 16px; margin: 2px 2px 10px; }
#opsLoginForm .btn-lg { margin-top: 4px; }
.auth-link-btn { display: block; width: 100%; background: none; border: none; cursor: pointer; color: var(--primary); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; padding: 6px 2px; min-height: 36px; margin-top: 8px; text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12px; margin: 20px 0 14px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Google 버튼 — 보조 톤(soft outline). 로고 마크 인라인 정렬. */
#opsGoogleBtn { color: var(--text); border-color: var(--border-2); font-weight: 600; gap: 9px; }
#opsGoogleBtn:hover { background: var(--surface-2); border-color: var(--border-2); }
#opsGoogleBtn .g-mark { width: 17px; height: 17px; flex: 0 0 auto; }
/* 인앱 브라우저(카톡 등) — Google 버튼 비활성 상태 */
#opsGoogleBtn:disabled { opacity: .35; cursor: not-allowed; pointer-events: auto; }

/* 인앱 브라우저 안내 배너 — 카톡·인스타 등 인앱에서만 표시 */
.auth-inapp-banner {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--warning-soft); border: 1px solid var(--border-2); border-radius: 8px;
  padding: 11px 13px; margin-bottom: 18px; font-size: 13px; line-height: 1.5; color: var(--warning);
}
.auth-inapp-banner .inapp-icon { flex: 0 0 auto; font-size: 16px; margin-top: 1px; }
.auth-inapp-banner strong { color: var(--text-strong); }

@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
  .auth-spinner { animation: none; }
  /* 브랜드 마크 조립 모션 — 최종 상태로 즉시 표시(링은 숨김) */
  .auth-mark .mk-tile, .auth-mark .mk-cf, .auth-mark .mk-cb, .auth-mark .mk-lens,
  .auth-brand .auth-logo, .auth-splash-status, .auth-tagline, .auth-sub { animation: none; }
  .auth-mark .mk-ring { animation: none; opacity: 0; }
}

/* ============================================================
   AI — 상세 요약 + 어시스턴트 패널
   ============================================================ */

/* 상세 AI 요약 */
.d-ai-sum { display: flex; gap: 11px; align-items: flex-start; padding: 14px; border: 1px solid var(--ai-soft);
  background: var(--ai-soft); border-radius: var(--r-md); font-size: 13.5px; color: var(--text); line-height: 1.6; }
.d-ai-sum .sp { width: 26px; height: 26px; border-radius: 8px; background: var(--ai); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.d-ai-sum .sp .ic { width: 15px; height: 15px; }
.d-ai-sum .t { flex: 1; }
.d-ai-sum.loading { color: var(--text-muted); align-items: center; }
.d-ai-sum.loading .sp .ic,
.ai-msg.loading .sp .ic { animation: ai-spark 1.3s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes ai-spark {
  0%   { transform: rotate(0deg)   scale(1);    opacity: .55; }
  50%  { transform: rotate(90deg)  scale(1.12); opacity: 1;   }
  100% { transform: rotate(180deg) scale(1);    opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .d-ai-sum.loading .sp .ic,
  .ai-msg.loading .sp .ic { animation: none; opacity: .6; }
}

/* 준비중 배지 — 사이드바 메뉴 아이템 우측에 붙는 pill */
.nav-soon { font-size: 11px; font-weight: 700; color: var(--text-faint); background: var(--surface-2); border-radius: var(--r-pill); padding: 2px 7px; margin-left: auto; flex-shrink: 0; }

/* AI 유도 버튼 — 빈 상태 emptyState에서 사용. 기존 --ai 토큰 재사용 */
.btn.btn-ai { background: var(--ai-soft); color: var(--ai); font-weight: 700; gap: 6px; }
.btn.btn-ai:hover { filter: brightness(.97); }
.btn.btn-ai .ic { width: 16px; height: 16px; }

/* 온보딩 카드 — AI 패널 메시지 영역 재사용 */
.ai-onboard { background: var(--ai-soft); border-radius: 14px; padding: 16px; }
.ob-step { font-size: 11px; font-weight: 700; color: var(--ai); letter-spacing: .04em; }
.ob-body { font-size: 14px; line-height: 1.6; color: var(--text-strong); margin: 8px 0 14px; }
.ob-actions { display: flex; gap: 8px; }

/* AI FAB */
/* AI FAB — ops 로고 둘레에 회전하는 오로라 테두리(글로우 대신 보더 강조, 먼데이 느낌) */
@property --fab-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ai-fab { position: fixed; right: 24px; bottom: 24px; z-index: 56;
  width: 60px; height: 60px; padding: 0; border-radius: 18px;
  display: grid; place-items: center; background: none; border: none; color: transparent;
  --fab-angle: 0deg; /* @property 미지원 폴백 */
  animation: fab-glow 3.6s ease-in-out infinite; }
.ai-fab > span { display: none; } /* 라벨 텍스트 숨김 — 로고 오브 */
/* 안쪽 무지개 — 둥근 사각형 안을 채움(각도만 회전해 모서리 빈틈 없음) */
.ai-fab::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 18px;
  background: conic-gradient(from var(--fab-angle), #7C3AED, #E5328A, #FF7A1A, #FFC72C, #16A34A, #2D5BFF, #7C3AED);
  opacity: .65; /* 안쪽 무지개 색감 */
  animation: fab-spin 6s linear infinite;
}
/* 바깥 얇고 진한 무지개 테두리 링 — mask로 가운데를 뚫은 2px 도넛, 안쪽 무지개와 같이 회전 */
.ai-fab::after {
  content: ""; position: absolute; inset: -2px; z-index: 2; border-radius: 20px;
  padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--fab-angle), #7C3AED, #E5328A, #FF7A1A, #FFC72C, #16A34A, #2D5BFF, #7C3AED);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: fab-spin 3s linear infinite; /* 안쪽(6s)보다 빠르게 — 테두리 회전이 또렷이 보이게 */
}
/* 로고 원 2개 — 흩어졌다 가운데로 모여 하나로 뭉치는 반복 동작 */
.ai-fab-logo .c-left,
.ai-fab-logo .c-right { transform-box: fill-box; transform-origin: center; }
/* 두 원이 같은 주기로 흩어졌다가, 50% 부근에 정확히 같은 자리로 겹쳐 하나의 큰 원으로
   합쳐지고(44~56% 잠깐 유지) 다시 흩어진다 — '흩어진 조직이 하나로 뭉침'을 표현 */
.ai-fab-logo .c-left,
.ai-fab-logo .c-right { animation-duration: 9s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.ai-fab-logo .c-left  { animation-name: fab-merge-left; }
.ai-fab-logo .c-right { animation-name: fab-merge-right; }
/* 두 원이 서로 다른 유기적 곡선 궤도로 자유롭게 떠다니다, 36%·77%에 가운데서 만나
   하나로 합쳐지며 squash&stretch 젤리 탄성 후 원래 크기로 복귀. 9s로 가속.
   비균일 scale(X≠Y)로 이동 중 stretch, 합체 시 squash→오버슈트 복귀 적용. */
@keyframes fab-merge-left {
  0%   { transform: translate(6.5px, 0)    scale(1, 1); }
  9%   { transform: translate(-3px, -9px)  scale(1.12, 0.9); }    /* 이동 중 stretch */
  19%  { transform: translate(-8px, 3px)   scale(0.9, 1.1); }     /* 방향 전환 squash */
  29%  { transform: translate(-2px, 11px)  scale(1.1, 0.88); }    /* 다시 stretch */
  33%  { transform: translate(3px, 4px)    scale(1.25, 0.9); }    /* 합체 직전 수평 stretch */
  36%  { transform: translate(6.5px, 0)    scale(1.15, 1.4); }    /* 합체 순간 수직 squash */
  39%  { transform: translate(6.5px, 0)    scale(0.9, 0.9); }     /* 오버슈트 */
  42%  { transform: translate(6.5px, 0)    scale(1, 1); }
  51%  { transform: translate(12px, -9px)  scale(1.13, 0.88); }   /* 이동 중 stretch */
  61%  { transform: translate(15px, 2px)   scale(0.88, 1.1); }
  70%  { transform: translate(8px, 11px)   scale(1.1, 0.9); }
  74%  { transform: translate(7px, 4px)    scale(1.25, 0.9); }    /* 합체 직전 수평 stretch */
  77%  { transform: translate(6.5px, 0)    scale(1.15, 1.4); }    /* 합체 순간 수직 squash */
  80%  { transform: translate(6.5px, 0)    scale(0.9, 0.9); }     /* 오버슈트 */
  83%  { transform: translate(6.5px, 0)    scale(1, 1); }
  92%  { transform: translate(1px, -6px)   scale(1.08, 0.94); }
  100% { transform: translate(6.5px, 0)    scale(1, 1); }
}
@keyframes fab-merge-right {
  0%   { transform: translate(-6.5px, 0)    scale(1, 1); }
  11%  { transform: translate(3px, 10px)    scale(1.12, 0.9); }   /* 이동 중 stretch */
  21%  { transform: translate(8px, -1px)    scale(0.9, 1.1); }    /* 방향 전환 squash */
  30%  { transform: translate(2px, -10px)   scale(1.1, 0.88); }   /* 다시 stretch */
  33%  { transform: translate(-3px, -4px)   scale(1.25, 0.9); }   /* 합체 직전 수평 stretch */
  36%  { transform: translate(-6.5px, 0)    scale(1.15, 1.4); }   /* 합체 순간 수직 squash */
  39%  { transform: translate(-6.5px, 0)    scale(0.9, 0.9); }    /* 오버슈트 */
  42%  { transform: translate(-6.5px, 0)    scale(1, 1); }
  55%  { transform: translate(-13px, 8px)   scale(1.13, 0.88); }  /* 이동 중 stretch */
  64%  { transform: translate(-15px, -2px)  scale(0.88, 1.1); }
  72%  { transform: translate(-7px, -11px)  scale(1.1, 0.9); }
  74%  { transform: translate(-7px, -4px)   scale(1.25, 0.9); }   /* 합체 직전 수평 stretch */
  77%  { transform: translate(-6.5px, 0)    scale(1.15, 1.4); }   /* 합체 순간 수직 squash */
  80%  { transform: translate(-6.5px, 0)    scale(0.9, 0.9); }    /* 오버슈트 */
  83%  { transform: translate(-6.5px, 0)    scale(1, 1); }
  93%  { transform: translate(-2px, 7px)    scale(1.08, 0.94); }
  100% { transform: translate(-6.5px, 0)    scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-fab-logo .c-left, .ai-fab-logo .c-right { animation: none; }
}
/* 로고를 키워 테두리를 얇게(먼데이 느낌) */
.ai-fab-logo { position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 15px; background: none; padding: 0;
  transition: transform .16s; }
.ai-fab:hover .ai-fab-logo { transform: scale(1.04); }
.ai-fab:hover::before { animation-duration: 2.6s; } /* hover 시 안쪽 무지개 가속 */
.ai-fab:hover::after { animation-duration: 1.4s; }  /* hover 시 테두리 더 빠르게 */
.ai-fab:active .ai-fab-logo { transform: scale(.97); }
@keyframes fab-spin { to { --fab-angle: 360deg; } }
/* 부드러운 컬러 글로우 — 살아 숨쉬듯 은은하게 */
@keyframes fab-glow {
  0%, 100% { box-shadow: 0 6px 16px rgba(20,24,40,.16), 0 0 14px rgba(124,58,237,.28), 0 0 24px rgba(45,91,255,.16); }
  50%      { box-shadow: 0 6px 16px rgba(20,24,40,.16), 0 0 22px rgba(229,50,138,.42), 0 0 38px rgba(124,58,237,.30); }
}
.ai-fab:hover { box-shadow: 0 8px 20px rgba(20,24,40,.18), 0 0 26px rgba(229,50,138,.50), 0 0 44px rgba(124,58,237,.40); }
@media (prefers-reduced-motion: reduce) { .ai-fab::before, .ai-fab::after, .ai-fab { animation: none; } }
@media (max-width: 768px) { .ai-fab { right: 16px; bottom: calc(var(--bottomnav-h) + 16px); width: 54px; height: 54px; }
  .ai-fab-logo { width: 50px; height: 50px; } }

/* 패널 */
.ai-scrim { position: fixed; inset: 0; background: rgba(17,24,39,.28); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 57; }
.ai-scrim.open { opacity: 1; pointer-events: auto; }
/* AI 패널 강조색 — 파란 시스템색을 무지개 AI 아이콘과 어울리는 보라 계열로 일괄 오버라이드 */
.ai-panel {
  --ai: #7C3AED; --ai-strong: #6D28D9; --ai-soft: #F2EAFF;
  --primary: #7C3AED; --primary-strong: #6D28D9; --primary-soft: #EEE5FE;
}
.ai-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 400px; max-width: 92vw; z-index: 58;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.32,.72,0,1), inset .26s cubic-bezier(.32,.72,0,1), width .26s, height .26s, border-radius .26s;
  display: flex; flex-direction: column; overflow: hidden; }
.ai-panel.open { transform: translateX(0); }
.ai-panel.wide:not(.detached) { width: 720px; }
/* 사이드 분리 — 우측 도킹에서 떼어내 우측 하단에 떠있는 컴팩트 창으로 */
.ai-panel.detached { top: auto; bottom: 20px; right: 20px; width: min(400px, 92vw); height: min(680px, 84vh);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(20,24,40,.30); }
.ai-panel.detached .ai-head { cursor: move; } /* 헤더 잡고 드래그 이동 */
.ai-panel.dragging { transition: none; user-select: none; } /* 드래그 중 지연·선택 방지 */
.ai-panel > * { position: relative; z-index: 1; }
/* 하단 옅은 무지개 그라데이션(먼데이st) */
.ai-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(229,50,138,.05), rgba(124,58,237,.04) 45%, transparent); }
.ai-head { display: flex; align-items: center; gap: 9px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
/* 헤더 우측 기능 버튼 — 먼데이st 컴팩트 라인 아이콘 */
.ai-head .icon-btn { width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); }
.ai-head .icon-btn:hover { background: var(--surface-2); color: var(--text-strong); }
.ai-head .icon-btn .ic { width: 18px; height: 18px; }
/* AI 빈 상태 — 중앙 인사 + 액션 제안 세로 리스트(먼데이st) */
.ai-empty { padding: 26px 18px 8px; }
.ai-empty-greet { margin-bottom: 20px; }
.ai-empty-greet b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); }
.ai-empty-greet p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.ai-actions-label { font-size: 12px; font-weight: 700; color: var(--text-faint); margin: 0 0 6px 2px; }
/* 스킬 카탈로그 — 라벨 줄 우측의 [스킬 전체 보기] 토글, 스킬 행의 한 줄 설명 */
.ai-actions-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 0; }
.ai-actions-head .ai-actions-label { margin: 0 0 0 2px; flex: 1; }
.ai-actions-label.sub { margin: 12px 0 6px 2px; }
.ai-skills-toggle { background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--text-muted); }
.ai-skills-toggle:hover { background: var(--surface-2); color: var(--text-strong); }
.ai-action-desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.ai-action { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 10px; border-radius: 10px; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 13.5px; transition: background .12s; }
.ai-action:hover { background: var(--surface-2); }
.ai-action-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.ai-action-ic .ic { width: 17px; height: 17px; }
.ai-action-tx { flex: 1; }
.ai-action-ic.ac0 { background: var(--tile-purple-bg); color: var(--tile-purple-fg); }
.ai-action-ic.ac1 { background: var(--tile-blue-bg); color: var(--tile-blue-fg); }
.ai-action-ic.ac2 { background: var(--tile-green-bg); color: var(--tile-green-fg); }
.ai-action-ic.ac3 { background: var(--tile-red-bg); color: var(--tile-red-fg); }
.ai-head .sp { width: 28px; height: 28px; border-radius: 8px; background: var(--ai); color: #fff; display: grid; place-items: center; }
.ai-head .sp .ic { width: 16px; height: 16px; }
/* AI 헤더·FAB의 ops 로고(앱 아이콘) */
/* AI 패널 헤더 로고 — 정적 무지개 ✦ 이미지(애니메이션 없음, 먼데이st) */
.ai-head-logo { width: 26px; height: 26px; flex: 0 0 auto; }
.ai-head b { font-size: 15.5px; color: var(--text-strong); }
.ai-head .grow { flex: 1; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.ai-msg { display: flex; gap: 9px; max-width: 100%; }
.ai-msg .sp { width: 26px; height: 26px; border-radius: 8px; background: var(--ai-soft); color: var(--ai); display: grid; place-items: center; flex: 0 0 auto; }
.ai-msg .sp .ic { width: 15px; height: 15px; }
.ai-msg .bubble { font-size: 13.5px; line-height: 1.55; padding: 11px 14px; border-radius: 14px; }
.ai-msg.ai .bubble { background: var(--surface-2); color: var(--text); border-top-left-radius: 4px; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.user .bubble { background: var(--primary); color: #fff; border-top-right-radius: 4px; }
.ai-msg.loading .bubble { color: var(--text-faint); }
/* AI 답변 마크다운 렌더 — 표·제목·굵게·인용·목록·업무 딥링크. .ai-md-* 전용 클래스라 전역 적용(✦·홈 공용) */
.ai-md-h { font-weight: 700; font-size: 14px; margin: 2px 0 6px; }
.ai-md-p { margin: 0 0 8px; }
.ai-md-p:last-child { margin-bottom: 0; }
.ai-md-ul { margin: 4px 0 8px; padding-left: 18px; }
.ai-md-ul li { margin: 2px 0; }
.ai-md-q { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--ai); background: var(--ai-soft); border-radius: 6px; }
.ai-md-table { border-collapse: collapse; width: 100%; margin: 6px 0 8px; font-size: 12.5px; }
.ai-md-table th,
.ai-md-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; }
.ai-md-table th { background: var(--ai-soft); font-weight: 600; white-space: nowrap; }
.ai-task-link { color: var(--ai); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; cursor: pointer; }
.ai-task-link:hover { filter: brightness(.9); }
/* ✦ 채팅 안 업무등록 확인카드 — 패널 폭에 맞춤(스파크 아이콘 숨김·버블 투명) */
.ai-msg.ai-compose { width: 100%; }
.ai-msg.ai-compose .sp { display: none; }
.ai-msg.ai-compose .bubble { width: 100%; padding: 0; background: transparent; }
.ai-msg.ai-compose /* 멀티스텝 진행 표시 — AI가 어떤 조회를 거쳤는지 한 줄로. 강조는 배경 톤까지만(굵은 컬러 테두리 금지) */
.ai-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-step { padding: 3px 9px; border-radius: var(--r-pill, 999px); background: var(--surface-2);
  font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

/* 쓰기 프리뷰 카드 — 무엇을 어떤 값으로 바꿀지 표로 먼저 보여준다. 승인 전에는 아무것도 저장되지 않는다.
   말투는 확인 카드(.compose-confirm)와 같게 맞춘다. */
.ai-preview { width: min(720px, 100%); margin: 14px auto 0; padding: 16px 18px; text-align: left;
  border: 1px solid var(--ai-soft); background: var(--ai-soft); border-radius: var(--r-lg); animation: cc-in .22s ease; }
.ai-preview .prev-head { font-size: 13px; font-weight: 700; color: var(--text-strong); margin-bottom: 10px; }
.ai-preview .prev-sec { font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 12px 0 6px; }
.ai-preview .prev-n { color: var(--text-faint); font-weight: 600; }
.ai-preview .prev-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 9px 12px;
  background: var(--surface); border-radius: var(--r-md); font-size: 13.5px; }
.ai-preview .prev-main { flex: 1; min-width: 0; }
.ai-preview .prev-main a { font-weight: 700; color: var(--text-strong); }
.ai-preview .prev-main small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.ai-preview .prev-val { flex: 0 0 auto; }
.ai-preview .prev-input { max-width: 150px; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.ai-preview .prev-arrow { font-size: 12.5px; color: var(--text-muted); }
.ai-preview .prev-saved { font-size: 12.5px; font-weight: 700; color: var(--ok, var(--text-muted)); }
.ai-preview .prev-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ai-preview .prev-note { flex: 1; font-size: 12px; color: var(--text-muted); }
.ai-preview .prev-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
/* 좁은 화면 — 값 입력칸을 아래 줄로 내려 제목이 찌그러지지 않게 */
@media (max-width: 520px) {
  .ai-preview .prev-row { flex-wrap: wrap; }
  .ai-preview .prev-val { flex: 1 0 100%; padding-left: 26px; }
  .ai-preview .prev-input { max-width: 100%; width: 100%; }
  /* 안내문이 버튼 밑으로 깔리지 않게 — 문구를 한 줄 차지하게 하고 버튼을 다음 줄 오른쪽에 둔다 */
  .ai-preview .prev-foot { flex-wrap: wrap; justify-content: flex-end; }
  .ai-preview .prev-note { flex: 1 0 100%; }
}

.compose-confirm { width: 100%; margin: 0; box-sizing: border-box; }
/* 파일 분석 결과 하단 '업무 만들기' 액션 */
.ai-msg.ai .bubble .ai-file-actions { margin-top: 10px; }
.ai-file-actions { margin-top: 10px; }
/* 파일 인테이크 공통(✦·홈) — 로딩·안내·홈 슬롯 */
.fi-loading { padding: 10px 2px; color: var(--text-faint); font-size: 13.5px; }
.fi-note { margin-top: 8px; color: var(--text-muted); font-size: 12.5px; }
.home-file-slot { margin-top: 14px; }
.ai-suggests { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 12px; }
.ai-suggest { font-size: 12.5px; font-weight: 600; color: var(--ai); background: var(--ai-soft); border-radius: var(--r-pill); padding: 8px 13px; }
.ai-suggest:hover { background: var(--ai-soft); filter: brightness(.97); }
/* AI 입력창 — 먼데이st 세로 박스(입력 + 하단 툴바 + 원형 전송) + 디스클레이머 */
.ai-form { padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.ai-composer { border: 1px solid var(--border-2); border-radius: 16px; padding: 11px 13px 9px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.ai-composer:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ai-composer-input { display: block; width: 100%; border: none; outline: none; resize: none; background: none; font: inherit; font-size: 14px; line-height: 1.5; color: var(--text-strong); min-height: 24px; max-height: 120px; }
.ai-composer-tools { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.ai-composer-tools .grow { flex: 1; }
.ai-tool-btn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: background .12s, color .12s; }
.ai-tool-btn:hover { background: var(--surface-2); color: var(--text); }
.ai-tool-btn .ic { width: 18px; height: 18px; }
.ai-send-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: none; cursor: pointer; transition: filter .12s;
  background: linear-gradient(135deg, #7C3AED, #2D5BFF); } /* AI 무지개 톤 */
.ai-send-btn:hover { filter: brightness(1.08); }
.ai-send-btn .ic { width: 16px; height: 16px; }
.ai-disclaimer { font-size: 11.5px; color: var(--text-faint); text-align: center; margin-top: 9px; }
#ai-mic { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--border-2); color: var(--text-muted); display: grid; place-items: center; }
#ai-mic:hover { color: var(--ai); border-color: var(--ai); }
#ai-mic.recording { color: #e03; border-color: #e03; animation: mic-pulse .9s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(238,0,51,.25); } 50% { box-shadow: 0 0 0 5px rgba(238,0,51,0); } }
@media (max-width: 768px) {
  .ai-panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: 100%; height: 86vh;
    border-left: none; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); }
  .ai-panel.open { transform: translateY(0); }
}
/* 인증 전엔 숨김 */
body.auth-pending .ai-fab, body.auth-pending .ai-panel, body.auth-pending .ai-scrim { display: none !important; }

/* 드로어·시트 오픈 시 AI FAB 숨김 — 모달 위에 떠서 가리지 않게 */
body:has(#scrim.open) .ai-fab { opacity: 0; pointer-events: none; transition: opacity .15s; }

/* AI FAB 넛지 말풍선 — 유휴·준비중 진입 시 노출. 설계문 §1 시안 */
.ai-nudge {
  position: fixed; right: 24px; bottom: 74px; z-index: 56;
  background: var(--surface); color: var(--text-strong);
  border: 1px solid var(--border); border-radius: 14px 14px 4px 14px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg); max-width: 220px;
  animation: ai-nudge-in .3s ease;
}
.ai-nudge::after {
  content: ''; position: absolute; right: 22px; bottom: -7px;
  width: 14px; height: 14px; background: var(--surface);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
@keyframes ai-nudge-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) { .ai-nudge { right: 16px; bottom: calc(var(--bottomnav-h) + 66px); } }
/* 모달 떠 있으면 FAB·넛지 모두 숨김 */
body:has(#scrim.open) .ai-nudge { opacity: 0; pointer-events: none; transition: opacity .15s; }

/* ============================================================
   지니램프 홀로그램 — AI 조직원 등장 시제품
   FAB 우측 하단에서 빛기둥이 솟구치며 얼굴이 materialize됨
   ============================================================ */

/* 홀로그램 래퍼 — FAB와 같은 우측 하단에 겹쳐 배치 */
#ai-holo-wrap {
  position: fixed;
  right: 0; bottom: 0;
  z-index: 57;
  pointer-events: none;
}

/* 홀로그램 전체 컨테이너 — FAB 위로 솟구치는 기준점 */
.ai-holo {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 100px;
  pointer-events: all;
  cursor: pointer;
  animation: holo-rise 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.ai-holo.holo-dissolve {
  animation: holo-sink .9s cubic-bezier(0.4, 0, 0.7, 0.3) forwards;
}

/* 빛무리 — 인물 아래 은은한 흰빛(퍼런 레이저 X) */
.holo-beam {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 92px;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 45%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
}

/* 얼굴 카드 — 빛무리 위에 부드럽게 떠오름 */
.holo-card {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 얼굴 래퍼 */
.holo-face-wrap {
  position: relative;
  width: 86px;
  height: 86px;
}

/* 얼굴 이미지 — 자연색 그대로, 가장자리만 부드럽게 페더링(인물만 떠오르듯) */
.holo-face {
  width: 86px;
  height: 86px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(ellipse 56% 68% at 50% 42%, #000 52%, rgba(0, 0, 0, 0.45) 74%, transparent 92%);
  mask-image: radial-gradient(ellipse 56% 68% at 50% 42%, #000 52%, rgba(0, 0, 0, 0.45) 74%, transparent 92%);
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.2));
}

/* 누끼(투명배경) 모드 — 둥근 마스크 없이 인물 실루엣 그대로, 부드러운 그림자 */
.holo-face-wrap:has(.holo-cutout) { width: auto; height: auto; }
.holo-face.holo-cutout {
  width: auto;
  height: 120px;
  max-width: 132px;
  object-fit: contain;
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, 0.28));
}
/* 누끼일 땐 둥근 후광 숨김(인물 실루엣이 곧 형태) */
.holo-face.holo-cutout ~ .holo-glow-ring { display: none; }

/* 이미지 로드 실패 fallback — 테마색 원형 + 이니셜(자연 톤) */
.holo-face-fallback {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 60%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 45%, #000 60%, transparent 82%);
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.2));
}

/* 스캔라인 — 제거(퍼런 홀로 느낌 빼기) */
.holo-scanlines { display: none; }

/* 후광 — 인물 뒤 은은한 흰빛(테두리 링 X) */
.holo-glow-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

/* 말풍선 — 밝고 친근하게 */
.holo-bubble {
  max-width: 172px;
  background: var(--surface);
  color: var(--text-strong);
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 4px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  animation: holo-bubble-in .5s .6s both;
}

/* 등장 — 아주 부드럽게, 흐릿하게서 또렷하게 떠오름(블러-인 + 페이드 우선) */
@keyframes holo-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.92); filter: blur(12px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* 소멸 — 천천히 가라앉으며 사라짐 */
@keyframes holo-sink {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(14px) scale(0.97); }
}

/* 말풍선 등장 */
@keyframes holo-bubble-in {
  from { opacity: 0; transform: scale(0.8) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 모바일 — 크기 줄이기 */
@media (max-width: 768px) {
  .ai-holo {
    right: 16px;
    bottom: calc(var(--bottomnav-h) + 16px);
    width: 80px;
  }
  .holo-face-wrap { width: 68px; height: 68px; }
  .holo-face, .holo-face-fallback { width: 68px; height: 68px; font-size: 24px; }
  .holo-glow-ring { inset: -10px; }
  .holo-card { bottom: 82px; }
  .holo-beam { width: 52px; height: 74px; }
  .holo-bubble { font-size: 10.5px; max-width: 140px; }
}

/* 접근성 — reduced-motion: 빛기둥·플리커 없이 단순 페이드 */
@media (prefers-reduced-motion: reduce) {
  .ai-holo           { animation: holo-fade-in .4s forwards; }
  .ai-holo.holo-dissolve { animation: holo-fade-out .4s forwards; }
  .holo-beam, .holo-face, .holo-face-fallback,
  .holo-scanlines, .holo-glow-ring { animation: none; }
  @keyframes holo-fade-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes holo-fade-out { from { opacity: 1; } to { opacity: 0; } }
}

/* 드로어 열릴 때 홀로그램 숨김 */
body:has(#scrim.open) #ai-holo-wrap { opacity: 0; pointer-events: none; transition: opacity .15s; }

/* ============================================================
   커스텀 데이트피커 — dp-field + dp-pop
   ============================================================ */

/* 날짜 입력 필드 — auth-input 스타일 계승 + 달력 아이콘 */
.dp-field {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 13px 15px; font-size: 14.5px; color: var(--text-strong);
  background: var(--surface); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease;
  user-select: none;
}
.dp-field:hover { border-color: var(--primary); }
.dp-field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,91,255,.14); }
.dp-field-text { flex: 1; font-size: 14px; color: var(--text-strong); }
.dp-field-text.dp-placeholder { color: var(--text-faint); }
.dp-cal-icon { color: var(--text-faint); display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; }
.dp-field:hover .dp-cal-icon { color: var(--primary); }

/* 날짜 네비게이터 달력 버튼 — 기존 icon-btn 스타일 활용 */
.dp-nav-cal-btn { margin-left: 4px; }

/* 팝오버 — 절대 위치, body 직결 */
.dp-pop {
  position: absolute; z-index: 200;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 280px; padding: 14px;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px) scale(.98);
  transition: opacity .15s ease, transform .15s ease;
}
.dp-pop.dp-pop-visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* 헤더 — 월 이전·다음 네비 */
.dp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.dp-title { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.dp-nav-btn {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: 11px;
  color: var(--text-muted); background: transparent;
  transition: background .1s;
}
.dp-nav-btn:hover { background: var(--surface-2); color: var(--text-strong); }

/* 날짜 그리드 — 7열 */
.dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* 요일 헤더 */
.dp-dh {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-faint); padding: 4px 0 8px;
}
.dp-dh.dp-sun { color: var(--danger); }
.dp-dh.dp-sat { color: var(--primary); }

/* 날짜 셀 */
.dp-day {
  text-align: center; font-size: 13px; font-weight: 500;
  color: var(--text); padding: 7px 0; border-radius: 8px;
  cursor: pointer; transition: background .1s, color .1s;
  line-height: 1;
}
.dp-day:hover { background: var(--surface-2); }
.dp-day.dp-blank { cursor: default; }
.dp-day.dp-blank:hover { background: transparent; }

/* 주말 색상 */
.dp-day.dp-sun:not(.dp-sel) { color: var(--danger); }
.dp-day.dp-sat:not(.dp-sel) { color: var(--primary); }

/* 오늘 — 테두리로 표시 */
.dp-day.dp-today:not(.dp-sel) {
  border: 1.5px solid var(--primary);
  color: var(--primary); font-weight: 700;
}

/* 선택된 날짜 — 브랜드 블루 강조 */
.dp-day.dp-sel {
  background: var(--primary); color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(45,91,255,.30);
}
.dp-day.dp-sel:hover { background: var(--primary-strong); }

/* 하단 액션 버튼 */
.dp-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.dp-action-btn {
  font-size: 12.5px; font-weight: 700; color: var(--primary);
  padding: 6px 12px; border-radius: var(--r-pill);
  transition: background .1s;
}
.dp-action-btn:hover { background: var(--primary-soft); }
.dp-action-btn.dp-clear { color: var(--text-faint); }
.dp-action-btn.dp-clear:hover { background: var(--surface-2); color: var(--text); }

/* 모바일 — 팝오버가 화면 안에 들어오게 최대 폭 조정 */
@media (max-width: 768px) {
  .dp-pop { width: min(280px, 94vw); }
}

/* ── D1 다음 행동 제안 카드 (설계문 d1-home-next-action.md §3-5) ── */
/* 기존 cal-banner 배경 톤 재사용. 신규 CSS 변수 0개. fallback hex 포함. */
.next-action {
  margin-top: var(--gap, 12px);
  padding: 12px 14px;
  background: var(--surface-2, #f5f7fa);
  border: 1px solid var(--border-2, #e5e8ec);
  border-radius: var(--r-md, 12px);
}
.next-action .na-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted, #6b7280); margin-bottom: 6px;
}
.next-action .na-label .spark { display: inline-flex; align-items: center; }
.next-action .na-main {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.next-action .na-title {
  font-size: 15px; font-weight: 700; color: var(--text, #111);
  flex: 1; min-width: 0;
}
.next-action.na-empty .na-title {
  font-size: 14px; font-weight: 500;
}
.next-action .na-go { flex-shrink: 0; }
.next-action .na-ai { flex-shrink: 0; font-size: 12px; }
.next-action .na-meta {
  margin-top: 6px; font-size: 13px; color: var(--text-muted, #6b7280);
  display: flex; gap: 12px; flex-wrap: wrap;
}
@media (max-width: 640px) {
  .next-action .na-title { width: 100%; }
  .next-action .na-go { width: 100%; justify-content: center; }
}

/* ============================================================
   Phase 1 — 댓글(cmt-*) + 종 배지(bell-*) + 알림 드로어(notif-*)
   ============================================================ */

/* 종 버튼 공통 — 데스크톱 상단바 + 모바일 탑바 */
.bell-btn { position: relative; }

/* 미읽음 카운트 배지 */
.bell-count {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill); font-size: 10px; font-weight: 800;
  background: var(--danger); color: #fff;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---------- 대화 섹션 — 댓글 목록 + 입력창 ---------- */
.cmt-list {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 14px;
  max-height: 320px; overflow-y: auto;
}
.cmt-loading, .cmt-empty {
  font-size: 13px; color: var(--text-faint);
  padding: 8px 0;
}
.cmt-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--r-md);
}
.cmt-name {
  font-size: 12px; font-weight: 700; color: var(--primary);
}
.cmt-time {
  font-size: 11px; color: var(--text-faint); margin-left: 6px;
}
.cmt-body {
  font-size: 13.5px; color: var(--text); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}

/* 댓글 입력 영역 */
.cmt-input-wrap {
  display: flex; gap: 8px; align-items: flex-end;
}
.cmt-mentor-wrap {
  flex: 1; position: relative;
}
.cmt-input {
  width: 100%; border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 10px 12px; font-size: 13.5px; color: var(--text-strong);
  background: var(--surface); resize: none; outline: none;
  transition: border-color .14s ease;
  font-family: inherit;
}
.cmt-input:focus { border-color: var(--primary); }

/* @멘션 드롭다운 */
.cmt-mention-list {
  position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  list-style: none; margin: 0; padding: 4px 0;
  z-index: 10; max-height: 200px; overflow-y: auto;
}
.cmt-mention-list.hidden { display: none; }
.cmt-mention-item {
  padding: 9px 14px; font-size: 13.5px; color: var(--text); cursor: pointer;
  font-weight: 600;
}
.cmt-mention-item:hover { background: var(--surface-2); }

.cmt-send { flex: 0 0 auto; align-self: flex-end; }

/* OPS-19 — 댓글 이모지 반응 */
.cmt-reaction-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px;
}
.cmt-reactions {
  display: contents; /* 칩들이 cmt-reaction-bar flex에 직접 참여하도록 */
}
.cmt-reaction-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; line-height: 1.4;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; transition: background .1s, border-color .1s;
}
.cmt-reaction-chip:hover { background: var(--surface-2); border-color: var(--border-2); }
.cmt-reaction-chip.mine {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary);
}
.cmt-reaction-cnt { font-size: 11px; font-weight: 700; color: inherit; }
.cmt-reaction-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  font-size: 14px; line-height: 1; font-weight: 700;
  background: transparent; border: 1px dashed var(--border);
  color: var(--text-faint); cursor: pointer; transition: background .1s, color .1s;
}
.cmt-reaction-add:hover { background: var(--surface-2); color: var(--text); border-style: solid; }

/* OPS-23 — 댓글 격상 액션 바 (담당 지정·하위업무로 버튼) */
.cmt-action-bar {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.cmt-action-btn {
  padding: 2px 8px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: background .1s, color .1s, border-color .1s;
}
.cmt-action-btn:hover {
  background: var(--primary-soft); color: var(--primary); border-color: var(--primary);
}

/* Phase 3 — 댓글 읽음 명단 (읽은 사람 아바타 + "+N명") */
.cmt-readers {
  display: flex; align-items: center; gap: 3px; margin-top: 5px;
}
.cmt-readers .avatar.xs {
  width: 18px; height: 18px; font-size: 9px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cmt-readers-extra {
  font-size: 11px; color: var(--text-faint);
}

/* 이모지 피커 팝오버 */
.reaction-picker-pop {
  display: flex; gap: 4px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.rp-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; font-size: 18px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer; transition: background .1s;
}
.rp-emoji:hover { background: var(--surface-2); }

/* ---------- 알림 드로어 목록(notif-*) — Phase 1 강화 ---------- */

/* kind별 색 CSS 변수 */
:root {
  --k-assign:        #2D5BFF; --k-assign-soft:        #EAEFFF;
  --k-status:        #16A34A; --k-status-soft:        #E7F6EC;
  --k-reject:        #E5484D; --k-reject-soft:        #FCEAEA;
  --k-mention:       #7C3AED; --k-mention-soft:       #F3E8FF;
  --k-comment:       #0E7490; --k-comment-soft:       #DCF2F7;
  --k-approval:      #D9820B; --k-approval-soft:      #FCEFD7;
  --k-due:           #E5484D; --k-due-soft:           #FCEAEA;
  --k-changelog:     #6B7280; --k-changelog-soft:     #EEF1F6;
}

/* 드로어 헤더 — 안읽음 뱃지 + 버튼 행 */
.notif-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
}
.notif-head-title { font-size: 16px; font-weight: 800; color: var(--text-strong); }
.notif-head-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 800;
  background: var(--danger); color: #fff; display: grid; place-items: center;
}
.notif-head-spacer { flex: 1; }
.notif-head-allread {
  font-size: 12.5px; font-weight: 700; color: var(--primary);
  background: var(--primary-softer); border: 1px solid var(--primary-soft);
  padding: 5px 10px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
}
.notif-head-allread:hover { background: var(--primary-soft); }
.notif-head-viewall {
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  background: none; border: none; padding: 5px 4px;
  cursor: not-allowed; white-space: nowrap; display: flex; align-items: center; gap: 3px;
}
.notif-head-soon {
  font-size: 9.5px; font-weight: 800; color: var(--warning);
  background: var(--warning-soft); border-radius: var(--r-pill);
  padding: 1px 5px;
}

#notif-list {
  display: flex; flex-direction: column;
  padding: 6px 8px 8px;
}

/* 알림 카드 — 2열 그리드(아이콘 38px + 본문) */
.notif-row {
  position: relative;
  display: grid; grid-template-columns: 38px 1fr; gap: 11px;
  padding: 12px 30px 12px 10px;
  border-radius: var(--r-md); cursor: pointer; transition: background .12s;
}
.notif-row + .notif-row { margin-top: 2px; }
.notif-row:hover { background: var(--surface-2); }

/* 안읽음 — 좌측 점 + 옅은 배경 */
.notif-row.unread { background: var(--primary-softer); }
.notif-row.unread:hover { background: var(--primary-soft); }
.notif-row.unread::before {
  content: ""; position: absolute; left: 2px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}

/* kind 원형 아이콘 */
.notif-icon {
  width: 38px; height: 38px; border-radius: var(--r-md);
  display: grid; place-items: center; flex-shrink: 0;
}
.notif-icon svg, .notif-icon .ic {
  width: 18px; height: 18px; flex-shrink: 0;
}

.notif-main { min-width: 0; }
.notif-top {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; flex-wrap: wrap;
}
.notif-kind {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  padding: 1.5px 7px; border-radius: var(--r-pill); flex-shrink: 0;
}
.notif-actor {
  font-size: 12.5px; font-weight: 700; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.notif-actor .verb { font-weight: 500; color: var(--text-muted); }
.notif-time { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; }

.notif-body {
  font-size: 13.5px; color: var(--text); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-row.unread .notif-body { color: var(--text-strong); }
.notif-read-stamp { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* 딥링크 스타일 — 알림 본문 내 업무 링크 */
.notif-body .ai-task-link {
  color: var(--primary); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--primary-soft);
}
.notif-body .ai-task-link:hover { border-bottom-color: var(--primary); }

.notif-del {
  position: absolute; top: 10px; right: 6px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-sm);
  font-size: 16px; line-height: 1; color: var(--text-faint);
  cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
.notif-row:hover .notif-del { opacity: 1; }
.notif-del:hover { background: var(--danger-soft); color: var(--danger); }

/* ============================================================
   업무 현황판 — 뷰 토글 + 칸반 보드 (received.js 전용)
   기존 토큰만 사용, 새 색 하드코딩 없음.
   ============================================================ */

/* 뷰 탭 줄 — 기존 클래스 유지(다른 곳 참조 대비). */
.view-tabs-row { display: flex; align-items: center; margin: 8px 0 4px; }

/* 뷰 전환 툴바 — 기존 클래스 유지(다른 곳 참조 대비). */
.view-toolbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: nowrap; overflow-x: auto; }

/* unified-toolbar — 뷰토글 + 액션을 monday식 한 줄로 통합한 컨테이너.
   border: 1px solid transparent → stat-strip/itable(border 1px 카드)와 좌우 폭 기준 통일. */
.unified-toolbar { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; flex-wrap: wrap; overflow-x: auto; border: 1px solid transparent; }
.unified-toolbar-actions { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: nowrap; }

/* toolbar-text-group — monday식 borderless 아이콘+텍스트 묶음(검색·직원·필터·보기). */
.toolbar-text-group {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
  margin-left: auto; /* 툴바 우측 끝으로 정렬 — KPI 박스·표 우측 가장자리와 폭 맞춤 */
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
/* 그룹 내 각 항목 — 구분선 역할을 border-left로 표현 */
.toolbar-text-group > * + * { border-left: 1px solid var(--border); }

/* 검색 — borderless label, input은 투명 */
.toolbar-text-group .search-input-d {
  display: flex; align-items: center;
  /* 선택바(독립창·삭제·선택해제) 노출 시 한 줄 수용 — 검색칸이 먼저 줄어들도록 shrink 허용 */
  flex-shrink: 1; border: none; background: transparent; border-radius: 0;
  padding: 0 10px; height: 36px; gap: 6px; min-width: 90px; max-width: 200px;
  box-shadow: none; cursor: text;
}
.toolbar-text-group .search-input-d .ic { width: 15px; height: 15px; color: var(--text-faint); flex-shrink: 0; }
.toolbar-text-group .search-input-d input {
  flex: 1; border: none; outline: none; background: transparent; font: inherit;
  font-size: 13px; color: var(--text-strong); padding: 0; min-width: 0;
}
.toolbar-text-group .search-input-d input::placeholder { color: var(--text-faint); font-size: 13px; }
.toolbar-text-group .search-input-d input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 직원 select — borderless 커스텀 래퍼 */
.toolbar-assignee-wrap {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 10px; height: 36px; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-weight: 600; white-space: nowrap;
  position: relative; background: transparent;
}
.toolbar-assignee-wrap:hover { background: var(--surface-2); color: var(--text); }
.toolbar-assignee-wrap .ic { width: 15px; height: 15px; flex-shrink: 0; }
.toolbar-assignee-wrap select {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.toolbar-assignee-label { pointer-events: none; }

/* 필터·보기 버튼 — sort-btn에서 border/shadow 제거하고 그룹에 통합 */
.toolbar-text-group .filter-btn,
.toolbar-text-group .view-menu-btn {
  border: none; border-radius: 0; box-shadow: none; background: transparent;
  padding: 0 12px; height: 36px; font-size: 13px; font-weight: 600;
}
.toolbar-text-group .filter-btn:hover,
.toolbar-text-group .view-menu-btn:hover { background: var(--surface-2); }

/* 데스크톱 검색 입력 — 그룹 밖 단독 사용 시 기존 동작 유지(fallback) */
.search-input-d { display: flex; align-items: center; flex-shrink: 0; }
.search-input-d input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--text-strong); padding: 0; min-width: 0; }
.search-input-d input::placeholder { color: var(--text-faint); }
.search-input-d input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* 검색창 가변폭 — unified-toolbar 안에서 빈 공간을 채움. */
.search-input-flex { flex: 1; max-width: 320px; }

/* 필터·뷰 버튼 — sort-btn 재사용 + 배지 */
.filter-btn { position: relative; }
.filter-badge, .sv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--text-faint); color: var(--surface);
  font-size: 9.5px; font-weight: 800; margin-left: 3px; vertical-align: middle;
}
.filter-badge {
  background: var(--primary); color: #fff;
}

/* 필터▾ 팝오버 — sort-pop/status-pop 패턴 복제 */
.filter-pop {
  position: fixed; z-index: 300;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 10px; min-width: 220px;
  animation: spop-in .12s ease;
}
.fpop-section { margin-bottom: 12px; }
.fpop-section:last-child { margin-bottom: 0; }
.fpop-label {
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .03em; margin-bottom: 6px; padding: 0 2px;
}
.fpop-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fpop-chip { padding: 6px 12px; font-size: 12.5px; }
.fpop-select {
  width: 100%; border: 1px solid var(--border-2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text-strong);
  background: var(--surface); outline: none;
}

/* 빠른필터 패널 (Phase A) — 기존 wide 스타일 유지(호환) */
.filter-pop-wide { min-width: 420px; max-width: min(580px, calc(100vw - 16px)); padding: 12px; }
.fpop-quick-panel { margin-bottom: 12px; }
.fpop-quick-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fpop-quick-title {
  font-size: 12px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .03em; text-transform: uppercase;
}
.fpop-quick-cnt {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 20px;
  padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}
.fpop-clear-btn {
  font-size: 11.5px; color: var(--text-faint); background: none;
  border: 1px solid var(--border-2); border-radius: 6px;
  padding: 3px 10px; cursor: pointer;
}
.fpop-clear-btn:hover { color: var(--text); border-color: var(--border); }
.fpop-qcols { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; }
.fpop-qcol { flex: 1 1 100px; min-width: 90px; }
.fpop-qlabel {
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .03em; margin-bottom: 6px; padding: 0 2px;
}
.fpop-qchips { display: flex; flex-direction: column; gap: 2px; }
.fpop-qchip {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 5px 8px;
  font-size: 12px; color: var(--text-muted);
  background: none; border: 1px solid transparent; border-radius: 7px;
  cursor: pointer; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fpop-qchip:hover { background: var(--surface-2); border-color: var(--border-2); }
.fpop-qchip.active, .fpop-qchip.sort-active {
  background: var(--primary-soft); color: var(--primary);
  border-color: var(--primary-soft);
}
.fpop-qcnt {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  color: var(--text-faint); margin-left: 6px;
  background: var(--surface-2); border-radius: 10px;
  padding: 1px 6px;
}
.fpop-qchip.active .fpop-qcnt, .fpop-qchip.sort-active .fpop-qcnt { background: var(--primary); color: #fff; }

/* ── 필터창 vpop 스타일 (보기창과 동일한 다열 패널) ── */
/* filter-pop-vpop — sort-pop view-pop와 동일한 flex 다열 구조 */
.filter-pop-vpop {
  min-width: 480px; max-width: min(680px, calc(100vw - 16px)); padding: 6px;
  display: flex; flex-direction: column; gap: 0;
}
/* 모드 전환 링크 영역 — 상단 구분선 아래 */
.filter-pop-vpop .fpop-mode-toggle {
  padding: 4px 8px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
/* vpop 다열 레이아웃 */
.fpop-vcols {
  display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto;
}
.fpop-vcol {
  display: flex; flex-direction: column; min-width: 110px; flex: 1 1 110px;
}
.fpop-vcol + .fpop-vcol { border-left: 1px solid var(--border); margin-left: 4px; padding-left: 4px; }
/* 날짜 열은 조금 더 넓게 */
.fpop-date-col { min-width: 140px; flex: 0 0 140px; }
/* 날짜 select */
.fpop-date-select {
  width: 100%; border: none; background: transparent; outline: none;
  font-size: 12px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .02em; padding: 2px 4px 6px; cursor: pointer;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
/* 날짜 네비 행 */
.fpop-date-nav-row {
  display: flex; align-items: center; gap: 4px; padding: 4px 0 6px; position: relative;
}
.fpop-date-label {
  flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fpop-nav-btn { width: 22px; height: 22px; flex-shrink: 0; font-size: 10px; }
/* fpop-clear-row — 활성 필터 개수 + 모두취소 */
.fpop-clear-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 0 4px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
@media (max-width: 640px) {
  .filter-pop-vpop { min-width: 320px; }
  .fpop-vcols { flex-wrap: wrap; }
  .fpop-vcol { flex: 1 1 140px; }
  .fpop-date-col { flex: 1 1 140px; }
}

/* 표·보드 토글 버튼 그룹 — padding 4px로 줄여 전체 높이 44px(toolbar-text-group 44px과 동일). */
.view-toggle { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; box-shadow: var(--shadow-xs); }
/* vt-btn height 36px 고정 — sort-btn(padding 8px+14px ≈ 36px)와 맞춤. */
.vt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; height: 36px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-muted); background: transparent; border: none; white-space: nowrap; }
.vt-btn:hover { background: var(--surface-2); color: var(--text); }
.vt-btn.active { background: var(--primary-soft); color: var(--primary); }
.vt-btn .vt-ic { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: middle; }

/* 칸반 보드 — 4컬럼 그리드, 데스크톱 전용 */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.board.board-empty { display: block; }

/* 칸반 컬럼 */
.kcol { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; min-height: 240px; }
.kcol-head { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; }
.kcol-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--text-faint); }
.kcol-dot.todo   { background: var(--text-faint); }
.kcol-dot.doing  { background: var(--warning); }
.kcol-dot.review { background: var(--warning); }
.kcol-dot.done   { background: var(--success); }
.kcol-dot.stuck  { background: var(--danger); }
.kcol-title { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.kcol-count { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 9px; margin-left: auto; min-width: 22px; text-align: center; }

/* 칸반 카드 목록 */
.kcards { display: flex; flex-direction: column; gap: 10px; }

/* 칸반 카드 */
.kcard { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: var(--r-md); box-shadow: var(--shadow-xs); padding: 13px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.kcard:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kcard.s-todo   { border-left-color: var(--text-faint); }
.kcard.s-doing  { border-left-color: var(--warning); }
.kcard.s-review { border-left-color: var(--warning); }
.kcard.s-done   { border-left-color: var(--success); }
.kcard.s-stuck  { border-left-color: var(--danger); }

.kc-top   { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.kc-title { font-size: 14px; font-weight: 700; color: var(--text-strong); line-height: 1.4; }
.kc-foot  { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.kc-foot .grow { flex: 1; }
.kc-ai    { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ai); }

/* 담당자 셀 — 표 뷰 */
.cowner { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cowner .on { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 상태칩 클릭 팝오버 메뉴 — 보드 본인 카드 전용 ---------- */
.status-chip-btn {
  cursor: pointer; border: none; font-family: inherit;
  transition: filter .1s;
}
.status-chip-btn:hover { filter: brightness(.93); }

.status-pop {
  position: fixed; z-index: 300;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 140px;
  animation: spop-in .12s ease;
}
@keyframes spop-in {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.spop-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 13px; font-size: 13.5px; font-weight: 600; color: var(--text);
  border-radius: 8px; background: transparent; border: none; font-family: inherit; cursor: pointer;
  transition: background .1s;
}
.spop-item:hover { background: var(--surface-2); }

/* ---------- 칸반 카드 먼데이식 필드 행 ---------- */
/* .kc-field — 라벨+아이콘+값 한 줄. 컴팩트 간격 유지. */
.kc-field {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px; min-height: 0;
}
/* 담당자 행 — 아바타 + 이름 */
.kc-field-assignee .kc-field-name { font-size: 12px; font-weight: 600; color: var(--text); }
/* 요청자 행 — 라벨 강조 + 아바타 + 이름 */
.kc-field-requester .kc-field-name { font-size: 12px; color: var(--text-muted); }
/* 담당/요청 관계 한 줄 — [요청자 → 담당자] 또는 [담당자 + 내 업무] */
.kc-people { flex-wrap: wrap; }
.kc-people .kc-person { display: inline-flex; align-items: center; gap: 4px; }
.kc-people .kc-field-name { font-size: 12px; font-weight: 600; color: var(--text); }
.kc-people-arrow { color: var(--text-muted, #888); font-weight: 700; }
/* 요청 관계일 때 요청자는 약하게, 담당자(마지막)는 진하게 */
.kc-people-rel .kc-person:first-child .kc-field-name { font-weight: 400; color: var(--text-muted); }
.kc-self-tag { font-size: 11px; color: var(--primary, #1565c0); background: var(--primary-soft); border-radius: 8px; padding: 1px 7px; margin-left: 2px; }
/* 공용 라벨 — '요청'·'등록' 등 */
.kc-field-lbl {
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  background: var(--surface-2); border-radius: 4px; padding: 1px 5px;
  white-space: nowrap; flex-shrink: 0;
}
/* 날짜 행 */
.kc-field-dates { gap: 4px; flex-wrap: wrap; }
.kc-date-chip {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border-radius: 5px; padding: 2px 7px;
}
.kc-date-due { color: var(--danger); }
.kc-date-arrow { font-size: 10px; color: var(--text-faint); }
/* 등록일 */
.kc-field-created { margin-top: 5px; }
.kc-created-val { font-size: 11px; color: var(--text-faint); }
/* 체크리스트 미니 진행바 */
.kc-field-cl { gap: 7px; }
.kc-cl-prog { font-size: 11.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.kc-cl-bar {
  flex: 1; height: 4px; background: var(--surface-3);
  border-radius: 99px; overflow: hidden; min-width: 40px;
}
.kc-cl-fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width .2s; }

/* ---------- 칸반 카드 표시항목 토글 — data-hide-fields CSS 제어 ---------- */
/* 재렌더 없이 CSS display:none으로 즉시 반영. 필드는 JS에서도 조건부 렌더하므로 CSS 토글은 하위 호환용. */
.board[data-hide-fields~="prio"]     .kc-top  .pchip  { display: none; }
.board[data-hide-fields~="status"]   .kc-top  .badge:not(.pchip)  { display: none; }
/* kc-top 전체가 비어 여백만 남지 않도록 */
.board[data-hide-fields~="prio"][data-hide-fields~="status"] .kc-top { margin-bottom: 0; min-height: 0; }

/* ---------- DnD 드래그 상태 ---------- */
.kcard.dragging { opacity: .45; transform: rotate(1.5deg); }
.kcol.drag-over { background: var(--primary-softer); border-color: var(--primary); }

/* 열 순서 드래그 — .ops-tbl thead th 전용 */
.ops-tbl thead th { cursor: grab; }
.ops-tbl thead th.dragging { opacity: .5; }
.ops-tbl thead th.col-drop-target { box-shadow: inset 2px 0 0 var(--primary); }

/* 헤더 컬럼 필터 — owner·prio·requester·status th 깔때기 아이콘(D5: 본문=정렬, 깔때기=필터). */
/* ::after 깔때기를 .ot-filter-icon 실제 요소로 전환 — 클릭 영역 분리. */
.ops-tbl thead th.th-filter-active { color: var(--primary); }
.ot-filter-icon {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; opacity: .55; cursor: pointer; user-select: none;
  padding: 3px 4px; margin-left: 2px; border-radius: 5px; vertical-align: middle;
  flex-shrink: 0; transition: opacity .12s, background .12s, color .12s;
}
.ot-filter-icon:hover { opacity: 1; background: var(--surface-3, var(--surface-2)); }
/* 필터 적용된 열 — 파란 알약(흰 삼각형)으로 또렷이 구분(클릭=필터 해제 가능). */
.ops-tbl thead th.th-filter-active .ot-filter-icon {
  opacity: 1; color: #fff; background: var(--primary);
}
.ops-tbl thead th.th-filter-active .ot-filter-icon:hover { background: var(--primary); }

/* 정렬 화살표 span — 전 컬럼 헤더 우측에 표시(D6·D7). */
.ot-sort-arrow {
  display: inline-flex; align-items: center;
  font-size: 9px; margin-left: 3px; opacity: .25; user-select: none;
  flex-shrink: 0;
}
.ot-sort-arrow.active { opacity: 1; color: var(--primary); }
.ops-tbl thead th[data-sortable] { cursor: pointer; user-select: none; }
.ops-tbl thead th[data-sortable]:hover { background: var(--surface-3, var(--surface-2)); }

/* 열 리사이즈 핸들 — th 우측 경계(D4: select 제외). */
.ot-resize-handle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 5px;
  cursor: col-resize; z-index: 2;
  background: transparent;
}
.ot-resize-handle:hover, .ot-resize-handle.resizing { background: var(--primary); opacity: .4; }

.col-hdr-pop { min-width: 160px; max-width: 240px; padding: 8px 6px; }
.col-hdr-pop .fpop-qlabel { padding: 0 4px 4px; }
.col-hdr-pop .fpop-qchips { gap: 2px; }
.col-hdr-pop-empty { display: block; padding: 6px 8px; font-size: 12px; color: var(--text-faint); }

/* 표 위 필터 해제 바 — 활성 열 필터(quick)를 칩으로 보여주고 한 번에/개별 해제. */
.col-filter-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 7px 12px; margin-bottom: 8px;
  background: var(--primary-softer, #EEF2FF);
  border: 1px solid var(--primary-soft, #C7D7FD);
  border-radius: 8px; font-size: 12.5px;
}
.col-filter-bar .cfbar-label { font-weight: 700; color: var(--primary); margin-right: 2px; }
.col-filter-bar .cfbar-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--primary-soft, #C7D7FD);
  color: var(--text-strong); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.col-filter-bar .cfbar-chip:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.col-filter-bar .cfbar-x { font-size: 10px; opacity: .7; }
.col-filter-bar .cfbar-clear-all {
  margin-left: auto; padding: 3px 10px; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--primary); font-size: 12px; font-weight: 700; cursor: pointer;
}
.col-filter-bar .cfbar-clear-all:hover { text-decoration: underline; }

/* 엑셀 자동필터 통합 드롭다운 (.col-hdr-xldrop) — 정렬+검색+체크리스트 */
.col-hdr-xldrop { min-width: 200px; max-width: 260px; padding: 4px 0; }
.chpop-sort-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--text);
  background: transparent; border: none; font-family: inherit; cursor: pointer;
  border-radius: 6px; margin: 0 4px; width: calc(100% - 8px);
  transition: background .1s;
}
.chpop-sort-item:hover { background: var(--surface-2); }
.chpop-sort-item.chpop-sort-active { color: var(--primary); background: var(--primary-soft); }
.chpop-divider { height: 1px; background: var(--border-2); margin: 4px 0; }
.chpop-search {
  display: block; width: calc(100% - 16px); margin: 4px 8px;
  padding: 6px 8px; font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--border-2); border-radius: 6px;
  background: var(--surface); color: var(--text);
  outline: none;
}
.chpop-search:focus { border-color: var(--primary); }
.chpop-val-list {
  max-height: 240px; overflow-y: auto; padding: 2px 4px;
}
.chpop-chk-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 5px; cursor: pointer;
  font-size: 13px; color: var(--text); user-select: none;
}
.chpop-chk-row:hover { background: var(--surface-2); }
.chpop-chk-all { font-weight: 600; }
.chpop-val-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chpop-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  padding: 4px 8px 2px;
}
.chpop-btn {
  padding: 6px 14px; font-size: 12.5px; font-family: inherit; font-weight: 600;
  border-radius: 6px; border: 1px solid var(--border-2); cursor: pointer;
  transition: background .1s;
}
.chpop-ok {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.chpop-ok:hover { opacity: .88; }
.chpop-cancel { background: var(--surface); color: var(--text); }
.chpop-cancel:hover { background: var(--surface-2); }

/* new-request 우선순위 칩 라디오 */
.nr-prio-wrap { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.nr-prio-opt { cursor: pointer; }
.nr-prio-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.nr-prio-opt input[type="radio"]:checked + .pchip { outline: 2px solid currentColor; outline-offset: 2px; }

/* 우선순위 칩 색상 — badge 토큰 재사용, 신규 변수 없음 */
.pchip.p-urgent { background: var(--danger-soft);  color: var(--danger);   }
.pchip.p-high   { background: var(--warning-soft); color: var(--warning);  }
.pchip.p-medium { background: var(--surface-3);    color: var(--text-muted); }
.pchip.p-low    { background: var(--primary-soft); color: var(--primary);  }


/* ============================================================
   .ops-tbl — monday 스타일 담당자별 그룹·7컬럼 표 (데스크톱 전용)
   기존 .itable·칸반 CSS와 네임스페이스 완전 분리.
   신규 hex 없음 — 기존 토큰만 사용.
   ============================================================ */

/* 그룹 컨테이너 */
.ops-tbl-wrap { display: flex; flex-direction: column; gap: 22px; }

/* 그룹 헤더 행 */
.ops-grp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; border-left: 4px solid var(--grp-accent, var(--border-2)); }
.ops-grp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.ops-grp-caret {
  font-size: 11px; color: var(--text-faint); transition: transform .15s;
  width: 14px; text-align: center; flex: 0 0 auto;
}
.ops-grp.collapsed .ops-grp-caret { transform: rotate(-90deg); }
.ops-grp-avatar { flex: 0 0 auto; }
.ops-grp-name { font-size: 14px; font-weight: 800; color: var(--text-strong); }
.ops-grp-count {
  font-size: 12px; font-weight: 700; color: var(--text-faint);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 1px 9px; min-width: 22px; text-align: center;
}
.ops-grp-body { overflow: hidden; }
.ops-grp.collapsed .ops-grp-body { display: none; }

/* overdue 버킷 강조 — 헤더 배경·라벨 색만 빨강(기존 .ops-grp 구조 유지) */
.ops-grp.ops-grp-overdue .ops-grp-head { background: var(--danger-soft, #fff1f0); border-color: var(--danger, #e03131); }
.ops-grp.ops-grp-overdue .ops-grp-name { color: var(--danger, #e03131); }

/* Group 버튼 — sort-btn 재사용, disabled 흐림 */
.group-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: auto; }

/* 8컬럼 표 — 제목·담당자·상태·시작일·마감일·우선순위·업무내용·파일 */
.ops-tbl {
  width: 100%; border-collapse: collapse;
  table-layout: fixed;
}
/* 선택 컬럼 — 맨 왼쪽 고정, 숨김·순서 대상 외(단계3) */
/* 13컬럼 합계 100% — 1280~1440px 화면에서 가로스크롤 제거 */
.ops-tbl colgroup col.ot-select    { width: 3%;  }
/* ============================================================
   업무 독립창(포커스 모드) — #focus/<id>(,<id>…) 위젯 창
   셸 전부 숨기고 카드만. 좁은 창(모바일 폭)에서도 자연 반응형.
   ============================================================ */
/* 헤드리스 — 데스크톱·모바일 셸 전부 숨김(좁은 창=모바일 셸까지) */
body.focus-mode .sidebar, body.focus-mode .sidebar-toggle, body.focus-mode .topbar,
body.focus-mode .opstabs,
body.focus-mode .m-topbar, body.focus-mode .bottomnav, body.focus-mode .ai-fab,
body.focus-mode #mobile-preview-toggle, body.focus-mode #view-mode-toggle { display: none !important; }
body.focus-mode .app { display: block; }
body.focus-mode .main { margin: 0; padding: 0; }
body.focus-mode #main-content { padding: 0; max-width: none; }

.focus-wrap { padding: 6px 10px 30px; }
/* 상단 컨트롤 줄 — 흐름 안 sticky(콘텐츠를 가리지 않고, 스크롤해도 따라옴) */
.focus-float {
  position: sticky; top: 6px; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  width: max-content; margin-left: auto;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(4px);
  border: 1px solid var(--border-2, #E5E8EF); border-radius: 99px;
  padding: 3px 6px 3px 12px;
  box-shadow: 0 4px 14px -8px rgba(40, 50, 80, .4);
}
.focus-live { display: inline-flex; align-items: center; }
.focus-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; animation: focus-live-pulse 1.6s ease-in-out infinite; }
@keyframes focus-live-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.focus-return-btn { border-radius: 99px; }

/* 리스트에서 떼어낸 행 위젯 — 표 모양 그대로, 좁은 창은 가로 스크롤(반응형) */
.focus-row-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border-2, #E5E8EF);
  border-radius: 12px;
  margin-top: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px -18px rgba(40, 50, 80, .4);
}
.focus-row-card:first-of-type { margin-top: 8px; }
.focus-tbl-wrap { overflow-x: auto; }
.focus-tbl-wrap .ops-tbl { width: 100%; min-width: 720px; table-layout: fixed; }
.focus-tbl-wrap .mon-row { border-bottom: none; }

/* 좁은 창 = 모바일형 보기 — 보조 컬럼 숨기고 핵심(제목·상태·마감)만 */
@media (max-width: 760px) {
  body.focus-mode .focus-tbl-wrap .ops-tbl { min-width: 0; table-layout: auto; }
  body.focus-mode .focus-tbl-wrap colgroup { display: none; }
  body.focus-mode .focus-tbl-wrap td[data-col="created"],
  body.focus-mode .focus-tbl-wrap td[data-col="task_no"],
  body.focus-mode .focus-tbl-wrap td[data-col="requester"],
  body.focus-mode .focus-tbl-wrap td[data-col="owner"],
  body.focus-mode .focus-tbl-wrap td[data-col="start"],
  body.focus-mode .focus-tbl-wrap td[data-col="prio"],
  body.focus-mode .focus-tbl-wrap td[data-col="memo"],
  body.focus-mode .focus-tbl-wrap td[data-col="file"],
  body.focus-mode .focus-tbl-wrap td[data-col="comment"],
  body.focus-mode .focus-tbl-wrap td.ot-select { display: none; }
  body.focus-mode .focus-tbl-wrap td[data-col="title"] { width: auto; }
  body.focus-mode .focus-tbl-wrap .ot-cell { padding: 0 8px; }
}

.focus-empty { padding: 60px 0 40px; text-align: center; color: var(--text-muted, #8A92A6); font-size: 14px; }
.focus-empty-partial { padding: 12px 0; font-size: 12px; }

/* 항상 위(PiP) 실행 중 — 소유자 독립창의 전체 덮개 안내 */
#focus-pin-ph {
  position: fixed; inset: 0; z-index: 999;
  background: var(--surface, #fff);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
#focus-pin-ph .fpp-card { display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--text, #2A3142); }
#focus-pin-ph .fpp-card span { font-size: 11px; font-weight: 500; color: var(--text-muted, #8A92A6); }

/* ============================================================
   플로팅 말풍선(fly-tip) — data-tip 다크 말풍선과 동일 디자인.
   표 셀(overflow:hidden) 안 아이콘용 — body 부착 fixed라 잘리지 않음.
   ============================================================ */
.fly-tip {
  position: fixed; z-index: 1300; left: 0; top: 0;
  transform: translateX(-50%) translateY(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.fly-tip.on { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .12s; }
.fly-tip-arrow { width: 0; height: 0; margin: 0 auto -1px; border: 7px solid transparent; border-top-width: 0; border-bottom-color: #323338; }
.fly-tip-body {
  background: #323338; color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  padding: 7px 11px; border-radius: 6px; white-space: nowrap;
}

/* 타임라인 카드 모드 — 진행 기록 호버(시각·아이콘·이름·내용 정렬 행) */
.fly-tip--card .fly-tip-body {
  white-space: normal; font-weight: 500;
  padding: 10px 13px; border-radius: 10px;
  max-width: 400px; min-width: 260px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
}
.ftl-head { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: #9AA3B5; margin-bottom: 5px; }
.ftl-row { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 12.5px; line-height: 1.45; }
.ftl-row + .ftl-row { border-top: 1px solid rgba(255, 255, 255, .09); }
.ftl-time { flex: none; width: 62px; font-size: 11px; color: #9AA3B5; font-variant-numeric: tabular-nums; }
.ftl-ic { flex: none; width: 16px; text-align: center; font-size: 11px; }
.ftl-tx { min-width: 0; color: #E6E9F2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ftl-tx b { color: #fff; font-weight: 700; }
.ftl-row--reply .ftl-ic { color: #7ED9A2; }
.ftl-row--reply .ftl-tx { color: #A9E3C0; }
.ftl-row--status .ftl-ic { color: #F5C26B; }
.ftl-more { padding-top: 6px; font-size: 11px; color: #9AA3B5; }
/* 여러 줄 말풍선 — 줄바꿈 라벨(진행 타임라인 등)용 */
.fly-tip--multi .fly-tip-body { white-space: pre-line; max-width: 420px; text-align: left; font-weight: 500; }

/* 오른쪽 배치(세로 레일 아이콘용) — 화살표가 왼쪽을 가리키고 세로 중앙 정렬 */
.fly-tip[data-pos="right"] { display: flex; align-items: center; transform: translateY(-50%) translateX(-4px); }
.fly-tip[data-pos="right"].on { transform: translateY(-50%) translateX(0); }
.fly-tip[data-pos="right"] .fly-tip-arrow {
  margin: 0 -1px 0 0;
  border: 7px solid transparent; border-left-width: 0;
  border-bottom-color: transparent; border-right-color: #323338;
}

/* 제목 헤더 최좌측 — 목록 보기/닫기 미니 토글(행 압정 아이콘 위 지점에 고정) */
.ops-tbl th[data-col="title"] { position: relative; }
.ops-tbl th .th-expand-all {
  /* left:12px = .ot-cell 좌측 패딩과 동일 — 아래 행들의 압정(18px)과 같은 x축에 정렬 */
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--border-2, #E5E8EF);
  background: var(--surface, #fff);
  color: var(--text-muted, #8A92A6);
  height: 20px; padding: 0 7px 0 5px; margin: 0;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer;
}
/* 토글 삼각형 — 등록일 정렬 화살표(.ot-sort-arrow.active)와 동일한 9px 파란 삼각형 */
.ops-tbl th .th-expand-all .th-expand-ico { font-size: 9px; line-height: 1; color: var(--primary, #4361EE); }
.ops-tbl th .th-expand-all:hover { color: var(--primary, #4361EE); border-color: var(--primary, #4361EE); }
/* 선택 체크박스 — 헤더(전체선택)·행 모두 셀 정중앙 정렬.
   thead th:first-child의 padding-left:20px가 헤더 체크박스만 밀어 행과 어긋나던 문제 — 양쪽 패딩 0 통일. */
.ops-tbl th.ot-select, .ops-tbl td.ot-select { text-align: center; vertical-align: middle; padding-left: 0 !important; padding-right: 0 !important; }
.ops-tbl .row-check-all, .ops-tbl .row-check { display: inline-block; vertical-align: middle; margin: 0; }
.ops-tbl colgroup col.ot-created   { width: 6%;  }
.ops-tbl colgroup col.ot-task-no   { width: 5%;  }
.ops-tbl colgroup col.ot-title     { width: 19%; }
.ops-tbl colgroup col.ot-owner     { width: 11%; }
.ops-tbl colgroup col.ot-requester { width: 11%; }
.ops-tbl colgroup col.ot-status    { width: 6%;  }
.ops-tbl colgroup col.ot-start     { width: 7%;  }
.ops-tbl colgroup col.ot-due       { width: 7%;  }
.ops-tbl colgroup col.ot-prio      { width: 7%;  }
.ops-tbl colgroup col.ot-memo      { width: 10%; }
.ops-tbl colgroup col.ot-file      { width: 4%;  }
.ops-tbl colgroup col.ot-comment   { width: 4%;  }

/* 헤더 행 */
.ops-tbl thead th {
  font-size: 11.5px; font-weight: 700; color: var(--text-faint);
  text-align: center; padding: 9px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: relative; /* 리사이즈 핸들 절대 배치 기준. */
}
/* 평면 뷰 한정 sticky 헤더(D1·D2) — 그룹 뷰(.ops-grp-body 안) 제외. viewport 스크롤 기준 top:0. */
.ops-tbl.ops-tbl-flat thead th {
  position: sticky; top: 0; z-index: 5;
}
/* select 컬럼 — 체크박스 중앙 정렬, 드래그 커서 미적용 */
.ops-tbl thead th[data-col="select"] { text-align: center; padding: 0; cursor: default; }
.ops-tbl thead th[data-col="select"]:hover { background: var(--surface-2); }
.ops-tbl td[data-col="select"] { text-align: center; vertical-align: middle; padding: 0; }
.ops-tbl td[data-col="select"] input[type="checkbox"],
.ops-tbl th[data-col="select"] input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary);
}
/* 선택 액션바 — 표 위 툴바(hidden 기본, 선택 시 flex) */
.sel-actionbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; margin-bottom: 4px;
  background: var(--primary-softer, #EEF2FF);
  border: 1px solid var(--primary-soft, #C7D7FD);
  border-radius: 8px;
  font-size: 13px;
}
.sel-actionbar .sel-count { font-weight: 600; color: var(--primary); flex: 1; }
.sel-actionbar .btn { font-size: 12px; padding: 4px 10px; }
/* sel-actionbar-inline — toolbar-text-group 안 인라인 배치용. 독립 줄 없이 같은 행에 표시. */
.sel-actionbar-inline {
  padding: 0; margin-bottom: 0; background: none; border: none; border-radius: 0;
  border-left: 1px solid var(--border);
  height: 36px; align-items: center; box-sizing: border-box;
}
.sel-actionbar-inline .sel-count { flex: none; white-space: nowrap; padding: 0 6px; font-size: 12px; }
/* 독립창·삭제·선택해제 버튼 — toolbar-text-group 내 높이 36px 통일.
   독립창 추가로 한 줄이 넘치던 문제 — 패딩·폰트 컴팩트화(2026-06-10). */
.sel-actionbar-inline .btn {
  height: 36px; padding: 0 8px; box-sizing: border-box;
  display: inline-flex; align-items: center; border-radius: 0; border: none; box-shadow: none;
  font-size: 12px; white-space: nowrap;
}
.btn-danger-soft { color: var(--red, #dc2626); }
.btn-danger-soft:hover { background: var(--red-softer, #FEE2E2); }
/* ot-task-no col width는 colgroup % 선언으로 통합(70px 고정 제거 — table-layout:fixed 충돌 방지) */
/* 가운데정렬 — ot-cell 기본 justify-content:center 적용, text-align·padding-right 제거 */
.ot-task-no-cell { font-size: 12px; color: var(--text-faint, #aaa); font-weight: 500; white-space: nowrap; }
.ops-tbl thead th:first-child { padding-left: 20px; }
/* 제목·업무내용 헤더도 중앙 정렬(thead th 기본 center 사용). 본문 셀은 .ot-title-cell/.ot-memo-cell이 별도로 좌측 정렬 유지. */

/* 데이터 행 — mon-row */
.ops-tbl tbody tr.mon-row { border-bottom: 1px solid var(--border); }
.ops-tbl tbody tr.mon-row:last-child { border-bottom: none; }
.ops-tbl tbody tr.mon-row:hover { background: var(--surface-2); }
.ops-tbl tbody tr.mon-row td { padding: 0; vertical-align: middle; height: 46px; }

/* 셀 세로 격자선 — .ops-tbl 네임스페이스 한정(칸반·.itable 무영향) */
.ops-tbl thead th { border-right: 1px solid var(--border-2); }
.ops-tbl thead th:last-child { border-right: none; }
.ops-tbl tbody tr.mon-row td { border-right: 1px solid var(--border-2); }
.ops-tbl tbody tr.mon-row td:last-child { border-right: none; }

/* 셀 공통 — overflow:hidden은 table-layout:fixed와 짝. width:100%+overflow:hidden으로 셀 내용이 열 너비를 강제로 넓히지 못하게 막는다. */
/* 기본 가운데정렬. 제목·업무내용만 아래서 flex-start(좌측)로 오버라이드. */
.ops-tbl .ot-cell {
  display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 12px; width: 100%;
  overflow: hidden;
}
/* 첫 컬럼 셀만 20px 들여쓰기. (구: .ot-cell:first-child — 각 셀이 자기 td의 first-child라 전 컬럼에 20px가 먹어 헤더와 8px 어긋났음) */
.ops-tbl td:first-child .ot-cell { padding-left: 20px; }

/* 제목 셀 — 좌측 정렬 오버라이드 */
.ops-tbl .ot-title-cell { justify-content: flex-start; gap: 8px; font-weight: 600; color: var(--text-strong); }
/* 제목 셀 우측 고정 그룹 — [체크리스트 숫자][자물쇠] 순서, 셀 오른쪽 끝 정렬 */
.ops-tbl .ot-title-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* 고정(핀) 토글 — 평소 숨김, 행 hover 시 옅게 노출. 핀하면 금색 항상 표시. */
.ops-tbl .ot-pin {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 4px;
  opacity: .28;
  filter: grayscale(1);
  transition: opacity .12s, filter .12s, background .12s;
}
.ops-tbl .mon-row:hover .ot-pin { opacity: .55; }
.ops-tbl .ot-pin:hover { opacity: .8; filter: grayscale(1); background: var(--surface-2); }
.ops-tbl .ot-pin.on { opacity: 1; filter: none; }
/* 압정 자리표시자 — 버튼 미노출 행도 동일 폭(18px) 유지해 아이콘 열 정렬 */
.ops-tbl .ot-pin-ph { visibility: hidden; pointer-events: none; }
/* ============================================================
   2단 사이드바 — 아이콘 레일(62px) + 서브메뉴 패널(212px)
   솔라피 콘솔 충실 재현(2026-06-11): 화이트 레일·연회색 활성 블록·
   컴팩트 13px 메뉴·옅은 섹션 라벨·회색 검색 박스·펼침 고정.
   ============================================================ */
/* 2단 사이드바·탑바 데스크톱 전용 — 모바일(≤768px)에서 app.css의 display:none을 덮어쓰지 않도록
   @media (min-width: 769px) 안에 가두어 CSS 로드 순서 우선순위 문제 해소 */
.sidebar-toggle { display: none !important; } /* 구 접기 토글 — 핀이 대체(데스크톱·모바일 공통 숨김) */
@media (min-width: 769px) {
.app { grid-template-columns: 268px minmax(0, 1fr); }
body.nav-unpinned .app { grid-template-columns: 62px minmax(0, 1fr); }

/* position은 app.css의 sticky 유지(스크롤 시 화면 고정 — relative로 덮으면 같이 스크롤돼 하단이 끊김).
   overflow visible은 플라이아웃 패널이 잘리지 않게. sticky도 absolute 자식의 기준이 된다. */
.sidebar { display: flex; flex-direction: row; padding: 0; overflow: visible; }
.snav-rail {
  width: 62px; flex: 0 0 62px;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 8px 0 12px; gap: 0;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: #161b22;
  overflow-y: auto;
  scrollbar-width: none;            /* 스크롤바가 폭을 먹어 중앙정렬이 틀어지는 것 방지(Firefox) */
}
.snav-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* Chrome/Safari */
.snav-logo { display: flex; justify-content: center; padding: 4px 0 10px; margin: 0; cursor: pointer; }
.snav-logo .logo-mark { width: 30px; height: 30px; }
.snav-rail { gap: 5px; padding: 8px 5px 12px; }
.snav-rail-btn {
  width: 100%; padding: 4px 0 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; overflow: visible;
  border: none; background: none; border-radius: 8px; cursor: pointer;
  color: #9aa3b2;
  font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: -.02em;
  white-space: nowrap;
}
.snav-rail-btn .ic, .snav-rail-btn svg { width: 21px; height: 21px; stroke-width: 1.7; }
/* 코그 9심볼 렌더 PNG 아이콘 — 다크 레일에서 메탈 타일이 살도록 크게 + 드롭섀도 + 중앙정렬 */
.snav-rail-btn .snav-rail-img { width: 48px; height: 48px; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.snav-rail-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.snav-rail-btn:hover .snav-rail-img { filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
/* 선택 칸 — 픽토그램이 쿨블루 네온으로 발광하는 별도 이미지(on/) + 숨쉬는 펄스.
   타일은 Higgsfield 3D 렌더(입체 기울임이 이미지에 내장) — CSS 변환 없이 그대로 노출. */
.snav-rail-btn.active { background: none; color: #fff; font-weight: 700; }
.snav-rail-btn.active .ic, .snav-rail-btn.active svg { stroke-width: 2; }
.snav-rail-btn.active .snav-rail-img {
  /* 내부 쿨블루 네온 글로우 — 크기는 비활성과 동일(48px) */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  animation: railGlowPulse 2.2s ease-in-out infinite;
}
@keyframes railGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(45,91,255,.5)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
  50%      { filter: drop-shadow(0 0 9px rgba(60,110,255,.95)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
}
@media (prefers-reduced-motion: reduce) { .snav-rail-btn.active .snav-rail-img { animation: none; } }
/* 8버튼 대응 — 720px 이하에서 버튼 높이·폰트 완화 압축. 그 이상은 원본 크기 유지. */
@media (max-height: 720px) {
  .snav-rail-btn { padding: 3px 0 2px; font-size: 9.5px; }
  .snav-rail-btn .ic, .snav-rail-btn svg { width: 17px; height: 17px; }
  .snav-rail-btn .snav-rail-img { width: 38px; height: 38px; }
  .snav-rail-btn.active .snav-rail-img { width: 46px; height: 46px; margin: -5px 0; }
}
/* core/support 경계 구분선 — 다크 레일 대비 */
.snav-rail-div { height: 1px; background: rgba(255,255,255,.10); margin: 4px 6px; flex-shrink: 0; }

.snav-panel {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  padding: 10px 8px 12px;
  background: var(--surface);
}
body.nav-unpinned .snav-panel { display: none; }
body.nav-unpinned .sidebar.snav-open .snav-panel {
  display: flex; position: absolute; left: 62px; top: 0; bottom: 0; width: 218px; z-index: 70;
  border-right: 1px solid rgba(15, 15, 15, .08);
  box-shadow: 14px 0 30px -20px rgba(15, 15, 15, .35);
}
/* 플라이아웃 열림 — 본문을 딤 처리해 의도된 오버레이로 읽히게(그림자만으로 뜬 '깨진 겹침' 방지).
   사이드바(레일+패널)를 스크림 위로 올리고, 스크림 어디든 탭하면 닫힘(closeFly가 #sidebar 바깥 탭 감지). */
body.nav-unpinned.snav-fly-open .sidebar { z-index: 90; }
.snav-scrim { position: fixed; inset: 0; background: rgba(17, 24, 39, .30); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 64; }
body.nav-unpinned.snav-fly-open .snav-scrim { opacity: 1; pointer-events: auto; }

.snav-search {
  display: flex; align-items: center; gap: 7px;
  border: none; border-radius: 7px;
  padding: 8px 10px; margin: 0 2px 10px; cursor: text;
  background: var(--surface-2);
}
.snav-search .ic, .snav-search svg { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }
.snav-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 12.5px; color: var(--text-strong); }
.snav-search input::placeholder { color: var(--text-faint); }
.snav-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.snav-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 8px; }
.snav-title { font-size: 15px; font-weight: 700; color: var(--text-strong); letter-spacing: -.01em; }
.snav-pin {
  display: flex; align-items: center; gap: 4px;
  border: none; background: none; cursor: pointer; padding: 3px 6px; border-radius: 5px;
  font-size: 10.5px; font-weight: 500; color: var(--text-faint); letter-spacing: -.01em;
  opacity: .55; transition: opacity .15s, color .15s, background .15s;
}
.snav-pin .ic { width: 13px; height: 13px; stroke-width: 2; flex-shrink: 0; transition: fill .15s, stroke .15s; }
.snav-pin:hover { background: var(--surface-2); color: var(--text-muted); opacity: .85; }
.snav-pin.on { color: var(--primary, #4A74FF); opacity: 1; }
.snav-pin.on .ic { stroke: var(--primary, #4A74FF); fill: rgba(74,116,255,.12); }
.snav-pin.on:hover { background: var(--surface-2); }
.snav-empty { padding: 14px 10px; font-size: 12px; color: var(--text-faint); }
/* 사이드바 메뉴 패널 — 스크롤 기능 유지하되 스크롤바는 완전 숨김(거슬림 방지, 라이트·다크 공통). */
#snav-list { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
#snav-list::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 패널 메뉴 행 — 솔라피 톤: 13px 보통 굵기·16px 아이콘·연회색 활성 블록 */
.snav-panel .nav-label {
  font-size: 11px; font-weight: 600; color: var(--text-faint);
  padding: 12px 10px 5px; letter-spacing: 0;
}
/* 섹션 접기/펼치기 — 헤더 전체가 토글 버튼, 우측 chevron이 상태 표시(트리 chevron과 같은 규칙) */
.snav-panel .nav-sec-head {
  display: flex; align-items: center; gap: 4px; width: 100%;
  border: none; background: none; cursor: pointer; text-align: left;
  font-family: inherit; border-radius: 6px;
  transition: color .15s, background .15s;
}
.snav-panel .nav-sec-head > span {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snav-panel .nav-sec-head .ic {
  width: 13px; height: 13px; flex-shrink: 0; opacity: .75; transition: transform .15s ease;
}
.snav-panel .nav-sec-head:hover { color: var(--text-muted); background: var(--surface-2); }
.snav-panel .nav-sec.collapsed .nav-sec-body { display: none; }
.snav-panel .nav-sec.collapsed .nav-sec-head .ic { transform: rotate(-90deg); }
/* 전체 펼침·접기 — 검색창과 목록 사이 우측 정렬 텍스트 버튼 */
.snav-secbar { display: flex; justify-content: flex-end; padding: 0 4px 2px; }
.snav-secall {
  border: none; background: none; cursor: pointer; padding: 2px 6px; border-radius: 5px;
  font-family: inherit; font-size: 10.5px; font-weight: 500; letter-spacing: -.01em;
  color: var(--text-faint); opacity: .6; transition: opacity .15s, color .15s, background .15s;
}
.snav-secall:hover { background: var(--surface-2); color: var(--text-muted); opacity: .95; }
.snav-panel .nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px; margin: 1px 0;
  font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: -.01em;
}
.snav-panel .nav-item > span:not(.count):not(.nav-soon):not(.tree-chev) {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snav-panel .nav-item .nav-soon, .snav-panel .nav-item .count, .snav-panel .nav-item .tree-chev { flex-shrink: 0; margin-left: auto; }
/* 트리 — 부모 한 줄 말줄임 + 하위 들여쓰기 */
.snav-panel .nav-tree-parent { font-weight: 600; }
.snav-panel .nav-tree-children .nav-item { padding-left: 32px; }
.snav-panel .nav-item .ic, .snav-panel .nav-item > svg { width: 16px; height: 16px; stroke-width: 1.8; color: var(--text-muted); flex-shrink: 0; }
.snav-panel .nav-item:hover { background: var(--surface-2); }
/* 선택 메뉴 강조 — 지메일식 컬러 필(2026-08-07 부장님, 옵스원 전체 메뉴 공통) */
.snav-panel .nav-item.active { background: var(--primary-soft); color: var(--primary-strong); font-weight: 700; }
.snav-panel .nav-item.active .ic, .snav-panel .nav-item.active > svg { color: var(--primary-strong); }
.snav-panel .nav-item.active .count { background: var(--primary); color: #fff; }

/* 즐겨찾기 별 토글 버튼 — nav-item 우측 플로팅 */
/* order 고정 — 배지(.count)가 동적으로 붙어도 별 → 배지 순서 유지(배지 최우측) */
.snav-panel .nav-item .nav-fav-btn { order: 2; }
.snav-panel .nav-item .count { order: 3; }
/* 즐겨찾기 별 — 평소 투명, hover 시 흐리게, on(즐겨찾기됨) 시 채움+차분한 황금색 */
.nav-fav-btn {
  display: none; border: none; background: none; cursor: pointer;
  padding: 2px; border-radius: 4px; margin-left: auto; flex-shrink: 0;
  color: transparent; line-height: 0; transition: color .15s, opacity .15s;
}
.nav-fav-btn .ic { width: 13px; height: 13px; stroke-width: 1.8; stroke: currentColor; fill: none; transition: fill .15s, stroke .15s; }
.snav-panel .nav-item:hover .nav-fav-btn { display: flex; align-items: center; color: var(--text-faint); opacity: .7; }
.snav-panel .nav-item:hover .nav-fav-btn:hover { color: #c9a84c; opacity: 1; }
.nav-fav-btn.on { display: flex; align-items: center; color: #b8952e; opacity: 1; }
.nav-fav-btn.on .ic { fill: #c9a84c; stroke: #b8952e; }
.nav-fav-btn.on:hover { color: #e2b44a; }
.nav-fav-btn.on:hover .ic { fill: #e2b44a; stroke: #c9a84c; }
/* 즐겨찾기 레일 버튼 — star 아이콘(심볼 이미지 없음) */
.snav-rail-fav .ic { width: 18px; height: 18px; stroke-width: 1.8; transition: fill .15s, color .15s; }
.snav-rail-fav.active .ic { fill: #c9a84c; color: #b8952e; stroke: #b8952e; }

/* 패널 하단 사용자 블록 — 가로 한 줄(이름 세로 꺾임 수정), 로그아웃은 아이콘만 */
.snav-panel .nav-user {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px 2px; margin-top: 6px;
  border-top: 1px solid var(--border);
}
.snav-panel .nav-user .meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.snav-panel .nav-user .meta b { font-size: 12.5px; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav-panel .nav-user .meta span { font-size: 10.5px; color: var(--text-faint); }
.snav-panel .nav-logout-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 7px;
  background: none; color: var(--text-faint); cursor: pointer;
}
.snav-panel .nav-logout-btn:hover { background: var(--surface-2); color: var(--danger); }
.snav-panel .nav-logout-btn .ic, .snav-panel .nav-logout-btn svg { width: 15px; height: 15px; }
.snav-panel .nav-logout-btn span { display: none; }

/* ============================================================
   솔라피형 탑바 — 좌측 브랜드+페이지 타이틀 / 우측 위젯·아이콘·계정 알약
   ============================================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; padding: 0 18px 0 16px;
  background: #fff; border-bottom: 1px solid rgba(15, 15, 15, .08);
}
.tb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-brand { display: flex; align-items: center; gap: 7px; cursor: pointer; flex-shrink: 0; }
.tb-mark { width: 24px; height: 24px; }
.tb-name { font-size: 16px; font-weight: 800; letter-spacing: -.03em; color: #14181f; white-space: nowrap; }
.tb-name em { font-style: normal; font-weight: 600; color: #555c66; }
.tb-page { font-size: 15px; font-weight: 500; color: #555c66; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tb-account-wrap { position: relative; margin-left: 8px; }
.tb-account {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--surface); padding: 6px 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-strong); letter-spacing: -.01em;
}
.tb-account:hover { background: var(--surface-2); }
.tb-account .ic { width: 15px; height: 15px; color: var(--text-muted); }
.tb-account .tb-caret { width: 12px; height: 12px; }
.tb-account-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 264px; z-index: 120;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 6px;
}
/* 계정 메뉴 — 테마 스타일(스킨) 행: 라벨 위·버튼 아래 세로 배치(11개라 좁은 드롭다운에서 가로 불가) */
.tbm-skin-row { display: flex; flex-direction: column; gap: 7px; padding: 4px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.tbm-skin-row .skin-seg { width: 100%; }
.tb-account-menu.hidden { display: none; }
.tbm-row { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.tbm-item { display: block; width: 100%; text-align: left; border: none; background: none; border-radius: 7px; padding: 8px 10px; font-size: 13px; color: var(--danger); cursor: pointer; }
.tbm-item:hover { background: var(--danger-soft); }

/* 탑바 계정 메뉴 — 테마 선택 행 */
.tbm-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 8px; gap: 8px;
}
.tbm-theme-label { font-size: 12px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }

/* 더보기 시트 — 테마 선택 행 */
.d-row-theme {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; gap: 8px;
}
.d-row-theme-label { font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0; }

/* ── 테마 세그먼트 컨트롤 (자동·라이트·다크) ── */
.theme-seg {
  display: inline-flex; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 3px;
}
.theme-seg-btn,
.skin-seg-btn {
  padding: 5px 10px; border-radius: calc(var(--r-sm) - 2px);
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: none; border: none; cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.theme-seg-btn:hover, .skin-seg-btn:hover { color: var(--text); background: var(--surface-3); }
.theme-seg-btn.active,
.skin-seg-btn.active {
  background: var(--surface); color: var(--primary);
  box-shadow: var(--shadow-xs);
}
/* 스킨 세그먼트 — 버튼 6개라 좁은 곳에선 줄바꿈 허용 */
.skin-seg { flex-wrap: wrap; }

/* ── 구 사이드바 접힘(.sidebar-collapsed) 무력화 — 2단 사이드바 보호(빈 패널 사고 방지) ── */
.sidebar { width: auto; }
.app.sidebar-collapsed { grid-template-columns: 268px minmax(0, 1fr); }
body.nav-unpinned .app.sidebar-collapsed { grid-template-columns: 62px minmax(0, 1fr); }
.app.sidebar-collapsed .sidebar { width: auto; padding: 0; }
.app.sidebar-collapsed .sidebar .nav-item span,
.app.sidebar-collapsed .sidebar .nav-label,
.app.sidebar-collapsed .sidebar .nav-user .meta { display: revert; }
.app.sidebar-collapsed .sidebar .nav-item { justify-content: flex-start; padding: 8px 10px; }
/* 트리 패널(has-tree) 그리드도 새 폭 기준으로 */
.app.has-tree { grid-template-columns: 268px var(--tree-w) minmax(0, 1fr); }
body.nav-unpinned .app.has-tree { grid-template-columns: 62px var(--tree-w) minmax(0, 1fr); }
.app.has-tree.tree-collapsed { grid-template-columns: 268px 0 minmax(0, 1fr); }
body.nav-unpinned .app.has-tree.tree-collapsed { grid-template-columns: 62px 0 minmax(0, 1fr); }
.app.has-tree.sidebar-collapsed { grid-template-columns: 268px var(--tree-w) minmax(0, 1fr); }
.app.has-tree.sidebar-collapsed.tree-collapsed { grid-template-columns: 268px 0 minmax(0, 1fr); }
} /* end @media (min-width: 769px) — 2단 사이드바·탑바 데스크톱 전용 */

/* 자동완성 0건·오류 안내 행 — 클릭 불가, 옅은 안내 톤 */
.inline-ac-item.inline-ac-empty { pointer-events: none; color: var(--text-muted, #8A92A6); font-size: 12px; }

/* 노션식 제목 셀 — 클릭=인라인 편집(떠 있는 입력 박스), hover '열기' 버튼=사이드 드로어 */
.ops-tbl .ot-title-input {
  flex: 1; min-width: 0;
  font: inherit; font-weight: 600; color: var(--text-strong, #1B2236);
  background: var(--surface, #fff);
  border: 1px solid var(--border-2, #E5E8EF);
  border-radius: 6px;
  box-shadow: 0 6px 18px -8px rgba(40, 50, 80, .4);
  outline: none; padding: 4px 8px;
  position: relative; z-index: 3;
}
/* 열기 버튼 — 노션 톤(차분한 회색, 파랑 강조 없음). hover 시 옅은 배경만. */
.ops-tbl .ot-open-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; line-height: 1;
  color: rgba(55, 53, 47, .65);
  background: var(--surface, #fff);
  border: 1px solid rgba(15, 15, 15, .1);
  border-radius: 4px; padding: 3px 6px;
  box-shadow: 0 1px 2px rgba(15, 15, 15, .05);
  cursor: pointer; flex-shrink: 0;
  opacity: 0; transition: opacity .12s, background .12s;
}
.ops-tbl .ot-open-btn .ic, .ops-tbl .ot-open-btn svg { width: 12px; height: 12px; stroke-width: 1.6; }
.ops-tbl .mon-row:hover .ot-open-btn { opacity: 1; }
.ops-tbl .ot-open-btn:hover { background: rgba(55, 53, 47, .06); color: rgba(55, 53, 47, .85); border-color: rgba(15, 15, 15, .1); }
.ops-tbl .ot-pin[tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 핀한 행 — 옅은 금색 강조(라이트=크림, 다크=은은한 골드 틴트. 토큰화) */
.ops-tbl .mon-row.pinned > td { background: var(--pin-row-bg); }
.ops-tbl .mon-row.pinned:hover > td { background: var(--pin-row-bg-hover); }
.ops-tbl .ot-title-text {
  cursor: pointer; border-radius: 6px; padding: 3px 6px; margin: -3px -6px;
  font-size: 14px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ops-tbl .ot-title-text:hover { background: var(--surface-2); text-decoration: underline; text-decoration-color: var(--border-2); }

/* 소유자 셀 */
.ops-tbl .ot-owner-cell { gap: 7px; font-size: 13px; color: var(--text); }
.ops-tbl .ot-owner-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 상태 셀 — 클릭 팝오버로 통일(결정 B) */
.ops-tbl .ot-status-cell {
  justify-content: center; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #fff;
  transition: filter .1s; position: relative;
}
.ops-tbl .ot-status-cell:hover { filter: brightness(.93); }
.ops-tbl .ot-status-cell.st-todo  { background: var(--text-faint); }
.ops-tbl .ot-status-cell.st-doing { background: var(--warning); }
.ops-tbl .ot-status-cell.st-done  { background: var(--success); }
.ops-tbl .ot-status-cell.st-stuck { background: var(--danger); }
/* 타인 행 상태 셀 — 읽기전용 */
.ops-tbl .ot-status-cell.readonly { cursor: default; filter: none; opacity: .85; }

/* 등록일 셀 — 날짜 10자(2026-05-31)가 한 줄로 표시되도록 줄바꿈 금지 */
.ops-tbl .ot-created-cell { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* 마감일 셀 */
.ops-tbl .ot-due-cell { font-size: 13px; color: var(--text); cursor: text; white-space: nowrap; }
.ops-tbl .ot-due-cell.editable:hover { background: var(--surface-2); border-radius: 6px; }
.ops-tbl .ot-due-cell.empty { color: var(--text-faint); }
.ops-tbl .ot-due-cell.overdue { color: var(--danger); font-weight: 600; }
.ops-tbl .ot-due-cell input[type="date"] {
  border: 2px solid var(--primary); border-radius: 6px; padding: 3px 6px;
  outline: none; font-size: 13px; font-family: inherit; background: var(--surface);
  color: var(--text); width: 100%;
}

/* 우선순위 셀 */
.ops-tbl .ot-prio-cell { cursor: pointer; }
.ops-tbl .ot-prio-cell.readonly { cursor: default; }

/* 메모 셀 — 좌측 정렬 오버라이드 */
.ops-tbl .ot-memo-cell {
  justify-content: flex-start;
  font-size: 13px; color: var(--text); cursor: text;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ops-tbl .ot-memo-cell.editable:hover { background: var(--surface-2); border-radius: 6px; }
.ops-tbl .ot-memo-cell.empty { color: var(--text-faint); }
.ops-tbl .ot-memo-cell input[type="text"] {
  border: 2px solid var(--primary); border-radius: 6px; padding: 3px 6px;
  outline: none; font-size: 13px; font-family: inherit; background: var(--surface);
  color: var(--text); width: 100%;
}

/* 파일 셀 */
.ops-tbl .ot-file-cell { justify-content: center; cursor: pointer; }
.ops-tbl .ot-file-cell .file-ph { display: inline-grid; place-items: center; color: var(--text-faint); transition: color .12s; background: transparent; border: none; padding: 0; cursor: pointer; }
.ops-tbl .ot-file-cell .file-ph .ic { width: 15px; height: 15px; }
.ops-tbl .ot-file-cell:hover .file-ph { color: var(--primary); }

/* 클립 버튼 + 첨부 개수 배지 묶음 래퍼 — row-cmt-wrap 패턴, 배지 absolute 기준점 */
.row-att-wrap { position: relative; display: inline-flex; align-items: center; }

/* 첨부 개수 배지 — cmt-badge 형제. 첨부 존재 자체를 강조하는 파랑(primary).
   클립 버튼(15px)이 말풍선 버튼(22px)보다 작아 오프셋을 바깥으로 더 뺀다. */
.att-badge {
  position: absolute; top: -7px; right: -9px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: var(--r-pill); font-size: 9px; font-weight: 800;
  background: var(--primary); color: #fff;
  display: grid; place-items: center;
  border: 1.5px solid var(--surface);
  font-variant-numeric: tabular-nums;
  pointer-events: none; line-height: 1;
}

/* 첨부 있는 행 클립 강조 — 파랑 + 살짝 굵게 보이도록 배경 칩 */
.ops-tbl .ot-file-cell .file-ph.has-att {
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 6px;
  width: 22px; height: 22px;
}

/* 행 인라인 첨부 팝오버 (.att-pop) — cmt-pop 베이스 위 첨부 전용 오버라이드 */
.att-pop .att-sec { margin-top: 0; }
.att-pop .d-sec-h { display: none; } /* attachmentSkeleton 자체 헤더 숨김 — 팝오버 타이틀과 중복 */
.att-pop .att-list { max-height: 200px; overflow-y: auto; }

/* 첨부 공지 말풍선 (.att-coach) — 파일 컬럼 th 하단 1회성 코치마크. 확인 전까지 바운스 반복. */
.att-coach {
  position: absolute; top: calc(100% + 10px); right: -6px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-lg);
  cursor: default; text-align: left;
  animation: att-coach-bounce 1.6s ease-in-out infinite;
}
.att-coach b {
  font-weight: 800; font-size: 10px; padding: 1px 6px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .24);
}
.att-coach-tail {
  position: absolute; top: -4px; right: 24px;
  width: 9px; height: 9px; background: var(--primary);
  transform: rotate(45deg); border-radius: 2px;
}
.att-coach-ok {
  border: none; border-radius: 7px; padding: 4px 10px; cursor: pointer;
  background: #fff; color: var(--primary); font-size: 11.5px; font-weight: 800;
}
.att-coach-ok:hover { background: var(--primary-soft); }
@keyframes att-coach-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* 첨부 파일 뷰어 (.attv-*) — 이미지·PDF 미리보기 오버레이. chat-lightbox 위상(z 500). */
.attv-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15, 18, 28, .62);
  display: flex; align-items: center; justify-content: center;
  animation: spop-in .12s ease;
}
.attv-panel {
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  width: min(920px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.attv-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.attv-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s; flex-shrink: 0;
}
.attv-btn:hover { background: var(--surface-2); color: var(--text); }
.attv-btn .ic { width: 15px; height: 15px; }
.attv-body {
  flex: 1; min-height: 220px; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
}
.attv-img { max-width: 100%; max-height: 80vh; object-fit: contain; display: block; }
.attv-frame { width: 100%; height: 80vh; border: 0; background: var(--surface); }
.attv-loading, .attv-error { padding: 48px 24px; font-size: 13px; color: var(--text-muted); }
.attv-fallback { padding: 48px 24px; font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.7; }
.attv-fallback-ext {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px;
  border-radius: 6px; background: var(--surface); border: 1px solid var(--border);
  font-weight: 800; font-size: 12px; color: var(--text); text-transform: uppercase;
}
/* 엑셀 미리보기 — 시트 탭(플랫 언더라인) + 촘촘 그리드 표 */
.attv-sheet-wrap {
  width: 100%; height: 80vh; align-self: stretch;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface);
}
.attv-sheet-tabs {
  display: flex; gap: 2px; padding: 0 10px; overflow-x: auto; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.attv-sheet-tab {
  padding: 8px 12px; border: none; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.attv-sheet-tab:hover { color: var(--text); }
.attv-sheet-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.attv-sheet-scroll { flex: 1; overflow: auto; padding: 10px; }
.attv-sheet-scroll table { border-collapse: collapse; font-size: 12px; color: var(--text); }
.attv-sheet-scroll td {
  border: 1px solid var(--border); padding: 3px 8px;
  white-space: pre-wrap; max-width: 360px; vertical-align: top;
}
.attv-sheet-note { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }

/* 댓글 셀 — 파일 셀과 동일한 가운데 정렬 */
.ops-tbl .ot-comment-cell { justify-content: center; }

/* 말풍선 버튼 + 배지 묶음 래퍼 — 배지 absolute 기준점 */
.row-cmt-wrap { position: relative; display: inline-flex; align-items: center; }

/* 댓글 개수 배지 — 말풍선 우상단 원형 숫자(bell-count 토큰 재사용, 색은 primary) */
.cmt-badge {
  position: absolute; top: -4px; right: -5px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: var(--r-pill); font-size: 9px; font-weight: 800;
  background: var(--primary); color: #fff;
  display: grid; place-items: center;
  border: 1.5px solid var(--surface);
  font-variant-numeric: tabular-nums;
  pointer-events: none; line-height: 1;
}

/* 다읽음 배지 변형 — 회색(파랑 파생). 숫자는 전체 개수 유지, 색만 변경. */
.cmt-badge.read { background: var(--text-faint); }

/* 안읽음 점 — 업무 제목 옆 8px 파란 원. getCommentUnread=true일 때만 렌더.
   표뷰 제목 셀·칸반 카드 제목·내업무 모바일 카드 제목에 공통 적용.
   라이트/다크 모두 --primary(파랑) 사용, 별도 색 변수 불필요. */
.unread-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 5px;
  /* 텍스트 기준선 보정 — 제목 텍스트 중앙 정렬 */
  position: relative; top: -1px;
}

/* 행 인라인 댓글 버튼 (.row-cmt-btn) — 파일 셀 내 말풍선 아이콘 */
.row-cmt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: none; border-radius: 4px;
  background: transparent; cursor: pointer; color: var(--text-faint);
  transition: background .12s, color .12s; flex-shrink: 0;
}
.row-cmt-btn:hover { background: var(--surface-2); color: var(--primary); }
.row-cmt-btn .ic { width: 14px; height: 14px; display: block; }

/* 인라인 댓글 팝오버 (.cmt-pop) — prio-pop 패턴 기반, textarea 포함 확장 */
.cmt-pop {
  position: absolute; z-index: 310;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 12px; width: 300px;
  animation: spop-in .12s ease;
}
.cmt-pop-title {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 8px; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: space-between;
}
/* 팝오버 헤더 X 닫기 버튼 */
.cmt-pop-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 4px;
  background: transparent; color: var(--text-faint); cursor: pointer;
  line-height: 1; flex-shrink: 0;
}
.cmt-pop-close:hover { background: var(--surface-2); color: var(--text); }
.cmt-pop-close .ic { width: 12px; height: 12px; }
.cmt-pop-list {
  max-height: 140px; overflow-y: auto; margin-bottom: 10px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.cmt-pop-list .cmt-row { padding: 4px 0; }
.cmt-pop-list .cmt-empty, .cmt-pop-list .cmt-loading {
  font-size: 12px; color: var(--text-faint); display: block; padding: 4px 0;
}
.cmt-pop-input-wrap { position: relative; }
.cmt-pop-ta {
  width: 100%; min-height: 60px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; font-family: inherit; color: var(--text);
  background: var(--surface); resize: none; outline: none; box-sizing: border-box;
}
.cmt-pop-ta:focus { border-color: var(--primary); }
.cmt-pop-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
/* 팝오버 내 멘션 드롭다운 위치 조정 */
.cmt-pop .cmt-mention-list {
  position: absolute; bottom: calc(100% + 2px); left: 0; right: 0; z-index: 320;
}

/* + 추가 행 */
.ops-tbl tr.mon-add-row td { height: 40px; padding: 0; border-top: 1px solid var(--border); }
.ops-tbl .ot-add-btn {
  display: flex; align-items: center; gap: 7px; height: 40px; padding-left: 20px;
  color: var(--text-faint); font-size: 13px; font-weight: 600; cursor: pointer; width: 100%;
  background: none; border: none; font-family: inherit; text-align: left;
}
.ops-tbl .ot-add-btn:hover { color: var(--primary); background: var(--primary-softer); }
.ops-tbl .ot-add-btn .plus { font-size: 16px; line-height: 1; }

/* 추가 행 입력 상태 */
.ops-tbl tr.mon-add-row td.editing {
  padding: 0;
}
.ops-tbl .ot-add-input {
  border: 2px solid var(--primary); border-radius: 6px; padding: 3px 10px;
  outline: none; font-size: 14px; font-family: inherit; background: var(--surface);
  color: var(--text); width: calc(100% - 24px); margin: 0 12px; display: block;
}

/* ── 날짜 기준 드롭다운 — date-nav 내 기준(등록일·시작일·마감일) 선택 select. sort-btn 톤 통일. ── */
.date-field-select {
  padding: 7px 10px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 700;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs); white-space: nowrap; flex-shrink: 0;
  cursor: pointer; font-family: inherit; transition: background .1s, color .1s;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px;
}
.date-field-select:hover { background-color: var(--surface-2); color: var(--text); }
@media (max-width: 768px) {
  .date-field-select { padding: 6px 24px 6px 8px; font-size: 12px; }
}

/* ── 정렬 버튼 + 팝오버 — view-toggle·status-pop 패턴 재사용, 신규 토큰 없음 ── */
.sort-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 36px; border-radius: var(--r-md); font-size: 13px; font-weight: 700;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs); white-space: nowrap; flex-shrink: 0;
  transition: background .1s, color .1s;
}
.sort-btn:hover { background: var(--surface-2); color: var(--text); }
.sort-ic { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: middle; }
.sort-cur { font-weight: 600; color: var(--primary); margin-left: 2px; font-size: 12.5px; }

.sort-pop {
  position: fixed; z-index: 300;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 150px;
  animation: spop-in .12s ease;
}
.sort-pop .spop-item { display: block; width: 100%; text-align: left;
  padding: 9px 13px; font-size: 13.5px; font-weight: 600; color: var(--text);
  border-radius: 8px; background: transparent; border: none; font-family: inherit; cursor: pointer;
  transition: background .1s; }
.sort-pop .spop-item:hover { background: var(--surface-2); }
.sort-pop .spop-item.sort-active { color: var(--primary); background: var(--primary-soft); }

/* OPS-18: 저장된 뷰 팝오버 */
.saved-views-pop { min-width: 280px; max-width: min(320px, calc(100vw - 16px)); padding: 8px; }
.svpop-section { margin-bottom: 8px; }
.svpop-section:last-child { margin-bottom: 0; }
.svpop-label { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px 4px; }
.svpop-empty { font-size: 12.5px; color: var(--text-faint); padding: 4px 8px 8px; }
.svpop-item { display: flex; align-items: center; gap: 4px; }
.svpop-apply { flex: 1; text-align: left; padding: 7px 10px; font-size: 13.5px; font-weight: 600; color: var(--text); border-radius: 7px; background: transparent; border: none; font-family: inherit; cursor: pointer; transition: background .1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svpop-apply:hover { background: var(--surface-2); }
/* 기본 보기로 초기화 — 뷰 팝오버 상단 풀폭 버튼 */
.svpop-reset { width: 100%; text-align: left; padding: 8px 10px; font-size: 13px; font-weight: 700; color: var(--primary); border-radius: 7px; background: var(--primary-soft); border: none; font-family: inherit; cursor: pointer; transition: background .1s; }
.svpop-reset:hover { background: var(--primary-soft-2, var(--primary-soft)); filter: brightness(.97); }
.svpop-del { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-faint); border-radius: 5px; background: transparent; border: none; cursor: pointer; transition: background .1s, color .1s; }
.svpop-del:hover { background: var(--danger-soft, #fee2e2); color: var(--danger); }
.svpop-save-section { border-top: 1px solid var(--border); padding-top: 8px; }
.svpop-input-row { display: flex; gap: 6px; padding: 0 4px; }
.svpop-input { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--surface); color: var(--text); font-family: inherit; outline: none; transition: border-color .15s; }
.svpop-input:focus { border-color: var(--primary); }

/* OPS-20 Phase 1: 반복 템플릿 배지 */
.tmpl-recur-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary, #2d5bff);
  background: var(--primary-soft, #e8eeff);
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
  pointer-events: none;
}

/* 반복 토글/수정 버튼 — 활성 시 강조 */
.tmpl-rec-toggle-btn[data-rec-active="1"] { opacity: 1; color: var(--primary, #2d5bff); }
.tmpl-rec-toggle-btn[data-rec-active="0"] { opacity: .38; }
/* 반복 설정 모달 요일 선택 체크박스 래퍼 */
.tmpl-wd-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1.5px solid var(--border-2, #ddd);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s;
}
.tmpl-wd-label:has(.tmpl-wd-cb:checked) {
  background: var(--primary-soft, #e8eeff);
  border-color: var(--primary, #2d5bff);
  color: var(--primary, #2d5bff);
  font-weight: 700;
}
.tmpl-wd-cb { display: none; }

@media (max-width: 768px) {
  .sort-btn { padding: 7px 11px; font-size: 12.5px; }
  .sort-cur { display: none; }
}

/* 담당자 팝오버 (.owner-pop) — prio-pop 패턴 동일, 직원 목록 스크롤 지원 */
.owner-pop {
  position: fixed; z-index: 300;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 160px; max-height: 280px; overflow-y: auto;
  animation: spop-in .12s ease;
}
.owner-pop .spop-item { display: block; width: 100%; text-align: left;
  padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--text);
  border-radius: 8px; background: transparent; border: none; font-family: inherit; cursor: pointer; }
.owner-pop .spop-item:hover { background: var(--surface-2); }
.owner-pop .spop-item-active { color: var(--primary); }

/* 우선순위 소형 팝오버 (.prio-pop) — status-pop 패턴 동일 */
.prio-pop {
  position: fixed; z-index: 300;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 130px;
  animation: spop-in .12s ease;
}
.prio-pop .spop-item { display: block; width: 100%; text-align: left;
  padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--text);
  border-radius: 8px; background: transparent; border: none; font-family: inherit; cursor: pointer; }
.prio-pop .spop-item:hover { background: var(--surface-2); }

/* ============================================================
   간트 뷰 — .gantt-* 네임스페이스. 기존 .itable·칸반 무수정.
   ============================================================ */
.gantt-outer {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
}
.gantt-scroll-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  position: relative;
}
.gantt-head-row {
  display: flex; align-items: center;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
}
.gantt-head-spacer { flex: 0 0 240px; min-width: 240px; border-right: 1px solid var(--border); }
.gantt-head-track { display: flex; }
.gantt-day-head {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--text-faint);
  padding: 8px 0; border-right: 1px solid var(--border); flex-shrink: 0;
}
.gantt-today-head { color: var(--primary); background: var(--primary-soft); }

/* 간트 행 */
.gantt-row {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border); min-height: 44px;
}
.gantt-row:last-child { border-bottom: none; }
.gantt-label {
  flex: 0 0 240px; min-width: 240px; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-right: 1px solid var(--border);
  overflow: hidden;
}
.gantt-label-title {
  font-size: 13px; font-weight: 600; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 간트 트랙 */
.gantt-track {
  flex: 1; height: 44px; position: relative; overflow: visible;
}
/* 오늘선 — z-index:3으로 sticky 헤더(z-index:2)보다 위에 그려 헤더~바디 1줄 연결 */
.gantt-today-line {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--primary); opacity: .4; pointer-events: none; z-index: 3;
}

/* 간트 막대 */
.gantt-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 22px; border-radius: 6px;
  cursor: pointer; transition: filter .12s;
  z-index: 2;
}
.gantt-bar:hover { filter: brightness(.88); }
/* 점(start만/due만) */
.gantt-dot {
  width: 14px !important; height: 14px; border-radius: 50%;
  transform: translateY(-50%) translateX(11px);
  opacity: .75;
}
/* 막대 색 — STATUS_CLS 매핑 */
.gantt-bar-muted  { background: var(--text-faint); }
.gantt-bar-warn   { background: var(--warning); }
.gantt-bar-ok     { background: var(--success); }
.gantt-bar-danger { background: var(--danger); }

/* 날짜 미정 목록 */
.gantt-undated {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.gantt-undated-label { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.gantt-undated-chip {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 3px 10px; cursor: pointer;
}
.gantt-undated-chip:hover { background: var(--primary-soft); color: var(--primary); }
.gantt-empty { padding: 24px; }

/* 모바일 — 간트 숨김(데스크톱 전용) */
@media (max-width: 768px) { .gantt-outer { display: none; } }

/* ============================================================
   캘린더 월뷰 — .cal-* 네임스페이스. 기존 .cal-banner와 무관(명시적 클래스만 추가).
   ============================================================ */
.cal-wrap-inner {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.cal-nav-group { display: flex; align-items: center; gap: 10px; }
.cal-month-label { font-size: 16px; font-weight: 800; color: var(--text-strong); }
.cal-header-right { display: flex; align-items: center; gap: 8px; }

/* 그리드 */
.cal-grid { padding: 0; }
.cal-dow-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.cal-dh {
  text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text-faint);
  padding: 10px 0;
}
.cal-dh.cal-sun { color: var(--danger); }
.cal-dh.cal-sat { color: var(--primary); }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 100px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 6px; overflow: hidden;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.cal-blank { background: var(--surface-2); }
.cal-cell.cal-today .cal-day-num {
  background: var(--primary); color: #fff; border-radius: 50%;
  width: 24px; height: 24px; display: grid; place-items: center; font-weight: 800;
}
.cal-cell.cal-sun-cell .cal-day-num { color: var(--danger); }
.cal-cell.cal-sat-cell .cal-day-num { color: var(--primary); }
.cal-day-num {
  font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px;
  width: 24px; height: 24px; display: grid; place-items: center;
}

/* 칩 */
.cal-chips { display: flex; flex-direction: column; gap: 2px; }
.cal-chip {
  font-size: 11px; font-weight: 600; border-radius: 4px;
  padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; transition: filter .1s;
}
.cal-chip:hover { filter: brightness(.88); }
.cal-chip-muted  { background: var(--surface-3);    color: var(--text-muted); }
.cal-chip-warn   { background: var(--warning-soft); color: var(--warning); }
.cal-chip-ok     { background: var(--success-soft); color: var(--success); }
.cal-chip-danger { background: var(--danger-soft);  color: var(--danger); }
/* 우선순위 높음·긴급 — 좌측 테두리로 강조(배경색 유지) */
.cal-chip--prio-high { border-left: 3px solid var(--danger); padding-left: 4px; }
.cal-extra {
  font-size: 11px; font-weight: 700; color: var(--primary);
  padding: 2px 4px; cursor: pointer;
}
.cal-extra:hover { text-decoration: underline; }

/* 모바일 — 캘린더 숨김(데스크톱 우선, 모바일은 표 유지) */
@media (max-width: 768px) { .cal-wrap-inner { display: none; } }

/* ============================================================
   캘린더 뷰 토글 버튼 (.cal-view-toggle) — 월/주 전환
   ============================================================ */
.cal-view-toggle {
  display: inline-flex; gap: 2px; border: 1px solid var(--border-2);
  border-radius: var(--r-md); overflow: hidden; margin-left: 6px;
}
.cal-view-btn {
  padding: 5px 12px; font-size: 12px; font-weight: 700;
  background: var(--surface); color: var(--text-muted);
  border: none; cursor: pointer; transition: background .12s, color .12s;
}
.cal-view-btn:hover { background: var(--surface-2); color: var(--text); }
.cal-view-btn.active { background: var(--primary); color: #fff; }

/* ============================================================
   캘린더 주뷰 — .cal-week-* 네임스페이스. 기존 .cal-* 월뷰 무수정.
   ============================================================ */
.cal-week-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border);
}
.cal-week-col {
  border-right: 1px solid var(--border); min-height: 480px;
  display: flex; flex-direction: column;
}
.cal-week-col:last-child { border-right: none; }
.cal-week-col-today { background: var(--primary-soft); }
.cal-week-col-sun .cal-week-dow { color: var(--danger); }
.cal-week-col-sat .cal-week-dow { color: var(--primary); }
.cal-week-col-head {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 8px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.cal-week-dow {
  font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase;
}
.cal-week-date {
  font-size: 15px; font-weight: 700; color: var(--text-muted);
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
}
.cal-week-date-today {
  background: var(--primary); color: #fff;
}
.cal-week-chips {
  flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; overflow-y: auto;
}

/* ============================================================
   간트 드래그 — .gantt-bar-draggable / .gantt-bar-dragging
   ============================================================ */
.gantt-bar-draggable { cursor: grab; touch-action: none; }
.gantt-bar-draggable:active { cursor: grabbing; }
.gantt-bar-dragging {
  opacity: .7;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  cursor: grabbing;
  z-index: 5;
}

/* 간트 막대 양끝 핸들 — 좌(start)·우(end) 리사이즈 */
.gantt-handle {
  position: absolute; top: 0; bottom: 0;
  width: 8px; cursor: ew-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s;
  z-index: 3;
}
.gantt-handle::after {
  content: ''; display: block;
  width: 2px; height: 12px; border-radius: 1px;
  background: rgba(255,255,255,.8);
}
.gantt-handle-l { left: 0; border-radius: 6px 0 0 6px; }
.gantt-handle-r { right: 0; border-radius: 0 6px 6px 0; }
.gantt-bar-draggable:hover .gantt-handle { opacity: 1; }
.gantt-bar-dragging .gantt-handle { opacity: 0; } /* 이동 중엔 핸들 숨김 */

/* ---------- home dashboard ---------- */

/* 밴드 B — KPI 스트립 래퍼 */
.home-kpi { margin: 0 0 20px; }

/* 모바일: 6셀을 3열×2행으로 강제(기존 received.js stat-strip-cells 무영향) */
@media (max-width: 768px) {
  .home-kpi .stat-strip-cells {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
  }
}

/* 도넛 차트 래퍼 — 데스크톱 가로, 모바일 세로 */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 8px 0; }
.donut-svg-wrap { position: relative; flex: 0 0 auto; width: 100px; height: 100px; }
.donut-svg { width: 100px; height: 100px; transform: rotate(-90deg); display: block; }

/* 도넛 세그먼트 색 — tokens.css 변수만 사용 */
.donut-seg-todo   { stroke: var(--warning); }
.donut-seg-doing  { stroke: var(--primary); }
.donut-seg-done   { stroke: var(--success); }
.donut-seg-stuck  { stroke: var(--text-faint); }
.donut-seg-review { stroke: var(--warning); opacity: .55; }

/* 도넛 중앙 텍스트 */
.donut-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.donut-total {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-align: center; line-height: 1.4;
}

/* 범례 */
.chart-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.lg-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.lg-dot.todo   { background: var(--warning); }
.lg-dot.doing  { background: var(--primary); }
.lg-dot.done   { background: var(--success); }
.lg-dot.stuck  { background: var(--text-faint); }
.lg-dot.review { background: var(--warning); opacity: .55; }
.lg-label { flex: 1; color: var(--text-muted); }
.lg-val { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* 모바일 — 도넛 세로 스택 */
@media (max-width: 768px) {
  .donut-wrap { flex-direction: column; align-items: flex-start; }
}

/* 밴드 C — next-action + 차트 패널 그리드. 기존 .home-grid(1.62fr/1fr) 재사용 + 아래 마진 */
.home-band-c { margin-bottom: 20px; }

/* 우선순위 바 차트 */
.prio-bars { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.prio-row { display: flex; align-items: center; gap: 10px; }
.prio-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; flex: 0 0 30px; text-align: right; }
.prio-track { flex: 1; }
.prio-val { font-size: 12.5px; font-weight: 700; color: var(--text-strong); flex: 0 0 18px; text-align: right; font-variant-numeric: tabular-nums; }

/* 바 색 — confbar > i 패턴 재사용, 신규 토큰 없음 */
.prio-track > .prio-bar-urgent { display: block; height: 100%; background: var(--danger);  border-radius: 99px; }
.prio-track > .prio-bar-high   { display: block; height: 100%; background: var(--warning); border-radius: 99px; }
.prio-track > .prio-bar-medium { display: block; height: 100%; background: var(--primary); border-radius: 99px; opacity: .6; }
.prio-track > .prio-bar-low    { display: block; height: 100%; background: var(--primary); border-radius: 99px; opacity: .3; }

/* 고급필터 빌더 (Phase B) */
.filter-pop-adv { min-width: 480px; max-width: min(640px, calc(100vw - 16px)); }
.filter-btn-adv { color: var(--primary); }
.fpop-mode-toggle {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.fpop-mode-link {
  font-size: 11.5px; color: var(--primary); background: none; border: none;
  cursor: pointer; padding: 2px 4px; text-decoration: underline;
}
.fpop-mode-link:hover { color: var(--primary-dark, var(--primary)); }
.fpop-reset-all { color: var(--danger, #e5484d); margin-left: auto; }
/* 필터·보기 팝오버 X(닫기) 버튼 — 바깥클릭 닫힘 제거에 따른 명시적 닫기 수단 */
.fpop-x-close {
  text-decoration: none; color: var(--text-faint, #888); font-size: 14px;
  line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.fpop-x-close:hover { color: var(--text, #222); background: var(--hover, rgba(0,0,0,.05)); }
.vpop-x-row { display: flex; justify-content: flex-end; margin: -4px -4px 2px 0; }
.vpop-x-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-faint, #888); font-size: 14px; line-height: 1;
  padding: 2px 5px; border-radius: 4px;
}
.vpop-x-close:hover { color: var(--text, #222); background: var(--hover, rgba(0,0,0,.05)); }
.fpop-adv-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fpop-adv-title {
  font-size: 12px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .03em; text-transform: uppercase;
}
.fpop-adv-panel { min-height: 60px; }
.adv-rules-wrap { display: flex; flex-direction: column; gap: 4px; }
.adv-rule-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  background: var(--surface-2); border-radius: 8px;
  padding: 6px 8px;
}
.adv-logic-label { flex: 0 0 52px; text-align: center; }
.adv-logic-first {
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .02em;
}
.adv-logic-btn {
  font-size: 10px; font-weight: 800; background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 6px;
  padding: 3px 8px; cursor: pointer; color: var(--primary);
  letter-spacing: .04em;
}
.adv-logic-btn:hover { background: var(--primary-soft); border-color: var(--primary-soft); }
.adv-field-select, .adv-op-select {
  border: 1px solid var(--border-2); border-radius: 6px;
  padding: 4px 6px; font-size: 12px; color: var(--text-strong);
  background: var(--surface); outline: none; cursor: pointer;
}
.adv-field-select { flex: 0 0 96px; }
.adv-op-select    { flex: 0 0 90px; }
.adv-val-wrap { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
.adv-val-select, .adv-val-text, .adv-val-date {
  width: 100%; border: 1px solid var(--border-2); border-radius: 6px;
  padding: 4px 6px; font-size: 12px; color: var(--text-strong);
  background: var(--surface); outline: none;
}
.adv-del-btn {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: 13px; padding: 2px 4px; border-radius: 4px;
}
.adv-del-btn:hover { color: var(--danger); background: var(--danger-soft, #fee2e2); }
.adv-group-block {
  border-left: 3px solid var(--primary-soft); padding-left: 10px;
  margin: 4px 0; display: flex; flex-direction: column; gap: 4px;
}
.adv-group-logic-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; margin-bottom: 2px;
}
.adv-group-label { color: var(--text-faint); font-weight: 600; font-size: 11px; }
.adv-add-row { display: flex; gap: 8px; margin-top: 8px; }
.adv-add-btn {
  font-size: 12px; color: var(--primary); background: var(--primary-soft);
  border: 1px solid var(--primary-soft); border-radius: 7px;
  padding: 5px 12px; cursor: pointer; font-weight: 600;
}
.adv-add-btn:hover { background: var(--primary); color: #fff; }
.adv-add-group-btn { background: var(--surface-2); color: var(--text-muted); border-color: var(--border-2); }
.adv-add-group-btn:hover { background: var(--surface-3, var(--surface-2)); color: var(--text); }

/* ── Phase C: AI 필터 입력 섹션 (adv-ai-filter-*) ─────────────────────────── */
.adv-ai-filter-wrap {
  background: var(--ai-soft);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 10px 12px 8px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adv-ai-filter-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.adv-ai-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ai-strong);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.adv-ai-filter-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adv-ai-filter-textarea {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--text-strong);
  background: var(--surface);
  outline: none;
  box-sizing: border-box;
  line-height: 1.5;
}
.adv-ai-filter-textarea:focus {
  border-color: var(--ai);
  box-shadow: 0 0 0 2px var(--ai-soft);
}
.adv-ai-filter-btn {
  align-self: flex-end;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--ai);
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.adv-ai-filter-btn:hover { background: var(--ai-strong); }
.adv-ai-filter-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.adv-ai-filter-counter {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
}
.adv-ai-filter-msg {
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 6px;
  padding: 5px 8px;
}

/* ── 자동화 규칙 AI 생성 입력 섹션 (auto-ai-*) ──────────────────────────────── */
.auto-ai-wrap {
  background: var(--ai-soft);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 10px 12px 8px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auto-ai-textarea {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--text-strong);
  background: var(--surface);
  outline: none;
  box-sizing: border-box;
  line-height: 1.5;
}
.auto-ai-textarea:focus {
  border-color: var(--ai);
  box-shadow: 0 0 0 2px var(--ai-soft);
}
.auto-ai-row {
  display: flex;
  justify-content: flex-end;
}
.auto-ai-msg {
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 6px;
  padding: 5px 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   홈 재설계 — AI 입력 중심 (2026-06-01)
   design.md §4·§5-3 스펙. 신규 CSS 변수 0개 (기존 토큰만).
   ══════════════════════════════════════════════════════════════════════════════ */

/* 히어로 컨테이너 — 세 덩어리(인사+입력창+칩+미니진입점)를 세로 중앙 상단 고정 */
.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(56px, 12vh, 140px);
  padding-bottom: clamp(40px, 8vh, 96px);
}

/* 인사 헤더 */
.home-greet { text-align: center; }
/* AI 별무리 — 중앙 ✦ 둘레에 오로라 색 작은 별들이 떠다니며 반짝(살아 숨쉬는 AI) */
.home-greet .greet-aura {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-greet .greet-spark {
  position: relative;
  z-index: 2;
  color: var(--ai);
  display: inline-flex;
  width: 30px;
  height: 30px;
  animation: greet-spark-life 5s ease-in-out infinite;
}
/* 중앙 ✦ — 오로라 색이 천천히 흐르는 펄스+회전 */
@keyframes greet-spark-life {
  0%, 100% { transform: scale(1)    rotate(0deg);  color: #7C3AED; filter: drop-shadow(0 0 8px rgba(124,58,237,.60)); }
  33%      { transform: scale(1.16) rotate(8deg);  color: #E5328A; filter: drop-shadow(0 0 14px rgba(229,50,138,.65)); }
  66%      { transform: scale(1.10) rotate(-6deg); color: #2D5BFF; filter: drop-shadow(0 0 14px rgba(45,91,255,.65)); }
}
/* 주변 그라데이션 작은 별 5개 — 잔잔히 떠다니며 반짝(시차) */
.home-greet .gsparkle {
  position: absolute;
  width: var(--s, 9px);
  height: var(--s, 9px);
  pointer-events: none;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  animation: gsparkle-float var(--d, 5.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.home-greet .gsparkle.g1  { --s: 12px; --d: 4.6s; --delay: 0s;    top: -22px;    left: -44px;   background: linear-gradient(135deg, #13C8A6, #2D5BFF); }
.home-greet .gsparkle.g2  { --s: 15px; --d: 5.4s; --delay: .6s;   top: -6px;     right: -48px;  background: linear-gradient(135deg, #A855F7, #E5328A); }
.home-greet .gsparkle.g3  { --s: 11px; --d: 4.2s; --delay: 1.2s;  bottom: -18px; left: -38px;   background: linear-gradient(135deg, #2D5BFF, #7C3AED); }
.home-greet .gsparkle.g4  { --s: 9px;  --d: 5s;   --delay: 1.9s;  top: -22px;    right: -24px;  background: linear-gradient(135deg, #FF7A1A, #FFC72C); }
.home-greet .gsparkle.g5  { --s: 10px; --d: 4.8s; --delay: 2.6s;  bottom: -14px; right: -44px;  background: linear-gradient(135deg, #13C8A6, #34D399); }
.home-greet .gsparkle.g6  { --s: 13px; --d: 5.1s; --delay: .3s;   top: -32px;    left: -26px;   background: linear-gradient(135deg, #E5328A, #A855F7); }
.home-greet .gsparkle.g7  { --s: 10px; --d: 4.4s; --delay: 1.7s;  top: -30px;    right: -36px;  background: linear-gradient(135deg, #2D5BFF, #13C8A6); }
.home-greet .gsparkle.g8  { --s: 14px; --d: 5.8s; --delay: .9s;   bottom: -6px;  left: -58px;   background: linear-gradient(135deg, #7C3AED, #2D5BFF); }
.home-greet .gsparkle.g9  { --s: 9px;  --d: 4.9s; --delay: 2.2s;  top: -12px;    left: -62px;   background: linear-gradient(135deg, #FFC72C, #FF7A1A); }
.home-greet .gsparkle.g10 { --s: 11px; --d: 5.3s; --delay: 1.5s;  bottom: -26px; right: -54px;  background: linear-gradient(135deg, #34D399, #13C8A6); }
.home-greet .gsparkle.g11 { --s: 8px;  --d: 4.7s; --delay: 3.1s;  top: -34px;    left: -10px;   background: linear-gradient(135deg, #A855F7, #7C3AED); }
.home-greet .gsparkle.g12 { --s: 16px; --d: 6s;   --delay: 2.0s;  bottom: -28px; right: -30px;  background: linear-gradient(135deg, #E5328A, #FF7A1A); }
@keyframes gsparkle-float {
  0%, 100% { transform: translateY(0)     scale(.62) rotate(0deg);  opacity: .55; filter: none; }
  50%      { transform: translateY(-13px) scale(1.42) rotate(23deg); opacity: 1;  filter: drop-shadow(0 0 8px rgba(124,58,237,.55)); }
}
@media (prefers-reduced-motion: reduce) {
  .home-greet .greet-spark { animation: none; }
  .home-greet .gsparkle { animation: none; opacity: .8; }
}
.home-greet h1 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -.025em;
  margin-top: 18px;
}
.home-greet .sub {
  margin-top: 10px;
  font-size: clamp(13.5px, 1.2vw, 15px);
  color: var(--text-muted);
}

/* AI 입력창 (홈 히어로) */
/* @property — conic 각도 보간(무지개 흐름 + 물채움) */
@property --composer-angle  { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --composer-reveal { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.home-composer {
  position: relative;
  width: min(720px, 100%);
  margin: 28px auto 0;
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  transition: border-color .16s ease, box-shadow .16s ease;
  --composer-track: #DFE2E8; /* 미충전 구간 빈 트랙 색 */
}
/* 포커스 시 무지개 테두리 — conic-angle 방식: 물처럼 채워지는 입장 + 무지개 색 흐름 */
/* mask를 자신의 background에 적용해야 도넛 링이 보임 — background는 .composer-aura 자체에 */
.composer-aura {
  position: absolute; inset: -3px; border-radius: calc(var(--r-xl) + 3px);
  padding: 3px; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .35s ease;
  /* conic background를 자신에게 직접 — mask가 자신의 background에만 적용되므로 */
  background: conic-gradient(
    from calc(var(--composer-angle) - 90deg),
    #7C3AED, #E5328A, #FF7A1A, #FFC72C, #16A34A, #2D5BFF,
    #7C3AED calc(var(--composer-reveal) - 90deg),
    transparent var(--composer-reveal)),
    var(--composer-track, #DFE2E8);
  filter: blur(0.6px);
  /* 도넛(테두리 링) 마스크 — padding:3px 구간만 보이고 가운데(content-box) 뚫림 */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* .composer-aura-ring — HTML 마크업 유지용(display:none). conic은 부모로 올림 */
.composer-aura-ring { display: none; }
/* 물처럼 채워지는 입장 — 12시부터 시작해 한 바퀴 채움 */
@keyframes composer-fill { from { --composer-reveal: 8deg; } to { --composer-reveal: 450deg; } }
/* 무지개 색 흐름 — 채움 후에도 색이 계속 돈다 */
@keyframes composer-spin { to { --composer-angle: 360deg; } }
.home-composer:focus-within .composer-aura { opacity: 1; }
.home-composer:focus-within .composer-aura {
  animation: composer-fill 1.6s ease-out forwards,  /* 물처럼 채워지는 입장 */
             composer-spin 6s linear infinite;       /* 무지개 색 흐름 */
}
/* 글린트 클립 래퍼 — overflow:hidden + border-radius로 글린트가 입력창 바깥으로 안 새게 */
.composer-glint-clip {
  position: absolute; inset: 0; border-radius: var(--r-xl);
  overflow: hidden; pointer-events: none; z-index: 1;
}
/* 글린트 — offset-path 등속 주행(호길이 기준이라 둘레속도 균일) */
.composer-glint {
  position: absolute; top: 0; left: 0;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,.80) 28%, rgba(255,255,255,0) 68%);
  pointer-events: none; z-index: 1; opacity: 0;
  offset-distance: 0%;
  offset-rotate: 0deg;
  filter: blur(0.4px);
  transition: opacity .35s ease;
}
.home-composer:focus-within .composer-glint { opacity: 1; animation: glint-travel 4.5s linear infinite; }
@keyframes glint-travel { to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .home-composer:focus-within .composer-glint { animation: none; opacity: .8; }
  .home-composer:focus-within .composer-aura { animation: none; --composer-reveal: 450deg; }
  .home-composer:focus-within { animation: none; }
}
.home-composer:focus-within {
  border-color: transparent;
  box-shadow:
    var(--shadow-md),
    0 0 13px rgba(124,58,237,.15),
    0 0 24px rgba(45,91,255,.10),
    0 0 38px rgba(229,50,138,.06);
  /* 채움 완료(약 1.6s) 순간 한 번 크게 번쩍 → 이후 살아 숨쉬듯 글로우가 커졌다 작아졌다 반복 */
  animation:
    composer-glow-flash .7s ease-out 1.5s 1,
    composer-glow-breathe 4s ease-in-out 2.2s infinite;
}
@keyframes composer-glow-flash {
  0%   { box-shadow: var(--shadow-md), 0 0 13px rgba(124,58,237,.15), 0 0 24px rgba(45,91,255,.10), 0 0 38px rgba(229,50,138,.06); }
  35%  { box-shadow: var(--shadow-md), 0 0 60px rgba(124,58,237,.85), 0 0 120px rgba(45,91,255,.7), 0 0 190px rgba(229,50,138,.55); }
  100% { box-shadow: var(--shadow-md), 0 0 13px rgba(124,58,237,.15), 0 0 24px rgba(45,91,255,.10), 0 0 38px rgba(229,50,138,.06); }
}
/* 살아 숨쉬는 글로우 — 부드럽게 커졌다 작아졌다 */
@keyframes composer-glow-breathe {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 13px rgba(124,58,237,.15), 0 0 24px rgba(45,91,255,.10), 0 0 38px rgba(229,50,138,.06); }
  50%      { box-shadow: var(--shadow-md), 0 0 18px rgba(124,58,237,.22), 0 0 32px rgba(45,91,255,.15), 0 0 48px rgba(229,50,138,.09); }
}
.home-composer textarea {
  position: relative; z-index: 1; /* ::before 무지개 도넛(z-index:0) 위에 확실히 위치 */
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-strong);
  padding: 18px 150px 18px 20px;
  min-height: 76px;
  max-height: 168px;
  overflow-y: auto;
  display: block;
  box-sizing: border-box;
}
.home-composer textarea::placeholder { color: var(--text-faint); }

/* 전송 버튼 — 우하단 원형, brand */
.home-composer .composer-send {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(45,91,255,.28);
  transition: background .12s, transform .12s, opacity .12s;
  border: none;
  cursor: pointer;
  z-index: 1; /* ::before 무지개 도넛(z-index:0) 위에 확실히 위치 */
}
.home-composer .composer-send:hover { background: var(--primary-strong); }
.home-composer .composer-send:active { transform: scale(.92); }
.home-composer .composer-send .ic { width: 18px; height: 18px; }
/* 입력 비었을 때 — 비활성 */
.home-composer.is-empty .composer-send { opacity: .4; pointer-events: none; }
/* 로딩 중 — 전송 버튼 숨김(중복 발사 방지) */
.home-composer.is-loading .composer-send { opacity: 0; pointer-events: none; }
/* 파일 드래그앤드롭 — 외부 파일이 입력창 위로 들어왔을 때 강조 */
.home-composer.is-dragover {
  border-color: transparent;
  box-shadow: var(--shadow-md), 0 0 0 2px var(--primary) inset, 0 0 30px rgba(45,91,255,.35);
}
.home-composer.is-dragover::after {
  content: "여기에 파일을 놓으세요";
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: rgba(244,247,255,.78);
  border-radius: var(--r-xl);
  font-size: 14px; font-weight: 700; color: var(--primary);
  pointer-events: none;
}

/* 홈 마이크 버튼 — 전송 버튼 왼쪽, 투명 배경 */
.home-composer .composer-mic {
  position: absolute;
  right: 58px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--text-faint);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: color .12s, border-color .12s;
  z-index: 1; /* ::before 무지개 도넛(z-index:0) 위에 확실히 위치 */
}
.home-composer .composer-mic:hover { color: var(--primary); border-color: var(--primary); }
.home-composer .composer-mic .ic { width: 18px; height: 18px; }
.home-composer .composer-mic.recording { color: #e03; border-color: #e03; animation: mic-pulse .9s ease-in-out infinite; }

/* 파일 첨부 버튼 — 마이크 왼쪽, 투명 배경 */
.home-composer .composer-file {
  position: absolute;
  right: 104px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--text-faint);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: color .12s, border-color .12s;
  z-index: 1; /* ::before 무지개 도넛(z-index:0) 위에 확실히 위치 */
}
.home-composer .composer-file:hover { color: var(--primary); border-color: var(--primary); }
.home-composer .composer-file .ic { width: 18px; height: 18px; }

/* 로딩 상태 */
.composer-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.composer-loading .sp { color: var(--ai); display: inline-flex; }
.composer-loading .sp .ic { width: 18px; height: 18px; animation: ai-spark 1.3s ease-in-out infinite; }

/* 추천 칩 */
.home-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(720px, 100%);
  margin: 16px auto 0;
}
.home-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border-2);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  cursor: pointer;
}
.home-chip:hover {
  background: var(--primary-softer);
  color: var(--primary);
  border-color: var(--primary-soft);
}
.home-chip .ic { width: 15px; height: 15px; }
.home-chip.chip-ai { color: var(--ai); }
.home-chip.chip-ai:hover { background: var(--ai-soft); border-color: var(--ai-soft); }

/* 작은 진입점 1줄 */
.home-mini-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(40px, 9vh, 96px) auto 0;
  width: min(720px, 100%);
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.home-mini-entry .stat { font-variant-numeric: tabular-nums; }
.home-mini-entry .stat b { color: var(--text-strong); font-weight: 700; }

/* F1: 오늘·지연 할 일 미리보기 리스트 */
.home-today-preview {
  width: min(720px, 100%);
  margin: 18px auto 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.today-prev-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.today-prev-cnt {
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}
.today-prev-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.today-prev-row:last-child { border-bottom: none; }
.today-prev-row:hover { background: var(--hover); }
.today-prev-row .tx { flex: 1; min-width: 0; }
.today-prev-row .t { font-size: 14px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-prev-row .due { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.today-prev-row .due.today { color: var(--danger); }
.today-prev-row .due.overdue { color: var(--danger); font-weight: 800; }
.today-prev-more {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.today-prev-more:hover { color: var(--primary); }
.home-today-preview .empty-state { padding: 20px 16px; }

/* AI 파싱 결과 확인 카드 */
.compose-confirm {
  width: min(720px, 100%);
  margin: 14px auto 0;
  border: 1px solid var(--ai-soft);
  background: var(--ai-soft);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  animation: cc-in .22s ease;
  text-align: left;
}
@keyframes cc-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.compose-confirm .cc-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 12px;
}
.compose-confirm .cc-head .ic { width: 16px; height: 16px; color: var(--ai); }
.compose-confirm .cc-fields {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 4px 14px;
}
.compose-confirm .cc-kv {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.compose-confirm .cc-kv:last-child { border-bottom: none; }
.compose-confirm .cc-kv .k {
  color: var(--text-muted);
  flex: 0 0 52px;
  font-size: 12.5px;
}
.compose-confirm .cc-kv .v {
  color: var(--text-strong);
  font-weight: 600;
  flex: 1;
}
/* 확인 카드 제목 인라인 편집 input */
.cc-title-edit {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  padding: 0;
}
.cc-title-edit:focus {
  border-bottom: 1.5px solid var(--primary);
}
.compose-confirm .cc-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.compose-confirm .cc-actions .btn-primary { flex: 1; }

/* 다건 등록 카드 — cc-rows 컨테이너 + 행 */
.compose-confirm .cc-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* 7행 이상 내부 스크롤 */
.compose-confirm .cc-rows.cc-scrollable {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
/* 행 구분선 */
hr.cc-row-sep {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 0;
}
/* 행 컨테이너 */
.cc-row {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 8px 14px 4px;
  margin-bottom: 2px;
}
/* 행 헤더 (번호 + 제거 버튼) */
.cc-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.cc-row-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--border);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cc-row-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.cc-row-remove:hover { color: var(--danger, #e53); background: var(--danger-soft, #fce8e8); }
/* 위임 배지 */
.cc-delegate-badge {
  font-size: 12px;
  color: var(--ai);
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cc-delegate-badge .ic { width: 13px; height: 13px; }
/* 출처 — 메일·회의에서 뽑아 온 후보일 때. 눌러서 원문으로 간다. */
.cc-source {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-source-link { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border); }
.cc-source-link:hover { color: var(--text); }
/* 담당자 미매칭 안내 */
.cc-no-match {
  font-size: 12px;
  color: var(--warning, #b45);
  margin-bottom: 4px;
}
/* 날짜 인라인 편집 input */
.cc-date-edit {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-strong);
  padding: 0;
  cursor: pointer;
}
.cc-date-edit:focus { border-bottom: 1.5px solid var(--primary); }
/* 우선순위 select */
.cc-prio-sel {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
  padding: 0;
  cursor: pointer;
}
/* 담당 select */
.cc-assignee-sel {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
  padding: 0;
  cursor: pointer;
  max-width: 100%;
}

@media (max-width: 768px) {
  .home-hero { padding-top: clamp(24px, 6vh, 56px); }
  .home-greet .greet-spark { width: 24px; height: 24px; }
  .home-greet h1 { font-size: 22px; }
  /* 모바일 가로 오버플로 방지 — 바깥쪽 별(g8~g12)은 숨김 */
  .home-greet .gsparkle.g8,
  .home-greet .gsparkle.g9,
  .home-greet .gsparkle.g10,
  .home-greet .gsparkle.g11,
  .home-greet .gsparkle.g12 { display: none; }
  /* 남은 별 오프셋 축소 — 화면 밖 이탈 방지 */
  .home-greet .gsparkle.g1  { left: -24px; }
  .home-greet .gsparkle.g2  { right: -26px; }
  .home-greet .gsparkle.g3  { left: -20px; }
  .home-greet .gsparkle.g5  { right: -24px; }
  .home-greet .gsparkle.g7  { right: -20px; }
  .home-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .home-chips::-webkit-scrollbar { display: none; }
  .home-mini-entry { justify-content: flex-start; }
}

/* ── 컬럼 숨기기 (Hide) — 툴바 버튼·팝오버·CSS 적용 ── */
/* Hide 버튼 배지 — filter-badge 재사용 패턴 */
.hide-btn { position: relative; }
.hide-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 800; margin-left: 4px; vertical-align: middle;
}
/* Hide 버튼 disabled — group-btn 패턴 */
.hide-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: auto; }

/* Hide 팝오버 — sort-pop 패턴 */
.hide-pop { min-width: 160px; }
.hide-pop-header {
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .03em; padding: 4px 8px 8px; text-transform: uppercase;
}
.hide-col-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  border-radius: 8px; cursor: pointer;
  transition: background .1s;
}
.hide-col-item:hover { background: var(--surface-2); }
.hide-col-item input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }

/* 컬럼 숨김 CSS — .ops-tbl[data-hidden~="colkey"] [data-col="colkey"] 에 display:none */
/* title·status는 제외(숨김 불가). 8컬럼: created/owner/requester/start/due/prio/memo/file */
.ops-tbl[data-hidden~="created"]   [data-col="created"]   { display: none; }
.ops-tbl[data-hidden~="owner"]     [data-col="owner"]     { display: none; }
.ops-tbl[data-hidden~="requester"] [data-col="requester"] { display: none; }
.ops-tbl[data-hidden~="start"]     [data-col="start"]     { display: none; }
.ops-tbl[data-hidden~="due"]       [data-col="due"]       { display: none; }
.ops-tbl[data-hidden~="prio"]      [data-col="prio"]      { display: none; }
.ops-tbl[data-hidden~="memo"]      [data-col="memo"]      { display: none; }
.ops-tbl[data-hidden~="file"]      [data-col="file"]      { display: none; }

/* ── 통합 보기 팝오버 (.view-pop) — sort-pop 기반, 3섹션 인라인 ── */
.view-pop { min-width: 180px; }
.vpop-section-header {
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .03em; padding: 8px 10px 4px; text-transform: uppercase;
}
.vpop-divider {
  height: 1px; background: var(--border); margin: 4px 6px;
}
/* 보기 팝오버 — 정렬·그룹·숨길컬럼 3섹션을 가로 3열로 배치(세로 길이 단축). .view-pop 한정. */
.view-pop { display: flex; gap: 4px; min-width: 0; }
.view-pop .vpop-col { display: flex; flex-direction: column; min-width: 130px; }
.view-pop .vpop-col + .vpop-col { border-left: 1px solid var(--border); margin-left: 4px; padding-left: 4px; }
.view-pop .spop-item { padding-top: 6px; padding-bottom: 6px; }
.view-pop .hide-col-item { padding-top: 5px; padding-bottom: 5px; }
.view-pop .vpop-section-header { padding: 5px 10px 2px; }

/* 모바일 — 폭 제약상 다시 세로 적층 */
@media (max-width: 768px) {
  .view-pop { flex-direction: column; }
  .view-pop .vpop-col + .vpop-col { border-left: none; border-top: 1px solid var(--border);
    margin-left: 0; padding-left: 0; margin-top: 4px; padding-top: 4px; }
}

/* ── 차트 뷰 — 기존 토큰 재사용, 신규 색상 없음 ── */
.chart-root { padding: 24px 28px; }
.chart-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; align-items: center; }
.chart-chip-group { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; }
.chart-chip { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: transparent; border: none; cursor: pointer; white-space: nowrap; }
.chart-chip:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.chart-chip.active { background: var(--primary-soft); color: var(--primary); }
.chart-chip.disabled, .chart-chip:disabled { opacity: .38; cursor: not-allowed; }
.chart-body { min-height: 240px; }
.chart-svg-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 4px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.chart-legend-label { color: var(--text); font-weight: 600; }
.chart-legend-count { color: var(--text-muted); }
.chart-legend-pct { color: var(--text-faint); font-size: 11.5px; }
.chart-donut-total { font-size: 28px; font-weight: 800; fill: var(--text); }
.chart-donut-sub { font-size: 13px; fill: var(--text-muted); }
.chart-bar-val { font-size: 11px; fill: var(--text-muted); font-weight: 600; }
.chart-axis-label { font-size: 10px; fill: var(--text-faint); }
.chart-empty { padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: 14px; }
.chart-caption { margin-top: 12px; font-size: 12px; color: var(--text-faint); text-align: right; }

/* ---------- 인라인 자동완성 드롭다운 (input/textarea #품목 !거래처) ---------- */
/* position·z-index는 JS(inlineAutocomplete.js)에서 fixed·1000으로 인라인 설정 — 표 셀 overflow·스택 탈출 */
.inline-ac-list {
  position: fixed;
  z-index: 1000;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--r-md, 10px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  list-style: none;
  margin: 2px 0 0;
  padding: 4px 0;
  min-width: 200px;
  max-height: 260px;
  overflow-y: auto;
}
.inline-ac-list.hidden { display: none; }
.inline-ac-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
}
.inline-ac-item:hover,
.inline-ac-item:focus {
  background: var(--primary-soft, #e8eeff);
  color: var(--primary, #2d5bff);
  outline: none;
}
.inline-ac-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 160px; white-space: nowrap; }
.inline-ac-code {
  font-size: 11.5px;
  color: var(--text-muted, #888);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
}
/* 품목 드롭다운 4열 배치 — 코드·거래처품번·품목명·규격 */
.iac-item-code { font-size: 11.5px; color: var(--text-muted, #888); flex-shrink: 0; min-width: 64px; }
.iac-item-cust { font-size: 11.5px; color: var(--primary, #2d5bff); flex-shrink: 0; min-width: 72px; padding-left: 6px; }
.iac-item-name { font-weight: 600; flex: 1; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.iac-item-spec { font-size: 11px; color: var(--text-faint, #aaa); flex-shrink: 0; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 내업무 세그먼트 바 — [내 할 일·맡긴 일·전체] ── */
.mine-seg-bar { margin-bottom: 8px; }

/* ── F2: 드로어 상태 세그먼트 ───────────────────────────────────────── */
.ds-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ds-seg-chip {
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: opacity .15s, border-color .15s;
  background: none;
}
.ds-seg-chip:hover { opacity: .8; }
.ds-seg-chip.ds-seg-active {
  border-color: currentColor;
  box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}

/* 키보드 하이라이트 — hover와 동일 톤 */
.inline-ac-item.is-active {
  background: var(--primary-soft, #e8eeff);
  color: var(--primary, #2d5bff);
}

/* ---------- 이카운트 도움창 스타일 품목·거래처 선택 모달 ---------- */
.ip-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .34);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
}
.ip-overlay.hidden { display: none; }
.ip-modal {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  width: min(560px, 94vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ip-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  flex-shrink: 0;
}
.ip-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1a1a1a);
  white-space: nowrap;
}
.ip-search {
  flex: 1;
  min-width: 0;
}
.ip-col-headers {
  display: flex;
  gap: 0;
  padding: 6px 16px;
  background: var(--surface-alt, #f7f8fc);
  border-bottom: 1px solid var(--border, #e0e0e0);
  flex-shrink: 0;
}
.ip-col-headers > span {
  flex: 1;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ip-list {
  overflow-y: auto;
  flex: 1;
}
.ip-row {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  cursor: pointer;
  gap: 0;
  border-bottom: 1px solid var(--border-faint, #f0f0f0);
  font-size: 13.5px;
  color: var(--text, #1a1a1a);
}
.ip-row:hover,
.ip-row.is-active {
  background: var(--primary-soft, #e8eeff);
  color: var(--primary, #2d5bff);
}
.ip-cell-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ip-cell-sub {
  flex: 1;
  font-size: 12.5px;
  color: inherit;
  opacity: .92;   /* 0.7→0.92 — 글자 선명도 개선(흐려 보이던 문제) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ip-more {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-muted, #888);
  text-align: center;
  border-top: 1px solid var(--border, #e0e0e0);
  background: var(--surface-alt, #f7f8fc);
}

/* 모바일 바텀시트 */
@media (max-width: 640px) {
  .ip-overlay { align-items: flex-end; }
  .ip-modal {
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
  }
}

/* ── 체크리스트(하위업무) ─────────────────────────────── */

/* 표뷰 제목 셀 — chevron */
.cl-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  color: var(--text-muted, #888);
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
  transition: background .1s;
}
.cl-chevron:hover { background: var(--surface-2); color: var(--accent, #1565c0); }
/* 항목이 아직 없는 업무 — 표는 평소 숨기고 행에 마우스 올릴 때만 살짝 노출(번잡함 방지). */
.cl-chevron.cl-empty { opacity: 0; transition: opacity .12s; }
.mon-row:hover .cl-chevron.cl-empty { opacity: .45; }
.cl-chevron.cl-empty:hover { opacity: 1; }
/* 모바일 카드는 hover가 없어 빈 토글을 옅게 유지(입구 보존). */
.cl-card-toggle.cl-empty { opacity: .5; }

/* 진행도 뱃지 */
.cl-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #888);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 4px;
  flex-shrink: 0;
}

/* 표뷰 서브행 — 부모 행에 귀속됨을 보이는 좌측 가이드 라인 + 코르크보드 느낌 배경 */
.mon-sub-row td.cl-sub-td {
  padding: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 3px 0 0 rgba(45, 91, 255, .45);
}

/* 업무내용 — 펼침 영역 상단에 넓게(표 칸이 좁아 못 읽던 본문) */
.mon-sub-row .cl-body {
  padding: 12px 18px 2px 48px;
}
.cl-body-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: .02em;
  margin-bottom: 3px;
}
.cl-body-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-strong);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 960px;
}

.cl-wrap {
  padding: 8px 18px 14px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px 12px;
  align-items: start;
}

/* 하위업무 블록 헤더 — '↳ 하위업무 N'으로 계층 명시(맨 위 한 줄, 전체 열 span) */
.cl-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px -14px;        /* 좌측 가이드선 쪽으로 당겨 들여쓰기 기준점 표시 */
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: -.01em;
}
.cl-head-icon {
  font-size: 13px;
  color: rgba(45, 91, 255, .7);
  font-weight: 600;
}
.cl-head-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-3);
  border-radius: 9px;
}

/* 표뷰 체크리스트 — 포스트잇 카드 (cl-wrap 한정 · 모달·모바일 카드는 불변). 파스텔 멀티컬러 순환 */
.cl-wrap .cl-item {
  position: relative;
  align-items: flex-start;
  min-height: 0;
  padding: 7px 10px 8px;
  gap: 7px;
  /* 색·기울기는 item.id 해시 기반 인라인 변수(postitStyle). 드래그로 순서가 바뀌어도
     색깔 포스트잇 자체가 따라 움직인다(위치 기반 nth-child 폐기). */
  background: var(--postit-bg, #FFF3B0);
  transform: rotate(var(--postit-rot, -1deg));
  border: none;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .10), 0 3px 8px rgba(17, 24, 39, .07);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s, opacity .14s;
}
.cl-wrap .cl-item:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 3px 6px rgba(17, 24, 39, .13), 0 8px 18px rgba(17, 24, 39, .10);
  z-index: 1;
}
.cl-wrap .cl-cb { margin-top: 1px; accent-color: #5b6470; }
.cl-wrap .cl-text { color: #2A2A2A; font-weight: 500; }
.cl-wrap .cl-text:hover { background: transparent; }
/* 완료 항목 — 포스트잇을 옅게 + 회색조 */
.cl-wrap .cl-item:has(.cl-cb:checked) { filter: grayscale(.45); opacity: .6; }
/* × 삭제는 평소 숨기고 포스트잇에 마우스 올릴 때만 노출(우상단) */
.cl-wrap .cl-del {
  opacity: 0;
  color: rgba(0, 0, 0, .4);
  transition: opacity .12s, color .1s, background .1s;
}
.cl-wrap .cl-item:hover .cl-del { opacity: .7; }
.cl-wrap .cl-del:hover { opacity: 1; color: var(--danger, #e53935); background: rgba(0, 0, 0, .06); }

/* 추가 버튼 — 빈 포스트잇 점선(생각나는 대로 붙이기) */
.cl-wrap .cl-add-btn {
  border: 1.5px solid var(--border-2);
  border-radius: 6px;
  padding: 9px 16px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  opacity: 1;
  box-shadow: var(--shadow-xs);
}
.cl-wrap .cl-add-btn:hover {
  opacity: 1;
  text-decoration: none;
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(17, 24, 39, .10);
}

/* 항목 공통(표뷰 서브행 + 모달 + 모바일카드) */
.cl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.cl-cb {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent, #1565c0);
}
.cl-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-strong);
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 3px;
  white-space: pre-wrap;
  word-break: break-word;
}
.cl-text:hover { background: var(--surface-2); }
.cl-text.cl-done {
  text-decoration: line-through;
  color: var(--text-muted, #888);
}
.cl-del {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-faint, #aaa);
  padding: 0 4px;
  border-radius: 3px;
  line-height: 1;
}
.cl-del:hover { color: var(--danger, #e53935); background: var(--surface-2); }

/* 항목 추가 줄 — 그리드에서 전체 열 span(맨 아래 한 줄) */
.cl-add-row {
  margin-top: 8px;
  grid-column: 1 / -1;
}
.cl-add-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--accent, #1565c0);
  padding: 3px 0;
  opacity: .7;
}
.cl-add-btn:hover { opacity: 1; text-decoration: underline; }
.cl-add-input {
  font-size: 13px;
  border: 1px solid var(--accent, #1565c0);
  border-radius: 4px;
  padding: 3px 7px;
  outline: none;
  width: 220px;
}

/* 모달 체크리스트 섹션 */
#nr-checklist .d-sec-h { margin-bottom: 8px; }
#nr-cl-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
#nr-cl-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 4px;
  padding: 5px 10px;
  outline: none;
  transition: border-color .15s;
}
#nr-cl-input:focus { border-color: var(--accent, #1565c0); }

/* 모바일 카드 체크리스트 */
.cl-card-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted, #888);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px;
}
.cl-card-toggle:hover { color: var(--accent, #1565c0); }
.cl-card-body {
  padding: 4px 12px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-2);
  border-radius: 6px;
  margin: 0 8px 4px 8px;
}

/* ── 자유 메모 보드 — 추가 스타일 ────────────────────────── */

/* 추가 버튼 2개 나란히 — 레거시 경로 호환 유지 */
.cl-add-row-duo {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cl-add-btn-text {
  border-color: #a8d5a2;
  color: #2e7d32;
}
.cl-add-btn-text:hover {
  border-color: #2e7d32;
  color: #1b5e20;
}

/* 뷰 전환·템플릿 — 아이콘만 + 말풍선(fly-tip). 라벨 제거로 좁아진 히트영역 보정 */
.vt-icon-only { padding-left: 10px; padding-right: 10px; }
.vt-icon-only .vt-ic, .vt-icon-only .sort-ic { margin-right: 0; }

/* ── 포스트잇 자유 배치(postitFree.js) ── */
/* 메모 보드 = 칠판 — 서브행에 꽉 차는 진녹색 칠판 위에 파스텔 포스트잇(2026-07-12 이부장님, 칠판 질감 강화).
   자유배치 pos는 보드 기준 absolute라 마진·패딩을 바꿔도 포스트잇이 보드와 함께 움직인다.
   좌측 파란 가이드 바(부모 행 귀속 표시)는 td 인셋 그림자를 보드가 덮으므로 보드 자신이 다시 그린다.
   z-index:0 — ::after 분필 노이즈(z-index:-1)를 보드 배경 위·포스트잇 아래에 끼우기 위한 스태킹 컨텍스트. */
.cl-wrap.cl-memo-board {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 10px 18px 16px 48px;
  background:
    /* 분필 지우개 자국 — 가로로 번진 얼룩 3곳 */
    radial-gradient(55% 16% at 28% 30%, rgba(255, 255, 255, .05), transparent 72%),
    radial-gradient(45% 13% at 74% 64%, rgba(255, 255, 255, .04), transparent 72%),
    radial-gradient(38% 11% at 14% 82%, rgba(255, 255, 255, .035), transparent 72%),
    /* 상단 조명 */
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .04), transparent 60%),
    #33473D;
  box-shadow: inset 3px 0 0 rgba(45, 91, 255, .45), inset 0 0 64px rgba(0, 0, 0, .3);
}
/* 분필 가루 미세 노이즈 — 배경 위·포스트잇 아래 오버레이 */
.cl-wrap.cl-memo-board::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  opacity: .05;
  pointer-events: none;
}
/* 칠판 위 헤더·버튼 — 분필 톤으로 대비 확보 */
.cl-memo-board .cl-head { color: rgba(255, 255, 255, .85); }
.cl-memo-board .cl-head-icon { color: rgba(255, 255, 255, .55); }
.cl-memo-board .cl-head-n { color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .16); }
.cl-memo-board .cl-autosort {
  color: rgba(255, 255, 255, .75);
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
}
.cl-memo-board .cl-autosort:hover { color: #fff; border-color: rgba(255, 255, 255, .7); }
.cl-memo-board .cl-add-btn {
  color: rgba(255, 255, 255, .8);
  border: 1.5px dashed rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}
.cl-memo-board .cl-add-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .8);
  box-shadow: none;
}
/* 메모 보드 줄은 단일 클릭=선택(복사), 더블클릭=편집 — I빔 커서로 선택 가능함을 알린다. */
.cl-memo-board .cl-text,
.cl-memo-board .cl-text-free { cursor: text; }
body.postit-drag-noselect { user-select: none; }
.cl-item-free { z-index: 2; }
.cl-postit-dragging {
  opacity: .92; cursor: grabbing; z-index: 6;
  transform: rotate(0deg) !important; transition: none !important;
  box-shadow: 0 12px 28px rgba(17, 24, 39, .22) !important;
}
/* 자동정렬 — 메모 보드 헤더 우측 미니 버튼 */
.cl-autosort {
  margin-left: 10px; padding: 2px 8px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  color: var(--text-muted, #8A92A6);
  border: 1px solid var(--border-2, #E5E8EF); border-radius: 6px;
  background: var(--surface, #fff); cursor: pointer;
}
.cl-autosort:hover { color: var(--primary, #4361EE); border-color: var(--primary, #4361EE); }

/* 포스트잇 그룹 헤더행(핸들 + 삭제) — 흐름에서 빼 오버레이로(빈 공간 차지 안 함) */
.cl-item-header-row {
  position: absolute;
  top: 3px;
  left: 8px;
  right: 3px;
  justify-content: space-between;
  align-items: center;
  min-height: 0;
  margin: 0;
  pointer-events: none;
  z-index: 1;
}
.cl-item-header-row > * { pointer-events: auto; }
/* 닫기(×) — 포스트잇 우상단 '안쪽'에 원형으로 고정(모서리에 걸쳐 떠 보이던 위치 보정) */
.cl-wrap .cl-del-group {
  width: 18px; height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  border-radius: 50%;
}
/* 편집 중 포스트잇 — 닫기를 항상 보이게(입력 중 종료 동선 명확화) */
.cl-item-editing .cl-del-group { opacity: .55; }
/* 포스트잇 상단 tape 장식 제거(2026-06-10 이부장님 — 공간만 차지). 마크업·::before 모두 무력화. */
.cl-item-tape { display: none; }
.cl-wrap .cl-item::before, .cl-wrap .cl-item-group::before { display: none; content: none; }

/* 포스트잇 내 줄 컨테이너 */
.cl-pi-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 줄 단위 행 */
.cl-pi-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}
.cl-pi-check .cl-cb { margin-top: 2px; flex-shrink: 0; }
.cl-pi-text .cl-text-free { font-style: italic; color: #4a4a4a; }

/* 인-플레이스 편집기 행 */
.cl-pi-editor-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cl-pi-input {
  flex: 1;
  font-size: 13px;
  font-family: inherit;
  border: none;
  border-bottom: 1.5px solid var(--accent, #1565c0);
  border-radius: 0;
  padding: 2px 3px;
  outline: none;
  background: transparent;
  line-height: 1.5;
  color: #2A2A2A;
  min-width: 0;
}
.cl-pi-input::placeholder { color: rgba(0,0,0,.35); font-size: 12px; }
/* 편집 중 Enter로 확정된 줄 — 입력칸을 정적 텍스트로 교체해 즉시 표시 */
.cl-pi-done .cl-pi-line-text { font-size: 13px; line-height: 1.5; color: #2A2A2A; word-break: break-word; }
.cl-pi-input-text {
  font-style: italic;
  color: #4a4a4a;
  border-bottom-color: #2e7d32;
}
/* 편집 중 포스트잇 — 살짝 스케일 업 + 그림자 */
.cl-item-editing {
  transform: rotate(0deg) scale(1.02) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14) !important;
  z-index: 2;
}

/* 드래그 핸들 — 평소 숨기고 포스트잇 호버 시 노출 */
.cl-drag-handle {
  font-size: 13px;
  color: rgba(0, 0, 0, .22);
  cursor: grab;
  flex-shrink: 0;
  opacity: .3;
  transition: opacity .12s;
  user-select: none;
  line-height: 1;
}
.cl-wrap .cl-item:hover .cl-drag-handle { opacity: .7; }
.cl-drag-handle:active { cursor: grabbing; }

/* 포스트잇 — flex-direction: column(여러 줄 세로 배치). 높이는 내용에 따라 자동. */
.cl-wrap .cl-item { flex-direction: column; align-items: stretch; min-height: 0; }

/* 포스트잇 상단 행(체크박스 + 핸들 + 텍스트 + × 버튼) */
.cl-item-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

/* 자유 텍스트 줄(체크박스 없음) — 여러 줄 래핑 */
.cl-text-free {
  font-size: 13px;
  line-height: 1.55;
  color: #3a3a3a;
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
  min-height: 20px;
}

/* 텍스트 타입 포스트잇 — 체크 타입보다 살짝 대비 낮춤 */
.cl-item-text .cl-text-free {
  font-weight: 400;
  color: #4a4a4a;
  font-style: italic;
}

/* 드래그 중 포스트잇 — 반투명 + 그림자 강조 */
.cl-item.cl-dragging {
  opacity: .55;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transform: rotate(2deg) scale(1.03) !important;
  cursor: grabbing;
  z-index: 10;
}
/* 드래그 오버 포스트잇 — 삽입 위치 시각적 힌트 */
.cl-item.cl-drag-over {
  outline: 2px dashed var(--accent, #1565c0);
  outline-offset: 2px;
}

/* (tape 장식 제거 — 2026-06-10. 포스트잇 상단 줄 2개가 공간만 차지하던 문제) */

/* 포스트잇 내 텍스트 줄간격 */
.cl-wrap .cl-text,
.cl-wrap .cl-text-free {
  line-height: 1.55;
}

/* ---------- 멘션 칩(품목·거래처·담당자) — 클릭/hover 커서 + 종류별 색 ---------- */
span.mention { cursor: pointer; display: inline-block; max-width: 100%; box-sizing: border-box; padding: 3px 8px; border-radius: 999px; font-size: .88em; font-weight: 600; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
span.mention[data-kind="item"]    { color: var(--chip-item-fg);    background: var(--chip-item-bg);    border: 1px solid var(--chip-item-bd); }
span.mention[data-kind="partner"] { color: var(--chip-partner-fg); background: var(--chip-partner-bg); border: 1px solid var(--chip-partner-bd); }
span.mention[data-kind="user"]    { color: var(--chip-user-fg);    background: var(--chip-user-bg);    border: 1px solid var(--chip-user-bd); }

/* ---------- 에디터 작성 영역 멘션 칩 — 이카운트 스타일 + ⊖ 삭제버튼 ---------- */
/* .ql-editor 스코프 한정 — 읽기용(표·댓글 렌더) 칩에는 영향 없음 */
.ql-editor span.mention {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 9px;
  border-radius: 999px;
  font-size: .86em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  user-select: none;
}
/* ⊖ 삭제버튼 */
.ql-editor span.mention .mention-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin: 0;
  transition: opacity .12s;
  /* contenteditable 안에서도 클릭 동작 보장 */
  pointer-events: auto;
}
.ql-editor span.mention .mention-remove:hover { opacity: 1; }
/* 종류별 색 — 기존 색과 동일하게 .ql-editor 스코프에서 재선언 */
.ql-editor span.mention[data-kind="item"]    { color: var(--chip-item-fg);    background: var(--chip-item-bg);    border: 1px solid var(--chip-item-bd); }
.ql-editor span.mention[data-kind="partner"] { color: var(--chip-partner-fg); background: var(--chip-partner-bg); border: 1px solid var(--chip-partner-bd); }
.ql-editor span.mention[data-kind="user"]    { color: var(--chip-user-fg);    background: var(--chip-user-bg);    border: 1px solid var(--chip-user-bd); }

/* ---------- 품목 정보 팝업 (멘션 칩 클릭/hover 시) ---------- */
.iip-popup {
  position: absolute;
  z-index: 10100;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--r-md, 10px);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: 10px 14px;
  min-width: 200px;
  max-width: 280px;
  font-size: 13px;
  color: var(--text, #1a1a1a);
  pointer-events: auto;
}
.iip-popup.hidden { display: none; }
.iip-head {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-faint, #f0f0f0);
}
.iip-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.iip-row:last-child { margin-bottom: 0; }
.iip-muted { color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; margin-left: 4px; }
.iip-actions { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 12px; }
.iip-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.iip-link:hover { text-decoration: underline; }
.iip-label { font-size: 11.5px; color: var(--text-muted, #888); flex-shrink: 0; min-width: 68px; }
.iip-val { font-weight: 600; word-break: break-all; }
.iip-loading, .iip-empty { color: var(--text-faint, #aaa); font-size: 12px; padding: 4px 0; }

/* ============================================================
   사용 설명서 (manual) 뷰어
   ============================================================ */

/* 레이아웃 */
.manual-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; min-height: calc(100vh - 64px); }
.manual-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 24px 12px; border-right: 1px solid var(--border); }
.manual-sidebar-sticky { position: relative; }
.manual-sidebar-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.manual-sidebar-head .ic { width: 16px; height: 16px; }
.manual-body { padding: 32px 40px 64px; max-width: 720px; }

/* 목차 */
.manual-toc { display: flex; flex-direction: column; gap: 2px; }
.manual-toc-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: background .12s, color .12s; }
.manual-toc-item:hover { background: var(--primary-soft); color: var(--primary); }
.manual-toc-item.is-active { background: var(--primary-soft); color: var(--primary); }
.manual-toc-item .ic { width: 15px; height: 15px; flex-shrink: 0; }

/* 모바일 목차 */
.manual-toc-mobile .manual-toc { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.manual-toc-mobile .manual-toc-item { background: var(--surface-2); font-size: 12px; padding: 5px 10px; border-radius: var(--r-pill); }
.manual-body-mobile { padding-bottom: 48px; }

/* 진입 배너 */
.manual-intro-banner { background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 100%); border-radius: var(--r-xl); padding: 32px 28px; margin-bottom: 36px; }
.manual-intro-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 12px; }
.manual-intro-badge .ic { width: 14px; height: 14px; }
.manual-intro-title { font-size: 28px; font-weight: 800; color: var(--text-strong); margin-bottom: 8px; line-height: 1.3; }
.manual-intro-desc { font-size: 17px; color: var(--text-muted); }

/* 섹션 */
.manual-section { margin-bottom: 48px; }
.manual-sec-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--primary-soft); }
.manual-sec-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-soft); border-radius: var(--r-md); flex-shrink: 0; }
.manual-sec-icon .ic { width: 22px; height: 22px; color: var(--primary); }
.manual-sec-title { font-size: 24px; font-weight: 800; color: var(--text-strong); }
.manual-sec-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* 단계 카드 — 애니메이션 초기 상태(숨김) */
.manual-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .0001ms, transform .0001ms; /* 초기에는 즉시 */
}
/* 진입 후 CSS 트랜지션으로 애니메이션 */
.manual-step--visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity var(--manual-dur, 600ms) cubic-bezier(.22,.61,.36,1),
              transform var(--manual-dur, 600ms) cubic-bezier(.22,.61,.36,1) !important;
}
/* 각 카드에 duration 적용 — JS에서 style="animation-duration:Xms" 로 주입. CSS var 폴백 */
.manual-step { --manual-dur: 600ms; }

/* slide-up 변형 — translateY 더 크게 */
.manual-step--slide-up { transform: translateY(22px); }

.manual-step-heading { font-size: 19px; font-weight: 800; color: var(--text-strong); margin-bottom: 12px; }
.manual-step-content { font-size: 17px; color: var(--text); line-height: 1.7; margin-bottom: 12px; }
.manual-para { font-size: 17px; color: var(--text); line-height: 1.7; margin-bottom: 10px; }

/* 하이라이트 칩 */
.manual-highlights { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.manual-chip { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--primary-soft); color: var(--primary); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }

/* 콜아웃(팁·주의) */
.manual-callout { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: var(--r-md); margin-top: 14px; font-size: 15px; line-height: 1.6; }
.manual-callout .ic { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.manual-callout--info { background: var(--info-soft); color: var(--info); }
.manual-callout--warn { background: var(--warning-soft); color: var(--warning); }

/* bullet_points */
.manual-bp { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.manual-bp-row { display: flex; gap: 10px; font-size: 15px; }
.manual-bp-label { font-weight: 700; color: var(--text-strong); flex-shrink: 0; min-width: 68px; }

/* options */
.manual-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.manual-option { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; }
.manual-option-title { font-weight: 700; font-size: 15px; color: var(--text-strong); margin-bottom: 4px; }
.manual-option-desc { font-size: 14px; color: var(--text-muted); }

/* items */
.manual-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.manual-item { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.manual-item-label { font-weight: 700; color: var(--text-strong); flex-shrink: 0; min-width: 84px; }
.manual-item-desc { color: var(--text); }

/* process 단계 */
.manual-process { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.manual-process-row { display: flex; gap: 12px; align-items: flex-start; }
.manual-process-num { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.manual-process-title { font-weight: 700; font-size: 15px; color: var(--text-strong); margin-bottom: 2px; }
.manual-process-desc { font-size: 14px; color: var(--text); line-height: 1.6; }
.manual-howto-row { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }

/* 표 */
.manual-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 14px; }
.manual-table th { background: var(--surface-2); font-weight: 700; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.manual-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.manual-table-key { font-weight: 700; color: var(--text-strong); white-space: nowrap; }

/* features */
.manual-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.manual-feature { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; }
.manual-feature-title { font-weight: 700; font-size: 15px; color: var(--text-strong); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.manual-feature-title .ic { width: 15px; height: 15px; }
.manual-feature-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.manual-feature-example { font-size: 13px; color: var(--primary); background: var(--primary-soft); border-radius: 6px; padding: 6px 10px; margin-top: 8px; font-style: italic; white-space: pre-line; }

/* soon 배지 */
.manual-soon-badge { display: inline-flex; align-items: center; padding: 2px 7px; background: var(--warning-soft); color: var(--warning); border-radius: var(--r-pill); font-size: 11px; font-weight: 700; margin-left: 6px; }

/* coming-grid */
.manual-coming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 10px; }
.manual-coming-item { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; }
.manual-coming-item .ic { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }

/* tabs 블록 */
.manual-tabs-block { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.manual-tabs-group { background: var(--surface-2); border-radius: var(--r-md); padding: 14px 16px; }
.manual-tabs-title { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }
.manual-tab-items { display: flex; flex-direction: column; gap: 6px; }
.manual-tab-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.manual-tab-item .ic { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; }

/* example(체크리스트 예시) */
.manual-example-block { background: var(--surface-2); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 10px; }
.manual-example-title { font-weight: 700; font-size: 14px; color: var(--text-strong); margin-bottom: 4px; }
.manual-example-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.manual-checklist { display: flex; flex-direction: column; gap: 4px; }
.manual-cl-item { font-size: 14px; color: var(--text); }
.manual-cl-done { color: var(--text-muted); text-decoration: line-through; }
.manual-progress-label { font-size: 12px; font-weight: 700; color: var(--primary); margin-top: 8px; }

/* usecase list */
.manual-usecase-list { margin: 0 0 10px 0; padding-left: 18px; }
.manual-usecase-list li { font-size: 15px; color: var(--text); line-height: 1.7; }

/* motto / closing */
.manual-motto { font-size: 15px; font-weight: 700; color: var(--text-strong); font-style: italic; border-left: 3px solid var(--primary); padding-left: 14px; margin: 12px 0 8px; }
.manual-closing { font-size: 20px; font-weight: 800; color: var(--primary); text-align: center; margin-top: 16px; }

/* 하단 CTA */
.manual-footer-cta { display: flex; align-items: center; gap: 16px; background: var(--primary-soft); border-radius: var(--r-xl); padding: 24px 28px; margin-top: 40px; flex-wrap: wrap; }
.manual-footer-icon .ic { width: 28px; height: 28px; color: var(--primary); }
.manual-footer-text { flex: 1; min-width: 160px; }
.manual-footer-title { font-size: 17px; font-weight: 800; color: var(--text-strong); margin-bottom: 4px; }
.manual-footer-desc { font-size: 14px; color: var(--text-muted); }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .manual-step, .manual-step--visible { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .manual-tabs-block { grid-template-columns: 1fr; }
  .manual-coming-grid { grid-template-columns: 1fr 1fr; }
  .manual-footer-cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   전역 스포트라이트 검색 (globalSearch.js) — 풀스크린 오버레이
   ============================================================ */
.gs-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(17, 24, 39, .46);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px;
  opacity: 0; transition: opacity .14s ease;
}
.gs-overlay.show { opacity: 1; }

.gs-modal {
  width: 100%; max-width: 640px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 16px; box-shadow: 0 24px 64px rgba(17, 24, 39, .28);
  overflow: hidden;
  transform: translateY(-8px) scale(.985);
  transition: transform .16s cubic-bezier(.16, 1, .3, 1);
}
.gs-overlay.show .gs-modal { transform: none; }

/* 검색 입력 바 */
.gs-bar { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.gs-logo { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; box-shadow: 0 1px 3px rgba(45,91,255,.25); }
/* 입력 필드 박스 — 어디가 입력창인지 또렷이. 포커스 시 primary 링. */
.gs-field {
  flex: 1; display: flex; align-items: center;
  background: var(--surface-2); border: 1.5px solid var(--border-2);
  border-radius: 11px; padding: 0 13px; height: 44px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.gs-field:focus-within {
  background: var(--surface); border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft, rgba(45,91,255,.14));
}
.gs-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 16px; font-weight: 600; color: var(--text);
  caret-color: var(--primary); /* 깜박이는 입력 커서를 또렷하게 */
}
.gs-input::placeholder { color: var(--text-faint); font-weight: 500; }
/* X 닫기 버튼 */
.gs-close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: var(--text-muted);
  transition: background .12s, color .12s;
}
.gs-close:hover { background: var(--surface-2); color: var(--text); }
.gs-close .ic { width: 19px; height: 19px; }

/* 결과 영역 */
.gs-results { max-height: 56vh; overflow-y: auto; padding: 8px; }
.gs-empty { padding: 18px 16px; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.7; }

/* 빈 상태 히어로 — 로고 + 안내 + 단축키 */
.gs-hint { padding: 30px 16px 26px; text-align: center; color: var(--text-muted); }
.gs-hero { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.gs-hero .kog { color: var(--primary); }
.gs-hero .rest { color: var(--text-strong); }
.gs-hint p { margin: 12px 0 16px; font-size: 13.5px; line-height: 1.7; }
.gs-keys { font-size: 11.5px; color: var(--text-faint); }
.gs-keys kbd {
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  padding: 1px 5px; margin: 0 1px; border-radius: 5px;
  border: 1px solid var(--border-2); background: var(--surface-2);
}
.gs-group { margin-bottom: 4px; }
.gs-glabel {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: var(--text-faint); text-transform: uppercase;
  padding: 8px 12px 4px;
}

/* 결과 항목 */
.gs-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 11px; text-align: left;
  cursor: pointer; transition: background .1s;
}
.gs-item:hover, .gs-item.active { background: var(--surface-2); }
.gs-item.active { box-shadow: inset 0 0 0 1.5px var(--primary); }

/* AI 물어보기 행 — 그라데이션 악센트로 가장 'AI스럽게' */
.gs-ai {
  background: linear-gradient(100deg, rgba(124,58,237,.07), rgba(45,91,255,.07));
  border: 1px solid rgba(124,58,237,.16);
}
.gs-ai:hover, .gs-ai.active {
  background: linear-gradient(100deg, rgba(124,58,237,.13), rgba(45,91,255,.12));
  box-shadow: inset 0 0 0 1.5px rgba(124,58,237,.45);
}
.gs-ai-ic {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #7C3AED, #2D5BFF);
  box-shadow: 0 3px 10px rgba(124,58,237,.34);
}
.gs-ai-ic .ic { width: 18px; height: 18px; }
.gs-ai .gs-ttl { background: linear-gradient(100deg, #7C3AED, #2D5BFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gs-ic { width: 34px; height: 34px; border-radius: 9px; }
.gs-ic .ic { width: 17px; height: 17px; }
.gs-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--primary-soft, #E8EEFF); color: var(--primary, #2D5BFF);
  font-size: 13px; font-weight: 800; letter-spacing: -0.3px;
}
.gs-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gs-ttl { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-chev { color: var(--text-faint); flex: 0 0 auto; }
.gs-chev .ic { width: 16px; height: 16px; }

/* 모바일 — 상단에 더 붙이고 폭 확장 */
@media (max-width: 768px) {
  .gs-overlay { padding: 7vh 10px 10px; align-items: flex-start; }
  .gs-input { font-size: 16px; }
  .gs-results { max-height: 64vh; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-overlay, .gs-modal { transition: none; }
}

/* ============================================================
   업데이트 토스트 + 변경점 말풍선 (Phase C-2)
   ============================================================ */

/* ---------- 업데이트 토스트 ---------- */
.update-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 95;
  display: flex; align-items: flex-start; gap: 12px;
  width: 340px; max-width: calc(100vw - 32px);
  padding: 14px 16px; padding-right: 38px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateX(12px);
  transition: opacity .28s, transform .28s cubic-bezier(.22,.61,.36,1);
}
.update-toast.is-visible { opacity: 1; transform: translateX(0); }
.update-toast.is-leaving { opacity: 0; transform: translateX(12px); }

.update-toast .ut-ic {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
}
.update-toast .ut-ic .ic { width: 19px; height: 19px; }
.update-toast.is-visible .ut-ic { animation: ut-pulse 1.8s ease-out 1; }

.update-toast .ut-tx { flex: 1; min-width: 0; }
.update-toast .ut-tx .t { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.update-toast .ut-tx .s { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.update-toast .ut-actions { margin-top: 11px; }

.update-toast .ut-close {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; color: var(--text-faint);
}
.update-toast .ut-close:hover { background: var(--surface-2); color: var(--text-muted); }
.update-toast .ut-close .ic { width: 15px; height: 15px; }

@keyframes ut-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(45,91,255,.30); }
  70%  { box-shadow: 0 0 0 9px rgba(45,91,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,91,255,0); }
}

@media (max-width: 768px) {
  .update-toast {
    right: 12px; left: 12px; width: auto;
    bottom: calc(var(--bottomnav-h) + 14px);
    transform: translateY(12px);
  }
  .update-toast.is-visible { transform: translateY(0); }
  .update-toast.is-leaving { transform: translateY(12px); }
}

/* ---------- 변경점 말풍선 ---------- */
.changelog-stack {
  position: fixed; right: 24px; bottom: 24px; z-index: 94;
  display: flex; flex-direction: column; gap: 10px;
  width: 300px; max-width: calc(100vw - 32px);
  pointer-events: none; /* 스택 자체는 통과, 카드만 클릭 */
}
.changelog-stack .cl-bubble,
.changelog-stack .cl-allseen { pointer-events: auto; }

.cl-bubble {
  position: relative;
  padding: 13px 15px; padding-right: 34px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .32s, transform .32s cubic-bezier(.22,.61,.36,1);
}
.cl-bubble.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.cl-bubble.is-leaving { opacity: 0; transform: translateY(8px) scale(.98); }

.cl-bubble .cl-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cl-bubble .cl-time { font-size: 11.5px; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.cl-bubble .cl-title { font-size: 14px; font-weight: 700; color: var(--text-strong); line-height: 1.35; }
.cl-bubble .cl-body {
  font-size: 12.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-bubble .cl-close {
  position: absolute; top: 9px; right: 9px;
  width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; color: var(--text-faint);
}
.cl-bubble .cl-close:hover { background: var(--surface-2); color: var(--text-muted); }
.cl-bubble .cl-close .ic { width: 14px; height: 14px; }

.cl-allseen { text-align: center; padding: 4px 0 2px; }

/* tag 배지 — 기존 .badge 변형 재사용. 라벨 매핑은 §3 */
.cl-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.cl-tag .ic { width: 12px; height: 12px; }
.cl-tag.feature { background: var(--primary-soft); color: var(--primary); }
.cl-tag.fix     { background: var(--danger-soft);  color: var(--danger); }
.cl-tag.improve { background: var(--success-soft); color: var(--success); }
.cl-tag.notice  { background: var(--surface-3);    color: var(--text-muted); }

@media (max-width: 768px) {
  .changelog-stack {
    right: 12px; left: 12px; width: auto;
    bottom: calc(var(--bottomnav-h) + 14px);
  }
}

/* ---------- 접근성 — prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .update-toast, .cl-bubble {
    transition-property: opacity;
    transform: none !important;
  }
  .update-toast.is-visible .ut-ic { animation: none; }
}

/* ---------- OPS-22 첨부 파일 섹션 ---------- */
.att-sec { margin-top: 16px; }
.att-upload-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.att-upload-label { cursor: pointer; }
.att-upload-status { font-size: 12px; color: var(--text-muted); }
.att-list { display: flex; flex-direction: column; gap: 6px; }
.att-loading, .att-empty { font-size: 13px; color: var(--text-faint); }
.att-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--border); gap: 8px;
}
.att-row-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.att-name-btn {
  background: none; border: none; padding: 0; text-align: left;
  font-size: 13px; font-weight: 600; color: var(--primary); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.att-name-btn:hover { text-decoration: underline; }
.att-meta { font-size: 11px; color: var(--text-faint); }
.att-del-btn {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--text-faint); padding: 2px 6px; border-radius: var(--r-sm);
  line-height: 1;
}
.att-del-btn:hover { color: var(--danger); background: var(--danger-soft); }

/* ---------- OPS-25 선행업무 섹션 ---------- */
.dep-sec { margin-top: 4px; }
.dep-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.dep-chip-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 10px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border);
}
.dep-chip { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
.dep-chip-title { font-size: 13px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-del-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: 16px; line-height: 1; padding: 2px 5px; border-radius: var(--r-sm);
}
.dep-del-btn:hover { color: var(--danger); background: var(--danger-soft); }
.dep-add-row { margin-top: 2px; }
.dep-add-btn {
  background: none; border: none; cursor: pointer; font-size: 13px;
  color: var(--text-muted); padding: 4px 0; opacity: .75;
}
.dep-add-btn:hover { opacity: 1; text-decoration: underline; }
.dep-warn-banner {
  background: var(--warning-soft, #fff8e1); color: var(--warning, #f57c00);
  border: 1px solid var(--warning, #f57c00); border-radius: var(--r-md);
  font-size: 12.5px; padding: 8px 12px; margin-bottom: 8px;
}

/* ============================================================
   메인 표뷰 키보드 내비게이션 포커스 표시 (handleTableKeyNav)
   ============================================================ */
.ops-tbl .mon-row { outline: none; }
.ops-tbl .mon-row:focus-visible { box-shadow: inset 3px 0 0 var(--primary); background: var(--primary-soft, #E8EEFF); }
.ops-tbl .ot-cell[tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
.ops-tbl .ot-title-text[tabindex]:focus-visible,
.ops-tbl .cl-chevron[tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: 4px; }

/* ============================================================
   메일함 — 행(데스크톱) / 카드(모바일) — Gmail 받은편지함 스타일
   ============================================================ */

/* 리스트 래퍼 — Gmail 흰 배경 + 얇은 테두리 */
.mail-list {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* 안 읽음 배지 (헤더 h1 인라인) */
.mail-unread-badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary);
  margin-left: 10px; vertical-align: middle;
}

/* ── 데스크톱 행 — Gmail 고밀도 한 줄 ── */
.mail-row {
  display: flex; align-items: center; gap: 0;
  padding: 0 16px; height: 50px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s, box-shadow .1s;
}
.mail-row:last-child { border-bottom: none; }
.mail-row:hover {
  background: var(--surface-3);
}

/* 별표 — Gmail 좌측 시각 아이콘 */
.mail-row__star {
  flex: 0 0 auto; width: 36px; display: flex; align-items: center; justify-content: center;
}
.mail-star { display: flex; align-items: center; color: var(--text-faint); }
.mail-star .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* 아바타 */
.mail-row__avatar { flex: 0 0 auto; margin-right: 14px; }

/* 발신자 — 고정폭, 안읽음 굵게 */
.mail-row__sender {
  flex: 0 0 180px; min-width: 0;
  font-size: 14px; font-weight: 400; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 12px;
}
.mail-row.mail-unread .mail-row__sender {
  font-weight: 700; color: var(--text-strong);
}

/* 제목 + snippet 인라인 한 줄 — Gmail 핵심 */
.mail-row__inline {
  flex: 1; min-width: 0;
  overflow: hidden;
  display: flex; align-items: baseline; gap: 0;
}
.mail-row__subject {
  font-size: 14px; font-weight: 400; color: var(--text);
  flex: 0 0 auto; max-width: 50%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-row.mail-unread .mail-row__subject {
  font-weight: 700; color: var(--text-strong);
}
.mail-row__snippet {
  font-size: 14px; color: var(--text-faint); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 0; min-width: 0;
}

/* 수신 계정 칩 — 날짜 앞 */
.mail-row__chips {
  flex: 0 0 auto; margin: 0 12px; max-width: 180px;
  overflow: hidden;
}

/* 날짜 */
.mail-row__time {
  flex: 0 0 72px; text-align: right;
  font-size: 12px; color: var(--text-faint); font-weight: 400;
  white-space: nowrap;
}
.mail-row.mail-unread .mail-row__time {
  font-weight: 700; color: var(--text);
}

/* 안 읽음 행 — Gmail 흰 배경(읽음은 살짝 회색) */
.mail-row { background: var(--surface-2); }
.mail-row.mail-unread { background: var(--surface); }
.mail-row.mail-unread:hover { background: var(--surface-2); }

/* 수신 계정 칩 공용 — 행/카드 공통 */
.mail-account-chip {
  display: inline-block;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  background: var(--surface-3); border: 1px solid var(--border);
  white-space: nowrap; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; line-height: 1.6;
}

/* ── 모바일 카드 리스트 — Gmail 모바일 앱 스타일 ── */
.mail-list-mobile {
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mail-card {
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding: 14px 16px; cursor: pointer; transition: background .1s;
}
.mail-card:last-child { border-bottom: none; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.mail-card:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.mail-card:hover { background: var(--surface-3); }

/* 안 읽음 카드 — Gmail처럼 흰 배경 + 굵은 텍스트 */
.mail-card.mail-unread {
  background: var(--surface);
  border-left: 3px solid var(--primary);
}
.mail-card.mail-unread:hover { background: var(--primary-softer); }

.mail-card__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.mail-card__avatar { flex: 0 0 auto; }

.mail-card__sender {
  flex: 1; font-size: 14px; font-weight: 400; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-card.mail-unread .mail-card__sender { font-weight: 700; color: var(--text-strong); }

.mail-card__time {
  flex: 0 0 auto; font-size: 12px; color: var(--text-faint); font-weight: 400; white-space: nowrap;
}
.mail-card.mail-unread .mail-card__time { font-weight: 700; color: var(--text); }

.mail-card__subject {
  font-size: 14px; font-weight: 400; color: var(--text);
  margin-bottom: 3px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-card.mail-unread .mail-card__subject { font-weight: 700; color: var(--text-strong); }

.mail-card__snippet {
  font-size: 13px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 6px;
}
.mail-card.mail-unread .mail-card__snippet { color: var(--text-muted); }

.mail-card__footer {
  margin-top: 4px;
}
.mail-card.mail-unread .mail-card__snippet { color: var(--text-muted); }

/* 계정 필터 탭 — 메일함 상단 가로 탭/칩 */
.mail-filter-tabs {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.mail-filter-tabs::-webkit-scrollbar { display: none; }

.mail-tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 4px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  color: var(--text-muted); background: var(--surface-3);
  border: 1px solid var(--border); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.mail-tab:hover { background: var(--surface-2); color: var(--text); }
.mail-tab--active {
  font-weight: 600;
  /* 인라인 style로 account별 고유색 덮어씀 — 전체 탭은 primary 색 사용 */
}
/* '전체' 탭 활성 — primary 색 (인라인 style 없으므로 CSS로 처리) */
.mail-tab--active:not([data-acct=""]):not([style]) { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft); }
.mail-tab[data-acct=""].mail-tab--active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft); }

/* 에드워드 탭 활성 — 앰버 톤 */
.mail-tab--edwards.mail-tab--active { background: #FFF0D9; color: #B45309; border-color: #FFF0D9; }

/* 에드워드 배지 — 메일 행·카드의 에드워드 자동수집 표시 */
.mail-edwards-badge {
  display: inline-block;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
  background: #FFF0D9; color: #B45309; border: 1px solid #F5C869;
  white-space: nowrap; vertical-align: middle; line-height: 1.6;
  margin-right: 4px; cursor: default;
}

/* 메일 상세 보기 — snippet 영역 */
.mail-detail-snippet {
  font-size: 14px; color: var(--text); line-height: 1.65;
  padding: 12px; background: var(--surface-2);
  border-radius: var(--r); border: 1px solid var(--border);
  white-space: pre-wrap; word-break: break-word;
}
.mail-detail-body-notice {
  margin-top: 8px; font-size: 12px; color: var(--text-faint);
  font-style: italic;
}

/* 메일 행 — 클릭 커서 */
.mail-row { cursor: pointer; }
.mail-card { cursor: pointer; }

/* ============================================================
   홈 메인 화면 전용 — 명함 시안과 동일한 파스텔 오로라 배경
   body.home-bg 일 때만 활성. 다른 메뉴에는 절대 적용 안 됨.
   ============================================================ */
body.home-bg::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* 명함 시안과 동일 구조: 색 덩어리를 화면 코너 바깥에 두어 가장자리만 은은히 물들이고
     가운데(입력창 주변)는 흰 배경을 그대로 남긴다. */
  mix-blend-mode: multiply;
  background:
    radial-gradient(56vw 50vw at -4% -8%,  rgba(124,58,237,.26), transparent 72%),
    radial-gradient(54vw 48vw at 104% -6%, rgba(229,50,138,.22), transparent 72%),
    radial-gradient(52vw 48vw at -4% 106%, rgba(255,122,26,.16), transparent 72%),
    radial-gradient(54vw 50vw at 104% 106%, rgba(45,91,255,.20), transparent 72%);
  filter: blur(60px);
  animation: homeAurora 26s ease-in-out infinite alternate;
}
@keyframes homeAurora {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(2.5vw,2vw,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body.home-bg::before { animation: none; }
}

/* ============================================================
   자동화 스튜디오 카탈로그 — 컬러 원형 아이콘 + 카드 그리드.
   기존 토큰(--surface·--border·--r-*·--shadow-*·--av-*)만 재사용.
   ============================================================ */

/* 카탈로그 헤더 — 제목과 안내 한 줄. */
.studio-index-head { margin-bottom: 22px; }
.studio-index-head h2 { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; letter-spacing: -0.4px; color: var(--text-strong); }
.studio-index-head h2 .ic { width: 22px; height: 22px; color: var(--ai); }
.studio-index-sub { margin-top: 5px; font-size: 13.5px; color: var(--text-muted); }

/* 카테고리 섹션 — 점 + 이름 + 개수로 그룹감 강조. */
.studio-category { margin-bottom: 26px; }
.studio-category-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.studio-category-count { font-size: 12px; font-weight: 700; color: var(--text-faint); background: var(--surface-3); border-radius: var(--r-pill); padding: 1px 8px; }
/* 카테고리 색 점 — 원형 아이콘 tint와 동일 색으로 묶음감. */
.studio-category-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* 카드 그리드 — 데스크톱 다열, 모바일 1열로 자동 접힘. */
.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.only-mobile .studio-grid { grid-template-columns: 1fr; }

/* 도구 카드 — surface 박스 + 옅은 그림자, hover 시 살짝 떠오름. */
.studio-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs); text-decoration: none; cursor: pointer;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.studio-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-2); }
.studio-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 컬러 원형 아이콘 — 카테고리 tint(t1~t4) 배경 + 진한 동색 아이콘. */
.studio-card-icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; }
.studio-card-icon .ic { width: 22px; height: 22px; }
.studio-card-icon.t1 { background: var(--av-1); color: var(--av-1t); }
.studio-card-icon.t2 { background: var(--av-2); color: var(--av-2t); }
.studio-card-icon.t3 { background: var(--av-3); color: var(--av-3t); }
.studio-card-icon.t4 { background: var(--av-4); color: var(--av-4t); }
.studio-category-dot.t1 { background: var(--av-1t); }
.studio-category-dot.t2 { background: var(--av-2t); }
.studio-category-dot.t3 { background: var(--av-3t); }
.studio-category-dot.t4 { background: var(--av-4t); }

/* 카드 본문 — 이름·칩 행과 설명. */
.studio-card-body { flex: 1 1 auto; min-width: 0; }
.studio-card-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.2px; }
.studio-card-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

/* AI 배지 칩 — 도구명과 분리된 ai 톤 pill. */
.studio-ai-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--ai); background: var(--ai-soft); border-radius: var(--r-pill); padding: 2px 7px; }

/* 준비 중 상태 배지 — muted pill, chevron 자리에서 우측 세로 가운데 정렬. */
.studio-card-status { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-pill); padding: 2px 7px; }

/* chevron — 우측 이동 힌트. */
.studio-card-chev { flex: 0 0 auto; align-self: center; color: var(--text-faint); transition: transform .16s ease, color .16s ease; }
.studio-card-chev .ic { width: 18px; height: 18px; }
.studio-card:hover .studio-card-chev { color: var(--text-muted); transform: translateX(2px); }

/* 준비 중 카드 — 전체 톤 다운, 아이콘 채도 낮춤. */
.studio-card.is-soon { background: var(--surface-2); }
.studio-card.is-soon .studio-card-icon { filter: grayscale(.35); opacity: .8; }

/* ============================================================
   Phase 1 모바일 재설계 — 5탭 FAB·모바일 내업무 심플화·홈·피드
   @media (max-width: 768px) 에서만 적용.
   ============================================================ */

/* ── 하단탭 FAB (가운데 ➕) ── */
@media (max-width: 768px) {
  .bottomnav .fab-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px; }
  .bottomnav .fab {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff; display: grid; place-items: center;
    box-shadow: 0 8px 20px rgba(45,91,255,.40); border: 4px solid var(--bg);
    cursor: pointer;
  }
  .bottomnav .fab .ic { width: 26px; height: 26px; }
  .bottomnav .ftab-lbl { font-size: 11px; font-weight: 600; color: var(--text-faint); margin-top: 36px; }
}

/* ── 데스크톱 내업무 today-hero (공통 베이스) ── */
.today-hero {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 12px; padding: 16px 20px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: #fff; box-shadow: var(--shadow-md);
}
.today-hero-lbl { font-size: 13px; font-weight: 600; opacity: .85; margin-bottom: 4px; }
.today-hero-main { flex: 1; }
.today-hero-big { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.today-hero-big b { font-size: 30px; }
.today-hero-sub { margin-top: 6px; font-size: 13px; font-weight: 600; opacity: .9; display: flex; gap: 8px; flex-wrap: wrap; }
/* 칩 안에서 글자가 쪼개지면 '오늘 마 / 감 2'가 된다 — 줄바꿈은 행이 하고 칩은 안 한다(412px 실측). */
.today-hero-sub span { background: rgba(255,255,255,.18); padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
/* "오늘" 버튼 — 데스크톱 hero 우측에만 표시. */
.hero-today-btn {
  flex-shrink: 0; margin-left: 16px;
  background: rgba(255,255,255,.22); color: #fff; border: 1.5px solid rgba(255,255,255,.45);
  font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: var(--r-pill);
  cursor: pointer; transition: background .15s;
}
.hero-today-btn:hover { background: rgba(255,255,255,.38); }
/* 켜짐 — 오늘까지 마감 필터가 걸린 상태. 히어로 위라 흰색 채움으로 대비를 준다. */
.hero-today-btn.is-on { background: #fff; color: var(--primary-strong); border-color: #fff; }

/* ── 모바일 내업무 today-hero ── */
@media (max-width: 768px) {
  .today-hero {
    margin: 6px 0 14px; padding: 18px 20px; border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff; box-shadow: var(--shadow-md);
  }
  .today-hero-lbl { font-size: 13px; font-weight: 600; opacity: .85; margin-bottom: 4px; }
  .today-hero-big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
  .today-hero-big b { font-size: 36px; }
  .today-hero-sub { margin-top: 8px; font-size: 13px; font-weight: 600; opacity: .9; display: flex; gap: 8px; }
  .today-hero-sub span { background: rgba(255,255,255,.18); padding: 3px 9px; border-radius: var(--r-pill); }

  /* 접힌 검색·필터 바 */
  .mine-collapse-bar {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    background: var(--surface); border-radius: var(--r-pill); padding: 9px 14px;
    box-shadow: var(--shadow-xs); color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .mine-collapse-grow { flex: 1; }
  .mine-collapse-chev { color: var(--text-faint); transition: transform .2s; }
  .mine-collapse-bar[aria-expanded="true"] .mine-collapse-chev { transform: rotate(180deg); }
  .mine-filter-panel { margin-bottom: 14px; }

  .sec-label { font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 4px 4px 10px; }

  /* 큰 업무 카드 */
  .mine-task-card {
    background: var(--surface); border-radius: var(--r-lg); padding: 16px;
    box-shadow: var(--shadow-sm); margin-bottom: 12px; cursor: pointer;
  }
  .mine-tc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .mine-tc-grow { flex: 1; }
  .mine-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); }
  .mine-badge.wait { background: var(--surface-3); color: var(--text-muted); }
  .mine-badge.run  { background: var(--info-soft);    color: var(--info); }
  .mine-badge.done { background: var(--success-soft); color: var(--success); }
  .mine-badge.hold { background: var(--warning-soft); color: var(--warning); }
  .mine-pri-dot { width: 8px; height: 8px; border-radius: 50%; }
  .mine-pri-dot.high { background: var(--danger); }
  .mine-due-chip { font-size: 12px; font-weight: 700; color: var(--danger); background: var(--danger-soft); padding: 4px 10px; border-radius: var(--r-pill); }
  .mine-due-chip.soft { color: var(--text-muted); background: var(--surface-2); }
  .mine-tc-title { font-size: 17px; font-weight: 700; color: var(--text-strong); line-height: 1.35; letter-spacing: -.01em; }
  .mine-tc-meta { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
  .mine-av-sm { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
  .mine-av-sm.a1 { background: var(--av-1); color: var(--av-1t); }
  .mine-av-sm.a2 { background: var(--av-2); color: var(--av-2t); }
  .mine-who { font-size: 13px; font-weight: 600; color: var(--text-muted); }
  .mine-subtask-fold {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
    min-height: var(--touch-min);
  }
  .mine-subtask-prog { margin-left: auto; font-weight: 700; color: var(--primary); }

  /* 카드 내 빠른 완료/보류 버튼 */
  .mine-card-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
  .mine-act-btn {
    flex: 1; padding: 8px; border-radius: var(--r-md); font-size: 13px; font-weight: 700; border: none; cursor: pointer;
    min-height: var(--touch-min);
  }
  .mine-act-btn.done { background: var(--success-soft); color: var(--success); }
  .mine-act-btn.hold { background: var(--warning-soft); color: var(--warning); }
  .mine-act-btn.run { background: var(--primary-soft); color: var(--primary); }
  .mine-act-btn.reopen { background: var(--surface-2); color: var(--text-muted); }
  .mine-act-btn[disabled] { background: var(--surface-2); color: var(--text-muted); opacity: .6; cursor: default; }

  .mine-empty-wrap { padding: 32px 0; }
}

/* ── 모바일 홈 ── */
@media (max-width: 768px) {
  .home-greet-m { margin: 8px 0 4px; }
  .home-hi { font-size: 15px; color: var(--text-muted); font-weight: 600; }
  .home-name-m { font-size: 26px; font-weight: 800; color: var(--text-strong); letter-spacing: -.02em; }

  .home-focus {
    background: var(--surface); border-radius: var(--r-lg); padding: 18px;
    box-shadow: var(--shadow-sm); margin: 14px 0 16px; display: flex; align-items: center; gap: 14px;
  }
  .home-focus-ring {
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: conic-gradient(var(--primary) var(--ring-pct, 0%), var(--surface-3) 0); position: relative;
  }
  .home-focus-ring::after { content: ""; position: absolute; inset: 6px; background: var(--surface); border-radius: 50%; }
  .home-focus-ring b { position: relative; z-index: 1; font-size: 15px; font-weight: 800; color: var(--text-strong); }
  .home-focus-text { flex: 1; }
  .home-focus-text b { display: block; font-size: 17px; font-weight: 800; color: var(--text-strong); margin-bottom: 2px; }
  .home-focus-sub { font-size: 14px; font-weight: 600; color: var(--text-muted); }

  .home-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
  .home-quick-tile {
    background: var(--surface); border-radius: var(--r-md); padding: 16px 14px;
    box-shadow: var(--shadow-xs); cursor: pointer; min-height: var(--touch-min);
  }
  .home-quick-tile:hover { background: var(--surface-2); }
  .home-qi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; }
  .home-qi .ic { width: 22px; height: 22px; }
  .home-qi.blue   { background: var(--primary-soft);  color: var(--primary); }
  .home-qi.green  { background: var(--success-soft);  color: var(--success); }
  .home-qi.amber  { background: var(--warning-soft);  color: var(--warning); }
  .home-qi.purple { background: var(--av-4);          color: var(--av-4t); }
  .home-qt-lbl { font-size: 15px; font-weight: 700; color: var(--text-strong); }
  .home-qt-cnt { font-size: 12px; font-weight: 600; color: var(--text-faint); margin-top: 2px; }
}

/* ── 소통 피드 ── */
@media (max-width: 768px) {
  .feed-list { padding-top: 4px; }
  .feed-item {
    background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px;
    box-shadow: var(--shadow-xs); margin-bottom: 12px; display: flex; gap: 12px;
  }
  .feed-body { flex: 1; min-width: 0; }
  .feed-ft { font-size: 14px; line-height: 1.5; color: var(--text); }
  .feed-ft b { color: var(--text-strong); font-weight: 700; }
  .feed-ev { font-weight: 700; }
  .feed-ev.done { color: var(--success); }
  .feed-ev.req  { color: var(--primary); }
  .feed-ev.hold { color: var(--warning); }
  .feed-time { font-size: 12px; color: var(--text-faint); margin-top: 5px; font-weight: 600; }
  .feed-ph-placeholder {
    height: 150px; background: linear-gradient(135deg, #C8D2E8, #9FB0D0);
    display: flex; align-items: flex-end; padding: 10px; border-radius: var(--r-md) var(--r-md) 0 0;
  }
  .feed-ph-tag { background: rgba(17,21,30,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill); }
  .feed-photo { margin-top: 10px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
  .feed-cap { padding: 10px 12px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
  .feed-react { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--text-faint); }
  .feed-react span { display: flex; align-items: center; gap: 4px; }
  /* 피드 항목 안읽음/읽음 상태 강조 — Phase 2 모바일 */
  .feed-item--unread .feed-ft { font-weight: 700; color: var(--text-strong); }
  .feed-item--unread { border-left: 3px solid var(--primary); padding-left: 13px; }
  .feed-item--read .feed-ft { color: var(--text-muted); }
  .feed-item--read .feed-ft b { color: var(--text-muted); }
  .feed-item--read { opacity: 0.7; }
  .feed-soon-note {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted);
    background: var(--primary-softer); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px;
  }
}

/* 피드 — 데스크톱에서도 기본 스타일 적용 */
.feed-list { padding-top: 4px; }
.feed-item {
  background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px;
  box-shadow: var(--shadow-xs); margin-bottom: 12px; display: flex; gap: 12px;
}
.feed-body { flex: 1; min-width: 0; }
.feed-ft { font-size: 14px; line-height: 1.5; color: var(--text); }
.feed-ft b { color: var(--text-strong); font-weight: 700; }
.feed-ev { font-weight: 700; }
.feed-ev.done { color: var(--success); }
.feed-ev.req  { color: var(--primary); }
.feed-ev.hold { color: var(--warning); }
.feed-time { font-size: 12px; color: var(--text-faint); margin-top: 5px; font-weight: 600; }
.feed-soon-note {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: var(--primary-softer); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px;
}
.feed-react { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--text-faint); }
.feed-react span { display: flex; align-items: center; gap: 4px; }

/* 피드 항목 안읽음/읽음 상태 강조 — Phase 2 */
.feed-item--unread .feed-ft { font-weight: 700; color: var(--text-strong); }
.feed-item--unread { border-left: 3px solid var(--primary); padding-left: 13px; }
.feed-item--read .feed-ft { color: var(--text-muted); }
.feed-item--read .feed-ft b { color: var(--text-muted); }
.feed-item--read { opacity: 0.7; }

/* av-sm (피드·댓글 아바타) — 기존 .avatar보다 작은 28px 원형 */
.av-sm { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.av-sm.a1 { background: var(--av-1); color: var(--av-1t); }
.av-sm.a2 { background: var(--av-2); color: var(--av-2t); }
.av-sm.a3 { background: var(--av-3); color: var(--av-3t); }
.studio-card.is-soon .studio-card-name { color: var(--text); }

/* ── 모바일 업무상세 댓글 입력창 하단 고정 ── */
@media (max-width: 768px) {
  /* 드로어(sheet)가 full-height로 열릴 때 댓글 입력창을 화면 하단에 고정 */
  .drawer .cmt-input-wrap {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding: 10px 0 env(safe-area-inset-bottom, 10px);
    border-top: 1px solid var(--border);
    margin-top: 8px;
    z-index: 1;
  }
  /* 멘션 드롭다운이 입력창 위로 올라오도록 z-index 보강 */
  .drawer .cmt-mention-list {
    z-index: 20;
  }
  /* iOS Safari 자동확대 방지 — textarea 포커스 시 16px 미만이면 확대됨 */
  .cmt-input { font-size: 16px; }
  /* iOS 자동확대 방지 — 나머지 입력칸 전수 16px(데스크톱 시각 무변경) */
  .search-input input,
  .search-input-d input,
  .toolbar-text-group .search-input-d input,
  .ai-composer-input,
  .svpop-input,
  #nr-cl-input,
  .inline-input { font-size: 16px; }
  /* 댓글 목록이 입력창에 가리지 않도록 아래 여백 */
  .drawer #cmt-list-wrapper,
  .drawer .cmt-list {
    padding-bottom: 8px;
  }
  /* 소통 피드 아이템 터치 피드백 */
  .feed-item[data-action="feed-open-task"]:active {
    opacity: 0.75;
  }
}

/* ===== 미래의 코그 모습(future) — 웹툰 스토리보드 ===== */
.fut-wrap{ max-width:1040px; margin:0 auto; padding:0 clamp(16px,3vw,40px) clamp(48px,8vh,96px); }

.fut-header{
  position:relative; text-align:center; color:#fff; overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(56px,11vh,120px) 24px clamp(48px,9vh,96px);
  margin-bottom:clamp(40px,6vh,72px);
  background:
    radial-gradient(120% 140% at 15% 0%, #7C3AED 0%, transparent 55%),
    radial-gradient(120% 140% at 85% 100%, var(--primary) 0%, transparent 55%),
    linear-gradient(135deg, #1E1B4B 0%, #1E3A5F 100%);
}
.fut-header-chip{ display:inline-flex; align-items:center; gap:6px; font-size:clamp(12px,1.3vw,14px);
  font-weight:700; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-pill); padding:6px 14px; margin-bottom:18px; backdrop-filter:blur(4px); }
.fut-header-title{ font-size:clamp(30px,5vw,54px); font-weight:900; letter-spacing:-.03em; margin-bottom:10px; }
.fut-header-sub{ font-size:clamp(15px,1.8vw,21px); opacity:.92; font-weight:500; }
.fut-hero{ display:block; width:100%; max-width:680px; margin:28px auto 0; border-radius:16px; box-shadow:0 14px 44px rgba(0,0,0,.32); }

.fut-ep{ border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
  margin-bottom:clamp(40px,6vh,72px); box-shadow:var(--shadow-md);
  transition:transform .15s ease, box-shadow .15s ease; }
.fut-ep:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }

.fut-ep-head{ display:flex; align-items:flex-start; gap:clamp(12px,2vw,18px);
  padding:clamp(20px,3vw,30px); color:#fff; }
.fut-ep-badge{ flex:0 0 auto; width:clamp(48px,6vw,56px); height:clamp(48px,6vw,56px);
  border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:clamp(14px,1.6vw,17px);
  background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.5); }
.fut-ep-headtext{ min-width:0; }
.fut-ep-no{ font-size:11px; font-weight:800; letter-spacing:.08em; opacity:.82; text-transform:uppercase; }
.fut-ep-title{ font-size:clamp(18px,2.2vw,26px); font-weight:800; margin:3px 0 6px; line-height:1.25; }
.fut-ep-hook{ font-size:clamp(14px,1.6vw,17px); opacity:.92; font-style:italic; line-height:1.5; }

.fut-panels{ background:var(--surface); display:grid; gap:clamp(14px,1.8vw,20px);
  padding:clamp(18px,2.5vw,28px); }
.fut-panels-2{ grid-template-columns:1fr 1fr; }
.fut-panels-1{ grid-template-columns:1fr; }
@media(max-width:768px){ .fut-panels-2{ grid-template-columns:1fr; } }

.fut-panel{ background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-md);
  padding:clamp(12px,1.6vw,16px); display:flex; flex-direction:column; gap:8px; }
.fut-cut{ margin:calc(-1*clamp(12px,1.6vw,16px)) calc(-1*clamp(12px,1.6vw,16px)) 4px;
  border-bottom:1px solid var(--border-2); overflow:hidden;
  border-radius:var(--r-md) var(--r-md) 0 0; background:var(--surface-3); }
.fut-cut-img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.fut-scene{ font-size:clamp(12px,1.3vw,13.5px); color:var(--text-muted); background:var(--surface-3);
  border-radius:var(--r-sm); padding:5px 9px; line-height:1.45; }

.fut-bubble{ border-radius:var(--r-md); padding:10px 13px; font-size:clamp(14px,1.5vw,16px);
  line-height:1.6; border:1.5px solid; }
.fut-bubble-who{ font-size:12px; font-weight:700; margin-bottom:3px; display:flex; align-items:center; gap:5px; }
.fut-bubble-who .fut-emoji{ font-size:16px; }
.fut-bubble-text{ color:var(--text-strong); }

.fut-think{ border:1.5px dashed var(--border-2); border-radius:var(--r-md); padding:9px 13px;
  background:var(--surface-2); font-size:clamp(13px,1.3vw,14px); color:var(--text-muted);
  font-style:italic; line-height:1.5; }
.fut-sfx{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:800;
  background:linear-gradient(90deg,#FCEFD7,#FAD98A); color:var(--warning); border-radius:var(--r-sm);
  padding:3px 10px; letter-spacing:.03em; align-self:flex-start; }
.fut-caption{ font-size:clamp(13px,1.4vw,15px); color:var(--text); border-left:3px solid var(--primary);
  padding:5px 12px; background:var(--surface-2); border-radius:0 var(--r-sm) var(--r-sm) 0; line-height:1.6; font-style:italic; }

.fut-ep-footer{ padding:clamp(12px,1.8vw,16px) clamp(18px,2.5vw,28px);
  background:var(--primary-softer); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:5px; }
.fut-wow{ font-size:clamp(13px,1.4vw,15px); color:var(--primary-strong); font-weight:700; }
.fut-tech{ font-size:clamp(12px,1.2vw,13px); color:var(--text-muted); }

/* 엔딩 로드맵 */
.fut-ending{ background:linear-gradient(135deg,#1E1B4B 0%,#1E3A5F 100%); border-radius:var(--r-xl);
  padding:clamp(36px,6vh,72px) clamp(24px,4vw,56px); color:#fff; }
.fut-ending-title{ font-size:clamp(20px,2.8vw,32px); font-weight:900; margin-bottom:24px; line-height:1.4; text-align:center; }
.fut-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.5vw,16px); margin-bottom:26px; }
.fut-step{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); padding:clamp(12px,1.6vw,18px) clamp(10px,1.4vw,14px); }
.fut-step.is-now{ border-color:rgba(165,243,252,.6); box-shadow:0 0 0 1px rgba(165,243,252,.4); }
.fut-step-gauge{ height:6px; border-radius:var(--r-pill); background:rgba(255,255,255,.15); overflow:hidden; margin:8px 0; }
.fut-step-gauge > i{ display:block; height:100%; border-radius:var(--r-pill); }
/* CTA */
.fut-cta-btn{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#1E45E6;
  font-size:clamp(15px,1.6vw,18px); font-weight:700; border-radius:var(--r-md);
  padding:13px 26px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.fut-cta-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

@media(max-width:640px){ .fut-steps{ grid-template-columns:repeat(2,1fr); } }
@media(prefers-reduced-motion: reduce){
  .fut-ep:hover, .fut-cta-btn:hover{ transform:none; }
}

/* ── 회의록 — 히어로 빈상태 ───────────────────────────────────────── */
/* 기존 .empty-state 위에 --hero 변형만 덧씌운다. */
.empty-state--hero {
  padding: 80px 24px;
  gap: 12px;
}
.empty-state--hero__icon {
  width: 48px; height: 48px;
  color: var(--primary);
  box-sizing: content-box;
  padding: 20px;
  background: var(--primary-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.empty-state--hero__icon .ic {
  width: 48px; height: 48px;
}
.empty-state--hero__title {
  font-size: 20px; font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -.01em;
}
.empty-state--hero__desc {
  font-size: 14px; color: var(--text-faint);
  line-height: 1.6; margin: 0;
  max-width: 340px;
}
.empty-state--hero .btn-lg {
  margin-top: 8px;
  padding: 12px 28px;
  font-size: 15px;
}

/* ── 회의록 — 검색+필터바 ─────────────────────────────────────────── */
.meeting-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.meeting-filter-row__search {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 360px;
  display: flex;
  align-items: center;
}
.meeting-filter-row__search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-faint);
  pointer-events: none;
  display: flex; align-items: center;
}
.meeting-filter-row__search-icon .ic {
  width: 15px; height: 15px;
}
.meeting-filter-row__search .inline-input {
  width: 100%;
  padding-left: 32px;
}
@media (max-width: 480px) {
  .meeting-filter-row { flex-direction: row; }
  .meeting-filter-row__search { max-width: 100%; flex: 1 1 auto; }
}

/* ── 회의록 — 요약 본문 문서 톤 ───────────────────────────────────── */
.meeting-summary-body {
  background: var(--surface, #fafafa);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  padding: 16px 18px;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.7;
}

/* ── 회의록 — 핵심 결정 콜아웃 ───────────────────────────────────── */
.mt-callout {
  border-left: 3px solid var(--primary, #2D5BFF);
  background: var(--surface-2, #F6F8FB);
  border-radius: 8px;
  padding: 12px 16px;
}

/* ═══════════════════════════════════════════════════════════
   종합상황실 (situation room) — 대시보드·칸반·타임라인·그룹별
   ═══════════════════════════════════════════════════════════ */
.sit-root { max-width: var(--content-max); }
.sit-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sit-act-btn { padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sit-act-btn:hover { background: var(--surface-2); }
.sit-act-btn.sit-reset { color: var(--text-muted); }

/* 탭 */
.sit-tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 4px; margin: 4px 0 18px; }
.sit-tab { padding: 8px 18px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--text-muted);
  background: transparent; border: none; cursor: pointer; white-space: nowrap; }
.sit-tab:hover { color: var(--text); }
.sit-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }

.sit-empty { padding: 48px 0; text-align: center; color: var(--text-faint); font-size: 15px; }
.sit-empty-sm { color: var(--text-faint); font-size: 13px; list-style: none; padding: 8px 0; }
.sit-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* ── KPI ── */
.sit-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.sit-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 16px; box-shadow: var(--shadow-xs); }
.sit-kpi-val { font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sit-kpi-label { margin-top: 8px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.sit-kpi-sub { margin-top: 2px; font-size: 12px; color: var(--text-faint); }

/* ── 대시보드 그리드 ── */
.sit-dash-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.sit-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-xs); }
.sit-card-wide { grid-row: span 2; }
.sit-card-h { font-size: 14px; font-weight: 800; color: var(--text-strong); margin-bottom: 14px; }

.sit-donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sit-donut-total { font-size: 30px; font-weight: 800; fill: var(--text-strong); }
.sit-donut-sub { font-size: 11px; fill: var(--text-faint); }
.sit-legend { display: flex; flex-direction: column; gap: 8px; }
.sit-lg-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.sit-lg-item b { font-variant-numeric: tabular-nums; }
.sit-lg-pct { color: var(--text-faint); font-size: 12px; }

/* 그룹별 진행률 */
.sit-grow-list { display: flex; flex-direction: column; gap: 11px; }
.sit-grow-row { display: grid; grid-template-columns: 180px 1fr 44px; align-items: center; gap: 10px; }
.sit-grow-label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.sit-grow-emoji { font-size: 14px; }
.sit-grow-n { margin-left: auto; color: var(--text-faint); font-size: 12px; font-weight: 700; }
.sit-grow-bar { height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; display: flex; }
.sit-grow-bar span { height: 100%; }
.sit-grow-done { font-size: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.sit-hl-list { display: flex; flex-direction: column; gap: 9px; }
.sit-hl-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sit-hl-title { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-hl-date { color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── 칸반 ── */
.sit-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.sit-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; }
.sit-col-h { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--text-strong); padding: 6px 6px 10px; }
.sit-col-dot { width: 8px; height: 8px; border-radius: 50%; }
.sit-col-n { color: var(--text-faint); font-weight: 700; font-size: 13px; }
.sit-col-add { margin-left: auto; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; }
.sit-col-add:hover { background: var(--primary-soft); color: var(--primary); }
.sit-col-body { display: flex; flex-direction: column; gap: 9px; min-height: 60px; border-radius: var(--r-md); padding: 2px; transition: background .12s; }
.sit-col-body.sit-over { background: var(--primary-softer); outline: 2px dashed var(--primary); outline-offset: -2px; }
.sit-col-empty { color: var(--text-faint); font-size: 12px; text-align: center; padding: 18px 0; }

.sit-pcard { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--g); border-radius: var(--r-md);
  padding: 12px; box-shadow: var(--shadow-xs); cursor: grab; }
.sit-pcard:hover { box-shadow: var(--shadow-sm); }
.sit-pcard.sit-dragging { opacity: .5; cursor: grabbing; }
.sit-pcard-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.sit-chip-g { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sit-note-btn { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 12px; opacity: .55; padding: 0 2px; }
.sit-note-btn:hover { opacity: 1; }
.sit-pcard-title { font-size: 13.5px; font-weight: 700; color: var(--text-strong); line-height: 1.35; }
.sit-pcard-sum { margin-top: 4px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.sit-card-note { margin-top: 7px; font-size: 12px; color: var(--text); background: var(--warning-soft); border-radius: 7px; padding: 5px 8px; }
.sit-pcard-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.sit-owner { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.sit-ms-count { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 700; }

/* ── 타임라인 (간트) ── */
.sit-tl-outer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-xs); }
.sit-tl-scroll { overflow-x: auto; }
.sit-tl-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 8px; }
.sit-tl-head-spacer { width: 200px; flex: 0 0 200px; }
.sit-tl-head-track { flex: 1; display: flex; min-width: 480px; }
.sit-tl-wk { flex: 1; font-size: 11px; color: var(--text-faint); text-align: left; font-variant-numeric: tabular-nums; border-left: 1px dashed var(--border); padding-left: 4px; }
.sit-tl-group { margin-top: 6px; }
.sit-tl-ghead { font-size: 12.5px; font-weight: 800; color: var(--text-strong); display: flex; align-items: center; gap: 6px; padding: 8px 0 4px; }
.sit-tl-row { display: flex; align-items: center; min-height: 26px; }
.sit-tl-label { width: 200px; flex: 0 0 200px; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.sit-tl-track { flex: 1; position: relative; height: 20px; min-width: 480px; border-left: 1px dashed var(--border); }
.sit-tl-bar { position: absolute; top: 2px; height: 16px; border-radius: 5px; min-width: 4px; opacity: .92; display: flex; align-items: center; overflow: hidden; }
.sit-tl-bar-txt { font-size: 10px; color: #fff; padding: 0 6px; white-space: nowrap; font-weight: 600; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.sit-tl-open { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 5px, transparent 5px 10px); }
.sit-tl-undated { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.sit-undated-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ── 그룹별 ── */
.sit-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.sit-gcard { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--g); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-xs); }
.sit-gcard-h { display: flex; align-items: center; gap: 8px; }
.sit-gcard-emoji { font-size: 18px; }
.sit-gcard-name { font-size: 15px; font-weight: 800; color: var(--text-strong); }
.sit-gcard-pct { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--g); font-variant-numeric: tabular-nums; }
.sit-gcard-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin: 10px 0 6px; }
.sit-gcard-bar span { display: block; height: 100%; }
.sit-gcard-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.sit-gp-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.sit-gp-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.sit-gp-badge { flex: 0 0 auto; font-size: 11px; padding: 2px 8px; }
.sit-gp-title { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-gp-owner { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* ── 반응형 ── */
@media (max-width: 900px) {
  .sit-kpis { grid-template-columns: repeat(2, 1fr); }
  .sit-dash-grid { grid-template-columns: 1fr; }
  .sit-card-wide { grid-row: auto; }
  .sit-kanban { grid-template-columns: 1fr; }
  .sit-grow-row { grid-template-columns: 130px 1fr 40px; }
  .sit-tl-head-spacer, .sit-tl-label { width: 130px; flex-basis: 130px; }
}

/* ── 종합상황실 v2 — 검색·필터 툴바 + 상세 드로어 ── */
.sit-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.sit-search-wrap { position: relative; }
.sit-search { width: 240px; max-width: 60vw; padding: 8px 30px 8px 12px; border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: var(--surface); font-size: 13px; color: var(--text); }
.sit-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-softer); }
.sit-search-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none;
  color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.sit-owner-sel { padding: 8px 10px; border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface);
  font-size: 13px; color: var(--text); cursor: pointer; }
.sit-fchips { display: flex; gap: 5px; flex-wrap: wrap; }
.sit-fchip { padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.sit-fchip:hover { background: var(--surface-2); }
.sit-fchip.active { font-weight: 700; }
.sit-fclear { padding: 6px 10px; border: none; background: none; color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.sit-filter-note { color: var(--primary); font-weight: 700; }
.sit-chip-click { cursor: pointer; }
.sit-hl-item, .sit-gp-item, .sit-tl-label, .sit-tl-bar { cursor: pointer; }

/* 상세 드로어 */
.sit-drawer-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.32); z-index: 90; animation: sit-fade .15s ease; }
@keyframes sit-fade { from { opacity: 0; } to { opacity: 1; } }
.sit-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; background: var(--surface);
  border-left: 4px solid var(--g); box-shadow: var(--shadow-lg); z-index: 91; padding: 20px 22px; overflow-y: auto;
  animation: sit-slide .2s cubic-bezier(.2,.7,.3,1); }
@keyframes sit-slide { from { transform: translateX(30px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.sit-dr-head { display: flex; align-items: center; gap: 8px; }
.sit-dr-x { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 14px; }
.sit-dr-x:hover { background: var(--surface-2); }
.sit-dr-title { font-size: 20px; font-weight: 800; color: var(--text-strong); margin: 14px 0 12px; line-height: 1.3; }
.sit-dr-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text); }
.sit-dr-k { display: inline-block; width: 40px; color: var(--text-faint); font-weight: 700; }
.sit-dr-sum { margin: 14px 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.55; background: var(--surface-2);
  padding: 12px 14px; border-radius: var(--r-md); }
.sit-dr-sec-h { font-size: 12px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em;
  margin: 18px 0 9px; display: flex; align-items: center; gap: 8px; }
.sit-dr-prog { color: var(--primary); }
.sit-dr-status { display: flex; gap: 6px; }
.sit-dr-st { flex: 1; padding: 9px 6px; border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--surface);
  font-size: 12.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.sit-dr-st:hover { background: var(--surface-2); }
.sit-dr-st.active { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.sit-dr-ms-list { display: flex; flex-direction: column; gap: 4px; }
.sit-dr-ms { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--text); }
.sit-dr-ms:hover { background: var(--surface-2); }
.sit-dr-ms-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-2); display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; color: #fff; flex: 0 0 auto; }
.sit-dr-ms.on .sit-dr-ms-box { background: var(--success); border-color: var(--success); }
.sit-dr-ms.on .sit-dr-ms-txt { color: var(--text-faint); text-decoration: line-through; }
.sit-dr-note { width: 100%; min-height: 84px; resize: vertical; padding: 11px 13px; border: 1px solid var(--border-2);
  border-radius: var(--r-md); font: inherit; font-size: 13px; color: var(--text); background: var(--surface); box-sizing: border-box; }
.sit-dr-note:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-softer); }
.sit-dr-foot { display: flex; gap: 8px; margin-top: 14px; }
.sit-dr-save { background: var(--primary); color: #fff; border-color: var(--primary); }
.sit-dr-save:hover { background: var(--primary-strong); }
.sit-dr-del { color: var(--danger); border-color: var(--danger-soft); }

@media (max-width: 560px) {
  .sit-search { width: 100%; max-width: none; }
  .sit-search-wrap { flex: 1 1 100%; }
}

/* ── 종합상황실 v3 — 분석(주간추이·담당자) + 엑셀 ── */
.sit-dash-grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; }
.sit-card-hint { font-size: 11px; font-weight: 600; color: var(--text-faint); margin-left: 6px; }
.sit-legend-row { flex-direction: row; gap: 14px; justify-content: center; margin-top: 6px; }
.sit-export { background: var(--surface); }
.sit-owner-bars { display: flex; flex-direction: column; gap: 8px; }
.sit-ob-row { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 9px; cursor: pointer; border-radius: 7px; padding: 2px 4px; }
.sit-ob-row:hover { background: var(--surface-2); }
.sit-ob-name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-ob-track { position: relative; height: 16px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.sit-ob-track > span { position: absolute; left: 0; top: 0; height: 100%; background: var(--primary); opacity: .35; border-radius: var(--r-pill); }
.sit-ob-track > span.sit-ob-done { background: var(--success); opacity: 1; }
.sit-ob-val { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sit-ob-val small { color: var(--text-faint); font-weight: 600; margin-left: 2px; }
@media (max-width: 900px) { .sit-dash-grid2 { grid-template-columns: 1fr; } }

/* ── 종합상황실 v4 — 종합 브리핑 카드 ── */
.sit-brief { background: linear-gradient(135deg, var(--primary-softer), var(--ai-soft)); border: 1px solid var(--primary-soft);
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 16px; }
.sit-brief-h { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--text-strong); margin-bottom: 9px; }
.sit-brief-ic { font-size: 16px; }
.sit-brief-ai { margin-left: auto; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--primary-soft);
  background: var(--surface); color: var(--primary); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sit-brief-ai:hover:not(:disabled) { background: var(--primary-soft); }
.sit-brief-ai:disabled { opacity: .6; cursor: default; }
.sit-brief-body { font-size: 14px; line-height: 1.7; color: var(--text); }
.sit-brief-body b { color: var(--text-strong); font-weight: 800; }
.sit-brief-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--primary);
  background: var(--surface); border-radius: var(--r-pill); padding: 1px 8px; }
.sit-brief-note { font-size: 12px; color: var(--text-muted); }

/* ── 종합상황실 v6 — 핀(핵심 추적) ── */
.sit-pin-btn { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--text-faint); padding: 0 2px; }
.sit-pin-btn:hover { color: var(--warning); }
.sit-pin-btn.on { color: var(--warning); }
.sit-pinned-card { border-color: var(--warning-soft); background: linear-gradient(180deg, var(--warning-soft), var(--surface) 60%); margin-bottom: 16px; }
.sit-pinned-card .sit-hl-item { gap: 7px; }
.sit-pin-filter.active { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); font-weight: 700; }
.sit-dr-pin { padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.sit-dr-pin:hover { background: var(--surface-2); }
.sit-dr-pin.on { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }

/* ── 종합상황실 v8 — 리스트 뷰 (탭 친화) ── */
.sit-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.sit-lrow { display: grid; grid-template-columns: 34px 150px 1fr 130px 64px 132px; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--border); }
.sit-lrow:last-child { border-bottom: none; }
.sit-lrow:not(.sit-lhead):hover { background: var(--surface-2); }
.sit-lhead { background: var(--surface-2); font-size: 11px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; }
.sit-l-chip { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-l-title { font-size: 13.5px; font-weight: 600; color: var(--text-strong); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-l-title:hover { color: var(--primary); text-decoration: underline; }
.sit-l-noteic { font-size: 11px; }
.sit-l-owner { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-l-ms { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sit-row-status { padding: 6px 8px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface);
  font-size: 12.5px; color: var(--text); cursor: pointer; width: 100%; }
.sit-row-status:focus { outline: none; border-color: var(--primary); }
@media (max-width: 820px) {
  .sit-lrow { grid-template-columns: 30px 1fr 116px; gap: 8px; }
  .sit-l-chip, .sit-l-owner, .sit-l-ms { display: none; }
  .sit-lhead { display: none; }
}

/* ── 종합상황실 v9 — 마인드맵 뷰 ── */
.sit-mind { background: radial-gradient(circle at 50% 42%, var(--surface), var(--surface-2)); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 8px; overflow-x: auto; box-shadow: var(--shadow-xs); }
.sit-mind svg { display: block; margin: 0 auto; }
.sit-mn-group circle { transition: r .12s; }
.sit-mn-group:hover circle { stroke: var(--text-strong); stroke-width: 2; }
.sit-mn-leaf:hover circle { r: 8; }
.sit-mn-leaf text { pointer-events: none; }
.sit-mind-hint { text-align: center; font-size: 12px; color: var(--text-faint); padding: 8px 6px 4px; }

/* ── 종합상황실 v10 — 직접추가 프로젝트 드로어 편집 ── */
.sit-edit { width: 100%; padding: 8px 11px; border: 1px solid var(--border-2); border-radius: var(--r-sm);
  font: inherit; font-size: 13px; color: var(--text); background: var(--surface); box-sizing: border-box; }
.sit-edit:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-softer); }
.sit-edit-group { width: auto; max-width: 200px; font-size: 12px; font-weight: 700; padding: 5px 8px; }
.sit-edit-title { font-size: 18px; font-weight: 800; color: var(--text-strong); margin: 12px 0; padding: 9px 12px; }
.sit-edit-summary { min-height: 56px; resize: vertical; }
.sit-dr-edit-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.sit-dr-edit-meta label { display: flex; align-items: center; gap: 8px; }
.sit-dr-edit-meta .sit-dr-k { flex: 0 0 36px; }
.sit-dr-ms { display: flex; align-items: center; gap: 6px; }
.sit-dr-ms-tap { display: flex; align-items: center; gap: 9px; flex: 1; cursor: pointer; padding: 6px 0; }
.sit-ms-del { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text-faint); cursor: pointer; font-size: 14px; line-height: 1; }
.sit-ms-del:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
.sit-ms-addrow { display: flex; gap: 6px; margin-top: 8px; }
.sit-ms-input { flex: 1; padding: 7px 10px; border: 1px solid var(--border-2); border-radius: var(--r-sm); font: inherit; font-size: 13px; }
.sit-ms-input:focus { outline: none; border-color: var(--primary); }
.sit-ms-addbtn { flex: 0 0 auto; }

/* ── 종합상황실 v11 — 기간 프리셋 ── */
.sit-period { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; }
.sit-pchip { padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); background: transparent; border: none; cursor: pointer; white-space: nowrap; }
.sit-pchip:hover { color: var(--text); }
.sit-pchip.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }

/* ── 종합상황실 v12 — 마인드맵 레이아웃 토글 ── */
.sit-mind-wrap { display: flex; flex-direction: column; gap: 10px; }
.sit-mind-toggle { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; align-self: flex-start; }

/* ── 메뉴 구조도 페이지 ── */
.menu-map-page { height: 100%; }
/* flex:1로 두면 부모 높이 체인이 무너질 때 iframe이 ~130px로 쪼그라든다(화면깨짐).
   sidebar-lab 등 정상 동작 iframe과 동일하게 뷰포트 기준 명시 높이만 사용. */
.menu-map-frame { width: 100%; height: calc(100vh - var(--topbar-h, 56px)); border: none; display: block; }

/* ============================================================
   다크 전용 보정 — 프리미엄 다크-테크 격상
   라이트(:root)는 일절 건드리지 않는다. 모든 규칙은 [data-theme="dark"] 스코프.
   ① 하드코딩 라이트 색 잔존 표면 보정(탑바 등)
   ② 주요 액션·카드·로고·AI 강조에 절제된 블루 글로우/글래시 층위감
   ============================================================ */

/* ① 탑바 — 하드코딩 #fff/짙은 글자를 다크 표면·텍스트 토큰으로 보정 */
[data-theme="dark"] .topbar {
  background: var(--surface);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .tb-name   { color: var(--text-strong); }
[data-theme="dark"] .tb-name em { color: var(--text-muted); }
[data-theme="dark"] .tb-page   { color: var(--text-muted); }

/* 토스트 — 라이트는 .toast가 var(--text-strong)(어두움) 배경이지만, 다크에선 그 토큰이 near-white라
   흰 알약+흰 글자로 텍스트가 묻히던 버그. 다크에선 elevated 어두운 표면으로 오버라이드(액센트 보더는 유지). */
[data-theme="dark"] .toast { background: var(--surface-3); color: var(--text-strong); }

/* 채팅 필터 활성칩 — 라이트는 검정칩+흰글자(반전 선택칩)지만, 다크에선 배경(var(--text-strong))이
   near-white라 흰 글자가 묻혀 라벨이 안 보이던 버그. 다크에선 글자를 어둡게 뒤집어 대비를 유지. */
[data-theme="dark"] .chat-filter-chip.active { color: var(--bg); }
[data-theme="dark"] .chat-filter-chip.active .chat-filter-unread-badge { border-color: rgba(0,0,0,.28); }

/* ② 글래시 층위감 — 패널/드로어/모달에 살짝 블루 기운 보더(토큰이 이미 쿨톤).
   과한 backdrop-blur 없이 불투명 표면 + 깊은 그림자로만 떠 보이게. */
[data-theme="dark"] .panel {
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.02);
}

/* ② 주요 액션 — 블루 글로우(절제). 표·본문이 아닌 CTA·플로팅·전송 버튼에만. */
[data-theme="dark"] .btn-primary {
  box-shadow: var(--glow-primary);
}
[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(77,120,255,.42), 0 10px 36px rgba(77,120,255,.30);
}
[data-theme="dark"] .ai-send-btn { box-shadow: var(--glow-primary-soft); }

/* ② 로고 마크 — KOG 인터로킹 서클이 다크에서 은은히 빛나게(절제). 탑바·인증·사이드바 공통. */
[data-theme="dark"] .tb-mark,
[data-theme="dark"] .auth-mark,
[data-theme="dark"] .snav-logo .logo-mark {
  filter: drop-shadow(0 0 6px rgba(77,120,255,.45));
}

/* ② AI 아바타 스퀘어 — AI 톤 강조에 옅은 글로우 */
[data-theme="dark"] .d-rec .sp,
[data-theme="dark"] .d-ai-sum .sp,
[data-theme="dark"] .ai-head .sp { box-shadow: var(--glow-primary-soft); }

/* 접근성 — 모션·투명도 민감 사용자에게 글로우 강도 완화 */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .btn-primary,
  [data-theme="dark"] .ai-send-btn,
  [data-theme="dark"] .d-rec .sp,
  [data-theme="dark"] .d-ai-sum .sp,
  [data-theme="dark"] .ai-head .sp { box-shadow: var(--shadow-sm); }
}

/* ③ 스크롤바 — 거슬리지 않게 양쪽 모드 모두 얇고 은은하게.
   (사이드바 메뉴 등 네비 패널은 아래 개별 규칙으로 완전 숨김.) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(120,130,150,.26); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120,130,150,.42); background-clip: padding-box; }
* { scrollbar-color: rgba(120,130,150,.26) transparent; scrollbar-width: thin; }
/* 다크에서만 그레이블루 톤으로 */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A3450; background-clip: padding-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3A4666; background-clip: padding-box; }
[data-theme="dark"] * { scrollbar-color: #2A3450 transparent; scrollbar-width: thin; }

/* ============================================================
   계정 화면 — account 카드 레이아웃 및 비밀번호 변경 폼
   ============================================================ */
.account-wrap { max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
.account-card {
  background: var(--surface-2, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}
/* 프로필 카드 — 아바타 + 이름·역할·이메일 */
.account-profile-card { display: flex; flex-direction: column; gap: 16px; }
.account-avatar-row { display: flex; align-items: center; gap: 18px; }
/* 아바타 xl 크기 — avatarFor('xl') 지원 */
.avatar.xl { width: 64px; height: 64px; font-size: 26px; border-radius: 18px; flex-shrink: 0; }
.account-id-block { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.account-name { font-size: 20px; font-weight: 700; color: var(--text-strong); line-height: 1.2; }
/* 역할 배지 — pill 형태 */
.account-role-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; width: fit-content;
}
.account-role-badge.admin {
  background: color-mix(in srgb, var(--primary, #4A74FF) 14%, transparent);
  color: var(--primary, #4A74FF);
  border: 1px solid color-mix(in srgb, var(--primary, #4A74FF) 28%, transparent);
}
.account-role-badge.staff {
  background: var(--surface-3, rgba(0,0,0,.05));
  color: var(--text-muted);
  border: 1px solid var(--line);
}
/* 정보 행 */
.account-info-rows { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; border-top: 1px solid var(--line); }
.account-info-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.account-info-label { color: var(--text-faint); width: 52px; flex-shrink: 0; }
.account-info-value { color: var(--text-strong); }
/* 섹션 타이틀 */
.account-section-title { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; letter-spacing: .01em; text-transform: uppercase; }
/* 관리자 바로가기 nav 링크 */
.account-nav-link { border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
.account-row-list { display: flex; flex-direction: column; gap: 6px; }
/* 앱 설치 카드 본문 — 설명 한 줄 + 버튼. 상세는 download.html 이 맡는다 */
.account-install-body { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; }
.account-logout-btn { width: 100%; }
/* OAuth 안내 */
.account-oauth-notice {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--surface-3, rgba(0,0,0,.04));
  font-size: 13px; color: var(--text-muted);
}
.account-oauth-notice .ic { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-faint); }
/* 비밀번호 변경 폼 */
.account-pw-form { display: flex; flex-direction: column; gap: 12px; }
.account-pw-field { display: flex; flex-direction: column; gap: 4px; }
.account-pw-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.account-pw-input {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; background: var(--surface-1, #fff); color: var(--text-strong);
  outline: none; transition: border-color .15s;
}
.account-pw-input:focus { border-color: var(--primary, #4A74FF); }
.account-pw-msg { font-size: 12.5px; min-height: 18px; }
.account-pw-msg.error { color: var(--danger, #e53935); }
.account-pw-msg.ok { color: #2e9b5e; }
.account-pw-actions { margin-top: 2px; }
.account-pw-forgot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-faint); }
.account-pw-reset-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 12px; color: var(--primary, #4A74FF); text-decoration: underline;
  text-underline-offset: 2px;
}
.account-pw-reset-link:hover { opacity: .75; }

/* ---------- 아바타 사진·아이덴티콘 공통 ---------- */
/* img 아바타 — 컨테이너를 꽉 채우고 배경 없음 */
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 아이덴티콘 SVG는 background로 채워지므로 추가 스타일 불필요 */

/* 이모지 패널 (입력 도구) — 입력창 위에 뜨는 작은 그리드 */
.chat-emoji-panel {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  width: 296px; max-width: calc(100vw - 16px); padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.chat-emoji-cell {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  font-size: 20px; line-height: 1; border-radius: 8px; background: none;
  transition: background .1s;
}
.chat-emoji-cell:hover { background: var(--surface-2); }

/* 대화 내 검색 — 메시지 영역 상단 검색바 + 매치 강조 */
.chat-conv-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.chat-conv-search-input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 12px; background: var(--surface-2); color: var(--text); font-size: 13px;
}
.chat-conv-search-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; padding: 0 2px; }
.chat-search-match { background: rgba(255, 213, 79, .18); border-radius: 10px; }
.chat-search-current { background: rgba(255, 193, 7, .38); border-radius: 10px; box-shadow: 0 0 0 2px var(--primary); }

/* 채팅 폴더 칩 — 필터 칩 + 삭제(×) */
.chat-filter-chip-folder { display: inline-flex; align-items: center; gap: 4px; }
.chat-folder-del { opacity: .45; font-size: 14px; line-height: 1; padding: 0 2px; border-radius: 4px; }
.chat-folder-del:hover { opacity: 1; background: var(--surface-2); }

/* 커스텀 확인 모달 — 브라우저 기본 confirm() 대체 */
.ui-confirm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.42); display: grid; place-items: center; padding: 16px;
}
.ui-confirm {
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: 16px; padding: 22px 20px 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.28);
}
.ui-confirm-title { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 8px; }
.ui-confirm-msg { font-size: 14px; line-height: 1.55; color: var(--text); }
.ui-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.ui-confirm-actions .btn { min-width: 72px; }
.ui-prompt-input {
  width: 100%; margin-top: 14px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-size: 14px; font-family: inherit;
}
.ui-prompt-input:focus { outline: none; border-color: var(--primary); }

/* ---------- 내 정보 — 아바타 업로드 ---------- */
.account-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.account-avatar-edit-btn {
  position: absolute; bottom: -4px; right: -4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary, #4A74FF); color: #fff;
  display: grid; place-items: center;
  cursor: pointer; border: 2px solid var(--surface-1, #fff);
  transition: opacity .15s;
}
.account-avatar-edit-btn:hover { opacity: .85; }
.account-avatar-edit-btn .ic { width: 12px; height: 12px; }
.account-avatar-remove-btn {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger, #e53935); color: #fff;
  display: grid; place-items: center;
  cursor: pointer; border: 2px solid var(--surface-1, #fff);
  font-size: 0; line-height: 0;
  transition: opacity .15s;
}
.account-avatar-remove-btn:hover { opacity: .85; }
.account-avatar-remove-btn .ic { width: 10px; height: 10px; }

/* ---------- 관리자 직원 프로필 화면 ---------- */
.admin-users-list { display: flex; flex-direction: column; gap: 8px; max-width: 540px; }
.admin-user-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-2);
}
.admin-user-av { flex-shrink: 0; }
.admin-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-user-name { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.admin-user-role { font-size: 12px; color: var(--text-muted); }
.admin-user-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.admin-user-upload-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.admin-user-upload-btn .ic { width: 14px; height: 14px; }

/* ── 모바일 필터·툴바 가로 스크롤 가시화 (단계 2) ── */
@media (max-width: 768px) {
  /* chip-row: 우측 끝 칩 안 잘리도록 패딩 추가 + 우측 페이드 힌트 */
  .chip-row {
    padding-right: 24px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
  /* unified-toolbar·view-toolbar: 모바일에서 가로 스크롤 + 줄바꿈 없이 한 줄 유지 */
  .unified-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: 16px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
  .view-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: 16px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
}

/* ══════════════════════════════════════════════════════════════
   PR-1 모바일 단순화 — 카드 다이어트 + 탭바 인디케이터 + ERP 표 응급 래핑
   @media(max-width:768px) 한정 — 데스크톱(≥769px) 회귀 없음
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1-A. 업무카드(taskCard) 시각 위계 재배치 ──
     정보 삭제 아님 — DOM은 유지하되 우선순위칩·요청자·시간을 덜 강조.
     제목(16px)·상태배지·마감·담당아바타가 1차 시선을 받도록 위계 조정. */

  /* 카드 여백 + 간격 소폭 확대 (현장·노안 대응) */
  .in-card {
    padding: 18px;
    margin-bottom: 16px;
  }

  /* 제목 크기는 이미 16px — 강조 확인 후 유지 */
  .in-card .top .tx .t {
    font-size: 16px;
  }

  /* 우선순위칩 — 크기·색 유지하되 font-size 1px 줄여 제목보다 약하게 */
  .badge-row .pchip {
    font-size: 10px;
  }

  /* 담당·시간·요청자 행(.s) — 더 작고 연하게(정보 유지, 시각 위계만 낮춤) */
  .in-card .top .tx .s {
    font-size: 12px;
    color: var(--text-faint);
  }

  /* 체크리스트배지(.cl-badge) — 우선순위칩과 함께 2차 정보로 */
  .badge-row .cl-badge {
    font-size: 10px;
    opacity: 0.8;
  }

  /* ── 1-B. 하단 탭바 활성 인디케이터 강화 ──
     기존 색 변경에 추가로 상단 2px --primary 바를 올려 위치 인지 강화.
     CSS only. FAB(.fab-tab)는 활성 인디케이터 불필요이므로 제외. */
  .bottomnav a.active:not(.fab-tab) {
    position: relative;
  }
  .bottomnav a.active:not(.fab-tab)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--primary);
    border-radius: 0 0 2px 2px;
  }

  /* ── 1-C. ERP 표 응급 가로스크롤 래핑 (임시방편 — 본질적 카드 전환은 PR-3/4) ──
     모바일 분기 없는 ERP·CRM·현장 페이지의 표가 레이아웃을 깨지 않도록
     overflow-x:auto 보장. JS 미접촉, 기존 마크업 구조 변경 없음. */

  /* 거래처 CRM — partners.js .crm-tbl-wrap (900px에서 처리되나 768px 재명시) */
  .crm-tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 종합상황실 — situation.js 인쇄용 .plist 표 */
  .plist {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 에드워드 발주서 — edwards-purchase.js 내 CSS 클래스 표 보강 */
  .edw-po-list-table,
  .edw-pod-info-table,
  .edw-pod-items,
  .edw-pod-sum-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── PR-2 그랩 핸들 — 모바일 바텀시트 상단 시각 힌트 ──
     JS 스와이프 핸들러와 쌍을 이루는 CSS 전용 부분. */

  /* 드로어 상단에 그랩 핸들 의사요소 추가 */
  .drawer::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
    pointer-events: none;
  }

  /* 그랩 핸들 터치 영역 확보 — d-head 상단 패딩 소폭 줄여 핸들 공간 확보 */
  .drawer .d-head {
    padding-top: 14px;
  }

  /* 스와이프 드래그 중 트랜지션 제거 (JS가 추가할 .drawer--dragging 클래스) */
  .drawer.drawer--dragging {
    transition: none !important;
  }

  /* prefers-reduced-motion: 모션 애니메이션 비활성 시 드로어 트랜지션도 제거 */
  @media (prefers-reduced-motion: reduce) {
    .drawer {
      transition: none;
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   PR-3 에드워드 발주서 모바일 카드 뷰
   — @media(max-width:768px) 한정, 데스크톱(≥769px) 회귀 없음
   — JS isMobile() 분기가 768px에서 카드 렌더 선택, CSS는 카드 스타일만
   ══════════════════════════════════════════════════════════════ */

/* 카드 리스트 컨테이너 — JS가 .edw-po-m-card-list로 삽입 */
.edw-po-m-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 발주서 모바일 카드 — 1차 강조: 발주번호+상태, 2차: 발주처명, 3차: 날짜·금액 메타 */
.edw-po-m-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg-card, var(--surface));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.12s, border-color 0.12s;
}

.edw-po-m-card:active {
  background: var(--bg-hover, #f5f5f5);
}

.edw-po-m-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.edw-po-m-card-no {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.edw-po-m-card-supplier {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.edw-po-m-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.edw-po-m-card-sep {
  color: var(--border);
}

.edw-po-m-card-sent {
  color: var(--text-muted);
}

.edw-po-m-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* 탭1 집계 그룹카드 내 표 — 가로 스크롤 보강(PR-1 래핑에 추가) */
@media (max-width: 768px) {
  .edw-po-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════════════════════
   PR-4 거래처 CRM·수주관리 모바일 카드 뷰
   — @media 없이 카드 스타일 정의, JS isMobile() 분기로 표/카드 전환
   — 데스크톱(≥769px)에서 JS가 표를 렌더하므로 CSS 회귀 없음
   ══════════════════════════════════════════════════════════════ */

/* ── 거래처 CRM 모바일 카드 ── */
/* 카드 리스트 컨테이너 */
.crm-m-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 거래처 카드 — 1차: 거래처명+단계, 2차: 담당자, 3차: 태그+최근활동 */
.crm-m-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg-card, var(--surface));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.12s, border-color 0.12s;
}

.crm-m-card:active {
  background: var(--bg-hover, #f5f5f5);
}

.crm-m-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-m-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.crm-m-card-contact {
  font-size: 13px;
  color: var(--text-muted);
}

.crm-m-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-m-card-date {
  color: var(--text-faint);
}

/* ── 수주관리 출고 게이트(4단계) — 피킹 현황 한 줄. 색은 텍스트 톤까지만, 테두리는 표준 1px ── */
.so-pick-gate {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; color: var(--text-muted);
  background: var(--bg-subtle, #f7f7f8);
}
.so-pick-gate svg { width: 14px; height: 14px; flex: none; }
.so-pick-gate.is-ok { color: var(--ok, #15803d); }
.so-pick-gate.is-warn { color: var(--warn-text, #b45309); }
.so-pick-gate.is-err { color: var(--danger, #dc2626); }

/* ── 수주관리 모바일 카드 ── */
/* 카드 리스트 컨테이너 */
.so-m-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 수주 카드 — 1차: 수주번호+상태, 2차: 거래처, 3차: 품목요약·금액·납기 */
.so-m-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg-card, var(--surface));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.12s, border-color 0.12s;
}

.so-m-card:active {
  background: var(--bg-hover, #f5f5f5);
}

.so-m-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.so-m-card-no {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.so-m-card-partner {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.so-m-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.so-m-card-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.so-m-card-sep {
  color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   PR-6 모바일 업무카드 스와이프 액션 + 당겨서 새로고침
   — @media(max-width:768px) 내부에서만 스타일 노출.
   — 데스크톱(≥769px) 회귀 없음: .card-swipe-wrap은 display:contents로 투명.
   ══════════════════════════════════════════════════════════════ */

/* 데스크톱 — 래퍼는 완전 투명. .in-card 스타일에 영향 없음 */
.card-swipe-wrap {
  display: contents;
}

@media (max-width: 768px) {
  /* 래퍼: 블록으로 전환 + overflow:hidden으로 패널 숨김 처리 */
  .card-swipe-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg, 10px);
    margin-bottom: 12px;
  }

  /* 마지막 항목 하단 마진 제거(기존 .in-card margin-bottom 대체) */
  .card-swipe-wrap .in-card {
    margin-bottom: 0;
    border-radius: var(--r-lg, 10px);
    /* 스와이프 트랜지션은 JS가 인라인으로 제어 */
    will-change: transform;
  }

  /* 스와이프 액션 패널 — 카드 오른쪽 절대 위치, 카드가 밀리면 노출 */
  .swipe-action-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 140px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: 0 var(--r-lg, 10px) var(--r-lg, 10px) 0;
    overflow: hidden;
  }

  /* 액션 버튼 공통 */
  .swipe-act-btn {
    flex: 1;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    padding: 0 8px;
    text-align: center;
    transition: filter 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .swipe-act-btn:active {
    filter: brightness(0.88);
  }

  /* 진행→완료 버튼 — 파랑(primary) */
  .swipe-act-advance {
    background: var(--primary, #4F78E0);
  }

  /* 보류 버튼 — 오렌지(warn) */
  .swipe-act-hold {
    background: var(--warn, #F59E0B);
  }

  /* 당겨서 새로고침 인디케이터 */
  .ptr-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    overflow: hidden;
    font-size: 22px;
    color: var(--primary, #4F78E0);
    opacity: 0;
    transition: height 0.1s, opacity 0.1s;
    pointer-events: none;
    user-select: none;
    will-change: height, opacity, transform;
  }

  @media (prefers-reduced-motion: reduce) {
    .swipe-act-btn {
      transition: none;
    }
    .ptr-indicator {
      transition: none;
    }
    .card-swipe-wrap .in-card {
      transition: none !important;
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   전체업무 모바일 카드뷰 + 뷰 토글
   — @media(max-width:768px) 내부에서만 스타일 활성.
   — 데스크톱(≥769px) 회귀 없음: 클래스 자체가 only-mobile 하위에만 존재.
   ══════════════════════════════════════════════════════════════ */

/* 모바일 툴바 행 — 뷰 토글을 담는 가로 배치 행 */
.recv-m-toolbar {
  display: none;
}

@media (max-width: 768px) {
  .recv-m-toolbar {
    display: flex;
    align-items: center;
    padding: 4px 12px 0;
    gap: 8px;
  }

  /* 모바일 전용 뷰 토글 — 데스크톱 .view-toggle과 동일 베이스, 크기만 조정 */
  .recv-m-view-toggle {
    display: flex;
    gap: 2px;
  }

  /* 모바일 카드뷰 래퍼 — 데스크톱은 display:none 되므로 선언 무해 */
  .recv-m-card-view {
    display: flex;
    flex-direction: column;
  }

  /* 모바일 칸반 래퍼 — board-wrap 가로 스크롤 허용 */
  .recv-m-kanban-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 4px 16px;
  }

  /* 모바일 칸반 래퍼 내 board-wrap은 가로 스크롤 */
  .recv-m-kanban-wrap .board-wrap {
    min-width: max-content;
  }

  /* ── 1-C. 모바일 업무 상세 — 정보 영역 압축 ── */
  .d-meta-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 0; margin-bottom: 4px;
  }
  .d-meta {
    font-size: 13px; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: 3px 10px; white-space: nowrap;
  }
  .d-more-info {
    margin-top: 4px; margin-bottom: 8px;
  }
  .d-more-info > summary {
    font-size: 12px; font-weight: 700; color: var(--text-faint);
    letter-spacing: .03em; cursor: pointer; list-style: none;
    padding: 6px 0; user-select: none;
  }
  .d-more-info > summary::-webkit-details-marker { display: none; }
  .d-more-info[open] > summary { color: var(--primary); }

  /* ── 2. 모바일 stat-strip — 칩화 (.stat-strip--chips 스코프) ── */
  /* 홈 KPI(.home-kpi .stat-strip-cells)와 분리 — 전역 .stat-cell에 걸지 않음 */
  .stat-strip--chips { display: flex; flex-direction: row; overflow-x: auto; gap: 6px; padding: 2px 4px 6px; scrollbar-width: none; }
  .stat-strip--chips::-webkit-scrollbar { display: none; }
  /* 카드 박스(좌우 구분선·세로 레이아웃) 해제 → 가로 pill 칩으로 전환 */
  .stat-strip--chips .stat-cell {
    flex: 0 0 auto; flex-direction: row; align-items: center;
    gap: 6px; padding: 6px 14px; white-space: nowrap;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r-pill); position: static;
    font-size: 13px; font-weight: 600; color: var(--text);
    box-shadow: none; min-height: 36px;
  }
  /* 칩 안 구분선 숨김 */
  .stat-strip--chips .stat-cell::before { display: none; }
  /* 색 타일(.tile) 숨김 */
  .stat-strip--chips .stat-cell .tile { display: none; }
  /* 라벨 + 값 한 줄 인라인 */
  .stat-strip--chips .stat-cell .label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
  .stat-strip--chips .stat-cell .value { font-size: 13px; font-weight: 700; color: var(--text-strong); margin-top: 0; }
  /* 선택 시 파랑 채움 칩 */
  .stat-strip--chips .stat-cell.stat-active {
    background: var(--primary); border-color: var(--primary);
  }
  .stat-strip--chips .stat-cell.stat-active .label { color: #fff; }
  .stat-strip--chips .stat-cell.stat-active .value { color: #fff; }
  /* 탭 택타일 푸시 */
  .stat-strip--chips .stat-cell:active { transform: scale(.95); }
  /* prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .stat-strip--chips .stat-cell:active { transform: none; }
  }
}

/* ── 1-B. 액션시트(⋯ 더보기) — 전역. JS가 body에 직접 마운트하므로 화면 폭과 무관하게 항상 스타일 필요.
   (이전엔 @media max-width:768px에 갇혀 태블릿·가로에서 ⋯ 메뉴가 안 떴음 — 현장앱 강제 모바일과 충돌) ── */
  .as-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,.45);
    display: flex; align-items: flex-end;
    /* 슬라이드업 초기 상태 — js가 .as-open 추가 시 표시 */
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .as-overlay.as-open { opacity: 1; pointer-events: auto; }
  .as-sheet {
    width: 100%; background: var(--surface);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    /* 긴 목록도 화면을 다 덮지 않게 — 높이 제한 + 내부 스크롤(배경 탭으로 닫기 가능) */
    max-height: 82vh; display: flex; flex-direction: column;
  }
  .as-overlay.as-open .as-sheet { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .as-overlay, .as-sheet { transition: none; }
  }
  /* 그랩핸들 */
  .as-grab {
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--border); margin: 0 auto 8px;
  }
  .as-title {
    font-size: 13px; font-weight: 700; color: var(--text-faint);
    padding: 4px 20px 10px; letter-spacing: .02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-bottom: 1px solid var(--border); margin-bottom: 4px;
  }
  .as-items { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; }
  .as-item {
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px; min-height: 52px; width: 100%;
    background: transparent; border: none; cursor: pointer;
    font-size: 15px; font-weight: 500; color: var(--text-strong);
    text-align: left;
  }
  .as-item:active { background: var(--surface-2); }
  .as-item--danger { color: var(--danger); }
  .as-item-icon { display: flex; align-items: center; }
  .as-item-icon .ic { width: 20px; height: 20px; }
  .as-item-label { flex: 1; }

/* ── ledger-list 컴포넌트 — 에드워드 4개 메뉴 전표대장 공용 ── */
.ledger-list-root { display: flex; flex-direction: column; gap: 0; }

/* 헤더 — 제목 + [+신규] 버튼 */
.ledger-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 12px;
}
.ledger-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-strong); }
/* [+신규] 버튼 — ledger-new-btn은 btn btn--primary를 이미 사용하므로 추가 스타일 불필요 */
.ledger-new-btn { }

/* 작성중 배지 줄 */
.ledger-draft-badge-wrap { padding: 0 0 8px; }
.ledger-draft-badge { cursor: pointer; }

/* 필터 영역 — 배경 박스로 필터 그룹 시각화 */
.ledger-filter {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
}
.ledger-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 날짜 프리셋 — 세그먼트 버튼 형태 */
.ledger-date-chips { display: flex; gap: 3px; flex-wrap: wrap; }
.ledger-date-chip {
  appearance: none; -webkit-appearance: none;
  padding: 4px 11px; border-radius: 16px; font-size: .78rem; font-weight: 600;
  border: 1.5px solid var(--border, #e2e5ec);
  background: var(--surface-2, #f5f6fa); color: var(--text, #1b1f27);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  line-height: 1.4;
}
.ledger-date-chip.active {
  background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff;
}
.ledger-date-chip:hover:not(.active) { background: var(--surface-2); border-color: var(--text-muted); }

/* 직접 날짜 입력 */
.ledger-custom-dates { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.ledger-date-input {
  border: 1.5px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: .82rem;
  background: var(--surface); color: var(--text);
}
.ledger-date-sep { font-size: .8rem; color: var(--text-muted); }

/* 상태 칩 행 */
.ledger-status-chips { display: flex; gap: 3px; flex-wrap: wrap; }
.ledger-status-chip {
  appearance: none; -webkit-appearance: none;
  padding: 3px 11px; border-radius: 14px; font-size: .77rem; font-weight: 600;
  border: 1.5px solid var(--border, #e2e5ec);
  background: var(--surface-2, #f5f6fa); color: var(--text, #1b1f27);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  line-height: 1.4;
}
.ledger-status-chip.active {
  background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff;
}
.ledger-status-chip:hover:not(.active) { background: var(--surface-2); border-color: var(--text-muted); }

/* 검색창 */
.ledger-filter-search { flex: 1; min-width: 140px; }
.ledger-search-input {
  width: 100%; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: .85rem;
  background: var(--surface); color: var(--text);
  box-sizing: border-box;
}
.ledger-search-input:focus { outline: none; border-color: var(--primary, #2563eb); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }

/* 취소 포함 토글 */
.ledger-canceled-toggle {
  appearance: none; -webkit-appearance: none;
  padding: 4px 11px; border-radius: 14px; font-size: .77rem; font-weight: 600;
  border: 1.5px solid var(--border, #e2e5ec);
  background: var(--surface-2, #f5f6fa); color: var(--text-muted, #888);
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
  line-height: 1.4;
}
.ledger-canceled-toggle.active {
  background: var(--surface-2); border-color: var(--text-muted); color: var(--text-strong);
}
.ledger-canceled-toggle:hover { border-color: var(--text-muted); color: var(--text); }

/* 테이블 컨테이너 */
.ledger-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border); border-radius: 10px;
}
.ledger-table {
  width: 100%; border-collapse: collapse; font-size: .87rem;
}
.ledger-th {
  text-align: left; padding: 9px 12px;
  font-size: .74rem; font-weight: 700; color: var(--text-muted);
  border-bottom: 1.5px solid var(--border);
  background: var(--surface-2, #f5f6fa);
}
.ledger-th:first-child { border-radius: 10px 0 0 0; }
.ledger-th:last-child  { border-radius: 0 10px 0 0; }
.ledger-th--right { text-align: right; }
.ledger-th--actions { width: 1px; white-space: nowrap; }
.ledger-td { padding: 10px 12px; border-bottom: 1px solid var(--border-light, #f0f0f0); vertical-align: middle; }
.ledger-td--right { text-align: right; }
.ledger-td--actions { white-space: nowrap; text-align: right; }
/* 마지막 행은 하단 border 제거 — table-wrap border와 이중선 방지 */
.ledger-row:last-child .ledger-td { border-bottom: none; }

/* td 빈상태 — 표 내부 */
.ledger-td-empty { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: .87rem; }

/* 표 행 */
.ledger-row { cursor: pointer; transition: background .1s; }
.ledger-row:hover { background: var(--primary-soft, #eff4ff); }

/* 취소 행 — 회색 처리 (JS 필터로 기본 숨김) */
.ledger-row--canceled { opacity: .55; }
.ledger-row--canceled .ledger-td { color: var(--text-muted); }

/* 행 액션 버튼 (보기·취소) */
.ledger-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.ledger-row-action-btn {
  appearance: none; -webkit-appearance: none;
  padding: 3px 10px; border-radius: 6px; font-size: .78rem; font-weight: 600;
  border: 1.5px solid var(--border, #e2e5ec);
  background: var(--surface, #fff); color: var(--text, #1b1f27);
  cursor: pointer; transition: background .1s, border-color .1s; white-space: nowrap;
}
.ledger-row-action-btn:hover { background: var(--surface-2); border-color: var(--text-muted); }
.ledger-row-action-btn--danger { color: var(--danger, #e11d48); border-color: var(--danger, #e11d48); }
.ledger-row-action-btn--danger:hover {
  background: rgba(225,29,72,.07); border-color: var(--danger, #e11d48);
}

/* 더보기 */
.ledger-more-wrap { padding: 14px 0; text-align: center; }
.ledger-more-btn { font-size: .85rem; }

/* 빈 상태 카드 */
.ledger-empty {
  padding: 48px 0; text-align: center;
  border: 1.5px dashed var(--border, #e2e5ec);
  border-radius: 10px; margin-top: 2px;
}
.ledger-empty-text { color: var(--text-muted); font-size: .92rem; margin: 0; }

/* 카드 리스트 — 모바일 compact 모드 */
.ledger-card-list { display: flex; flex-direction: column; gap: 8px; }
.ledger-card {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; transition: background .1s;
  display: flex; flex-direction: column; gap: 6px;
}
.ledger-card:hover { background: var(--surface-2); }
.ledger-card--canceled { opacity: .55; }
.ledger-card-cell { display: flex; justify-content: space-between; align-items: center; }
.ledger-card-label { font-size: .74rem; color: var(--text-muted); font-weight: 600; }
.ledger-card-val { font-size: .88rem; }

/* 좁은 폭 대응 — 필터 행을 두 줄로 */
@media (max-width: 560px) {
  .ledger-filter-row { gap: 6px; }
  .ledger-date-chip, .ledger-status-chip, .ledger-canceled-toggle { padding: 4px 8px; font-size: .74rem; }
  .ledger-filter-search { min-width: 100px; }
}

/* ── 발주 불러오기 피커 (edwards-purchasing) ── */
.edw-po-picker {
  margin-top: 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.edw-po-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.edw-po-picker-title { font-size: .85rem; font-weight: 600; }
.edw-po-picker-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.edw-po-picker-table thead th {
  padding: 6px 10px; text-align: left;
  background: var(--surface-2); color: var(--text-muted);
  font-weight: 600; border-bottom: 1px solid var(--border);
}
.edw-po-picker-cell { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.edw-po-picker-row { cursor: pointer; transition: background .1s; }
.edw-po-picker-row:last-child td { border-bottom: none; }
.edw-po-picker-row:hover { background: var(--surface-hover, var(--surface-2)); }
.edw-po-picker-status { padding: 16px 12px; color: var(--text-muted); text-align: center; }
.edw-po-picker-error { color: var(--danger, #c0392b); }

/* ── 위키 (옵시디언 Vault 읽기 화면) ───────────────────────────────
   3열 = 트리 · 본문 · 백링크. 카드 구분은 1px 테두리 + 배경 톤만 쓴다(굵은 컬러 테두리 금지). */
.wiki-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 1200px) { .wiki-grid { grid-template-columns: 240px minmax(0, 1fr); } .wiki-aside { display: none; } }

.wiki-side,
.wiki-aside {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}
.wiki-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 22px;
  min-height: 320px;
}

/* 실시간 갱신 표시 — 강조는 배경 톤까지만(굵은 컬러 테두리 금지). */
.wiki-live { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--success-soft); color: var(--success); font-size: 11.5px; font-weight: 700; }

/* 검색 */
.wiki-search { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-bottom: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.wiki-search svg { width: 15px; height: 15px; color: var(--text-faint); flex: none; }
.wiki-q { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 13px; color: var(--text); outline: none; }
/* type=search의 브라우저 기본 지우기 버튼은 감춘다 — 자체 버튼과 두 개로 보인다. */
.wiki-q::-webkit-search-cancel-button, .wiki-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.wiki-clear { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }

/* 트리·목록 행 */
.wiki-tree { display: flex; flex-direction: column; }
.wiki-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px;
  border: none; background: none; text-align: left; cursor: pointer; border-radius: 8px;
  font: inherit; font-size: 13px; color: var(--text); line-height: 1.35; }
.wiki-row:hover { background: var(--surface-2); }
.wiki-row.is-active { background: var(--primary-soft); color: var(--primary-strong); font-weight: 600; }
.wiki-row--dir { color: var(--text-strong); font-weight: 600; }
.wiki-caret { display: inline-flex; flex: none; color: var(--text-faint); }
.wiki-caret svg { width: 13px; height: 13px; }
.wiki-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-cnt { flex: none; font-size: 11px; color: var(--text-faint); font-weight: 600; }
.wiki-path { flex: none; font-size: 11px; color: var(--text-faint); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-row--hit { flex-wrap: wrap; align-items: flex-start; padding: 7px 8px; }
.wiki-snip { flex-basis: 100%; font-size: 11.5px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wiki-hint { padding: 10px 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.wiki-hint--err { color: var(--danger); }

/* 본문 */
.wiki-doc-head { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 14px; }
.wiki-doc-head h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: var(--text-strong); line-height: 1.3; }
.wiki-doc-meta { font-size: 12px; color: var(--text-faint); }
.wiki-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.wiki-tag { font-size: 11px; color: var(--text-muted); background: var(--surface-2); border-radius: var(--r-pill); padding: 2px 8px; }
.wiki-body { font-size: 14px; line-height: 1.75; color: var(--text); }
.wiki-body .ai-md-h { margin: 20px 0 8px; color: var(--text-strong); }
.wiki-body .ai-md-h1 { font-size: 20px; }
.wiki-body .ai-md-h2 { font-size: 17px; }
.wiki-body .ai-md-h3 { font-size: 15px; }
.wiki-body .ai-md-p { margin-bottom: 12px; }
.wiki-body .ai-md-table { font-size: 13px; }
/* 좁은 화면에서만 표를 가로 스크롤로 — PC에서 block으로 바꾸면 열이 세로로 쪼개진다. */
@media (max-width: 768px) {
  .wiki-body .ai-md-table { display: block; max-width: 100%; overflow-x: auto; }
  /* 셀 안의 긴 서버 경로(\\kog-server\...)가 안 접히면 열 하나가 화면 밖으로 밀린다. */
  .wiki-body .ai-md-table .md-code,
  .wiki-body .ai-md-table td { overflow-wrap: anywhere; }
}
.wiki-body .ai-md-q { margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--border-2);
  background: var(--surface-2); border-radius: 0 8px 8px 0; color: var(--text-muted); }

/* 우측 패널 */
.wiki-aside-sec + .wiki-aside-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.wiki-aside-h { font-size: 12px; font-weight: 700; color: var(--text-strong); padding: 4px 8px 8px; }
/* 필터 결과 행 — 제목이 잘리지 않게 경로를 아랫줄로. */
.wiki-row--flat { flex-wrap: wrap; align-items: flex-start; padding: 6px 8px; }
.wiki-row--flat .wiki-path { flex-basis: 100%; max-width: 100%; }

/* 백링크 행 — 좁은 패널에서 제목과 폴더가 겹치지 않게 두 줄로. */
.wiki-row--bl { flex-wrap: wrap; align-items: flex-start; padding: 6px 8px; }
.wiki-row--bl .wiki-path { flex-basis: 100%; max-width: 100%; }

/* 우측 패널이 없을 때는 본문이 그 폭을 가져간다. */
.wiki-grid--noaside { grid-template-columns: 260px minmax(0, 1fr); }

.wiki-kv { display: flex; align-items: baseline; gap: 8px; padding: 3px 8px; font-size: 12px; color: var(--text-muted); }
.wiki-kv span { flex: none; width: 62px; color: var(--text-faint); }
.wiki-kv code { min-width: 0; overflow-wrap: anywhere; }
.wiki-aside .btn { margin: 10px 8px 4px; }

/* 모바일 */
.wiki-root--m .wiki-back { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; padding: 6px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill);
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.wiki-root--m .wiki-back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.wiki-root--m .wiki-doc-head h1 { font-size: 19px; }
.wiki-root--m .wiki-aside-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* 마크다운 보강 — 코드펜스·인라인코드·번호목록·체크박스·구분선 */
.md-pre { margin: 10px 0 14px; padding: 12px 14px; background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow-x: auto; }
.md-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
  line-height: 1.6; color: var(--text-strong); white-space: pre; }
.md-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--text-strong); }
.md-link { color: var(--primary); text-decoration: none; }
.md-link:hover { text-decoration: underline; }
.ai-md-ol { margin: 4px 0 8px; padding-left: 20px; }
.ai-md-ol li { margin: 2px 0; }
.md-check { margin-right: 6px; color: var(--text-faint); }
.md-check.is-done { color: var(--success); }
.md-hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }

/* ── 위키 2단계 — 그래프·탭·목차·퀵스위처 ───────────────────────────── */
.wiki-title { display: flex; align-items: flex-end; gap: 8px; }
.wiki-title .grow { flex: 1; min-width: 0; }

/* 좌·우 패널 탭 */
.wiki-tabs { display: flex; gap: 2px; padding: 2px; margin-bottom: 6px; background: var(--surface-2); border-radius: var(--r-sm); }
.wiki-tab { flex: 1; padding: 5px 4px; white-space: nowrap; border: none; background: none; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.wiki-tab:hover { color: var(--text-strong); }
.wiki-tab.is-on { background: var(--surface); color: var(--primary-strong); box-shadow: var(--shadow-xs); }

/* 범위 전환(업무 문서 / 전체) — 목록 탭과 같은 생김새로, 위에 한 줄 더 둔다 */
.wiki-tabs--scope { margin-bottom: 4px; }
.wiki-tabs--scope .wiki-tab { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }

/* 첫 화면 — 문서를 고르기 전에 무엇이 있는지 보여 주는 묶음 */
.wiki-home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 18px 0 6px; }
.wiki-home-card { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font: inherit; }
.wiki-home-card:hover { background: var(--surface-3); }
.wiki-home-card-t { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.wiki-home-card-d { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.wiki-home-sec { margin-top: 20px; }
.wiki-home-sec .wiki-row--flat { border-radius: var(--r-sm); }

/* 태그 */
.wiki-tagwrap { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 4px 10px; }
.wiki-tag--btn { border: 1px solid var(--border); cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.wiki-tag--btn:hover { border-color: var(--border-2); color: var(--text-strong); }
.wiki-tag--btn.is-on { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary-strong); }

/* 제목 옆 즐겨찾기 */
.wiki-doc-title { display: flex; align-items: flex-start; gap: 8px; }
.wiki-doc-title h1 { flex: 1; min-width: 0; }
.wiki-star { border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--text-faint); padding: 2px 4px; }
.wiki-star.is-on { color: var(--warning); }

/* 목차 */
.wiki-toc { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text-muted); padding: 4px 8px; border-radius: 7px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-toc:hover { background: var(--surface-2); color: var(--text-strong); }
.wiki-toc.is-on { color: var(--primary-strong); font-weight: 700; background: var(--primary-softer); }
.wiki-toc.lv1 { font-weight: 700; color: var(--text-strong); }
.wiki-toc.lv3 { padding-left: 20px; }
.wiki-toc.lv4, .wiki-toc.lv5, .wiki-toc.lv6 { padding-left: 32px; font-size: 12px; }
.wiki-aside-body { max-height: 46vh; overflow: auto; }

/* 로컬 그래프 */
.wiki-mini-graph { display: block; width: 100%; height: 180px; background: var(--surface-2); border-radius: var(--r-sm); }
.wiki-mini-more { font-size: 11.5px; margin-left: auto; }
.wiki-aside-h { display: flex; align-items: center; gap: 6px; }

/* 전체 그래프 오버레이 */
.wiki-graph-overlay { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; }
.wiki-graph-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border); font-size: 13px; }
.wiki-graph-meta { color: var(--text-muted); font-size: 12px; }
.wiki-graph-toggle { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; cursor: pointer; }
.wiki-graph-canvas { flex: 1; width: 100%; min-height: 0; }

/* 퀵 스위처 */
.wiki-qs { position: fixed; inset: 0; z-index: 95; background: rgba(17, 24, 39, .28); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.wiki-qs-box { width: min(620px, 92vw); max-height: 66vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; }
.wiki-qs-input { border: none; border-bottom: 1px solid var(--border); padding: 14px 16px; font: inherit; font-size: 15px; color: var(--text); outline: none; }
.wiki-qs-list { overflow: auto; padding: 6px; }

/* ============================================================
   지문 로그인 게이트 (fpLogin.js) — 시네마틱 메탈.
   연출 원본 _experiments/fingerprint-login-proto.html v2.
   페이즈는 #fpGate[data-phase=wait|scan|boot|enter]로 전환.
   ============================================================ */
#fpGate { display: none; position: fixed; inset: 0; z-index: 120; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden; color: #E6EDF5;
  background: radial-gradient(62% 62% at 50% 44%, #0B1224 0%, #04060C 78%); }
/* 카본 위브 + 스캔라인 */
#fpGate::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(45deg, #0A0F18 25%, transparent 25%, transparent 75%, #0A0F18 75%),
    linear-gradient(45deg, #0A0F18 25%, transparent 25%, transparent 75%, #0A0F18 75%);
  background-color: #060A11; background-size: 14px 14px; background-position: 0 0, 7px 7px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 44%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 65% at 50% 44%, #000 20%, transparent 75%); }
#fpGate::after { content: ''; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background: repeating-linear-gradient(0deg, #9EC0FF 0 1px, transparent 1px 4px); mix-blend-mode: screen; }

.fpg-hud { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 8;
  display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 8px;
  background: rgba(14,22,38,.62); border: 1px solid rgba(91,140,255,.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 11px; font-weight: 700; letter-spacing: .22em; color: #CFE0FF; }
.fpg-hud .dot { width: 7px; height: 7px; border-radius: 50%; background: #5B8CFF;
  box-shadow: 0 0 10px #5B8CFF; animation: fpg-beat 2s ease-in-out infinite; }
@keyframes fpg-beat { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.fpg-corner { position: absolute; width: 30px; height: 30px; z-index: 8; opacity: .45;
  border: 1px solid rgba(159,190,255,.55); }
.fpg-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.fpg-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.fpg-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.fpg-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.fpg-core { position: relative; width: min(560px, 88vmin); aspect-ratio: 1; z-index: 2;
  display: flex; align-items: center; justify-content: center; }
.fpg-core > svg { width: 52%; position: relative; z-index: 3;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.65)); overflow: visible; }
.fpg-radar { position: absolute; inset: 13%; border-radius: 50%; z-index: 1; opacity: 0;
  border: 1px dashed rgba(91,140,255,.14); transition: opacity .5s; }
.fpg-radar::before { content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid transparent; border-top-color: rgba(159,190,255,.85);
  filter: drop-shadow(0 0 8px rgba(159,190,255,.8)); animation: fpg-orbit 3.2s linear infinite; }
.fpg-radar.in { inset: 20%; }
.fpg-radar.in::before { animation-duration: 2.1s; animation-direction: reverse;
  border-top-color: rgba(45,91,255,.5); }
@keyframes fpg-orbit { to { transform: rotate(360deg); } }
#fpGate[data-phase="wait"] .fpg-radar, #fpGate[data-phase="scan"] .fpg-radar { opacity: 1; }
#fpGate[data-phase="scan"] .fpg-radar::before { animation-duration: .9s; }

.fpg-orbitring { position: absolute; inset: 4%; border-radius: 50%; z-index: 1; opacity: 0;
  border: 1px solid rgba(91,140,255,.22);
  box-shadow: 0 0 24px rgba(45,91,255,.12), inset 0 0 24px rgba(45,91,255,.08); }
.fpg-mod { position: absolute; z-index: 5; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 12px; opacity: 0;
  background: linear-gradient(160deg, #1B2330, #0C111A 60%, #141B26);
  border: 1px solid rgba(159,190,255,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.fpg-mod b { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #DFE8F5; }
.fpg-mod i { width: 14px; height: 3px; border-radius: 2px; background: #2D5BFF; opacity: .85;
  box-shadow: 0 0 8px rgba(45,91,255,.9); }
.fpg-mod.hub b { color: #9FBEFF; }

.fpg-brand { position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(50% + min(150px, 24vmin)); text-align: center; z-index: 4; pointer-events: none; }
.fpg-brand .b1 { font-size: 22px; font-weight: 800; letter-spacing: .4px; color: #E6EDF5; }
.fpg-brand .b1 .kog { color: #9FBEFF; }

.fpg-zone { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); z-index: 8;
  width: 460px; max-width: 92vw; display: flex; flex-direction: column; align-items: center; }
.fpg-ph { display: none; flex-direction: column; align-items: center; width: 100%; text-align: center; }
#fpGate[data-phase="wait"] .fpg-ph-wait { display: flex; }
#fpGate[data-phase="scan"] .fpg-ph-scan { display: flex; }
.fpg-title { font-size: 15.5px; font-weight: 700; color: #E6EDF5; }
.fpg-sub { margin-top: 6px; font-size: 12.5px; color: #93A1B4; line-height: 1.6; }
.fpg-code { margin-top: 13px; display: flex; gap: 7px; justify-content: center; }
.fpg-code b { width: 34px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(170deg, #161D29, #0A0F17); border: 1px solid rgba(147,158,175,.35);
  border-radius: 9px; font-size: 20px; font-weight: 800; color: #9FBEFF;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 12px rgba(0,0,0,.4); }
/* 게이트 사번 입력 — 로그인 요청의 주인을 정하는 첫 단계(2026-09-12).
   게이트는 어두운 스튜디오 톤이라 옵스원 토큰 대신 이 화면의 기존 색을 그대로 쓴다. */
.fpg-idform { display: flex; flex-direction: column; align-items: center; width: 100%; }
.fpg-input { margin-top: 13px; width: 210px; max-width: 100%; height: 44px; text-align: center;
  background: linear-gradient(170deg, #161D29, #0A0F17); border: 1px solid rgba(147,158,175,.35);
  border-radius: 9px; color: #E6EDF5; font-size: 19px; font-weight: 700; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 12px rgba(0,0,0,.4); }
.fpg-input::placeholder { color: #5A6676; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.fpg-input:focus { outline: none; border-color: rgba(91,140,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 3px rgba(91,140,255,.18); }
.fpg-go { margin-top: 10px; width: 210px; max-width: 100%; height: 40px; border-radius: 9px;
  border: 1px solid rgba(91,140,255,.55); background: linear-gradient(170deg, #24407F, #16264C);
  color: #DCE7FF; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.fpg-go:hover { border-color: rgba(91,140,255,.9); }
.fpg-err { margin-top: 9px; min-height: 17px; font-size: 12.5px; color: #FFB4A8; line-height: 1.5; }
.fpg-pw { margin-top: 14px; background: none; border: none; color: #93A1B4; font-size: 12.5px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fpg-pw:hover { color: #E6EDF5; }
.fpg-scan-title { font-size: 15.5px; font-weight: 700; color: #9FBEFF; letter-spacing: .02em; }

/* 부팅 홀로 카드 — 좌측 사이드(인트로 카드 문법) */
.fpg-holo { position: absolute; left: 2.5%; top: 50%; transform: translateY(-50%); z-index: 8;
  display: none; width: 300px; padding: 14px 16px; border-radius: 13px; text-align: left;
  background: linear-gradient(150deg, rgba(18,30,58,.74), rgba(12,20,40,.55));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(91,140,255,.45); border-left: 4px solid #2D5BFF;
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 26px rgba(45,91,255,.22); }
#fpGate[data-phase="boot"] .fpg-holo, #fpGate[data-phase="enter"] .fpg-holo { display: block; }
.fpg-holo .ey { color: #7FA8FF; font-size: 10px; font-weight: 700; letter-spacing: .2em; margin-bottom: 7px; }
.fpg-holo .ln { display: flex; justify-content: space-between; gap: 12px;
  font-family: 'JetBrains Mono', 'D2Coding', monospace; font-size: 11.5px; line-height: 2; color: #93A1B4;
  opacity: 0; animation: fpg-lnin .35s ease forwards; }
.fpg-holo .ln:nth-child(2) { animation-delay: .1s; } .fpg-holo .ln:nth-child(3) { animation-delay: .4s; }
.fpg-holo .ln:nth-child(4) { animation-delay: .7s; } .fpg-holo .ln:nth-child(5) { animation-delay: 1s; }
@keyframes fpg-lnin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fpg-holo .ok { color: #39D98A; font-weight: 700; } .fpg-holo .who { color: #fff; font-weight: 700; }
@media (max-width: 900px) { .fpg-holo { display: none !important; } }

.fpg-welcome { position: absolute; inset: 0; z-index: 9; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; }
#fpGate[data-phase="enter"] .fpg-welcome { display: flex; animation: fpg-lnin .6s ease .3s both; }
.fpg-welcome .ey { font-size: 10.5px; font-weight: 700; letter-spacing: .3em; color: #7FA8FF; }
.fpg-welcome h1 { font-size: 26px; font-weight: 800; color: #E6EDF5; }
.fpg-welcome h1 .c { color: #9FBEFF; }
#fpGate[data-phase="enter"] .fpg-core { opacity: .3; }
#fpGate[data-phase="enter"] .fpg-zone, #fpGate[data-phase="enter"] .fpg-brand { opacity: 0; }

/* 스윕 라인 + 플래시 */
.fpg-sweep { position: absolute; left: 0; right: 0; top: -4px; height: 2px; z-index: 6; opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #9EC0FF 30%, #fff 50%, #9EC0FF 70%, transparent);
  box-shadow: 0 0 18px rgba(158,192,255,.9); }
.fpg-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%, rgba(219,230,255,.9), rgba(45,91,255,.35) 34%, transparent 62%); }

/* 클래식 카드의 지문 로그인 버튼 — 터치 기기(폰)에서는 숨김(폰이 열쇠) */
@media (pointer: coarse) { #opsFpBtn { display: none; } }

/* ── 폰 승인 바텀시트 ── */
.fp-approve { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 130;
  transform: translateY(calc(100% + 24px)); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(150deg, #121E3A, #0C1428);
  border: 1px solid rgba(91,140,255,.45); border-radius: 16px; padding: 16px;
  box-shadow: 0 -8px 34px rgba(0,0,0,.45), 0 0 26px rgba(45,91,255,.25); color: #E6EDF5;
  padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.fp-approve.show { transform: translateY(0); }
.fp-approve .ey { color: #7FA8FF; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; margin-bottom: 8px; }
.fp-approve .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-approve .code { font-size: 26px; font-weight: 800; letter-spacing: .18em; color: #9FBEFF;
  font-variant-numeric: tabular-nums; }
.fp-approve .ua { font-size: 11.5px; color: #93A1B4; margin-top: 3px; }
.fp-approve .btns { display: flex; gap: 8px; margin-top: 14px; }
.fp-approve .btns button { flex: 1; padding: 13px 0; border-radius: 12px; border: 1px solid rgba(91,140,255,.4);
  font-size: 14px; font-weight: 700; cursor: pointer; }
#fpApproveOk { background: linear-gradient(160deg, #2D5BFF, #1E45E6); color: #fff; border-color: #5B8CFF; }
#fpApproveNo { background: rgba(14,22,38,.8); color: #93A1B4; }
.fp-approve .msg { min-height: 18px; margin-top: 9px; font-size: 12.5px; color: #9FBEFF; text-align: center; }
/* 지문 재등록 — 패스키가 사라진 기기에서만 JS 가 hidden 을 푼다(2026-09-12). */
.fp-approve .fp-reenroll { display: block; width: 100%; margin-top: 9px; height: 38px; border-radius: 9px;
  border: 1px solid rgba(147,158,175,.4); background: transparent; color: #C7D2E0;
  font-size: 13px; font-weight: 600; cursor: pointer; }
.fp-approve .fp-reenroll:hover { border-color: rgba(159,190,255,.8); color: #E6EDF5; }

/* ── 지문 게이트 v3 — 제품 렌더 톤(부장님 레퍼런스: KOG PMS 박스 렌더 + 브랜드 필름 홀로 아치) ── */
/* 스튜디오 배경 — 위 은은한 콜드 라이트, 아래 깊은 어둠 */
#fpGate { background:
  radial-gradient(60% 46% at 50% 34%, #101B33 0%, #081020 48%, #04070E 78%, #020408 100%); }

/* 바닥 — 반사 광 웅덩이 + 수평선 */
.fpg-floor { position: absolute; left: 50%; top: calc(50% + 10.5vmin); transform: translateX(-50%);
  width: min(920px, 120vmin); height: 40vmin; pointer-events: none; z-index: 1;
  background:
    radial-gradient(46% 22% at 50% 12%, rgba(45,91,255,.22), rgba(45,91,255,.05) 55%, transparent 75%),
    linear-gradient(180deg, rgba(90,130,220,.08), transparent 45%); }
.fpg-floor::before { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,160,255,.22) 30%, rgba(160,195,255,.32) 50%, rgba(120,160,255,.22) 70%, transparent); }

/* 마크 — 3D 제품 틸트 + 네온 림 + 바닥 반사 */
.fpg-core > svg {
  transform: perspective(1100px) rotateX(7deg) rotateY(-9deg);
  filter:
    drop-shadow(0 0 14px rgba(60,102,255,.38))
    drop-shadow(0 0 44px rgba(45,91,255,.22))
    drop-shadow(0 30px 46px rgba(0,0,0,.72));
  -webkit-box-reflect: below 2.2vmin linear-gradient(transparent 58%, rgba(0,0,0,.30));
  animation: fpg-hover 5.2s ease-in-out infinite; }
@keyframes fpg-hover {
  0%, 100% { transform: perspective(1100px) rotateX(7deg) rotateY(-9deg) translateY(0); }
  50%      { transform: perspective(1100px) rotateX(6.2deg) rotateY(-7.6deg) translateY(-.7vmin); } }
/* 임팩트 순간엔 정면 스냅 — 도킹·점등이 또렷하게 읽히도록 */
#fpGate[data-phase="scan"] .fpg-core > svg,
#fpGate[data-phase="boot"] .fpg-core > svg,
#fpGate[data-phase="enter"] .fpg-core > svg {
  animation: none; transform: perspective(1100px) rotateX(2.5deg) rotateY(0deg);
  transition: transform .7s cubic-bezier(.2,.8,.2,1); }

/* 홀로 데이터 패널 아치 — 곡면 배치(perspective + rotateY), 은은한 부유 */
.fpg-arc { position: absolute; top: 50%; z-index: 2; display: flex; flex-direction: column; gap: 2vmin;
  pointer-events: none; perspective: 900px; }
.fpg-arc-l { left: max(3vw, calc(50% - 58vmin)); transform: translateY(-58%); }
.fpg-arc-r { right: max(3vw, calc(50% - 58vmin)); transform: translateY(-58%); }
.fpg-panel { width: 17vmin; min-width: 148px; padding: 1.1vmin 1.3vmin; border-radius: 1vmin;
  background: linear-gradient(160deg, rgba(20,34,66,.55), rgba(10,18,38,.35));
  border: 1px solid rgba(91,140,255,.34);
  box-shadow: 0 0 2.4vmin rgba(45,91,255,.16), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fpg-panelfloat 6s ease-in-out infinite; }
.fpg-arc-l .fpg-panel { transform: rotateY(24deg); }
.fpg-arc-r .fpg-panel { transform: rotateY(-24deg); animation-delay: 1.1s; }
.fpg-arc .fpg-panel:nth-child(2) { animation-delay: .6s; }
.fpg-panel.sm { opacity: .65; width: 14vmin; min-width: 120px; }
@keyframes fpg-panelfloat { 0%,100% { margin-top: 0; } 50% { margin-top: -.6vmin; } }
.fpg-panel b { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #9FBEFF; margin-bottom: .7vmin; }
.fpg-panel svg { display: block; width: 100%; height: 3vmin; min-height: 22px; opacity: .9;
  filter: drop-shadow(0 0 4px rgba(91,140,255,.8)); }
.fpg-panel i { display: block; font-style: normal; font-size: 10.5px; color: #7E8FAD; margin-top: .5vmin;
  font-variant-numeric: tabular-nums; }
.fpg-panel .bars { display: flex; align-items: flex-end; gap: .5vmin; height: 3vmin; min-height: 22px; }
.fpg-panel .bars i { flex: 1; margin: 0; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #5B8CFF, #1E45E6); opacity: .85;
  box-shadow: 0 0 6px rgba(45,91,255,.7); }
/* 연출 단계에선 패널을 옆으로 물러나게 — 임팩트·모듈 도킹이 주인공 */
#fpGate[data-phase="boot"] .fpg-arc, #fpGate[data-phase="enter"] .fpg-arc { opacity: .22; transition: opacity .6s; }
@media (max-width: 1100px) { .fpg-arc { display: none; } }

/* ── 지문 게이트 v4 — 실물 메탈 렌더(suite-box-single) 중심 ── */
.fpg-device { width: 74%; display: block; position: relative; z-index: 3;
  /* 가장자리 페더 — 렌더 원판의 스튜디오 배경을 게이트 배경에 자연스럽게 녹인다 */
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 47%, #000 58%, transparent 82%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 47%, #000 58%, transparent 82%);
  /* 대기 — 감광 상태(점등 전). 점화는 JS가 클래스로 전환 */
  filter: brightness(.82) saturate(.78) drop-shadow(0 0 30px rgba(20,40,90,.5));
  transition: filter .9s ease; }
#fpGate[data-phase="boot"] .fpg-device, #fpGate[data-phase="enter"] .fpg-device {
  filter: brightness(1.12) saturate(1.22)
    drop-shadow(0 0 26px rgba(60,110,255,.55)) drop-shadow(0 0 70px rgba(45,91,255,.3)); }
/* v3 SVG용 규칙 무력화 대상이 없어도 무해 — 기존 .fpg-core > svg 규칙은 img에 미적용 */
/* 배경을 렌더 원판 톤에 맞춘다 */
#fpGate { background:
  radial-gradient(58% 46% at 50% 40%, #131A26 0%, #0A0F18 50%, #05070C 80%, #030408 100%); }
.fpg-floor { top: calc(50% + 13vmin); }

/* 점화 충격파 — CSS 링(사진 위 오버레이) */
.fpg-shock { position: absolute; left: 50%; top: 47%; border-radius: 50%;
  transform: translate(-50%,-50%); width: 12px; height: 12px; opacity: 0; z-index: 4;
  border: 3px solid rgba(120,165,255,.85); pointer-events: none;
  box-shadow: 0 0 18px rgba(60,110,255,.6); }
.fpg-shock.s2 { border-color: rgba(45,91,255,.55); }
/* 바닥 광 웅덩이 — 사각 경계 제거(전방향 페더) */
.fpg-floor { -webkit-mask-image: radial-gradient(58% 88% at 50% 32%, #000 30%, transparent 74%);
  mask-image: radial-gradient(58% 88% at 50% 32%, #000 30%, transparent 74%); }

/* ── 지문 게이트 v5 — 브랜드 필름 배경(data-bg=film 활성 시) ── */
.fpg-bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 46%; z-index: 0; display: none; }
#fpGate[data-bg="film"] .fpg-bgvid { display: block; }
.fpg-bgscrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none;
  background:
    linear-gradient(180deg, rgba(3,6,12,.55), transparent 26%, transparent 68%, rgba(3,6,12,.66)),
    radial-gradient(120% 100% at 50% 45%, transparent 52%, rgba(2,4,9,.6) 100%); }
#fpGate[data-bg="film"] .fpg-bgscrim { display: block; }
/* 필름 모드 — 필름 속 기기가 주인공. 중앙 렌더·패널·바닥·레이더는 걷고 UI를 우측 복도로 */
#fpGate[data-bg="film"] .fpg-device, #fpGate[data-bg="film"] .fpg-arc,
#fpGate[data-bg="film"] .fpg-floor, #fpGate[data-bg="film"] .fpg-radar { display: none; }
#fpGate[data-bg="film"] .fpg-core { position: absolute; left: 28%; top: 52%;
  transform: translate(-50%,-50%); width: 56vmin; height: 56vmin; }
#fpGate[data-bg="film"] .fpg-zone { left: auto; right: 5%; bottom: auto; top: 50%;
  transform: translateY(-50%); width: 340px; align-items: flex-start; }
#fpGate[data-bg="film"] .fpg-ph { align-items: flex-start; text-align: left; }
#fpGate[data-bg="film"] .fpg-code { justify-content: flex-start; }
#fpGate[data-bg="film"] .fpg-zone .fpg-title { text-shadow: 0 2px 14px rgba(0,0,0,.9); }
#fpGate[data-bg="film"] .fpg-zone .fpg-sub { text-shadow: 0 2px 10px rgba(0,0,0,.9); }
#fpGate[data-bg="film"] .fpg-brand { left: auto; right: 5%; top: auto; bottom: 6%;
  transform: none; text-align: right; }
#fpGate[data-bg="film"] .ph-boot { left: auto; right: 5%; top: 50%; }
@media (max-width: 1100px) { #fpGate[data-bg="film"] .fpg-zone { right: 50%; transform: translate(50%,-50%); } }
/* 정면뷰 렌더(suite-box-front, 세로 3:4) — 부장님 2026-08-09 "정면뷰로". 폭·마스크 재보정 */
.fpg-device { width: 58%;
  -webkit-mask-image: radial-gradient(ellipse 56% 54% at 50% 47%, #000 60%, transparent 84%);
  mask-image: radial-gradient(ellipse 56% 54% at 50% 47%, #000 60%, transparent 84%); }

/* ── 겹 도킹 오버레이 v6 — 렌더 이미지 위에 실제로 움직이는 두 링 ── */
.fpg-devicewrap { position: relative; width: 58%; z-index: 3; }
.fpg-devicewrap .fpg-device { width: 100%; }
.fpg-emblem { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fpg-emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* 원본 엠블럼을 덮어 '꺼진 상태'를 만드는 패치 — 카본 페이스 톤, 부드러운 페더 */
.fpg-patch { position: absolute; left: 16%; top: 28%; width: 68%; height: 44%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(9,12,17,.99) 0%, rgba(9,12,17,.98) 60%, rgba(9,12,17,.78) 78%, rgba(9,12,17,0) 100%); }

/* ── WMS 로케이션 관리(wms-loc) ─────────────────────────────
   껍데기·버튼·검색·칩은 전부 공용(.btn/.search-input-d/.unified-toolbar/.fchip/.ops-tbl-flat)을 쓴다.
   여기에는 이 화면에만 있는 것(패널·인라인 편집칸·상태 안내)만 둔다. */
.wmsl-root { padding: 24px 28px; font-family: inherit; font-size: inherit; }
.wmsl-header { margin-bottom: 16px; }
.wmsl-header-row { display: flex; align-items: flex-start; gap: 12px; }
.wmsl-root .edw-stk-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.wmsl-root .edw-stk-desc { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.wmsl-header-actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.wmsl-zone-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.wmsl-toolbar { margin-top: 0; }
.wmsl-count { font-size: 12.5px; color: var(--text-muted); padding: 0 12px 0 10px; white-space: nowrap; }
/* WMS 툴바의 텍스트 그룹은 폭이 모자라면 검색칸이 먼저 줄어든다 — 건수(8줄·5자리)가 오른쪽으로 잘리지 않게 */
.wmsl-toolbar .toolbar-text-group { flex-shrink: 1; min-width: 0; max-width: 100%; }

/* 라벨 발행 툴바 버튼 묶음 — 줄바꿈으로 글자가 세로로 쪼개지지 않게 고정 폭을 지킨다 */
.wmsl-toolbar-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wmsl-toolbar-btns .btn { white-space: nowrap; flex-shrink: 0; }
/* .wmsl-in 이 뒤에서 width:100%를 주므로 클래스 2개로 특이도를 올린다 */
.wmsl-in.wmsl-preset-sel { width: 170px; flex-shrink: 0; }

/* 표 — 래퍼 테두리 한 겹(플랫 표 관습) */
.wmsl-tblwrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: auto; background: var(--surface); }
.wmsl-tbl { width: 100%; font-size: 13px; }
.wmsl-tbl .wmsl-code { font-weight: 600; color: var(--text-strong); }
.wmsl-tbl .wmsl-c { text-align: center; }
.wmsl-tbl .wmsl-note-cell { color: var(--text-muted); }
/* 용기 관리 — RFID EPC(24자리)가 이웃 칸을 밀지 않게 한 줄로 자른다 */
.wmsl-epc { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.wmsl-tbl tr.wmsl-off td { opacity: .5; }
.wmsl-tbl tr.wmsl-editing { background: var(--surface-2); }
.wmsl-act { white-space: nowrap; text-align: right; }
.wmsl-act .btn { margin-left: 4px; }

/* 창고 대시보드(wms-dash) — 예외 한 표. 0건 행은 옅게, 펼친 세부 행은 들여쓴다 */
.wmsd-tbl .wmsd-ex-t { font-weight: 600; color: var(--text-strong); }
.wmsd-tbl .wmsd-ex-n { text-align: center; font-variant-numeric: tabular-nums; }
.wmsd-tbl .wmsd-ex--zero td { color: var(--text-muted); }
.wmsd-tbl .wmsd-ex--zero .wmsd-ex-t { font-weight: 500; color: var(--text-muted); }
.wmsd-zero { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.wmsd-tbl .wmsd-row td { background: var(--surface-2); }
.wmsd-tbl .wmsd-row-l { padding-left: 28px !important; }
.wmsd-tbl tbody tr.mon-row td, .wmsl-tbl--dense tbody tr.mon-row td { padding: 0 12px; height: 40px; }
.wmsl-tbl--dense thead th { height: 34px; padding: 0 12px; }
.wmsl-tbl--dense .ts { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 입출고 기록(wms-log) — 종류 칩과 기간 칩 사이 구분 */
.wmslog-sep { width: 1px; height: 22px; background: var(--border-2); margin: 0 4px; align-self: center; }
.wmslog-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-left: 4px; }
.wmslog-date input { height: 32px; padding: 0 8px; font: inherit; font-size: 12.5px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-strong); }
.wmslog-date.active input { border-color: var(--primary); }
.wmsl-del:hover { color: var(--danger); }
.wmsl-bd-on { background: var(--success-soft, rgba(22,163,74,.12)); color: var(--success, #15803d); }
.wmsl-bd-off { background: var(--surface-2); color: var(--text-faint); }
/* 인라인 편집칸 — 표 행 높이를 넘기지 않게 촘촘히 */
.wmsl-in { width: 100%; height: 28px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); font: inherit; font-size: 12.5px; padding: 0 7px; color: var(--text-strong); }

/* 로딩 스켈레톤 */
.wmsl-skel { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.wmsl-skel-row { height: 32px; border-radius: var(--r-sm); background: var(--surface-2);
  animation: wmslPulse 1.3s ease-in-out infinite; }
@keyframes wmslPulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .wmsl-skel-row { animation: none } }

/* 상태 안내 — edw-stk-msg 위에 제목·버튼만 얹는다 */
.wmsl-msg .wmsl-msg-t { display: block; font-size: 14px; color: var(--text-strong); margin-bottom: 6px; }
.wmsl-msg-code { display: inline-block; margin-top: 6px; background: var(--surface-2);
  padding: 2px 7px; border-radius: var(--r-sm); font-size: 12px; }
.wmsl-msg-sub { margin-top: 6px; font-size: 12px; color: var(--text-faint); }
.wmsl-msg-acts { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

/* 패널(추가·일괄) */
.wmsl-panel { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  padding: 16px; margin-bottom: 12px; }
.wmsl-panel-h { font-weight: 700; font-size: 14px; margin-bottom: 12px; color: var(--text-strong); }
.wmsl-sub-h { font-size: 13px; font-weight: 700; margin: 0 0 2px; color: var(--text-strong); }
.wmsl-panel-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.wmsl-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wmsl-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.wmsl-form-wide { grid-column: 1 / -1; }
.wmsl-req { color: var(--danger); }
.wmsl-form input, .wmsl-form select, .wmsl-gen input, .wmsl-panel textarea {
  height: 36px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font: inherit; font-size: 13px; padding: 0 10px; color: var(--text-strong); }
.wmsl-panel textarea { height: auto; padding: 8px 10px; line-height: 1.55; width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; resize: vertical; }
.wmsl-hint { color: var(--text-muted); font-size: 12px; margin: 8px 0 0; line-height: 1.6; }
.wmsl-hint code { background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-sm); }
/* 생성기는 "랙 [10] 개까지"처럼 한 줄로 읽혀야 한다 — 세로로 쪼개면 문장이 끊긴다. */
.wmsl-gen { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }
.wmsl-gen label { display: flex; flex-direction: row; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.wmsl-gen input { width: 78px; }
.wmsl-gen label:first-child input { width: 130px; }
.wmsl-bulk-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wmsl-prev { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.wmsl-prev .wmsl-sub-h { margin-bottom: 8px; }
@media (max-width: 900px) { .wmsl-bulk-2col { grid-template-columns: 1fr; } }

/* ── WMS 입고(wms-in) ── 로케이션 관리(wmsl-)의 껍데기·표를 그대로 쓰고 여기만 추가 */
.wmsin-panel { padding-bottom: 12px; }
.wmsin-tbl td { vertical-align: top; }
.wmsin-hit { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.wmsin-num { text-align: right; }
.wmsin-num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.wmsin-when { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wmsin-sub { color: var(--text-muted); font-weight: 400; }
.wmsin-warn { color: var(--danger); }
.wmsin-panel-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wmsin-bulkloc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.wmsin-bulkloc select { width: 150px; height: 32px; }
.wmsl-spacer { flex: 1; }
.wmsin-hist-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px;
  font-size: 14px; font-weight: 700; color: var(--text-strong); flex-wrap: wrap; }
.wmsin-hist-h .wmsl-count { font-weight: 400; padding-left: 0; }
.wmsin-mes-note { margin: 0; }
/* 이력 표 — 우측정렬 수량 바로 옆이 좌측정렬이면 "12000 EA A-03-2"로 붙어 읽힌다. 자리·로트·MES를 가운데로. */
.wmsin-hist td[data-col="loc"], .wmsin-hist th[data-col="loc"],
.wmsin-hist td[data-col="lot"], .wmsin-hist th[data-col="lot"],
.wmsin-hist td[data-col="mes"], .wmsin-hist th[data-col="mes"] { text-align: center; }
.wmsin-hist td[data-col="loc"] { font-weight: 600; }

/* ── WMS 재고현황(wms-stock) ── 로케이션 관리·입고와 같은 껍데기. 여기만 추가 */
.wmss-caveat { margin-top: 4px !important; color: var(--text-faint) !important; }
.wmss-sum { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }
.wmss-sum b { color: var(--text-strong); font-size: 14px; margin-right: 2px; font-variant-numeric: tabular-nums; }
.wmss-sum-neg { color: var(--danger); }
.wmss-sum-neg b { color: var(--danger); }
.wmss-loc { font-weight: 600; }
.wmss-hidden-loc { margin-left: 6px; }
.wmss-unit { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.wmss-neg { color: var(--danger); font-weight: 700; }
.wmss-bd-neg { background: var(--danger-soft); color: var(--danger); }
/* 우측정렬 수량 바로 옆이 좌측정렬이면 "500 EA 2026-08-09"로 붙어 읽힌다 — 자리·시각·표시를 가운데로. */
.wmss-tbl td[data-col="loc"],  .wmss-tbl th[data-col="loc"],
.wmss-tbl td[data-col="last"], .wmss-tbl th[data-col="last"],
.wmss-tbl td[data-col="flag"], .wmss-tbl th[data-col="flag"] { text-align: center; }
.sort-btn.wmss-on { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

/* ── WMS 이동·재배치(wms-move) ── 앞선 WMS 화면들의 껍데기·표를 그대로 쓰고 여기만 추가 */
.wmsmv-route { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.wmsmv-leg { display: flex; flex-direction: column; gap: 4px; }
.wmsmv-leg-h { font-size: 12.5px; color: var(--text-muted); }
.wmsmv-leg select { width: 190px; height: 36px; }
.wmsmv-arrow { font-size: 18px; color: var(--text-faint); padding-bottom: 7px; }
.wmsmv-arrow-s { color: var(--text-faint); margin: 0 6px; }
.wmsmv-tbl td[data-col="have"], .wmsmv-tbl th[data-col="have"],
.wmsmv-tbl td[data-col="qty"],  .wmsmv-tbl th[data-col="qty"] { text-align: right; }
.wmsmv-tbl td[data-col="qty"] input { max-width: 130px; margin-left: auto; }
.wmsmv-hist td[data-col="path"], .wmsmv-hist th[data-col="path"],
.wmsmv-hist td[data-col="mes"],  .wmsmv-hist th[data-col="mes"] { text-align: center; }

/* ── WMS 출고(wms-out) ── 이동 화면 구조를 그대로 쓰고 검수 스캔만 추가 */
.wmsout-note input { width: 260px; height: 36px; }
.wmsout-scan { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; flex-wrap: wrap; }
.wmsout-scan-in { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 260px;
  height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); }
.wmsout-scan-in .ic { width: 15px; height: 15px; color: var(--text-faint); flex-shrink: 0; }
.wmsout-scan-in input { flex: 1; border: 0; outline: 0; background: none; font: inherit;
  font-size: 13px; color: var(--text-strong); min-width: 0; }
.wmsout-scan-in input:disabled { color: var(--text-faint); }
.wmsout-scan-hint { margin-top: 6px !important; }
.wmsout-warn { color: var(--danger); }
.wmsout-bd-wait { background: color-mix(in srgb, #d97706 14%, var(--surface)); color: #b45309; }
/* 확인 안 된 줄은 배경 톤으로만 짚는다 — 굵은 컬러 테두리 금지 */
.wmsout-tbl tr.wmsout-unchecked td { background: color-mix(in srgb, #d97706 6%, var(--surface)); }
.wmsout-tbl td[data-col="have"], .wmsout-tbl th[data-col="have"],
.wmsout-tbl td[data-col="qty"],  .wmsout-tbl th[data-col="qty"] { text-align: right; }
.wmsout-tbl td[data-col="qty"] input { max-width: 130px; margin-left: auto; }
.wmsout-tbl td[data-col="chk"], .wmsout-tbl th[data-col="chk"] { text-align: center; }
.wmsout-hist td[data-col="loc"], .wmsout-hist th[data-col="loc"],
.wmsout-hist td[data-col="mes"], .wmsout-hist th[data-col="mes"] { text-align: center; }
.wmsin-note-cell { color: var(--text-muted); }

/* ── WMS 라벨·태그 발행(wms-label) ── 인쇄 격자는 .edwlbl-* 를 그대로 쓴다 */
.wmslb-preset { height: 36px; width: 200px; }
.wmslb-tbl td[data-col="sel"], .wmslb-tbl th[data-col="sel"] { text-align: center; }
.wmslb-tbl td[data-col="bc"] svg { display: block; max-width: 100%; height: auto; }
.wmslb-bad { color: var(--warning, #b45309); font-size: 12px; }
@media print {
  /* 인쇄에서는 화면 여백을 없앤다 — 격자가 자기 패딩을 갖는다 */
  .wmslb-root { padding: 0 !important; }
}

/* ── 홈 템플릿(피드·칸반) — home-templates.js 전용. 전 색상 토큰 참조(스킨·다크 자동 대응) ── */
.htpl { max-width: 1020px; margin: 0 auto; padding: 26px 8px 64px; }
.htpl-head { margin: 4px 2px 16px; }
.htpl-head h1 { font-size: 24px; font-weight: 800; color: var(--text-strong); letter-spacing: -.02em; }
.htpl-sub { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text-muted); }
.htpl-sub .red { color: var(--danger); font-weight: 700; }
.htpl-composer { margin-bottom: 14px; }

.htpl-day { display: flex; align-items: center; gap: 12px; margin: 22px 2px 10px; }
.htpl-day b { font-size: 13.5px; font-weight: 800; color: var(--text-strong); white-space: nowrap; }
.htpl-rule { flex: 1; height: 1px; background: var(--border); }
.htpl-n { font-size: 12px; color: var(--text-faint); white-space: nowrap; }

.htpl-ev { display: flex; align-items: center; gap: 13px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 16px;
  margin-bottom: 10px; transition: box-shadow .15s, transform .15s; }
.htpl-ev:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.htpl-ev.done { opacity: .72; }
.htpl-ev-ic { flex: 0 0 auto; min-width: 44px; text-align: center; font-size: 11.5px; font-weight: 800;
  border-radius: var(--r-sm); padding: 8px 6px; }
.htpl-ev-ic.red { background: var(--danger-soft); color: var(--danger); }
.htpl-ev-ic.amber { background: var(--warning-soft); color: var(--warning); }
.htpl-ev-ic.blue { background: var(--primary-soft); color: var(--primary); }
.htpl-ev-ic.green { background: var(--success-soft); color: var(--success); }
.htpl-ev-ic.gray { background: var(--surface-2); color: var(--text-muted); }
.htpl-ev-body { flex: 1; min-width: 0; }
.htpl-ev-body b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text-strong); line-height: 1.4; }
.htpl-ev-body small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.htpl-chip { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
.htpl-chip.red { background: var(--danger-soft); color: var(--danger); }
.htpl-chip.amber { background: var(--warning-soft); color: var(--warning); }
.htpl-chip.blue { background: var(--primary-soft); color: var(--primary); }
.htpl-chip.green { background: var(--success-soft); color: var(--success); }
.htpl-chip.gray { background: var(--surface-2); color: var(--text-muted); }

/* 칸반 보드 — 페이지 아닌 보드 컨테이너가 가로 스크롤(모바일 가로 넘침 금지) */
.htpl-kb { max-width: none; padding-left: 18px; padding-right: 18px; }
.htpl-board { display: flex; gap: 13px; align-items: flex-start; overflow-x: auto;
  padding: 4px 2px 18px; scroll-snap-type: x proximity; }
.htpl-col { flex: 0 0 262px; scroll-snap-align: start; background: var(--surface-2);
  border-radius: var(--r-lg); padding: 9px; }
.htpl-col-h { display: flex; align-items: center; gap: 8px; padding: 4px 7px 8px; }
.htpl-col-h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.htpl-col.overdue .dot { background: var(--danger); }
.htpl-col.today .dot { background: var(--warning); }
.htpl-col.doing .dot { background: var(--primary); }
.htpl-col.done .dot { background: var(--success); }
.htpl-col-h b { font-size: 13px; font-weight: 800; color: var(--text-strong); }
.htpl-col-h span { font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  background: var(--surface); border-radius: var(--r-pill); padding: 1px 8px; }
.htpl-card { display: block; background: var(--surface); border-radius: var(--r-sm);
  padding: 11px 12px; margin-bottom: 8px; box-shadow: var(--shadow-xs);
  transition: box-shadow .15s, transform .15s; }
.htpl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.htpl-card b { display: block; font-size: 13px; font-weight: 600; color: var(--text-strong); line-height: 1.45; }
.htpl-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.htpl-pri { font-style: normal; font-size: 10.5px; font-weight: 800; border-radius: 4px; padding: 1px 7px; }
.htpl-pri.urgent, .htpl-pri.high { background: var(--danger-soft); color: var(--danger); }
.htpl-pri.low { background: var(--surface-2); color: var(--text-faint); }
.htpl-card-meta small { margin-left: auto; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.htpl-col-empty { font-size: 12px; color: var(--text-faint); padding: 12px 8px 8px; }
.htpl-col-more { display: block; font-size: 12px; color: var(--text-muted); padding: 6px 8px 4px; }
.htpl-col-more:hover { color: var(--text); }

/* 4상태 — 스켈레톤·에러·빈 */
.htpl-skel { display: flex; flex-direction: column; gap: 12px; padding: 10px 2px; }
.htpl-error, .htpl-empty { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 22px 20px; display: flex; flex-direction: column;
  gap: 6px; align-items: flex-start; margin-top: 8px; }
.htpl-error b, .htpl-empty b { font-size: 14.5px; color: var(--text-strong); }
.htpl-error span, .htpl-empty span { font-size: 13px; color: var(--text-muted); }
.htpl-empty .btn { margin-top: 8px; }

@media (max-width: 768px) {
  .htpl { padding: 16px 14px 96px; }
  .htpl-kb { padding-left: 14px; padding-right: 14px; }
  .htpl-board { scroll-snap-type: x mandatory; }
  .htpl-col { flex: 0 0 82vw; }
}

/* ── 서플라이링크 관리 · 긴급 보충 신호 (부장님 2026-08-31 미팅) ──────────────
   로토크가 즉시 쏘는 긴급 요청이 200건 스레드 안에 섞이면 신호 구실을 못 한다.
   미처리분만 맨 위 띠로 모으고, 해당 메시지는 배경 톤으로만 구분한다
   (굵은 컬러 테두리 금지 — 표준 1px + 배경 톤). */
.rpa-urg-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--danger-soft, rgba(229, 72, 77, .06)); padding: 10px 13px; margin-bottom: 10px; }
.rpa-urg-bar b { font-size: 13.5px; color: var(--danger, #e5484d); }
.rpa-urg-bar span { font-size: 12.5px; color: var(--text-muted); }
.rpa-msg-urg { background: var(--danger-soft, rgba(229, 72, 77, .06)); border-radius: var(--r-md); padding: 8px 10px; }
.rpa-urg-tag { font-size: 11px; font-weight: 800; color: var(--danger, #e5484d); }
.rpa-urg-done { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* ── 로토크 구매 발주 (부장님 2026-08-31 미팅) ──────────────────────────────
   목록은 플랫 표 + 테두리 래퍼 관습을 따른다(먼데이식 그룹 박스 금지, 2026-08-05 확정).
   구매처 묶음은 색 액센트 바가 아니라 표준 1px 테두리 + 배경 톤으로만 가른다. */
.rpu-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.65; margin: 0 0 12px; }
.rpu-note b { color: var(--text-strong); }
.rpu-sub { font-size: 12px; color: var(--text-muted); }
.rpu-r { text-align: right; font-variant-numeric: tabular-nums; }
.rpu-c { text-align: center; }

.rpu-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.rpu-tab { border: 0; background: transparent; padding: 9px 14px; font: inherit; font-size: 13.5px;
  font-weight: 700; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rpu-tab.on { color: var(--text-strong); border-bottom-color: var(--brand, #4361EE); }

.rpu-grp { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; }
.rpu-grp-h { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: baseline;
  padding: 11px 13px; background: var(--surface-2, #f7f8fa); border-bottom: 1px solid var(--border); }
.rpu-grp-h b { font-size: 14px; color: var(--text-strong); }
.rpu-grp-m { font-size: 12.5px; color: var(--text-muted); }
.rpu-crit { color: var(--danger, #e5484d); }
.rpu-mail { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.rpu-warn { font-size: 12px; font-weight: 700; color: var(--warn, #b45309); margin-left: 6px; }
.rpu-sent { font-size: 12px; font-weight: 700; color: var(--ok, #16a34a); }
.rpu-grp-f { padding: 10px 13px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
/* 표는 줄어들며 뭉개지지 말고 가로로 흘러야 한다 — min-width 가 없으면 좁은 화면에서
   셀이 서로 겹친다(모바일 412 실렌더에서 랙 코드와 품명이 겹쳐 확인). */
.rpu-tblwrap { overflow-x: auto; }
.rpu-tblwrap table { min-width: 760px; }
.rpu-tblwrap td, .rpu-tblwrap th { white-space: nowrap; }
.rpu-tblwrap td .rpu-sub { white-space: normal; }
.rpu-off { opacity: .45; }
.rpu-qty { width: 84px; text-align: right; font: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; }

.rpu-prev { border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px; margin-bottom: 14px;
  background: var(--surface-2, #f7f8fa); }
.rpu-prev-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rpu-prev-m { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 10px; }
.rpu-prev-a { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

@media (max-width: 768px) {
  .rpu-grp-h { flex-direction: column; align-items: flex-start; }
  .rpu-qty { width: 70px; }
}

/* 구매처 채우기 — 후보는 근거와 함께, 선택은 사람이 (부장님 2026-09-01) */
.rpu-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger-soft, rgba(229,72,77,.08)); color: var(--danger, #e5484d);
  font-size: 11px; font-weight: 800; vertical-align: 1px; }
.rpu-fbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.rpu-sup { font: inherit; font-size: 13px; padding: 4px 7px; min-width: 150px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface, #fff); }

/* 구매요청(품의, scm-pr) — 표·탭·안내문은 rpu-* 그대로, 입력칸과 상태 칩만 여기 */
.scmpr-form { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 14px; background: var(--surface, #fff); }
.scmpr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; margin: 10px 0 12px; }
.scmpr-in { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; background: var(--surface, #fff); color: var(--text-strong); }
.scmpr-in.num { text-align: right; width: 90px; }
.scmpr-in.code { width: 150px; }
/* ops-tbl 기본은 table-layout:fixed 라 9열이면 품의번호·수량 칸이 겹친다(실렌더 1440·412 확인) — 내용 폭으로 잡고 가로 스크롤 */
.scmpr-tbl, .scmpr-list-tbl { table-layout: auto; min-width: 1040px; }
.scmpr-tbl td .scmpr-in { min-width: 64px; }
.scmpr-tbl td select.scmpr-in { min-width: 120px; }
.scmpr-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.scmpr-toolbar .grow { flex: 1; }
.scmpr-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.scmpr-off td { opacity: .45; }
.scmpr-st { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11.5px; font-weight: 700; background: var(--surface-2, #f1f3f5); color: var(--text-muted); white-space: nowrap; }
.scmpr-st.pending { color: var(--warn, #b45309); }
.scmpr-st.approved, .scmpr-st.ordered { color: var(--ok, #16a34a); }
.scmpr-st.rejected, .scmpr-st.canceled { color: var(--danger, #e5484d); }
@media (max-width: 768px) {
  .scmpr-grid { grid-template-columns: 1fr 1fr; }
  .scmpr-toolbar #scmpr-q { width: 100% !important; }
}

/* 승인 큐 — 구매 품의 행은 AI 3칸 대신 사유·결재·버튼 3칸(버튼이 세로로 깨지지 않게 폭을 준다) */
.ap-row.ap-row-pr { grid-template-columns: minmax(200px, 1.4fr) minmax(160px, 1fr) 96px auto; }
.ap-row-pr .row2 .btn, .ap-row-pr .row2 a.btn { white-space: nowrap; }

/* 발주관리(scm-po)·협력사(scm-vendor) — rpu-*·scmpr-* 그대로, 여기는 발송 폼·잔량 표시만 */
.scmpo-send { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; margin: 10px 0; background: var(--surface, #fff); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.scmpo-send .full { grid-column: 1 / -1; }
.scmpo-send textarea.scmpr-in { min-height: 96px; resize: vertical; font-family: inherit; }
.scmpo-remain { font-weight: 700; color: var(--warn, #b45309); }
.scmpo-zero { color: var(--text-muted); }
.scmpo-bar { margin: 6px 0 2px; }
.scmpo-bar svg { height: 44px; width: auto; }
.scmpo-tbl, .scmpo-list-tbl, .scmv-tbl { table-layout: auto; min-width: 900px; }
.scmv-split { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
.scmv-split > * { min-width: 0; }   /* 그리드 칸이 표 min-width 로 늘어나 페이지가 가로 스크롤되는 것을 막는다(412 실렌더에서 776px 로 벌어짐) */
.scmv-tblwrap { border: 1px solid var(--border); border-radius: var(--r-md); overflow: auto; max-height: 70vh; }
.scmv-sel td { background: var(--primary-soft, rgba(67, 97, 238, .08)); }
@media (max-width: 900px) { .scmv-split { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .scmpo-send { grid-template-columns: 1fr; } }

/* 발주관리 [미입고 잔량] 거래처 묶음 머리 — 안내문 + [독촉 메일 초안] 한 줄 */
.scmpo-sup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- 최초 비밀번호 강제 변경 (app/pwFirstChange.js) ----------
   사번 로그인 계정은 아이디와 비밀번호가 같다 — 한 번 바꾸기 전까지 이 모달이 화면을 덮는다.
   MES 참조 화면에서 가져온 것은 **동작**뿐이고, 모양은 옵스원 토큰으로 다시 그렸다. */
.pwfc-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15, 20, 32, .46); backdrop-filter: blur(3px);
  /* grid 로 가운데 두면 열이 max-content(420px)로 잡혀 max-width:100% 가 화면 밖을 가리킨다 —
     412px 폰에서 카드가 오른쪽으로 24px 삐져나갔다(2026-09-13 렌더 검증). flex 는 컨테이너 기준이라 물린다. */
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
body.pwfc-on { overflow: hidden; }
.pwfc {
  width: 420px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 52px rgba(0,0,0,.26); overflow: hidden;
}
.pwfc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 15px; font-weight: 700; color: var(--text-strong);
}
.pwfc-head::before { content: '🔒'; font-size: 14px; }
.pwfc-body { padding: 18px 20px 6px; }
.pwfc-notice {
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--warning-soft); color: var(--text-strong);
  font-size: 13px; line-height: 1.5;
}
.pwfc-who { font-size: 13px; color: var(--text); margin-bottom: 14px; }
.pwfc-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-faint); margin: 12px 0 6px; }
.pwfc-input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text);
  font-size: 15px; font-family: inherit;
}
.pwfc-input:focus { outline: none; border-color: var(--primary); }
.pwfc-msg { min-height: 18px; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--danger); }
.pwfc-msg.muted { color: var(--text-faint); }
.pwfc-msg.ok { color: var(--primary); }
.pwfc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px 18px;
}
.pwfc-logout {
  border: 0; background: none; padding: 4px 2px;
  font: inherit; font-size: 13px; color: var(--text-faint); cursor: pointer;
}
.pwfc-logout:hover { color: var(--text); text-decoration: underline; }
.pwfc-foot .btn { min-width: 92px; }
@media (max-width: 480px) {
  .pwfc-head { padding: 14px 16px; }
  .pwfc-body { padding: 16px 16px 4px; }
  .pwfc-foot { padding: 12px 16px 16px; }
}