/* 컴포넌트 스타일 — 각 컴포넌트 태스크에서 아래에 append 한다. */

/* ── 보조 모듈 타일(오피스 유틸) — 큰 아이콘 세로형, 모듈 헤더 우측 정렬 ── */
.mod-head{display:flex;justify-content:space-between;align-items:flex-end;margin:24px 4px 12px}
.mod-head .label{margin:0}
.office-row{display:flex;gap:10px}
.mod-mini{display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 13px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);text-decoration:none;color:var(--ink);
  box-shadow:var(--sh-1);transition:transform .15s,box-shadow .15s,border-color .15s}
.mod-mini:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.mod-mini .mchip{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.mod-mini .mchip svg{width:23px;height:23px}
.mod-mini .mname{font-size:12px;font-weight:600;white-space:nowrap}
.mod-mini .mmeta{display:none}
.mm-todo .mchip{background:var(--todo-bg);color:var(--todo)} .mm-todo:hover{border-color:var(--todo)}
.mm-outside .mchip{background:var(--outside-bg);color:var(--outside)} .mm-outside:hover{border-color:var(--outside)}
.mm-room .mchip{background:var(--room-bg);color:var(--room)} .mm-room:hover{border-color:var(--room)}
@media(max-width:640px){.mod-head{flex-direction:column;align-items:flex-start;gap:12px}.office-row{width:100%}}

/* ── 모듈 타일(그라데이션) ── */
/* 모듈 런처 그리드 — 작은 정사각형 7개 1행, 남는 폭은 카드 간격으로 분배. 좁아지면 4→2열 */
.mod-grid{display:grid;grid-template-columns:repeat(7,104px);justify-content:space-between;gap:12px}
.mod-grid .mod{aspect-ratio:1/1;min-height:0}
@media(max-width:820px){.mod-grid{grid-template-columns:repeat(4,1fr);justify-content:stretch;gap:12px}}
@media(max-width:520px){.mod-grid{grid-template-columns:repeat(2,1fr)}}
.mod{position:relative;border-radius:var(--r);padding:11px 12px;color:#fff;cursor:pointer;text-decoration:none;
  transition:transform .15s,box-shadow .15s;box-shadow:var(--sh-1);min-height:72px;
  display:flex;flex-direction:column;justify-content:space-between}
.mod:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.mod .chip{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.22);display:grid;place-items:center}
.mod .chip svg{width:15px;height:15px}
.mod .mname{font-size:13px;font-weight:700} .mod .mmeta{font-size:11px;opacity:.85;margin-top:1px}
.mod-core{background:var(--core-grad)} .mod-car{background:var(--car-grad)}
.mod-stock{background:var(--stock-grad)} .mod-att{background:var(--att-grad)} .mod-collab{background:var(--collab-grad)}
.mod-purchase{background:var(--purchase-grad)} .mod-it{background:var(--it-grad)}
.mod-todo{background:var(--todo-grad)} .mod-outside{background:var(--outside-grad)} .mod-room{background:var(--room-grad)}
.mod-cv{background:var(--cv-grad)} .mod-mom{background:var(--mom-grad)} .mod-trip{background:var(--trip-grad)}
/* 미래(준비중) 모듈 — 흐릿 + Soon 핀, 호버 리프트 없음 */
.mod-soon{opacity:.7}
.mod-soon:hover{transform:none;box-shadow:var(--sh-1);cursor:default}
.mod-soon-tag{position:absolute;top:7px;right:7px;background:rgba(255,255,255,.28);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:99px}
/* 권한 없는 모듈 — 흐릿 + Locked 핀, 클릭 불가 */
.mod-locked{opacity:.55;cursor:not-allowed}
.mod-locked:hover{transform:none;box-shadow:var(--sh-1)}
.mod-locked-tag{position:absolute;top:7px;right:7px;background:rgba(255,255,255,.28);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:99px}

/* ── 앱 런처형 타일 — 컬러 아이콘 칩 + 하단 라벨(모듈 색 유지, 칩 크기 축소) ── */
.applnk-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 22px;margin:2px 2px}
.applnk{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;width:64px}
.applnk .app-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;
  box-shadow:var(--sh-1);transition:transform .15s,box-shadow .15s}
.applnk .app-ico svg{width:20px;height:20px}
.applnk:hover .app-ico{transform:translateY(-2px);box-shadow:var(--sh-2)}
.applnk .app-name{font-size:11px;font-weight:600;color:var(--ink);text-align:center;line-height:1.18}

/* ── KPI(주얼 솔리드) ── */
.kpi{border-radius:var(--r-lg);padding:20px;color:#fff;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;border-radius:50%;
  background:rgba(255,255,255,.08)}
.kpi-core{background:var(--core)} .kpi-car{background:var(--car)} .kpi-stock{background:var(--stock)}
.kpi-att{background:var(--att)} .kpi-collab{background:var(--collab)}
.kpi .kl{font-size:12px;font-weight:600;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.kpi .kv{font-size:38px;font-weight:800;letter-spacing:-.02em;margin:6px 0 2px}
.kpi .kd{font-size:13px;opacity:.9}
.kpi .kfoot{display:flex;gap:8px;margin-top:16px;position:relative;z-index:1}
.kchip{background:rgba(255,255,255,.16);border-radius:8px;padding:8px 11px;flex:1}
.kchip b{font-size:17px;font-weight:700;display:block} .kchip span{font-size:11px;opacity:.85}

/* ── 토스트 ── */
#toast-stack{position:fixed;top:18px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:200}
.toast{min-width:220px;max-width:340px;background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--muted);border-radius:var(--r-sm);box-shadow:var(--sh-2);
  padding:12px 14px;font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:9px;
  animation:toast-in .2s ease}
.toast-ok{border-left-color:var(--ok)} .toast-warn{border-left-color:var(--warn)}
.toast-info{border-left-color:var(--info)} .toast-danger{border-left-color:var(--danger)}
@keyframes toast-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* ── 모달 ── */
.modal-overlay{position:fixed;inset:0;background:rgba(16,26,20,.45);display:none;
  align-items:center;justify-content:center;padding:24px;z-index:100}
.modal-overlay.open{display:flex}
.modal{width:100%;max-width:420px;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden}
.modal-h{padding:16px 20px 0;display:flex;justify-content:space-between;align-items:flex-start}
.modal-h h3{font-size:17px;font-weight:700;color:var(--brand)}
.modal-x{border:none;background:transparent;color:var(--faint);cursor:pointer;padding:2px;border-radius:6px}
.modal-x:hover{background:var(--bg);color:var(--ink)}
.modal-b{padding:8px 20px 16px;color:var(--muted);font-size:14px}
.modal-f{padding:12px 20px;background:var(--bg);border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:10px}
/* 넓은 모달 — Write Post 모달(.fw-modal)과 같은 폭·스크롤(태스크 폼처럼 필드가 많은 모달용).
   modal-b는 flex-grow:0 — 내용이 짧으면 그 높이만큼만 차지(내용과 푸터 사이 빈 공간 방지),
   내용이 max-height를 넘으면 min-height:0 덕에 줄어들며 overflow-y:auto로 스크롤 */
.modal-lg{max-width:600px;display:flex;flex-direction:column;max-height:88vh}
.modal-lg .modal-b{flex:0 1 auto;min-height:0;overflow-y:auto}
.modal-lg .field{max-width:none} /* .field 기본 max-width:420px가 넓은 모달에서도 그대로 남아 설명란이 좁게 보이던 것 방지 */
/* New task 모달 footer — Write Post(.fw-foot)와 같은 좌우 배치(공용 서식·첨부 버튼 좌 / Create 우) */
[data-modal="new-task"] .modal-f{justify-content:space-between;align-items:center}

/* ── 세그먼트 탭 ── */
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px}
.seg button,.seg a,.seg>span{font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);background:transparent;
  border:none;border-radius:5px;padding:6px 14px;transition:.15s;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.seg button,.seg a{cursor:pointer}
.seg>span{cursor:default}
.seg button.seg-on,.seg .seg-on{background:var(--p);color:#fff;box-shadow:0 2px 6px rgba(16,26,20,.18)}
.seg .seg-on .muted{color:rgba(255,255,255,.75)}

/* ── 카드 ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px}
.card-h h3{font-size:15px;font-weight:700}
.card-h a{font-size:12.5px;color:var(--p);font-weight:600;text-decoration:none}
.card-b{padding:0 18px 16px}

/* ── 테이블 ── */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg)}
.table td{padding:12px 16px;border-bottom:1px solid var(--border)}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--bg)}
/* 프로젝트별 그룹 헤더 행(Tasks 목록) — 프로젝트명·색 스와치·태스크 수 */
.table tr.tgroup td{background:var(--bg);padding:9px 16px;font-weight:600;font-size:13px}
.table tr.tgroup:hover td{background:var(--bg)}
.tgroup td a{color:var(--text)}
.tgroup-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:8px}
.tgroup-count{margin-left:8px;font-weight:500;font-size:12px;color:var(--muted)}
.table td.tsub{padding-left:36px}
.table-row-actions{display:flex;gap:4px;justify-content:flex-end;white-space:nowrap}
.btn-icon{width:28px;height:28px;border-radius:7px;border:1px solid transparent;background:none;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:.12s}
.btn-icon:hover{color:var(--p);background:var(--p-soft)}
.btn-icon-danger:hover{color:var(--danger);background:var(--danger-soft)}

/* ── 배지 ── */
.badge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px;
  display:inline-flex;align-items:center;gap:5px}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-neutral{background:var(--bg);color:var(--muted)}
.badge-hold{background:var(--bg);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.badge-purple{background:color-mix(in srgb,#7c3aed 14%,transparent);color:#7c3aed}
.badge-teal{background:color-mix(in srgb,#0d9488 14%,transparent);color:#0d9488}
/* 협업 커스텀 상태 자유색(--sc) 공용 — 칩·바 */
.st-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--sc) 16%,transparent);color:var(--sc)}
.st-bar{background:var(--sc)}
/* 복수 담당자 — 대표 뒤 추가 인원 수(+N) 배지 */
.assignee-more{display:inline-flex;align-items:center;font-size:11px;font-weight:600;
  color:var(--muted);background:var(--bg);border:1px solid var(--border);
  border-radius:99px;padding:1px 6px;margin-left:4px;cursor:default}

/* ── 빈 상태 ── */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .eic{width:48px;height:48px;border-radius:14px;background:var(--bg);color:var(--faint);
  display:grid;place-items:center;margin:0 auto 14px}
.empty .eic svg{width:24px;height:24px}
.empty h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
.empty p{font-size:13px}
.empty .eact{margin-top:16px;display:flex;justify-content:center}

/* ── 체크박스 / 라디오 ── */
.check{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:14px;user-select:none}
.check input{position:absolute;opacity:0;pointer-events:none}
.box{width:19px;height:19px;border:1.5px solid var(--border-strong);background:var(--surface);
  display:grid;place-items:center;transition:all .15s;flex:none}
.box.sq{border-radius:6px} .box.rd{border-radius:50%}
.box svg{width:12px;height:12px;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.6);transition:all .15s}
.box .rdot{width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transform:scale(.5);transition:all .15s}
.check input:checked + .box{background:var(--p);border-color:var(--p)}
.check input:checked + .box svg,.check input:checked + .box .rdot{opacity:1;transform:scale(1)}
.check:hover .box{border-color:var(--p)}

/* ── 토글 ── */
.toggle{position:relative;width:42px;height:24px;flex:none;display:inline-block}
.toggle input{position:absolute;opacity:0}
.toggle .track{position:absolute;inset:0;background:var(--border-strong);border-radius:99px;transition:.2s}
.toggle .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;
  box-shadow:var(--sh-1);transition:.2s}
.toggle input:checked + .track{background:var(--p)}
.toggle input:checked + .track + .knob{transform:translateX(18px)}

/* ── 폼 필드 ── */
.field{max-width:420px;margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.input{width:100%;height:var(--control-h);font-family:inherit;font-size:14px;line-height:1.2;
  color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);padding:0 12px;transition:all .15s}
textarea.input{height:auto;padding:8px 12px;line-height:1.5;resize:vertical}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
.input-error{border-color:var(--danger)}
.input-error:focus{box-shadow:0 0 0 3px var(--danger-soft)}
.hint{font-size:12px;color:var(--faint);margin-top:5px}
.err{font-size:12px;color:var(--danger);margin-top:5px}

/* ── 버튼 (높이 = --control-h) ── */
.btn{font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;text-decoration:none;
  height:var(--control-h);border:1px solid transparent;border-radius:var(--r-sm);padding:0 16px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .15s ease;box-shadow:var(--sh-1)}
.btn svg{width:16px;height:16px}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-primary{background:var(--p);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--p-hover);box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.btn-secondary:hover:not(:disabled){border-color:var(--p);color:var(--p);background:var(--p-soft)}
.btn-accent{background:var(--car);color:#fff}
.btn-accent:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-ghost{background:transparent;color:var(--muted);box-shadow:none}
.btn-ghost:hover:not(:disabled){background:var(--bg);color:var(--ink)}
.btn-danger{background:var(--surface);color:var(--danger);border-color:var(--danger-soft)}
.btn-danger:hover:not(:disabled){background:var(--danger-soft)}
.btn-sm{height:28px;padding:0 11px;font-size:12.5px}

/* ── Currently Out 섹션 ── */
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:22px 4px 10px}
.sec-t{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--brand)}
.sec-t .cnt{background:var(--outside-bg);color:var(--outside);font-size:12px;font-weight:700;
  min-width:20px;height:20px;border-radius:99px;display:grid;place-items:center;padding:0 6px}
.sec-date{font-size:12px;color:var(--faint)}
.out-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:15px 18px;box-shadow:var(--sh-1);color:var(--muted);font-size:14px}

/* ── KPI 스탯 카드(미니 도넛) ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1);
  text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--p)}
.stat-l{min-width:0}
.stat-h{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.stat-ic{width:26px;height:26px;border-radius:8px;background:var(--p-soft);color:var(--p);
  display:grid;place-items:center;flex:none}
.stat-ic svg{width:15px;height:15px}
.stat-name{font-size:12px;font-weight:600;color:var(--muted)}
.stat-val{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.stat-desc{font-size:11px;color:var(--faint);margin-top:5px}
.stat-ring{width:44px;height:44px;flex:none}
.stat-ring circle{fill:none;stroke-width:3.4}
.stat-ring .track{stroke:var(--border)}
.stat-ring .fill{stroke:var(--p);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;
  transition:stroke-dasharray .5s}

/* ── 히어로 카드 3 ── */
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.hero{border-radius:var(--r-lg);padding:18px 19px;color:#fff;box-shadow:var(--sh-2);
  display:flex;flex-direction:column;min-height:262px}
.hero-h{display:flex;align-items:center;gap:10px}
.hero-ic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;flex:none}
.hero-ic svg{width:18px;height:18px}
.hero-title{font-size:15px;font-weight:700}
.hero-sub{font-size:11.5px;opacity:.75;margin-top:1px}
.hero-workforce{background:var(--wf-grad)}
.hero-rank{background:var(--att-grad)}
.hero-notice{background:var(--collab-grad)}
/* Workforce 도넛 */
.wf-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.wf-donut{position:relative;width:118px;height:118px}
.wf-donut svg{width:100%;height:100%}
.wf-donut circle{fill:none;stroke-width:3.2}
.wf-track{stroke:rgba(255,255,255,.16)}
.wf-seg{stroke:#fff;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.wf-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.wf-center b{font-size:30px;font-weight:800;line-height:1}
.wf-center span{font-size:11px;opacity:.8;margin-top:2px}
.wf-legend{list-style:none;display:flex;gap:15px}
.wf-legend li{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.92}
.wf-legend b{font-weight:700}
.wf-legend .dot{width:8px;height:8px;border-radius:50%;flex:none}
/* Ranking */
.rank-tabs{display:flex;gap:4px;margin:14px 0 12px;background:rgba(255,255,255,.14);padding:3px;border-radius:99px}
.rank-tab{flex:1;border:none;background:transparent;color:#fff;font-family:inherit;font-size:11.5px;
  font-weight:600;padding:6px 4px;border-radius:99px;cursor:pointer;opacity:.82;transition:.15s}
.rank-tab.on{background:#fff;color:var(--att);opacity:1}
.rank-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.rank-list li{display:flex;align-items:center;gap:10px;font-size:13px}
.rank-no{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.rank-list li:first-child .rank-no{background:var(--gold);color:#fff}
.rank-nm{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-v{font-weight:700;font-size:12.5px}
/* Notices */
.notice-list{list-style:none;display:flex;flex-direction:column;margin-top:12px}
.notice-list li{padding:11px 0;border-top:1px solid rgba(255,255,255,.14)}
.notice-list li:first-child{border-top:none;padding-top:4px}
.notice-t{font-size:13px;font-weight:600}
.notice-d{font-size:11px;opacity:.72;margin-top:3px}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}}

/* ══════════ Core: 직원·조직 ══════════ */

/* 등급 색 — rb-{role}이 --rc(solid)/--rcbg(tint)를 정의, 아바타·배지·점이 공유 */
.rb-super_admin{--rc:var(--collab);--rcbg:var(--collab-bg)}
.rb-admin{--rc:var(--stock);--rcbg:var(--stock-bg)}
.rb-assistant{--rc:var(--att);--rcbg:var(--att-bg)}
.rb-leader{--rc:var(--core);--rcbg:var(--core-bg)}
.rb-field{--rc:var(--car);--rcbg:var(--car-bg)}
.rb-staff{--rc:var(--muted);--rcbg:var(--bg)}
.rb-worker{--rc:var(--faint);--rcbg:var(--bg)}
.rb-top{--rc:var(--gold);--rcbg:#F7EFDC}

/* 브레드크럼 */
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);margin:14px 4px 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--p)}
.crumb-sep{color:var(--border-strong)}

/* 페이지 헤더 */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:8px 4px 4px}
.page-title{font-size:23px;font-weight:500;letter-spacing:-.02em;color:var(--p);display:flex;align-items:center;gap:10px}
.page-title-icon{width:22px;height:22px;flex-shrink:0;color:var(--p)}
.page-sub{color:var(--muted);font-size:14px;margin-top:2px}

/* 아바타(등급색 solid, 사진 있으면 커버) */
.emp-av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:#fff;background:var(--rc,var(--muted));letter-spacing:.02em;overflow:hidden}
.emp-av img{width:100%;height:100%;object-fit:cover}

/* 등급 배지 */
.role-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:4px 10px;
  border-radius:99px;background:var(--rcbg,var(--bg));color:var(--rc,var(--muted));white-space:nowrap}

/* 요약 스탯 */
.emp-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:18px 0 6px}
.es-card{display:flex;align-items:center;gap:13px;padding:15px 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1)}
.es-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none}
.es-ic svg{width:20px;height:20px}
.es-val{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.es-lbl{font-size:12px;color:var(--muted);margin-top:4px}

/* 필터 바 */
.emp-toolbar{display:flex;gap:10px;margin-top:18px}
.emp-search{flex:1;display:flex;align-items:center;gap:9px;height:var(--control-h);padding:0 14px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s}
.emp-search:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
.emp-search svg{width:17px;height:17px;color:var(--faint);flex:none}
.emp-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;
  font-size:14px;color:var(--ink)}
.emp-search input::-webkit-search-cancel-button{display:none}
.emp-dept{max-width:220px}
@media(max-width:640px){.emp-toolbar{flex-direction:column}.emp-dept{max-width:none}}

/* 등급 필터 칩 */
.role-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.role-chip{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--muted);background:var(--surface);border:1px solid var(--border-strong);border-radius:99px;
  padding:6px 13px;cursor:pointer;transition:.15s}
.role-chip:hover{border-color:var(--p);color:var(--p)}
.role-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.rc-dot{width:8px;height:8px;border-radius:50%;background:var(--rc,var(--muted));flex:none}
.role-chip.on .rc-dot{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.rc-n{font-size:11px;font-weight:700;opacity:.6}

/* 명단 테이블 */
.emp-table td{vertical-align:middle}
.emp-row{cursor:pointer}
.emp-cell{display:flex;align-items:center;gap:11px}
.emp-name{font-weight:600;color:var(--ink);text-decoration:none}
.emp-name:hover{color:var(--p)}
.emp-muted{color:var(--muted)}
.emp-noresult{text-align:center;padding:44px 20px;color:var(--muted)}
.emp-noresult .eic{width:46px;height:46px;border-radius:13px;background:var(--bg);color:var(--faint);
  display:grid;place-items:center;margin:0 auto 12px}
.emp-noresult .eic svg{width:22px;height:22px}
.emp-noresult h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px}
.emp-noresult p{font-size:13px}

/* ── 직원 상세 ── */
.profile-head{display:flex;align-items:center;gap:18px;margin:16px 4px 8px;padding:20px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.profile-av{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:22px;font-weight:800;color:#fff;background:var(--rc,var(--muted));overflow:hidden}
.profile-av img{width:100%;height:100%;object-fit:cover}
.profile-meta{min-width:0;flex:1}
.profile-name{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.profile-role{font-size:14px;color:var(--muted);margin-top:2px}
.profile-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.profile-actions{display:flex;gap:8px;flex:none}
@media(max-width:560px){.profile-head{flex-wrap:wrap}.profile-actions{order:-1;margin-left:auto}}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:820px){.detail-grid{grid-template-columns:1fr}}

/* 정보 리스트 */
.info-list{display:flex;flex-direction:column}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--border)}
.info-row:last-child{border-bottom:none}
.info-row dt{font-size:13px;color:var(--muted);flex:none}
.info-row dd{font-size:13.5px;color:var(--ink);font-weight:600;text-align:right}
.info-link{color:var(--p);text-decoration:none}
.info-link:hover{text-decoration:underline}
.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;color:var(--muted);font-weight:600}

/* 결재 체인 */
.chain-hint{font-size:12px;color:var(--faint);font-weight:600}
.chain{list-style:none;position:relative;padding:4px 0 0}
.chain-item{position:relative;display:flex;gap:13px;padding-bottom:18px}
.chain-item:last-child{padding-bottom:0}
.chain-item::before{content:"";position:absolute;left:16px;top:36px;bottom:-2px;width:2px;background:var(--border)}
.chain-item:last-child::before{display:none}
.chain-node{flex:none;z-index:1}
.chain-node .emp-av{width:34px;height:34px}
.chain-body{padding-top:6px}
.chain-name{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chain-name a{color:var(--ink);text-decoration:none}
.chain-name a:hover{color:var(--p)}
.chain-sub{font-size:12.5px;color:var(--muted);margin-top:1px}
.chain-tag{font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:99px;
  background:var(--p-soft);color:var(--p)}
.chain-tag-final{background:#F7EFDC;color:var(--gold)}
.chain-step{font-size:10.5px;font-weight:700;color:var(--faint)}
.chain-top-note{display:flex;align-items:center;gap:10px;padding:14px;border-radius:var(--r);
  background:var(--core-bg);color:var(--core);font-size:13px;font-weight:600;line-height:1.4}
.chain-top-note svg{width:20px;height:20px;flex:none}
.is-self .chain-name{color:var(--brand)}

/* 직속 부하 */
.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.report-card{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);text-decoration:none;color:var(--ink);
  transition:transform .15s,box-shadow .15s,border-color .15s}
.report-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--p)}
.report-info{min-width:0}
.report-name{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-pos{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 조직도 — 단일 색조(그린) 깊이 그러데이션. 등급·디비전에 무관한 모듈색 재사용 안 함 ── */
.org-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.org-tree{margin-top:14px}
.org-node{margin-bottom:5px}
/* 부서 카드 폭 = 직원 카드(210px)보다 40px만 긴 고정폭 알약형.
   depth0(CEO)·depth1(디비전)은 --org-c(org-node.blade.php에서 세팅)로 통짜 색칠, depth2+(팀)는 균일한 연한 틴트 */
.org-dept{position:relative;display:flex;align-items:center;gap:6px;width:250px;padding:7px 12px;
  background:var(--surface);border-radius:99px;box-shadow:var(--sh-1);
  cursor:pointer;transition:box-shadow .15s;overflow:hidden}
.org-dept:hover{box-shadow:var(--sh-2)}
.org-dept:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.org-caret{display:grid;place-items:center;width:14px;height:14px;color:var(--faint);flex:none;
  transition:transform .18s}
.org-caret svg{width:12px;height:12px}
.org-node:not(.collapsed) > .org-dept .org-caret{transform:rotate(90deg)}
.org-dept-name{font-size:12.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-dept-meta{display:flex;align-items:center;gap:5px;flex:none}
.org-head{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;color:var(--gold);
  background:#F7EFDC;border-radius:99px;padding:2px 8px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:78px}
.org-head svg{width:9px;height:9px;flex:none}
.org-count{font-size:9.5px;font-weight:800;color:var(--muted);background:var(--bg);
  border-radius:99px;padding:2px 8px;flex:none}
/* depth0(CEO)·depth1(디비전) = --org-c로 통짜 색칠, 흰 글씨 */
.org-node.org-depth-0 > .org-dept,
.org-node.org-depth-1 > .org-dept{background:var(--org-c);width:auto;min-width:280px;padding:10px 18px}
.org-node.org-depth-0 > .org-dept .org-dept-name,
.org-node.org-depth-1 > .org-dept .org-dept-name{color:#fff}
.org-node.org-depth-0 > .org-dept .org-caret,
.org-node.org-depth-1 > .org-dept .org-caret{color:rgba(255,255,255,.7)}
.org-node.org-depth-0 > .org-dept .org-count,
.org-node.org-depth-1 > .org-dept .org-count{color:#fff;background:rgba(255,255,255,.22)}
.org-node.org-depth-0 > .org-dept .org-dept-name{font-size:15px}
/* depth2+(팀) = 디비전과 무관하게 균일한 연한 그린 틴트 */
.org-node.org-depth-team > .org-dept{background:var(--core-bg)}
.org-node.org-depth-team > .org-dept .org-dept-name{color:var(--core)}
.org-node.org-depth-team > .org-dept .org-count{color:var(--core);background:var(--surface)}
.org-body{overflow:hidden}
.org-node.collapsed > .org-body{display:none}
/* 팀원 카드 = 부서 카드보다 40px 짧은 고정 폭. 등급은 색이 아니라 org-role-tag 텍스트로만 구분 */
.org-members{display:flex;flex-wrap:wrap;gap:7px;padding:8px 4px 8px 8px}
.org-chip{position:relative;display:flex;align-items:center;gap:7px;width:210px;padding:5px 9px 5px 5px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);transition:box-shadow .12s,transform .12s}
.org-chip:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.org-chip .emp-av{width:26px;height:26px;font-size:9.5px;flex:none;background:var(--core-bg);color:var(--core)}
.org-chip.is-head{box-shadow:inset 0 0 0 1.5px var(--gold)}
.org-chip-info{min-width:0;flex:1}
.org-chip-name{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-head-star{display:inline-flex;color:var(--gold);flex:none}
.org-head-star svg{width:10px;height:10px}
.org-chip-pos{display:block;font-size:9.5px;line-height:1.2;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-role-tag{font-size:8.5px;font-weight:800;color:var(--muted);background:var(--bg);
  border-radius:99px;padding:2px 7px;flex:none;white-space:nowrap;letter-spacing:.01em}
.org-children{padding-left:16px;margin-left:6px;border-left:2px dashed var(--border)}
@media(max-width:560px){
  .org-dept{width:100%}
  .org-node.org-depth-0 > .org-dept,
  .org-node.org-depth-1 > .org-dept{width:100%;min-width:0}
  .org-members{padding-left:6px}
  .org-chip{width:100%}
  .org-children{padding-left:14px;margin-left:8px}
  .org-head{max-width:70px}
}

/* ── 플래시 배너 ── */
.flash{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);
  font-size:13.5px;font-weight:600;margin:16px 4px 0}
.flash svg{width:18px;height:18px;flex:none}
.flash-ok{background:var(--ok-bg);color:var(--ok)}
.flash-danger{background:var(--danger-soft);color:var(--danger)}

/* ── 직원 편집 폼 ── */
.emp-form{margin-top:12px}
.form-sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:18px 20px;margin-bottom:16px}
.form-sec-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-bottom:16px}
.form-grid .field{max-width:none;margin-bottom:0}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.report-form{max-width:760px}
.report-form .field{max-width:none}
.form-toggles{display:flex;flex-direction:column;gap:10px;justify-content:center}
.form-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:10px 13px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg)}
.ft-name{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.ft-desc{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin:4px 4px 0}

/* ── 조직도 드래그 재배치 ── */
.org-draghint-row{display:flex;justify-content:flex-end;margin:16px 4px 4px}
.org-draghint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--faint);font-weight:600;
  padding:5px 10px;background:var(--bg);border:1px dashed var(--border);border-radius:99px}
.org-draghint svg{width:14px;height:14px}
.org-chip[draggable="true"]{cursor:grab}
.org-chip.dragging{opacity:.45;cursor:grabbing}
.org-node.drop-target > .org-dept{box-shadow:0 0 0 3px var(--p-soft)}
.org-node.drop-target > .org-body > .org-members{background:var(--core-bg);border-radius:var(--r-sm);
  outline:2px dashed var(--core);outline-offset:2px}
.org-members{min-height:8px}

/* ── 부서 관리 ── */
.dept-list{margin-top:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.dept-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);
  padding-left:calc(16px + var(--depth) * 26px)}
.dept-row:last-child{border-bottom:none}
.dept-row:hover{background:var(--bg)}
.dept-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.dept-rail{width:8px;height:8px;border-left:2px solid var(--border);border-bottom:2px solid var(--border);
  border-bottom-left-radius:3px;flex:none}
.dept-row[style*="--depth:0"] .dept-rail{display:none}
.dept-name{font-size:14px;font-weight:700;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dept-meta{display:flex;align-items:center;gap:12px;flex:none}
.dept-head{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.dept-head svg{width:12px;height:12px;color:var(--gold);flex:none}
.dept-count{min-width:24px;height:22px;padding:0 8px;border-radius:99px;background:var(--core-bg);
  color:var(--core);font-size:11.5px;font-weight:700;display:grid;place-items:center}
.dept-modal-f{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:0;border-top:none}
.dept-modal-r{display:flex;gap:10px;margin-left:auto}
.dept-del{color:var(--danger)}
.dept-del:hover{background:var(--danger-soft)}
@media(max-width:560px){.dept-head{display:none}}

/* 협업 — 칸반보드(collab 모듈 토큰 사용) */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.kanban-col{background:var(--collab-bg);border-radius:var(--r);padding:10px;min-height:200px}
.kanban-col-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;
  font-size:13px;color:var(--collab);padding:4px 6px 10px}
.kanban-count{font-weight:400;color:var(--faint)}
.kanban-cards{display:flex;flex-direction:column;gap:8px;min-height:40px}
.kanban-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px;box-shadow:var(--sh-1);cursor:grab}
.kanban-card:active{cursor:grabbing}
.kanban-card-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.kanban-card-meta{display:flex;align-items:center;gap:6px;font-size:11px}
.avatar-xs{width:20px;height:20px;font-size:9px}

/* 협업 — 프로젝트 목록 카드 */
.page-head-actions{display:flex;align-items:center;gap:8px}
.btn-icon-text{display:flex;align-items:center;gap:6px;height:var(--control-h);padding:0 12px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
.btn-icon-text:hover{color:var(--ink);border-color:var(--border-strong)}
.btn-icon-text svg{width:15px;height:15px;flex:none}
.view-toggle{display:flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.view-toggle-btn{display:grid;place-items:center;width:var(--control-h);height:var(--control-h);
  background:var(--surface);color:var(--faint);border:none;border-left:1px solid var(--border);cursor:pointer}
.view-toggle-btn:first-child{border-left:none}
.view-toggle-btn svg{width:16px;height:16px}
.view-toggle-btn.on{background:var(--p-soft);color:var(--p)}

.section-h{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;
  margin:22px 4px 10px}
.section-h:first-child{margin-top:16px}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.project-card{display:block;text-decoration:none;color:inherit;padding:16px}
.project-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.project-star{display:grid;place-items:center;width:26px;height:26px;margin:-4px 0 -4px -6px;padding:0;
  background:none;border:none;color:var(--faint);cursor:pointer}
.project-star:hover{color:var(--gold)}
.project-star.on{color:var(--gold)}
.project-star svg{width:18px;height:18px}
.project-card h3{font-size:15px;font-weight:700;margin:2px 0 12px;line-height:1.3}
.project-card-foot{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px}
.project-card-members{display:flex;align-items:center;gap:5px}
.project-card-members svg{width:14px;height:14px}
.project-card-public{width:15px;height:15px;margin-left:auto}
.project-card.is-locked{opacity:.7}
.project-card-lock{width:15px;height:15px;color:var(--faint)}
.project-card-head-spacer{width:15px;height:15px;display:inline-block}
.project-join{margin-left:auto;padding:4px 12px;font-size:12px}
.project-card-join{margin-left:auto}
.join-reqs{margin-bottom:22px}
.join-req-actions{display:flex;gap:8px;justify-content:flex-end}

/* 리스트 뷰 — 그리드와 같은 카드 마크업, 레이아웃만 세로 1열 행으로 전환 */
#projectGrid.is-list .card-grid{display:flex;flex-direction:column;gap:8px}
#projectGrid.is-list .project-card{display:flex;align-items:center;gap:16px;padding:12px 16px}
#projectGrid.is-list .project-card-head{margin-bottom:0}
#projectGrid.is-list .project-card h3{margin:0;flex:1;min-width:0}
#projectGrid.is-list .project-card-foot{flex:none}

/* 협업 — 멤버 모달 */
.member-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.member-row span:first-child{flex:1}
.member-add-form{display:flex;align-items:flex-end;gap:8px;margin-top:14px}

/* ── 모듈 사이드바 레이아웃(Car·Stock·Attendance 이관 시 재사용) — 옛 포탈 .car-layout 이식 ── */
.module-layout{position:relative;display:flex;gap:0;height:calc(100vh - var(--bar-h));overflow:hidden}
.module-sidebar{width:200px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  padding:16px 0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.module-sidebar::-webkit-scrollbar{width:6px}
.module-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.module-sidebar .sidebar-title{font-size:13px;font-weight:700;color:var(--p);padding:0 16px 10px}
.module-sidebar a{display:flex;align-items:center;gap:8px;padding:4px 16px;font-size:13px;color:var(--muted);
  text-decoration:none;margin-bottom:1px;border-left:2px solid transparent;transition:color .12s,border-left-color .12s}
.module-sidebar a:hover{color:var(--p);border-left-color:var(--p)}
.module-sidebar a.active{color:var(--p);font-weight:600;border-left-color:var(--p);background:var(--p-soft)}
.module-sidebar a.active:hover{background:var(--p-soft)}
.module-sidebar a svg{width:15px;height:15px;flex-shrink:0}
.module-sidebar .nav-sep{height:1px;background:var(--border);margin:8px 16px;border:none}
.module-sidebar .nav-recent{font-size:12.5px;padding:6px 16px}
.module-sidebar .nav-empty{display:block;padding:6px 16px;font-size:12px;color:var(--faint)}

/* 협업 사이드바 — More 드롭다운 */
.module-sidebar .nav-more{position:relative}
.module-sidebar .nav-more-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:4px 16px;
  font-size:13px;color:var(--muted);background:none;border:none;border-left:2px solid transparent;
  cursor:pointer;text-align:left;transition:color .12s,border-left-color .12s}
.module-sidebar .nav-more-toggle svg{width:15px;height:15px;flex-shrink:0}
.module-sidebar .nav-more-toggle:hover{color:var(--p);border-left-color:var(--p)}
.module-sidebar .nav-more-menu{display:none;flex-direction:column}
.module-sidebar .nav-more.open .nav-more-menu{display:flex}
.module-sidebar .nav-more.open .nav-more-toggle{color:var(--p);border-left-color:var(--p)}
.module-sidebar .nav-more-menu a{padding-left:28px}

/* 협업 사이드바 — 접기/펼치기 섹션(View·Recently Updated) */
.module-sidebar .nav-collapse-toggle{display:flex;align-items:center;justify-content:space-between;
  width:100%;background:none;border:none;cursor:pointer}
.module-sidebar .nav-collapse-toggle svg{width:13px;height:13px;flex-shrink:0;transition:transform .15s ease}
.module-sidebar .nav-collapse-toggle.collapsed svg{transform:rotate(180deg)}
.module-sidebar .nav-section{display:flex;flex-direction:column}
.module-sidebar .nav-section.collapsed{display:none}

/* ── Collab 대시보드 — My Projects · Tasks I'm assigned to 카드 ── */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}
.dash-card{padding:18px 20px;display:flex;flex-direction:column;max-height:252px}
.dash-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dash-card-h h2{font-size:15px;font-weight:700;color:var(--ink)}
.dash-card-h-r{display:flex;align-items:center;gap:10px}
.dash-select{font-size:12.5px;color:var(--muted);background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:3px;padding:0}
.dash-select svg{width:12px;height:12px}
.dash-more{border:none;background:none;color:var(--faint);cursor:pointer;padding:2px;display:grid;place-items:center}
.dash-more svg{width:16px;height:16px}
.dash-tabs{display:flex;gap:18px;border-bottom:1px solid var(--border);margin-bottom:4px}
.dash-tab{background:none;border:none;padding:8px 0;font-size:13px;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;display:flex;align-items:center;gap:5px}
.dash-tab.on{color:var(--ink);font-weight:700;border-bottom-color:var(--p)}
.dash-tab .cnt{color:var(--faint);font-weight:600}
.dash-tab.on .cnt.danger{color:var(--danger)}
.dash-list{display:none;flex-direction:column;overflow-y:auto;flex:1}
.dash-list.on{display:flex}
.dash-row{display:flex;align-items:center;gap:10px;padding:9px 2px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--border);width:100%;background:none;border-left:none;border-right:none;
  border-top:none;font:inherit;text-align:left;cursor:pointer}
.dash-row:last-child{border-bottom:none}
.dash-row:hover{background:var(--bg);color:var(--ink);border-left-color:transparent}
.dash-swatch{width:26px;height:26px;border-radius:7px;flex-shrink:0}
.dash-row-new .dash-swatch{background:none;border:1.5px dashed var(--border-strong);display:grid;
  place-items:center;color:var(--muted)}
.dash-row-new .dash-swatch svg{width:13px;height:13px}
.dash-row-new:hover{color:var(--p)}
.dash-row-new:hover .dash-swatch{border-color:var(--p);color:var(--p)}
.dash-row-name{flex:1;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-row-date{font-size:12px;color:var(--faint);flex-shrink:0}
.dash-empty{color:var(--faint);font-size:13px;padding:14px 2px}
.module-content{flex:1;padding:24px;overflow-y:auto;min-width:0}

.module-sb-toggle{display:none;align-items:center;gap:6px;padding:7px 12px;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);font-size:13px;
  font-weight:600;cursor:pointer;color:var(--ink)}
.module-sb-toggle:hover{border-color:var(--p);color:var(--p)}
.module-sb-overlay{display:none;position:fixed;top:var(--bar-h);left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:1290}

@media(max-width:1023px){
  .module-sidebar{position:fixed;top:var(--bar-h);left:0;bottom:0;z-index:1300;overflow-y:auto;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:4px 0 16px rgba(0,0,0,.12)}
  .module-sidebar.open{transform:translateX(0)}
  .module-sb-toggle{display:flex}
  .module-content{padding:16px 12px}
}

/* 데스크톱 접기 핸들 */
.module-sb-handle{display:none;position:absolute;top:50%;left:200px;margin-left:-13px;transform:translateY(-50%);
  z-index:30;width:26px;height:52px;padding:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--muted);cursor:pointer;align-items:center;justify-content:center;
  box-shadow:var(--sh-1);transition:left .18s ease,color .12s,border-color .12s}
.module-sb-handle:hover{color:var(--p);border-color:var(--p)}
.module-sb-handle svg{width:15px;height:15px;transition:transform .18s ease}
.module-layout.sb-collapsed .module-sb-handle{left:0;margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.module-layout.sb-collapsed .module-sb-handle svg{transform:rotate(180deg)}
@media(min-width:1024px){
  .module-sb-handle{display:flex}
  .module-layout.sb-collapsed .module-sidebar{display:none}
}

/* ── 프로젝트 생성 모달(좌측 폼 + 우측 미리보기 2단) ── */
.modal-wide{padding:24px}
.modal-wide .modal.cp-modal{max-width:560px;width:100%;height:auto;max-height:min(86vh,720px);
  display:flex;overflow:hidden;border-radius:20px}
.cp-form{flex:1;padding:32px 40px;overflow-y:auto;display:flex;flex-direction:column}
.cp-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.cp-title{font-size:25px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.cp-close-sm{display:block;border:none;background:transparent;color:var(--faint);cursor:pointer;padding:2px}
.cp-form .cp-field{max-width:none;margin-bottom:8px}
.cp-form .cp-field .input{height:40px;font-size:14px;border-radius:9px}
.cp-form .cp-field textarea.input{height:auto;min-height:40px;padding-top:9px}
.cp-tab-label{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);margin:16px 0 12px}
.cp-tab-label svg{width:17px;height:17px;color:var(--muted)}
.cp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.cp-tab{font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);background:var(--surface);
  border:1.5px solid var(--border-strong);border-radius:10px;padding:13px 10px;cursor:pointer;transition:.15s}
.cp-tab:hover{border-color:var(--p)}
.cp-tab.on{border-color:var(--p);background:var(--p-soft);color:var(--p)}
.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 0;border-top:1px solid var(--border);cursor:pointer;margin-top:6px}
.cp-toggle-row:first-of-type{margin-top:14px}
.cp-toggle-l{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.cp-toggle-l svg{width:17px;height:17px;color:var(--muted);flex-shrink:0}
.cp-perm{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 0;border-top:1px solid var(--border)}
.cp-perm-more{font-family:inherit;font-size:13px;color:var(--muted);text-decoration:underline;cursor:pointer;
  flex-shrink:0;background:none;border:0;padding:0}
.cp-perm-more:hover{color:var(--p)}

/* 권한 설정 상세 패널 */
.cp-perm-panel{border-top:1px solid var(--border);padding-top:6px}
.cp-perm-group{padding:14px 0;border-bottom:1px solid var(--border)}
.cp-perm-group:last-child{border-bottom:0}
.cp-perm-gtitle{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px}
.cp-perm-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 0}
.cp-perm-lbl{font-size:14px;color:var(--muted)}
.cp-select{font-family:inherit;font-size:13px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--border-strong);border-radius:9px;padding:8px 12px;cursor:pointer;min-width:210px}
.cp-select:hover{border-color:var(--p)}
.cp-select:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
.cp-submit{margin-top:auto;height:48px;border-radius:10px;font-size:15px;align-self:flex-start;padding:0 26px}

/* 생성 모달 참석자 체크리스트 */
.cp-members-search{margin-bottom:8px}
.cp-members-list{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;
  border:1.5px solid var(--border-strong);border-radius:10px;padding:6px}
.cp-member-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:.12s}
.cp-member-opt:hover{background:var(--p-soft)}
.cp-member-opt input{width:16px;height:16px;accent-color:var(--p);cursor:pointer;flex-shrink:0}
.cp-member-name{font-size:14px;color:var(--ink)}
.cp-member-pos{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap}
.cp-members-empty{font-size:13px;color:var(--muted);padding:10px;text-align:center}

/* 참여자 초대 모달 — 목록 행간 축소 + 더 많이 보이게 세로 확장(2cm) */
[data-modal="invite-participant"] .cp-members-list{max-height:296px}
[data-modal="invite-participant"] .cp-member-opt{padding:5px 10px}
[data-modal="invite-participant"] .cp-member-opt:has(input:disabled){cursor:default;opacity:.55}
[data-modal="invite-participant"] .cp-member-opt:has(input:disabled):hover{background:transparent}
[data-modal="invite-participant"] .cp-member-opt input:disabled{cursor:default}

/* 토글 스위치 */
.switch{position:relative;display:inline-flex;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{width:42px;height:24px;border-radius:99px;background:var(--border-strong);transition:.18s}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-1);transition:.18s}
.switch input:checked + .switch-track{background:var(--p)}
.switch input:checked + .switch-track::after{transform:translateX(18px)}
.switch input:focus-visible + .switch-track{box-shadow:0 0 0 3px var(--p-soft)}

/* 우측 미리보기 패널 */
.cp-preview{flex:1;position:relative;background:#eef0f5;border-radius:0 20px 20px 0;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.cp-close{position:absolute;top:14px;right:16px;z-index:3;border:none;background:transparent;color:#3a3a44;
  cursor:pointer;padding:4px;border-radius:8px;opacity:.75}
.cp-close:hover{opacity:1;background:rgba(0,0,0,.06)}
.cp-blob{position:absolute;z-index:0}
.cp-blob-1{width:340px;height:300px;background:var(--collab-grad);top:-120px;right:-70px;
  border-radius:0 0 0 180px;transform:rotate(-8deg);opacity:.95}
.cp-blob-2{width:360px;height:360px;background:var(--collab-grad);bottom:-170px;right:-40px;border-radius:50%;opacity:.95}
.cp-blob-3{width:60px;height:60px;background:var(--car);bottom:70px;left:56px;border-radius:50%}
.cp-mock{position:relative;z-index:1;width:88%;max-width:540px;background:#fff;border-radius:14px;
  box-shadow:0 24px 60px rgba(20,20,45,.22);padding:16px}
.cp-mock-head{display:flex;align-items:center;gap:12px;padding:4px 4px 14px}
.cp-mock-sq{width:44px;height:44px;border-radius:11px;background:#24c1f0}
.cp-mock-star{width:20px;height:20px;color:#f5c518}
.cp-mock-kebab{width:18px;height:18px;color:#9aa4af}
.cp-mock-body{display:flex;gap:12px}
.cp-mock-main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.cp-mock-toolbar{display:flex;gap:20px;justify-content:center;padding:13px;border:1px solid #ececf0;border-radius:10px}
.cp-mock-toolbar svg{width:18px;height:18px;color:#8b95a1}
.cp-mock-post{border:1px solid #ececf0;border-radius:10px;padding:12px;display:flex;gap:10px;position:relative}
.cp-mock-lines{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:3px;min-width:0}
.cp-mock-post .cp-dot{position:absolute;top:14px;width:12px;height:12px;border-radius:50%;background:#eceef2}
.cp-mock-post .cp-dot:nth-of-type(1){right:32px}
.cp-mock-post .cp-dot:nth-of-type(2){right:14px}
.cp-mock-side{flex:0 0 33%;border:1px solid #ececf0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:15px}
.cp-mock-member{display:flex;align-items:center;gap:9px}
.cp-mock-side-foot{display:flex;gap:14px;justify-content:center;border-top:1px solid #ececf0;padding-top:13px;margin-top:auto}
.cp-mock-side-foot svg{width:18px;height:18px;color:#8b95a1}
.cp-av{width:30px;height:30px;border-radius:50%;flex-shrink:0}
.cp-av-1{background:linear-gradient(135deg,#f9a8d4,#ec4899)}
.cp-av-2{background:linear-gradient(135deg,#c4b5fd,#8b5cf6)}
.cp-av-3{background:linear-gradient(135deg,#a7f3d0,#34d399)}
.cp-av-4{background:linear-gradient(135deg,#fdba74,#fb923c)}
/* ── 프로젝트 폼 공용 pf-* (생성 스텝퍼·수정 화면 2곳이 같은 파셜 사용) ── */
.pf-sec{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:800;color:var(--faint);margin:24px 0 12px}
div.pf-sec:first-of-type{margin-top:0}
.pf-sec::after{content:"";flex:1;height:1px;background:var(--border)}
.pf-field{margin-bottom:14px}
.pf-lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.pf-lbl em{font-style:normal;font-weight:500;color:var(--faint)}
.pf-req{color:var(--danger)}
.pf-field .input,.pf-addr .input,.pf-site-map .input{width:100%;max-width:none;height:40px;font-size:14px;border-radius:10px}
.pf-field textarea.input{height:auto;min-height:40px;padding-top:9px;line-height:1.5}
.pf-field .input.pf-title{height:46px;font-size:16px;font-weight:700}
.pf-mono{font-variant-numeric:tabular-nums;font-weight:600}
.pf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-grid3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}
.pf-prefix{position:relative}
.pf-prefix span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-weight:700;pointer-events:none}
.pf-field .pf-prefix .input{padding-left:26px}
.pf-addr{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.pf-addr select:disabled{background:var(--bg);color:var(--faint);cursor:not-allowed}
.pf-site-map{margin-bottom:14px}
.pf-site-map .cp-map-paste .btn{flex-shrink:0}
.pf-seg{display:flex;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--border);border-radius:11px;margin-bottom:14px}
.pf-seg .cp-tab{flex:1;height:32px;padding:0;border:0;border-radius:8px;background:transparent;font-size:12.5px;font-weight:700;color:var(--muted)}
.pf-seg .cp-tab:hover{color:var(--ink)}
.pf-seg .cp-tab.on{background:var(--surface);color:var(--p);box-shadow:var(--sh-1)}
.pf-box{border:1px solid var(--border);border-radius:12px;padding:0 14px}
.pf-toggle{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);cursor:pointer}
.pf-box>.pf-toggle:first-child{border-top:0}
div.pf-toggle{cursor:default}
.pf-toggle-t{flex:1;min-width:0}
.pf-toggle-t b{display:block;font-size:13.5px;color:var(--ink)}
.pf-toggle-t small{font-size:12px;color:var(--muted)}
.pf-box .cp-perm-panel{padding-top:0}

/* ── 프로젝트 생성 모달 — 3단계 스텝퍼 np-* ── */
.modal-wide .modal.np-modal{max-width:780px;max-height:min(90vh,760px)}
.np-form{flex:1;display:flex;flex-direction:column;min-height:0;width:100%}
.np-head{display:flex;align-items:flex-start;gap:12px;padding:24px 28px 0}
.np-head>div{flex:1;min-width:0}
.np-title{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0}
.np-sub{color:var(--muted);font-size:13px;margin:3px 0 0}
.np-close{border:0;background:transparent;color:var(--faint);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.np-close:hover{background:var(--bg);color:var(--ink)}
.np-steps{display:flex;padding:18px 28px 0}
.np-step{flex:1;display:flex;align-items:center;gap:10px;padding:0 0 14px;border:0;border-bottom:2px solid var(--border);
  background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--faint);text-align:left;cursor:pointer}
.np-step i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg);
  border:1px solid var(--border);font-size:12px;flex-shrink:0}
.np-step small{display:block;font-size:11px;font-weight:500;color:var(--faint)}
.np-step.done{color:var(--p);border-color:var(--p)}
.np-step.done i{background:var(--p);border-color:var(--p);color:#fff}
.np-step.on{color:var(--ink);border-color:var(--p)}
.np-step.on i{background:var(--surface);color:var(--p);border:2px solid var(--p)}
.np-body{flex:1;min-height:0;overflow-y:auto;padding:22px 28px}
.np-pane[hidden]{display:none}
.np-modal .pf-site{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.np-modal .cp-map{height:250px}
.np-modal .pf-grid3{grid-template-columns:1fr 1fr}
.np-modal .pf-grid3 .pf-field:first-child{grid-column:1/-1}
.cp-map-foot .btn[hidden]{display:none}
.np-error{margin-bottom:16px;padding:10px 12px;border-radius:10px;background:var(--danger-soft);color:var(--danger);font-size:13px;font-weight:600}
.np-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.np-chips:empty{display:none}
.np-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px 0 11px;border:0;border-radius:20px;
  background:var(--p-soft);color:var(--p);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.np-chip svg{width:12px;height:12px}
.np-chip:hover{filter:brightness(.96)}
.cp-members-list.np-members{max-height:150px;margin-bottom:18px}
.np-foot{display:flex;align-items:center;gap:8px;padding:14px 28px;border-top:1px solid var(--border);background:var(--bg)}
.np-hint{margin-right:auto;font-size:12px;color:var(--faint)}
.np-foot .btn svg{width:16px;height:16px}
.np-foot .btn[hidden]{display:none}
@media(max-width:720px){
  /* 모바일 전체 화면 — 뷰포트 높이는 부모(inset:0) 하나만 계산, 자식은 stretch(dvh 중앙정렬 클리핑 함정 회피) */
  .modal-wide:has(.np-modal){padding:0;align-items:stretch}
  .modal-wide .modal.cp-modal.np-modal{max-width:none;max-height:none;height:auto;border-radius:0}
  .np-head,.np-steps,.np-body,.np-foot{padding-left:16px;padding-right:16px}
  .np-step small{display:none}
  .np-modal .pf-site{grid-template-columns:1fr;gap:0}
  .np-hint{display:none}
  .np-foot{justify-content:flex-end}
}
@media(max-width:560px){
  .pf-grid3{grid-template-columns:1fr 1fr}
  .pf-grid3 .pf-field:first-child{grid-column:1/-1}
}

.cp-ln{height:9px;border-radius:5px;background:#e7e9ee;display:block}
.cp-ln.w40{width:40%}.cp-ln.w55{width:55%}.cp-ln.w70{width:70%}.cp-ln.w80{width:80%}

@media(max-width:900px){
  .modal-wide{padding:16px}
  .modal-wide .modal.cp-modal{height:auto;max-height:90vh;max-width:520px;overflow:hidden}
  .cp-preview{display:none}
  .cp-form{flex:1;overflow-y:auto}
  .cp-close-sm{display:block}
}

/* ── 협업 — 프로젝트 테이블 뷰(그룹별 태스크) ── */
.ptable-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.ptable{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.ptable thead th{text-align:left;font-weight:600;color:var(--faint);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.02em;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface)}
.ptable td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--ink);vertical-align:middle}
.ptable .c-task{min-width:220px;white-space:normal}
.ptable .c-num{color:var(--faint)}
.ptable .c-progress{color:var(--muted)}
.ptable td.c-assignee{display:flex;align-items:center;gap:6px}
.ptable-title{font-weight:600}

/* 진행률 막대 */
.prog{display:inline-block;width:56px;height:6px;border-radius:3px;background:var(--border);
  vertical-align:middle;margin-right:6px;overflow:hidden}
.prog>span{display:block;height:100%;background:var(--collab);border-radius:3px}

/* 그룹 헤더 행 */
.ptable-group td{background:var(--bg)}
.ptable-group-toggle{background:none;border:none;color:var(--muted);cursor:pointer;padding:0;margin-right:6px;
  vertical-align:middle;transition:transform .15s}
.ptable-section.is-collapsed .ptable-group-toggle{transform:rotate(-90deg)}
.ptable-group-drag{background:none;border:0;color:var(--faint);cursor:grab;padding:0;margin-right:2px;vertical-align:middle;opacity:0;transition:opacity .12s}
.ptable-group:hover .ptable-group-drag{opacity:1}
.ptable-section.is-dragging{opacity:.5}
.ptable-group-name{font-weight:700;color:var(--ink)}
.ptable-group-count{color:var(--faint);margin-left:8px}
.ptable-group-actions{margin-left:14px;display:inline-flex;align-items:center;gap:6px;opacity:0;transition:opacity .12s}
.ptable-group:hover .ptable-group-actions{opacity:1}
.ptable-add-task,.ptable-group-rename,.ptable-group-delete{background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:12.5px;font-weight:600;padding:2px 4px;display:inline-flex;align-items:center;gap:4px}
.ptable-add-task:hover{color:var(--collab)}
.ptable-group-rename:hover{color:var(--p)}
.ptable-group-delete:hover{color:var(--danger)}
.ptable-rename-input{display:inline-block;width:200px;height:28px;padding:2px 8px;font-size:13px;vertical-align:middle}

/* 태스크 행 */
.ptable-row{cursor:pointer}
.ptable-row:hover td{background:var(--collab-bg)}
.ptable-row.is-done .ptable-title{text-decoration:line-through;color:var(--faint)}
.ptable-section.is-collapsed .ptable-row,.ptable-section.is-collapsed .ptable-add{display:none}

/* + Add task 행 */
.ptable-add td{color:var(--faint);cursor:pointer;font-weight:600;font-size:12.5px}
.ptable-add:hover td{background:var(--collab-bg);color:var(--collab)}

/* ── 우측 상세 패널(드로어) ── */
.task-drawer-backdrop{position:fixed;inset:0;background:rgba(16,26,20,.38);opacity:0;visibility:hidden;
  transition:.18s;z-index:60}
.task-drawer-backdrop.open{opacity:1;visibility:visible}
.task-drawer{position:fixed;top:50%;left:50%;width:600px;max-width:94vw;max-height:90vh;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:0 18px 48px rgba(16,26,20,.22);
  transform:translate(-50%,-50%) scale(.96);opacity:0;visibility:hidden;
  transition:transform .18s ease,opacity .18s ease,visibility .18s;z-index:61;
  display:flex;flex-direction:column;padding:22px 24px;overflow-y:auto}
.task-drawer.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}

/* ── 피드(Feed) — 게시글·댓글 ── */
/* ── 컴포저 바 — 종류 칩 + "Start writing here…" ── */
.feed-composer{padding:12px 14px;margin-bottom:16px}
.fc-types{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-bottom:10px}
@media(max-width:520px){.fc-types{gap:8px 10px}.fc-type{font-size:12px;padding:5px 10px}}
.fc-type{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--muted);background:var(--collab-bg);border:1px solid var(--border);border-radius:999px;
  padding:6px 12px;cursor:pointer}
.fc-type:hover{color:var(--p);border-color:var(--p);background:var(--p-soft)}
.fc-start{display:block;width:100%;text-align:left;font-family:inherit;font-size:14px;color:var(--faint);
  background:transparent;border:0;border-top:1px solid var(--border);padding:12px 2px 4px;cursor:text}
.fc-start:hover{color:var(--muted)}

.feed-post{margin-bottom:14px}
.feed-post-head{align-items:flex-start}

/* 피드 툴바 — Pinned·필터(좌) + 뷰 토글(우) */
.feed-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.feed-toolbar-left{display:flex;align-items:center;gap:14px}
.feed-pinned-toggle,.feed-filter-btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;
  font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;padding:4px 2px}
.feed-pinned-toggle:hover,.feed-filter-btn:hover{color:var(--p)}
.feed-pinned-toggle.is-on{color:var(--p)}
.feed-pinned-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--collab-bg,var(--p-soft));color:var(--muted);font-size:11px;font-weight:700}
.feed-pinned-toggle.is-on .feed-pinned-count{background:var(--p);color:#fff}
.feed-filter-wrap{position:relative}
.feed-filter-btn{color:var(--p)}
.feed-filter-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:150px;padding:6px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.feed-filter-opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:13.5px;
  color:var(--ink);cursor:pointer}
.feed-filter-opt:hover{background:var(--p-soft)}
.feed-filter-opt input{width:15px;height:15px;accent-color:var(--p);cursor:pointer}

/* 컴팩트(목록) 뷰 — 한 줄 요약만 노출, 상세 카드 숨김 */
.feed-post-compact{display:none;align-items:center;gap:10px;padding:11px 16px;min-width:0}
.fpc-icon{flex:0 0 auto;color:var(--muted)}
.fpc-title{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.fpc-meta{font-size:12px;white-space:nowrap;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.fpc-status{flex:0 0 auto;margin-left:auto;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:var(--p-soft);color:var(--p);white-space:nowrap}
.fpc-status.tone-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.fpc-status.tone-warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.fpc-status.tone-info{background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info)}
.fpc-status.tone-danger{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.fpc-status.tone-hold,.fpc-status.tone-neutral{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
#feedList.is-compact .feed-post{margin-bottom:6px;padding:0;overflow:hidden}
#feedList.is-compact .feed-post>.card-h,
#feedList.is-compact .feed-post>.card-b{display:none}
#feedList.is-compact .feed-post-compact{display:flex}
.feed-post-who{display:flex;align-items:center;gap:10px}
.feed-post-author{font-size:13.5px;font-weight:700;color:var(--ink)}
.feed-post-date{font-size:11.5px}
.feed-post-head-right{display:flex;align-items:center;gap:8px}
.feed-type-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--muted);
  background:var(--collab-bg);border:1px solid var(--border);border-radius:999px;padding:3px 9px}
.feed-vis-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p);
  background:color-mix(in srgb, var(--p) 8%, transparent);border:1px solid color-mix(in srgb, var(--p) 30%, transparent);
  border-radius:999px;padding:3px 9px}
.feed-pin-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--accent, #A16207);
  background:color-mix(in srgb, var(--accent, #A16207) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent, #A16207) 30%, transparent);
  border-radius:999px;padding:3px 9px}
.feed-pin-chip[hidden]{display:none}
/* Insights(프로젝트 통계) */
.ins-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.ins-kpi{display:flex;flex-direction:column;gap:2px;padding:16px;background:var(--card);
  border:1px solid var(--border);border-radius:12px}
.ins-kpi-num{font-size:26px;font-weight:700;color:var(--fg);line-height:1.1}
.ins-kpi-lbl{font-size:12px;color:var(--muted)}
.ins-kpi.is-danger .ins-kpi-num{color:var(--danger)}
.ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ins-card{padding:18px}
.ins-card-wide{grid-column:1 / -1}
.ins-card-title{font-size:13.5px;font-weight:600;margin:0 0 14px;color:var(--fg)}
.ins-bar-row{display:grid;grid-template-columns:130px 1fr 48px;align-items:center;gap:10px;margin-bottom:9px}
.ins-bar-label{font-size:12.5px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-bar-track{position:relative;height:14px;background:var(--bg);border-radius:99px;overflow:hidden}
.ins-bar-fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:99px;
  background:color-mix(in srgb, var(--p) 55%, transparent);transition:width .3s ease}
.ins-bar-fill.ins-bar-done{background:var(--p)}
.ins-bar-fill.tone-ok{background:var(--ok)}
.ins-bar-fill.tone-warn{background:var(--warn)}
.ins-bar-fill.tone-info{background:var(--info)}
.ins-bar-fill.tone-danger{background:var(--danger)}
.ins-bar-fill.tone-hold,.ins-bar-fill.tone-neutral{background:color-mix(in srgb, var(--muted) 45%, transparent)}
.ins-bar-num{font-size:12px;font-weight:600;color:var(--muted);text-align:right}
.ins-spark{width:100%;height:90px;display:block}
@media (max-width:900px){.ins-kpis{grid-template-columns:repeat(2,1fr)}.ins-grid{grid-template-columns:1fr}}
/* Poll(투표) 카드 */
.feed-poll{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.feed-poll-opt{position:relative;display:flex;align-items:center;gap:8px;width:100%;
  text-align:left;padding:9px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--card);cursor:pointer;overflow:hidden;font-size:13.5px;color:var(--fg)}
.feed-poll-opt:hover{border-color:var(--p)}
.feed-poll-opt:disabled{cursor:default}
.feed-poll-opt.is-mine{border-color:var(--p);box-shadow:inset 0 0 0 1px var(--p)}
.feed-poll-bar{position:absolute;inset:0 auto 0 0;height:100%;width:0;
  background:color-mix(in srgb, var(--p) 12%, transparent);transition:width .25s ease;z-index:0}
.feed-poll-label{position:relative;z-index:1;flex:1;font-weight:500}
.feed-poll-pct{position:relative;z-index:1;font-weight:600;color:var(--muted);font-size:12px}
.feed-poll-opt.is-mine .feed-poll-pct{color:var(--p)}
.feed-poll-foot{display:flex;align-items:center;gap:10px;font-size:12px;margin-top:2px}
.fw-poll-options{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.feed-post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px;font-size:12.5px}
.feed-post-progress{display:inline-flex;align-items:center;gap:6px}

/* ── 협업 — Feed 태스크 상세폼(플로우팀 스타일): 읽기전용 필드 + 액션바 + 댓글 스레드 ── */
.ftd-titlebar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:2px 0 14px}
.ftd-title{font-size:18px;font-weight:700;color:var(--ink);margin:0;line-height:1.35;word-break:break-word}
.ftd-num{flex:none;font-size:12px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:5px 10px;white-space:nowrap}
.ftd-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.ftd-row{display:flex;align-items:center;gap:14px;min-height:24px}
.ftd-label{flex:none;width:96px;font-size:13px;font-weight:600;color:var(--muted)}
.ftd-value{font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ftd-assignees{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.ftd-priority-select{font-weight:600}
.ftd-priority-select.ftd-priority-high{color:var(--warn,#b45309)}
.ftd-priority-select.ftd-priority-urgent{color:var(--danger,#b91c1c)}
.ftd-priority-select.ftd-priority-low{color:var(--muted)}
.ftd-progress{gap:10px}
.ftd-progress .prog{width:150px}
/* 편집 가능 필드 — Status·Assignee·날짜·Priority·Progress·Group(멤버 전원 수정 가능, 드로어와 동일 권한) */
.ftd-value select,.ftd-value input[type="date"]{font-family:inherit;font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:7px;padding:5px 9px;cursor:pointer}
.ftd-value select:hover,.ftd-value input[type="date"]:hover{border-color:var(--p)}
.ftd-value select:focus,.ftd-value input[type="date"]:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
.ftd-assignees-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ftd-assignees-row .ftd-edit-link{margin-left:auto}
.ftd-edit-link{background:none;border:0;padding:0;font-family:inherit;font-size:12px;font-weight:600;color:var(--p);cursor:pointer}
.ftd-edit-link:hover{text-decoration:underline}
.ftd-desc{margin:0 0 16px;padding-top:16px;border-top:1px solid var(--border);font-size:14px;line-height:1.55;color:var(--ink)}
.ftd-desc ul,.ftd-desc ol{margin:6px 0;padding-left:22px}
.ftd-sec-h{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin:0 0 8px}
/* 본문/사진과 간격 확보 + 구분선 */
.ftd-subtasks-sec{margin-bottom:16px;padding-top:1cm;border-top:1px solid var(--border)}
.ftd-subtasks{list-style:none;margin:0 0 6px;padding:0}
/* 제목 행에 입력란을 나란히(드로어 .td-sec-h-row와 동일 패턴) — 라벨 바로 옆부터 남은 폭 전부 사용 */
.ftd-sec-h-row{display:flex;align-items:center;gap:10px}
.ftd-sec-h-row .ftd-subtask-form{flex:1;min-width:0}
.ftd-subtask-form .input{width:100%}
/* 액션바 — 좋아요·북마크·리마인더 + 읽음 수 */
.ftd-actionbar{display:flex;align-items:center;gap:6px;padding:12px 0;margin-top:4px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ftd-act{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);
  background:none;border:0;padding:6px 8px;border-radius:8px;cursor:pointer}
.ftd-act:hover{background:var(--bg);color:var(--ink)}
.ftd-act.is-on{color:var(--p,#166534)}
.ftd-reminder-input{margin-left:4px;max-width:210px}
.ftd-read{margin-left:auto;font-size:12.5px;color:var(--muted)}
/* 댓글 스레드 */
.ftd-thread{padding:10px 0;border-top:1px solid var(--border)}
.ftd-thread.is-pinned{background:var(--p-soft);border-radius:8px;padding:10px;border-top:0;margin-bottom:6px}
.ftd-comment{display:flex;gap:9px;align-items:flex-start}
.ftd-comment.is-reply{margin-top:8px}
.ftd-comment-main{flex:1;min-width:0}
.ftd-comment-top{display:flex;align-items:center;gap:8px}
.ftd-comment-author{font-size:13px;font-weight:600;color:var(--ink)}
.ftd-comment-time{font-size:11.5px}
.ftd-comment-pin{background:none;border:0;color:var(--faint);cursor:pointer;padding:0 2px;display:inline-flex}
.ftd-comment-pin.is-on{color:var(--p,#166534)}
.ftd-comment-del{margin-left:auto;background:none;border:0;color:var(--faint);font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.ftd-comment-del:hover{color:var(--danger,#b91c1c)}
.ftd-comment-body{font-size:13.5px;color:var(--ink);line-height:1.5;margin:2px 0 4px;word-break:break-word;white-space:pre-wrap}
.ftd-comment-foot{display:flex;align-items:center;gap:14px}
.ftd-comment-like,.ftd-comment-reply-btn{background:none;border:0;font-family:inherit;font-size:12px;font-weight:600;
  color:var(--muted);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px}
.ftd-comment-like:hover,.ftd-comment-reply-btn:hover{color:var(--ink)}
.ftd-comment-like.is-on{color:var(--p,#166534)}
.ftd-replies{margin-left:33px}
.ftd-reply-form{display:flex;gap:8px;margin:8px 0 0 33px}
.ftd-reply-form .input{flex:1}
.ftd-comment .td-mention{color:var(--p,#166534);font-weight:600}
.feed-post-title{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 14px;padding-bottom:12px;
  border-bottom:1px solid var(--border)}
.feed-post-body{white-space:pre-wrap;word-break:break-word;margin:0 0 12px;font-size:14px;line-height:1.55}
.feed-post-body ul,.feed-post-body ol{margin:6px 0;padding-left:22px}
.feed-post-body a{color:var(--p);text-decoration:underline}
.feed-edit-form{margin:0 0 14px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface,#fff);display:flex;flex-direction:column;gap:10px}
.feed-edit-form .feed-edit-body{border:1px solid var(--border);border-radius:8px;padding:10px 12px;white-space:pre-wrap;word-break:break-word}
.feed-edit-actions{display:flex;justify-content:flex-end;gap:8px}
.feed-edit-event{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.feed-edit-event label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.feed-edit-event .feed-edit-allday{flex-direction:row;align-items:center;gap:6px;padding-bottom:8px}
.feed-edit-event .feed-edit-loc{flex:1 1 100%}
.feed-edit-event .feed-edit-participants{flex:1 1 100%;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
/* 첨부 캐러셀 — 5장까지 1행, 초과 시 좌우 스크롤 버튼(.has-more) */
.feed-att-carousel{position:relative;max-width:552px;margin:1cm auto 12px}
.feed-post-atts{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
.feed-post-atts::-webkit-scrollbar{display:none}
.feed-att-nav{position:absolute;top:52px;transform:translateY(-50%);z-index:2;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--border);border-radius:50%;
  background:var(--surface,#fff);color:var(--ink);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:opacity .15s}
.feed-att-nav:hover{color:var(--p);border-color:var(--p)}
.feed-att-prev{left:-6px}
.feed-att-next{right:-6px}
.feed-att-carousel.at-start .feed-att-prev,.feed-att-carousel.at-end .feed-att-next{opacity:.35;pointer-events:none}
.feed-att{flex:0 0 auto;display:block;width:104px;height:104px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border)}
.feed-att img{width:100%;height:100%;object-fit:cover;display:block}
.feed-att-file{display:inline-flex;align-items:center;gap:8px;width:auto;height:auto;max-width:260px;
  padding:9px 12px;color:var(--muted);text-decoration:none;background:var(--collab-bg)}
.feed-att-file:hover{color:var(--p);border-color:var(--p)}
.feed-att-file svg{flex-shrink:0}
.feed-att-name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Feed 작성 모달(Article/Task 탭) ── */
.fw-modal{max-width:600px;display:flex;flex-direction:column;max-height:88vh}
.fw-tabs{display:flex;justify-content:center;gap:22px;padding:14px 22px 0;border-bottom:1px solid var(--border)}
.fw-tab{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);background:none;border:0;
  border-bottom:2px solid transparent;padding:8px 4px;margin-bottom:-1px;cursor:pointer}
.fw-tab:hover{color:var(--ink)}
.fw-tab.on{color:var(--brand);border-bottom-color:var(--p)}
.fw-modal .modal-b{flex:1;overflow-y:auto}
.fw-title-input{width:100%;border:0;font-size:22px;font-weight:700;padding:6px 2px 10px;
  background:transparent;color:var(--ink)}
.fw-title-input::placeholder{color:var(--faint);font-weight:500}
.fw-title-input:focus{outline:none}
.fw-divider{height:1px;background:var(--border);margin:4px 0 14px}
.fw-body-input{width:100%;border:0;resize:vertical;font-family:inherit;font-size:14.5px;line-height:1.6;
  color:var(--ink);background:transparent;padding:2px}
.fw-body-input:focus{outline:none}
.fw-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fw-att{position:relative;width:88px;height:88px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border)}
.fw-att img{width:100%;height:100%;object-fit:cover;display:block}
.fw-att.is-file{width:auto;height:auto;max-width:220px;display:inline-flex;align-items:center;gap:8px;
  padding:10px 30px 10px 12px;color:var(--muted);background:var(--collab-bg)}
.fw-att.is-file svg{flex-shrink:0}
.fw-att-name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-att-del{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:none;
  background:rgba(16,26,20,.6);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center}
.fw-foot{justify-content:space-between;align-items:center}
.fw-foot-left{display:flex;align-items:center;gap:10px}
.fw-icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--muted);
  cursor:pointer;border:1px solid var(--border)}
.fw-icon-btn:hover{color:var(--p);border-color:var(--p)}
.fw-visibility{flex:0 0 auto;min-width:0;width:auto}

/* ── Feed 2단 레이아웃(본문 + 오른쪽 참여자 패널) ── */
.feed-layout{display:flex;gap:22px;align-items:flex-start}
.feed-main{flex:1;min-width:0;max-width:680px}
.feed-aside{width:290px;flex-shrink:0;position:sticky;top:12px;margin-left:auto}
@media(max-width:1080px){
  .feed-layout{flex-direction:column}
  .feed-main{max-width:none;width:100%}
  .feed-aside{width:100%;position:static;order:-1}
}

/* Feed 3분할 고정 — 헤더(제목·탭)·참여자 카드는 고정, 중앙 피드만 스크롤 */
.mc-fixed{display:flex;flex-direction:column;overflow:hidden}
.mc-fixed .feed-layout{flex:1 1 auto;min-height:0;align-items:stretch}
.mc-fixed .feed-main{min-height:0;overflow-y:auto;padding-bottom:8px}
.mc-fixed .feed-aside{position:static;min-height:0;overflow-y:auto}
@media(max-width:1080px){
  .mc-fixed{display:block;overflow-y:auto}
  .mc-fixed .feed-main,.mc-fixed .feed-aside{overflow:visible;min-height:0}
}

/* ── 참여자 패널 ── */
.avatar-sm{width:28px;height:28px;font-size:11px}
.participant-panel{padding:16px 16px 14px}
.pp-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.pp-title{font-size:14px;font-weight:700;color:var(--ink)}
.pp-count{font-size:12px;font-weight:700;color:var(--p);background:var(--p-soft);border-radius:999px;padding:1px 8px}
.pp-sec-h{font-size:11.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.03em;
  margin:12px 0 8px}
.pp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pp-item{display:flex;align-items:center;gap:10px}
.pp-who{min-width:0}
.pp-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-you{color:var(--p);font-weight:700}
.pp-role{font-size:11.5px}
.pp-req-actions{margin-left:auto;display:flex;gap:6px}
.pp-req-approve,.pp-req-decline{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;cursor:pointer}
.pp-req-approve{color:var(--p)}
.pp-req-approve:hover{background:var(--p-soft);border-color:var(--p)}
.pp-req-decline{color:#b91c1c}
.pp-req-decline:hover{background:#fef2f2;border-color:#b91c1c}
.pp-actions{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.pp-action{flex:1;position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--collab-bg);
  border:1px solid var(--border);border-radius:9px;padding:9px 8px;cursor:not-allowed}
.pp-action svg{width:16px;height:16px}
.pp-action:not(:disabled){cursor:pointer;color:var(--p)}
.pp-action:not(:disabled):hover{border-color:var(--p);background:var(--p-soft)}
.pp-soon{position:absolute;top:-7px;right:-6px;font-size:8.5px;font-weight:700;color:#fff;background:var(--faint);
  border-radius:999px;padding:1px 5px;letter-spacing:.02em}

/* ── 참여자 팝오버(아바타 스택 클릭 — Table 등) ── */
.pp-pop-wrap{position:relative}
.avatar-stack-btn{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:4px 10px 4px 4px;cursor:pointer;color:var(--muted)}
.avatar-stack-btn:hover{border-color:var(--p)}
.avatar-stack{display:flex}
.avatar-stack .avatar{border:2px solid var(--surface);margin-left:-8px}
.avatar-stack .avatar:first-child{margin-left:0}
/* 협업 — 담당자 표시(이름 간격 + id 해시 색상 팔레트) */
.assignee-name{margin-left:6px}
.avatar--c0{background:#166534}.avatar--c1{background:#A16207}.avatar--c2{background:#0e7490}
.avatar--c3{background:#9333ea}.avatar--c4{background:#b91c1c}.avatar--c5{background:#4d7c0f}
.avatar--c6{background:#c2410c}.avatar--c7{background:#334155}
/* 협업 — Assignee 2단 피커 모달 */
.ap-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000}
.ap-overlay[hidden]{display:none}
.ap-modal{background:var(--surface);border-radius:var(--r-lg);width:min(720px,92vw);max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--sh-2)}
.ap-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.ap-head h3{font-size:16px;font-weight:700}
.ap-x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.ap-body{display:grid;grid-template-columns:1fr 260px;flex:1;min-height:0}
.ap-left{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.ap-search{margin:14px 16px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:14px}
.ap-list{overflow:auto;padding:0 8px 12px}
.ap-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer}
.ap-opt:hover{background:var(--bg)}
.ap-opt.is-on{background:color-mix(in srgb,var(--p) 12%,transparent)}
.ap-check{width:18px;text-align:center;color:var(--p);font-weight:700}
.ap-who{display:flex;flex-direction:column;line-height:1.25}
.ap-sub{font-size:12px}
.ap-right{display:flex;flex-direction:column;min-height:0}
.ap-selhead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:13px;font-weight:600}
.ap-clear{border:0;background:none;color:#b91c1c;cursor:pointer;font-size:13px}
.ap-chips{overflow:auto;padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.ap-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;font-size:13px}
.ap-chip.is-primary{border-color:var(--p)}
.ap-chip-x{border:0;background:none;cursor:pointer;margin-left:auto;font-size:16px;color:var(--muted)}
.ap-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border)}
/* 협업 — 배지형 Status select(tone별 알약 색) */
.status-badge-select{appearance:none;-webkit-appearance:none;border-radius:999px;padding:4px 26px 4px 12px;border:1px solid var(--border);font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.status-badge-select[data-tone="ok"]{background-color:var(--ok-bg);color:var(--ok);border-color:transparent}
.status-badge-select[data-tone="warn"]{background-color:var(--warn-bg);color:var(--warn);border-color:transparent}
.status-badge-select[data-tone="info"]{background-color:var(--info-bg);color:var(--info);border-color:transparent}
.status-badge-select[data-tone="danger"]{background-color:var(--danger-soft);color:var(--danger);border-color:transparent}
.status-badge-select[data-tone="neutral"]{background-color:var(--bg);color:var(--muted)}
.status-badge-select[data-tone="hold"]{background-color:var(--bg);color:var(--muted)}
.status-badge-select[data-tone="purple"]{background-color:color-mix(in srgb,#7c3aed 14%,transparent);color:#7c3aed;border-color:transparent}
.status-badge-select[data-tone="teal"]{background-color:color-mix(in srgb,#0d9488 14%,transparent);color:#0d9488;border-color:transparent}
.status-badge-select[style*="--sc"]{background-color:color-mix(in srgb,var(--sc) 14%,transparent);color:var(--sc);border-color:transparent}
/* 협업 — 확인자 위젯(T/Leader·Director) */
.confirmer-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.confirmer-label{width:80px;font-weight:600;color:var(--muted);flex-shrink:0}
.confirmer-person{display:inline-flex;align-items:center;gap:6px}
.confirmer-add{border:1px dashed var(--border-strong);background:none;border-radius:8px;padding:3px 12px;color:var(--muted);cursor:pointer;font-family:inherit}
.confirmer-change{border:0;background:none;color:var(--p);cursor:pointer;font-size:12px}
.confirmer-toggle{margin-left:auto;border:1px solid var(--p);border-radius:999px;padding:2px 12px;background:none;color:var(--p);cursor:pointer;font-family:inherit;font-weight:600}
.confirmer-toggle.is-on{background:var(--p);color:#fff}
.confirmer-done{margin-left:auto;color:var(--ok)}
/* 협업 — 드로어 담당자 표시/확인자 블록 */
.tdf-full{grid-column:1 / -1}
.tdf[hidden]{display:none}
.tdf-assignee{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tdf-assignee-display{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.tdf-assignee #drawerAssigneeChange{margin-left:auto;align-self:center;flex-shrink:0;
  color:var(--muted);font-weight:500;text-decoration:underline}
.tdf-assignee #drawerAssigneeChange:hover{color:var(--p)}
/* 선택 담당자 — 1명당 작은 상자(배지) + × 삭제 */
.assignee-card{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 4px;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink)}
.assignee-card-name{white-space:nowrap}
.assignee-card-x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:15px;line-height:1;
  padding:0 1px;display:inline-flex;align-items:center}
.assignee-card-x:hover{color:var(--danger,#b91c1c)}
.tdf-add{border:0;background:none;color:var(--p);cursor:pointer;font-size:13px;font-weight:600;padding:0}
.tdf-block{flex-direction:column;align-items:flex-start;gap:6px}
.tdf-block .td-confirmers{width:100%}
/* Confirmers 행 — 다른 필드와 동일한 가로 라벨+우측 내용(tdf-block의 세로만 재정의) */
/* Assignees와의 경계를 상단 구분선으로 표시 */
#drawerConfirmersRow{flex-direction:row;align-items:flex-start;border-top:1px solid var(--border);padding-top:12px;margin-top:2px}
/* Confirmers 라벨을 첫 T/Leader 행 텍스트에 맞춰 정렬(confirmer-row의 상단 padding 6px 보정) */
#drawerConfirmersRow>span{padding-top:6px}
#drawerConfirmersRow .td-confirmers{flex:1;min-width:0}
/* Feed 상세폼 확인자 — ftd-row 안에서 두 슬롯을 세로로 쌓기 */
.ftd-confirmers{width:100%;display:flex;flex-direction:column;gap:2px}
.participant-popover{display:none;position:absolute;top:calc(100% + 8px);right:0;width:290px;padding:16px 16px 14px;
  z-index:50;box-shadow:0 12px 32px rgba(16,26,20,.16)}
.participant-popover.open{display:block}
.pp-pop-close{margin-left:auto;background:none;border:0;color:var(--faint);cursor:pointer;display:grid;place-items:center}
.pp-item{position:relative}
.pp-item-menu{margin-left:auto}
.pp-kebab{background:none;border:0;color:var(--faint);cursor:pointer;padding:2px;display:grid;place-items:center}
.pp-kebab:hover{color:var(--ink)}
.pp-menu{display:none;position:absolute;top:26px;right:0;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;box-shadow:0 8px 24px rgba(16,26,20,.16);padding:4px;z-index:1;min-width:140px}
.pp-menu.open{display:block}
.pp-menu-item{display:block;width:100%;text-align:left;background:none;border:0;font-family:inherit;font-size:12.5px;
  color:var(--ink);padding:7px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.pp-menu-item:hover{background:var(--collab-bg)}
.pp-remove{color:#b91c1c}
.pp-chat-btn{margin-left:auto;flex:none;background:none;border:0;color:var(--faint);cursor:pointer;padding:4px;
  border-radius:6px;display:grid;place-items:center}
.pp-chat-btn svg{width:16px;height:16px}
.pp-chat-btn:hover{color:var(--p);background:var(--p-soft)}

/* ── 이미지 라이트박스 ── */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(10,16,12,.9);padding:40px}
.lightbox.open{display:flex}
.lb-img{max-width:88vw;max-height:86vh;object-fit:contain;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:18px;right:20px;background:none;border:0;color:#fff;cursor:pointer;opacity:.85}
.lb-close:hover{opacity:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);display:none;width:52px;height:52px;
  border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  align-items:center;justify-content:center}
.lightbox.has-nav .lb-nav{display:flex}
.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;
  font-weight:600;opacity:.85}
@media(max-width:560px){
  .lb-nav{width:42px;height:42px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
}

.feed-comments{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.feed-comment{display:flex;align-items:baseline;gap:8px;font-size:13px;background:var(--collab-bg);
  border-radius:8px;padding:6px 10px}
.feed-comment-author{font-weight:700;color:var(--ink);flex-shrink:0}
.feed-comment-body{color:var(--ink);word-break:break-word;flex:1}
.feed-comment-delete{background:none;border:0;color:var(--faint);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.feed-comment-delete:hover{color:var(--danger)}
.feed-comment-form{display:flex;gap:8px}
.feed-comment-form .input{flex:1}

/* 사진 아바타 — 이니셜 대신 이미지. 이미지는 부모(.avatar)의 모서리를 따른다 */
.avatar{overflow:hidden}
.avatar--photo{background:none}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* 콜랩 아바타 — 원형 대신 둥근 사각, 조금 크게(피커 오버레이 포함) */
.theme-collab .avatar,.ap-overlay .avatar{border-radius:28%}
.theme-collab .avatar-xs,.ap-overlay .avatar-xs{width:24px;height:24px;font-size:10px}
.theme-collab .avatar-sm,.ap-overlay .avatar-sm{width:34px;height:34px;font-size:13px}

/* 직원 편집 — 프로필 사진 필드 */
.emp-photo-field{display:flex;align-items:center;gap:16px}
.emp-photo-preview{width:60px;height:60px;font-size:18px;flex:0 0 auto}
.emp-photo-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.emp-photo-actions .btn{cursor:pointer}
.emp-photo-remove{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}

/* 리치 댓글 작성창(아바타 + 멀티라인 + 전송) — Enter 전송, Shift+Enter 줄바꿈 */
.ftd-comment-form{display:flex;align-items:center;gap:10px;margin-top:12px}
.ftd-comment-form .avatar{flex:0 0 auto}
.feed-composer-input{flex:1;min-width:0;resize:none;overflow-y:auto;max-height:160px;
  padding:9px 14px;border:1px solid var(--border);border-radius:8px;font:inherit;line-height:1.45;
  background:var(--surface);color:var(--ink)}
.feed-composer-input:focus{outline:none;border-color:var(--p)}
.feed-composer-send{flex:0 0 auto}
.task-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.task-drawer-num{font-size:12px;font-weight:600}
.task-drawer-head-actions{display:flex;align-items:center;gap:6px}
.task-drawer-title{width:100%;border:1px solid transparent;border-radius:var(--r-sm);font-size:18px;font-weight:700;
  color:var(--ink);padding:6px 8px;margin-bottom:16px;background:transparent}
.task-drawer-title:hover{border-color:var(--border)}
.task-drawer-title:focus{border-color:var(--collab);background:var(--surface);outline:none}
.task-drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-bottom:18px;
  padding-bottom:18px;border-bottom:1px solid var(--border)}
/* 필드 = 가로 레이아웃(라벨 좌측 70px + 입력란 우측) — 세로 공간 절약 */
.tdf{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 10px}
.tdf>span{flex:none;width:70px;font-size:12px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.tdf>.input,.tdf>.tdf-assignee,.tdf>.tdf-static{flex:1;min-width:0}
/* 라벨 다음 줄로 접히는 보조요소(+Add group)는 입력란 아래로 들여쓰기 */
.tdf>.tdf-add{margin-left:80px}
.tdf-static{font-size:13px;color:var(--ink);min-height:20px;display:flex;align-items:center;gap:6px}
.task-drawer-sec{margin-bottom:18px}
.task-drawer-sec-h{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:8px}
.task-drawer-atts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.att-item{position:relative;width:72px;height:72px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border)}
.att-item img{width:100%;height:100%;object-fit:cover;display:block}
.att-item.is-file{background:var(--collab-bg)}
.att-item.is-file .att-file{display:grid;place-items:center;width:100%;height:100%;color:var(--muted)}
.att-item.is-file .att-file:hover{color:var(--p)}
.att-del{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:none;
  background:rgba(16,26,20,.6);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center}
.task-drawer-upload{cursor:pointer;align-self:flex-start}

/* Group 필드 — Add group 링크 버튼 */
.tdf-add{align-self:flex-start;background:none;border:0;padding:0;margin-top:2px;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--p);cursor:pointer}
.tdf-add:hover{text-decoration:underline}
/* Group 행 — +Add group를 셀렉트 오른쪽 같은 줄에 배치 */
.tdf-group{flex-wrap:nowrap}
.tdf-group>.tdf-add{margin-left:8px;margin-top:0;align-self:center;white-space:nowrap;flex:0 0 auto}
/* Group·Progress 셀렉트를 반폭 필드(Start date·Priority)와 동일한 입력란 너비로 고정 */
#drawerGroup,#drawerProgress{flex:0 0 auto;width:calc(50% - 87px)}
/* 커스텀 속성 컨테이너 — 그리드 칸을 차지하지 않도록(비면 사라지고, 있으면 각 필드가 전체 폭) */
.task-drawer-custom{display:contents}

/* 액션바 — 좋아요·북마크·댓글 수 */
.task-drawer-actions{display:flex;align-items:center;gap:6px;padding:10px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:16px}
.tda-btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--muted);background:none;border:0;border-radius:var(--r-sm);padding:6px 10px;cursor:pointer;transition:.15s}
.tda-btn:hover{background:var(--collab-bg);color:var(--ink)}
.tda-btn.on{color:var(--p)}
.tda-btn.on svg{fill:var(--p);stroke:var(--p)}
.tda-count{font-size:12px;min-width:12px}
.tda-meta{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:12.5px;color:var(--faint)}

/* 댓글 목록·입력 */
.td-comments{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.td-comment{display:flex;gap:9px}
.td-comment-main{flex:1;min-width:0}
.td-comment-top{display:flex;align-items:center;gap:8px}
.td-comment-author{font-size:13px;font-weight:600;color:var(--ink)}
.td-comment-time{font-size:11.5px}
.td-comment-del{margin-left:auto;background:none;border:0;color:var(--faint);font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.td-comment-del:hover{color:var(--danger,#b91c1c)}
.td-comment-body{font-size:13.5px;color:var(--ink);line-height:1.5;margin-top:2px;word-break:break-word;white-space:pre-wrap}
.td-comment-form{display:flex;align-items:center;gap:8px}
.td-comment-form .input{flex:1}

/* ── @멘션 자동완성 드롭다운 ── */
.mention-pop{position:fixed;z-index:200;list-style:none;margin:0;padding:4px;max-height:220px;overflow-y:auto;
  background:var(--card,#fff);border:1px solid var(--border);border-radius:9px;box-shadow:0 10px 28px rgba(0,0,0,.14)}
.mention-opt{padding:6px 10px;border-radius:6px;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap}
.mention-opt.is-active,.mention-opt:hover{background:color-mix(in srgb, var(--p,#166534) 12%, transparent);color:var(--p,#166534)}

/* ── 대댓글(답글) + 멘션 ── */
.td-thread{margin-bottom:12px}
.td-replies{margin-left:30px;display:flex;flex-direction:column;gap:10px}
.td-replies:not(:empty){margin-top:10px}
.td-comment.is-reply{gap:8px}
.td-comment-foot{margin-top:3px}
.td-comment-reply-btn{background:none;border:0;padding:0;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer}
.td-comment-reply-btn:hover{color:var(--p,#166534);text-decoration:underline}
.td-reply-form{display:flex;align-items:center;gap:8px;margin:8px 0 0 30px}
.td-reply-form .input{flex:1}
.td-mention{color:var(--p,#166534);font-weight:600}

/* ── 파일함 그리드 ── */
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.file-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--border);
  border-radius:10px;overflow:hidden;background:var(--card,#fff);transition:box-shadow .12s}
.file-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1)}
.file-card-thumb{height:110px;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden}
.file-card-thumb img{width:100%;height:100%;object-fit:cover}
.file-card-thumb.is-file{color:var(--muted)}
.file-card-body{padding:9px 11px}
.file-card-name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-card-meta{font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 파일함 독립 드라이브(Drive) ── */
.drive-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.drive-folders{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.folder-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;color:var(--muted);text-decoration:none;background:var(--card,#fff)}
.folder-chip:hover{color:var(--ink);border-color:var(--muted)}
.folder-chip.on{background:var(--p);border-color:var(--p);color:#fff}
.folder-chip.on .muted{color:rgba(255,255,255,.75)}
.drive-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.drive-file{position:relative}
.drive-file-actions{display:flex;gap:6px;padding:0 11px 10px;margin-top:auto}
.df-btn{font-size:11px;padding:3px 9px;border:1px solid var(--border);border-radius:6px;background:var(--card,#fff);color:var(--muted);cursor:pointer}
.df-btn:hover{color:var(--ink);border-color:var(--muted)}
.df-del:hover,.df-force:hover{color:var(--danger,#b91c1c);border-color:var(--danger,#b91c1c)}

/* ── 프로젝트 카드 개인 색상(My Projects) ── */
.project-card{position:relative}
.project-kebab{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;padding:2px;border-radius:6px;display:inline-flex}
.project-kebab:hover{background:var(--hover,#f0f0f0);color:var(--ink)}
.project-menu{position:absolute;top:38px;right:12px;z-index:20;width:200px;background:var(--card,#fff);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:10px 12px;cursor:default}
.project-menu-h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;margin:2px 0 6px}
.project-menu-colors{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pm-color{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.pm-color:hover{border-color:var(--border)}
.pm-color-none{background:var(--bg);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:14px;border-color:var(--border)}
.project-menu-sep{height:1px;background:var(--border);margin:8px 0}
.pm-hide{display:flex;align-items:center;gap:7px;text-align:left;background:none;border:0;padding:6px 8px;border-radius:6px;font-size:13px;color:var(--ink);cursor:pointer;width:100%}
.pm-hide:hover{background:var(--hover,#f5f5f5)}
.pm-hide svg{flex:0 0 auto;color:var(--muted)}

/* ── 정렬 드롭다운(프로젝트 목록) ── */
.sort-wrap{position:relative}
.sort-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:20;width:190px;background:var(--card,#fff);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:6px;cursor:default}
.sort-opt{display:block;text-align:left;background:none;border:0;padding:7px 9px;border-radius:6px;font-size:13px;color:var(--ink);cursor:pointer;width:100%}
.sort-opt:hover{background:var(--hover,#f5f5f5)}
.sort-opt.on{color:var(--p);font-weight:600}

/* ── 커스텀 상태 관리 모달 ── */
.status-mgr-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.status-mgr-item{display:flex;align-items:center;gap:8px}
.status-mgr-item.is-dragging{opacity:.5}
.status-mgr-drag{cursor:grab;color:var(--faint);font-size:15px;user-select:none}
.status-mgr-label{flex:1;min-width:0}
.status-mgr-flag{font-size:11px;font-weight:700;color:var(--muted);padding:3px 8px;border-radius:99px;background:var(--bg);white-space:nowrap}
.status-mgr-del{flex:none;background:none;border:0;color:var(--faint);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.status-mgr-del:hover{color:var(--danger,#b91c1c)}
.status-mgr-note{font-size:11.5px;margin-top:10px}
/* 그룹 섹션 레이아웃(5고정 그룹) */
.status-mgr-groups{display:flex;flex-direction:column;gap:16px}
.status-mgr-group-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.status-mgr-group-title{font-weight:700;font-size:13px;color:var(--fg)}
.status-mgr-group-add{background:none;border:0;color:var(--p);font-weight:600;font-size:13px;cursor:pointer;padding:2px 4px}
.status-mgr-color{width:34px;height:28px;flex:none;padding:0;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer}
.status-mgr-group .status-mgr-list:empty{min-height:6px}

/* 태스크 속성 설정 모달(Properties) */
.prop-mgr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.prop-mgr-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.prop-mgr-item.is-dragging{opacity:.5}
.prop-mgr-item.prop-mgr-fixed{background:var(--bg)}
.prop-mgr-drag{cursor:grab;color:var(--faint);font-size:15px;user-select:none}
.prop-mgr-fixed .prop-mgr-drag{cursor:default;opacity:.4}
.prop-mgr-label{flex:1;min-width:0}
.prop-mgr-label-static{flex:1;font-weight:600;font-size:14px;color:var(--ink)}
.prop-mgr-flag{font-size:11px;font-weight:700;color:var(--muted);padding:3px 8px;border-radius:99px;background:var(--bg);white-space:nowrap}
.prop-mgr-gear{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;padding:2px;display:inline-flex;align-items:center}
.prop-mgr-gear:hover{color:var(--p)}
.prop-mgr-vis{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}

/* 숨긴 속성은 작성 폼에서 제외 — .tw-item은 flex라 [hidden]만으론 안 숨겨져 명시 */
.tw-item[hidden]{display:none !important}
/* Properties 모달의 ⚙에서 Statuses를 열면 그 위에 겹쳐 뜨도록(둘 다 z-index:100·DOM순서 상 Statuses가 앞) */
.modal-overlay[data-modal="manage-statuses"].open{z-index:110}

/* Phase B — 커스텀 속성 타입 배지 + 추가/수정 모달 */
.prop-mgr-type{font-size:11px;font-weight:700;color:var(--muted);padding:3px 8px;border-radius:99px;background:var(--bg);white-space:nowrap}
.prop-form-modal.open{z-index:120}
.pf-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--ink)}
.pf-field .input{font-weight:400}
.pf-check{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;color:var(--ink);cursor:pointer}
.pf-foot{display:flex;align-items:center}
.pf-foot-r{margin-left:auto;display:inline-flex;gap:8px}
.prop-del-btn{color:var(--danger,#b91c1c)}
.prop-del-btn:hover{background:var(--danger,#b91c1c);color:#fff}
.tw-check-inline{display:inline-flex;align-items:center}

/* ── 휴지통(Recycle Bin) ── */
.rbin-group{margin-bottom:16px}
.rbin-group-h{font-size:14px;font-weight:700;color:var(--ink)}
.rbin-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--border)}
.rbin-item:last-child{border-bottom:0}
.rbin-item-main{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.rbin-item-title{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbin-item-meta{font-size:11.5px;white-space:nowrap}
.rbin-item-actions{display:flex;gap:6px;margin-left:auto}
.rbin-danger{color:var(--danger,#dc2626)}
.rbin-danger:hover{background:color-mix(in srgb, var(--danger,#dc2626) 10%, transparent)}
.rbin-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 0;text-align:center}

/* ── 마일스톤(Overview) ── */
.ms-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.ms-check{display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0}
.ms-check input{width:16px;height:16px;flex:none}
.ms-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-title.is-done{text-decoration:line-through;color:var(--muted)}
.ms-meta{display:flex;align-items:center;gap:8px;flex:none}
.ms-del{background:none;border:0;color:var(--faint);cursor:pointer;padding:2px;line-height:0;border-radius:var(--r-sm)}
.ms-del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.ms-add{display:flex;gap:8px;margin-top:12px}
.ms-add .input:first-child{flex:1}

/* ── 포트폴리오 액션 / Danger zone ── */
.pf-actions{display:inline-flex;gap:6px;justify-content:flex-end}
.pf-actions form,.danger-zone-row form{display:inline}
.danger-zone-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ── 간트 오버레이(계약공기·마일스톤) ── */
.gantt-contract-band{position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;
  background:color-mix(in srgb,var(--collab) 6%,transparent);
  border-left:1px dashed color-mix(in srgb,var(--collab) 45%,transparent);
  border-right:1px dashed color-mix(in srgb,var(--collab) 45%,transparent)}
.gantt-milestone{position:absolute;top:0;bottom:0;width:2px;z-index:2;pointer-events:none;
  background:color-mix(in srgb,var(--gold) 55%,transparent)}
.gantt-milestone-flag{position:absolute;top:3px;left:50%;width:9px;height:9px;transform:translateX(-50%) rotate(45deg);
  background:var(--gold);border-radius:1px;box-shadow:0 0 0 2px var(--surface)}
.gantt-milestone.is-done{background:color-mix(in srgb,var(--ok) 45%,transparent)}
.gantt-milestone.is-done .gantt-milestone-flag{background:var(--ok)}
.gantt-milestone.is-overdue{background:color-mix(in srgb,var(--danger) 50%,transparent)}
.gantt-milestone.is-overdue .gantt-milestone-flag{background:var(--danger)}

/* ── 캘린더 오버레이(마일스톤·계약 마커) ── */
.cal-milestone{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--gold);
  padding:1px 4px;border-radius:4px;background:#F7EFDC;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-milestone-dot{width:7px;height:7px;flex:none;transform:rotate(45deg);background:var(--gold);border-radius:1px}
.cal-milestone.is-done{color:var(--ok);background:var(--ok-bg)}
.cal-milestone.is-done .cal-milestone-dot{background:var(--ok)}
.cal-milestone.is-overdue{color:var(--danger);background:var(--danger-soft)}
.cal-milestone.is-overdue .cal-milestone-dot{background:var(--danger)}
.cal-contract-tag{margin-left:4px;font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--collab);background:var(--collab-bg);padding:1px 4px;border-radius:3px;vertical-align:middle}
.cal-contract-tag.cal-contract-end{color:var(--danger);background:var(--danger-soft)}

/* ── 할일(To-do) 카드 체크리스트 ── */
.feed-todo{margin:4px 0 2px}
.feed-todo-progress{font-size:12px;margin-bottom:6px}
.feed-todo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.feed-todo-item{display:flex;align-items:center;gap:9px}
.feed-todo-check{flex:none;width:18px;height:18px;border:1.5px solid var(--border);border-radius:5px;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:transparent;padding:0}
.feed-todo-item.is-done .feed-todo-check{background:var(--p,#166534);border-color:var(--p,#166534);color:#fff}
.feed-todo-title{font-size:13.5px;color:var(--ink)}
.feed-todo-item.is-done .feed-todo-title{color:var(--muted);text-decoration:line-through}

/* ── 일정(Event) 카드 메타 ── */
.feed-event-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.feed-event-when{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--p,#166534)}
.feed-event-loc{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;text-decoration:none}
.feed-event-loc:hover{text-decoration:underline}

.feed-event-participants{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2px 0 10px}
.feed-event-avatars{display:flex;align-items:center;gap:4px}
.feed-event-avatar{display:inline-flex;border-radius:999px;box-shadow:0 0 0 2px var(--card,#fff)}
.feed-event-avatar.resp-yes{box-shadow:0 0 0 2px #16a34a}
.feed-event-avatar.resp-no{box-shadow:0 0 0 2px #dc2626}
.feed-event-avatar.resp-maybe{box-shadow:0 0 0 2px #9ca3af}
.feed-event-counts{font-size:12.5px}
.feed-event-respond{display:flex;align-items:center;gap:6px;margin-left:auto}
.feed-event-respond-btn{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  background:none;border:1px solid var(--border);border-radius:6px;padding:4px 12px;cursor:pointer}
.feed-event-respond-btn:hover{border-color:var(--p,#166534);color:var(--p,#166534)}
.feed-event-respond-btn.is-on{background:var(--p,#166534);border-color:var(--p,#166534);color:#fff}

.fw-event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px;margin:12px 0}
.fw-field{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.fw-field-wide{grid-column:1 / -1}
.fw-field .tw-select{font-weight:400}
.fw-allday{flex-direction:row;align-items:center;gap:7px;align-self:end;padding-bottom:8px}
#fwEventForm .rich-editor{margin-top:14px}

/* ── 캘린더(월 그리드) ── */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cal-title{font-size:16px;font-weight:700;color:var(--ink);min-width:150px;text-align:center}
.cal-today-btn{margin-left:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.cal-dow{background:var(--card,#fff);padding:8px 6px;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase}
.cal-cell{background:var(--card,#fff);min-height:104px;padding:6px 6px 4px;display:flex;flex-direction:column;gap:4px}
.cal-cell.is-out{background:var(--bg)}
.cal-cell.is-out .cal-daynum-badge{color:var(--faint)}
/* 날짜 행 — 셀 전체 너비를 차지해 계약 태그(Start/End)가 옆칸으로 넘치지 않게 함 */
.cal-daynum{display:flex;align-items:center;gap:2px;align-self:stretch;min-width:0;overflow:hidden}
/* 원형 날짜 배지 — 고정 22px, today 초록 원은 이 배지에만 적용 */
.cal-daynum-badge{font-size:12px;font-weight:600;color:var(--ink);flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.cal-cell.is-today .cal-daynum-badge{background:var(--p,#166534);color:#fff}
.cal-items{display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-item{display:block;font-size:11px;line-height:1.3;padding:2px 6px;border-radius:5px;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-item-event{background:color-mix(in srgb, var(--p,#166534) 14%, transparent);color:var(--p,#166534);font-weight:600}
.cal-item-task{background:var(--bg);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.cal-item-time{font-weight:700;margin-right:3px}

/* ── 해시태그 바(Feed 상단) ── */
.feed-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.feed-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:99px;font-size:12.5px;font-weight:600;
  text-decoration:none;color:var(--muted);background:var(--card,#fff);border:1px solid var(--border)}
.feed-tag:hover{color:var(--p,#166534);border-color:var(--p,#166534)}
.feed-tag.is-active{background:var(--p,#166534);color:#fff;border-color:var(--p,#166534)}

/* ── Mentions 목록 ── */
.mention-item{display:flex;align-items:center;gap:11px;padding:12px 14px;margin-bottom:8px;text-decoration:none;color:inherit}
.mention-item:hover{background:var(--hover,#f5f5f5)}
.mention-item-main{flex:1;min-width:0}
.mention-item-body{font-size:13.5px;color:var(--ink);line-height:1.45}
.mention-item-time{font-size:11.5px;margin-top:2px}
.mention-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--p,#166534);flex:none}

/* ── 헤더 종 아이콘(알림 배지·드롭다운) ── */
.noti{position:relative;display:inline-flex}
.noti .io-noti,.noti .io-modnoti{position:relative}
.io-chat{position:relative}
.io-chat svg{width:18px;height:18px}
.noti-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--danger,#dc2626);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.noti-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:calc(100vw - 24px);
  background:var(--card,#fff);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);z-index:60;overflow:hidden}
.noti-panel-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--ink)}
.noti-readall{background:none;border:0;color:var(--p,#166534);font-size:12px;font-weight:600;cursor:pointer;padding:0}
.noti-readall:hover{text-decoration:underline}
.noti-list{list-style:none;margin:0;padding:0;max-height:min(60vh,420px);overflow-y:auto}
.noti-item{display:flex;flex-direction:column;gap:2px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border)}
.noti-item:last-child{border-bottom:0}
.noti-item:hover{background:var(--hover,#f5f5f5)}
.noti-item.is-unread{background:color-mix(in srgb, var(--p,#166534) 7%, transparent)}
.noti-item.is-unread .noti-item-body{font-weight:600}
.noti-item-body{font-size:13px;color:var(--ink);line-height:1.45}
.noti-item-time{font-size:11px}
.noti-empty{padding:22px 14px;text-align:center;font-size:12.5px}
/* 모듈 통합 종: 항목 상단 모듈 칩 + 지연(overdue) 강조 */
.noti-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.noti-chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  padding:1px 7px;border-radius:999px;background:var(--bg,#f1f5f9);color:var(--muted,#64748b)}
.noti-chip-purchase{background:color-mix(in srgb,#E11D48 14%,transparent);color:#be123c}
.noti-item.is-overdue{background:color-mix(in srgb,#f59e0b 12%,transparent)}
.noti-item.is-overdue .noti-item-body{color:#b45309}

/* ── 리마인더(드로어) ── */
.td-reminder{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.td-reminder .input{flex:1}

/* 섹션 제목 행에 입력란을 나란히 배치(Subtasks·Reminder 공용) — 라벨 바로 옆부터 남은 폭 전부 사용 */
/* Subtasks 이하 제목(하위업무·첨부·리마인더·활동) — 보라색 강조, 크기는 상위 제목과 동일(상속) */
.td-sec-h-accent{color:#7c3aed}
/* Subtasks 섹션 위쪽에 Description과의 구분선 */
.td-sec-divider{padding-top:18px;border-top:1px solid var(--border)}

.td-sec-h-row{display:flex;align-items:center;gap:10px}
.td-sec-h-row .td-subtask-form{flex:1;min-width:0}
.td-sec-h-row .td-subtask-form .input{width:100%}

/* ── 하위업무(드로어 Subtasks 섹션) ── */
.td-subtask-count{font-weight:500;font-size:11.5px;margin-left:4px}
.td-subtasks{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.td-subtask{display:flex;align-items:center;gap:8px;padding:4px 0}
.td-subtask-check{flex:none;width:18px;height:18px;border:1.5px solid var(--border);border-radius:5px;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:transparent;padding:0}
.td-subtask.is-done .td-subtask-check{background:var(--p,#166534);border-color:var(--p,#166534);color:#fff}
.td-subtask-title{flex:1;font-size:13.5px;color:var(--ink);word-break:break-word}
.td-subtask.is-done .td-subtask-title{color:var(--muted);text-decoration:line-through}
.td-subtask-del{flex:none;background:none;border:0;color:var(--faint);font-size:16px;line-height:1;cursor:pointer;padding:0 2px;opacity:0;transition:opacity .12s}
.td-subtask:hover .td-subtask-del{opacity:1}
.td-subtask-del:hover{color:var(--danger,#b91c1c)}
.td-subtask-form .input{width:100%}

/* ── 활동 로그(드로어 Activity 섹션) ── */
.td-activity{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:7px}
.td-activity-item{font-size:12.5px;color:var(--muted);line-height:1.5}
.td-activity-actor{font-weight:600;color:var(--ink)}
.td-activity-text{margin-left:4px}
.td-activity-time{margin-left:6px;font-size:11px}
.td-activity-empty{font-size:12.5px;list-style:none}

/* ── New task 모달 폼(Board·Table·Gantt 공용, _task_form_fields.blade.php) ── */
.tw-title-input{width:100%;border:0;border-bottom:1px solid var(--border);font-size:19px;font-weight:700;
  padding:8px 2px 12px;margin-bottom:14px;background:transparent;color:var(--ink)}
.tw-title-input::placeholder{color:var(--faint);font-weight:500}
.tw-title-input:focus{outline:none;border-color:var(--p)}
.tw-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0}
.tw-lbl{font-size:13.5px;font-weight:600;color:var(--muted);flex-shrink:0;width:88px}
.tw-lbl{display:inline-flex;align-items:center;gap:7px;width:112px}
.tw-lbl .tw-ic{color:var(--faint);flex-shrink:0}
/* Dates 합친 행 + 마감 빠른 칩 */
.tw-dates-v{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;justify-content:flex-end;min-width:0}
.tw-dates-v .tw-select{flex:1 1 130px}
.tw-arrow{color:var(--faint)}
.tw-date-chips{display:inline-flex;gap:4px}
.tw-date-chips button{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:7px;font:inherit;font-size:11.5px;font-weight:600;padding:3px 8px;cursor:pointer}
.tw-date-chips button:hover{border-color:var(--p);color:var(--ink)}
/* Priority 세그먼트 */
.tw-seg{display:inline-flex;background:var(--bg);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.tw-seg-opt{position:relative}
.tw-seg-opt input{position:absolute;opacity:0;pointer-events:none}
.tw-seg-opt span{display:block;padding:4px 10px;border-radius:7px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.tw-seg-opt input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(25,22,42,.1)}
.tw-seg-opt input:focus-visible+span{outline:2px solid var(--p)}
.tw-seg-high input:checked+span{color:var(--warn)}
.tw-seg-urgent input:checked+span{color:var(--danger)}
/* Progress 슬라이더 */
.tw-range{display:inline-flex;align-items:center;gap:10px}
.tw-range input{width:160px;accent-color:var(--p)}
.tw-range output{font-size:12.5px;font-weight:700;min-width:36px;text-align:right}
@media (max-width:720px){.tw-dates-v{justify-content:flex-start}.tw-range input{width:120px}}
.tw-select{font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--border-strong);border-radius:9px;padding:7px 12px;cursor:pointer;flex:1;min-width:0}
.tw-select:hover{border-color:var(--p)}
.tw-select:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
/* ── 담당자 다중 선택(체크박스 드롭다운) — multi-select.js가 native select.tw-multi 위에 씌움 ── */
.ms{position:relative;flex:1;min-width:0}
.ms-control{display:flex;align-items:center;gap:6px;min-height:var(--control-h);width:100%;
  background:var(--surface);border:1.5px solid var(--border-strong);border-radius:9px;
  padding:5px 10px;cursor:pointer;transition:all .15s}
.ms-control:hover{border-color:var(--p)}
.ms.open .ms-control{border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
.ms-chips{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.ms-ph{font-size:13.5px;color:var(--faint);align-self:center}
.ms-chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;color:var(--ink);
  background:var(--collab-bg);border:1px solid var(--border);border-radius:20px;padding:2px 5px 2px 9px;line-height:1.6}
.ms-chip.is-primary{background:var(--p-soft);border-color:var(--p);color:var(--p);font-weight:600}
.ms-chip-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border:0;border-radius:50%;background:transparent;color:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:.6}
.ms-chip-x:hover{opacity:1;background:rgba(0,0,0,.08)}
.ms-caret{flex-shrink:0;color:var(--muted);transition:transform .15s}
.ms.open .ms-caret{transform:rotate(180deg)}
.ms-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;
  box-shadow:var(--sh-2);padding:8px;max-height:280px;display:flex;flex-direction:column}
.ms-panel[hidden]{display:none}
.ms-search{width:100%;height:34px;font-family:inherit;font-size:13px;color:var(--ink);
  background:var(--collab-bg);border:1px solid var(--border);border-radius:7px;padding:0 10px;margin-bottom:6px}
.ms-search:focus{outline:none;border-color:var(--p)}
.ms-list{overflow-y:auto;display:flex;flex-direction:column}
.ms-opt{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.ms-opt:hover{background:var(--collab-bg)}
.ms-opt input{width:16px;height:16px;accent-color:var(--p);cursor:pointer;flex-shrink:0}
/* ── 담당자 인라인 칩 + 드롭다운(프로젝트 참여자) — task-form-enhance.js ── */
.tw-assignee-box{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tw-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;color:var(--ink);
  background:var(--collab-bg);border:1px solid var(--border);border-radius:20px;padding:2px 5px 2px 4px;line-height:1.6}
.tw-chip.is-primary{background:var(--p-soft);border-color:var(--p);color:var(--p);font-weight:600}
.tw-chip-name{white-space:nowrap}
.tw-chip-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border:0;border-radius:50%;background:transparent;color:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:.6}
.tw-chip-x:hover{opacity:1;background:rgba(0,0,0,.08)}
.tw-assignee-picker{position:relative}
.tw-assignee-add{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  background:var(--surface);border:1px dashed var(--border-strong);border-radius:20px;padding:4px 12px;cursor:pointer}
.tw-assignee-add:hover{color:var(--p);border-color:var(--p)}
.tw-assignee-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:50;min-width:240px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;
  box-shadow:var(--sh-2);padding:6px;max-height:280px;overflow-y:auto}
.tw-assignee-menu[hidden]{display:none}
.tw-assignee-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:7px 8px;border:0;border-radius:8px;background:transparent;cursor:pointer}
.tw-assignee-opt:hover{background:var(--collab-bg)}
.tw-opt-who{display:flex;flex-direction:column;min-width:0}
.tw-opt-name{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3}
.tw-opt-sub{font-size:11.5px;line-height:1.3}
.tw-assignee-empty{padding:10px;font-size:12.5px;text-align:center}
.tw-status-wrap{position:relative;flex:1}
.tw-status-wrap::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--muted);pointer-events:none;z-index:1}
.tw-status-wrap[data-status="in_progress"]::before{background:var(--info)}
.tw-status-wrap[data-status="review"]::before{background:var(--warn)}
.tw-status-wrap[data-status="done"]::before{background:var(--ok)}
.tw-status-wrap .tw-select{padding-left:24px}
@media(max-width:560px){
  .task-drawer{width:94vw}
  .task-drawer-fields{grid-template-columns:1fr}
}

/* ── 협업 — 프로젝트 간트 뷰(일 단위 타임라인) ── */
.gantt-scroll{overflow-x:auto;overflow-y:hidden;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.gantt-table{position:relative}

.gantt-header{display:flex;position:sticky;top:0;z-index:3;background:var(--surface);border-bottom:1px solid var(--border)}
.gantt-header-left{position:sticky;left:0;width:260px;flex-shrink:0;display:flex;align-items:flex-end;
  padding:8px 12px;font-size:11.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.02em;
  background:var(--surface);z-index:4;border-right:1px solid var(--border)}
.gantt-header-days{display:flex;flex-direction:column;flex-shrink:0}
.gantt-months{display:flex}
.gantt-month{flex-shrink:0;padding:4px 8px;font-size:12px;font-weight:700;color:var(--muted);
  border-right:1px solid var(--border);box-sizing:border-box;white-space:nowrap;overflow:hidden}
.gantt-daynums{display:flex}
.gantt-day{flex-shrink:0;text-align:center;font-size:11px;color:var(--faint);padding:4px 0;
  border-right:1px solid var(--border);box-sizing:border-box}
.gantt-day.is-weekend{background:var(--bg)}
.gantt-day.is-today{color:var(--collab);font-weight:700}

.gantt-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--collab);z-index:2;pointer-events:none}

.gantt-group-head{display:flex;align-items:center;padding:8px 0;background:var(--bg);
  border-bottom:1px solid var(--border);width:100%;box-sizing:border-box;font-size:13px;
  position:relative;z-index:3}
/* 그룹(프로젝트) 헤더 라벨 — 가로 스크롤 시 왼쪽 고정(태스크 이름 칸과 동일) */
.gantt-group-label{position:sticky;left:0;z-index:2;display:inline-flex;align-items:center;
  padding:0 12px;background:var(--bg)}

.gantt-row{display:flex;align-items:center;height:40px;border-bottom:1px solid var(--border)}
.gantt-row-left{position:sticky;left:0;width:260px;flex-shrink:0;align-self:stretch;display:flex;align-items:center;gap:6px;
  padding:0 12px;background:var(--surface);z-index:2;border-right:1px solid var(--border);
  overflow:hidden;white-space:nowrap;box-sizing:border-box;font-size:13.5px}
.gantt-row:hover .gantt-row-left{background:var(--collab-bg)}
.gantt-row-name{overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.gantt-row-days{position:relative;height:100%;flex-shrink:0}

.gantt-bar{position:absolute;top:6px;height:calc(100% - 12px);border-radius:6px;display:flex;align-items:center;
  padding:0 8px;overflow:hidden;cursor:pointer;color:#fff;font-size:12px;font-weight:600;
  white-space:nowrap;box-shadow:var(--sh-1)}
/* 간트 바 — 상태 톤별 색(커스텀 상태 대응) */
.gantt-bar.bar-tone-neutral{background:var(--muted)}
.gantt-bar.bar-tone-info{background:var(--info)}
.gantt-bar.bar-tone-warn{background:var(--warn)}
.gantt-bar.bar-tone-ok{background:var(--ok)}
.gantt-bar.bar-tone-hold{background:var(--border)}
.gantt-bar.bar-tone-danger{background:var(--danger,#dc2626)}
.gantt-bar.bar-tone-purple{background:#7c3aed}
.gantt-bar.bar-tone-teal{background:#0d9488}
.gantt-bar-label{overflow:hidden;text-overflow:ellipsis}

.gantt-add-row{padding:8px 12px;color:var(--faint);cursor:pointer;font-weight:600;font-size:12.5px;
  position:sticky;left:0;width:fit-content}
.gantt-add-row:hover{color:var(--collab)}

.gantt-group.is-collapsed .gantt-row,.gantt-group.is-collapsed .gantt-add-row{display:none}

/* 대시보드 결재 대기함 — 상단 강조 카드 */
.approval-inbox{margin-bottom:16px;border-left:3px solid var(--warn)}
.approval-inbox .dash-card-h{margin-bottom:10px}
.approval-inbox h2{display:flex;align-items:center;font-size:15px;color:var(--warn)}
.approval-inbox .cnt{margin-left:8px;background:var(--warn-bg);color:var(--warn);
  font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px}
.approval-list{display:flex;flex-direction:column;gap:6px}
.approval-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);
  border:1px solid var(--border);text-decoration:none;color:var(--ink);transition:background .12s,border-color .12s}
.approval-row:hover{background:var(--warn-bg);border-color:var(--warn)}
.approval-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.approval-row-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.approval-row-sub{font-size:12px}
.approval-row-go{display:flex;align-items:center;gap:3px;color:var(--warn);font-weight:600;
  font-size:12.5px;white-space:nowrap;flex-shrink:0}

/* 현장 위치 지도 피커(생성 모달·편집 폼 공용) */
.cp-map-field{display:flex;flex-direction:column;gap:8px}
.cp-map-paste{display:flex;gap:6px}
.cp-map-paste .input{flex:1}
.cp-map{height:220px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--bg);overflow:hidden;z-index:0}
.cp-map .leaflet-container{height:100%;width:100%}
.cp-map-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp-map-coords{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:1;min-width:120px}
.cp-map-clear{color:var(--danger)}

/* ── 리치 텍스트 에디터(Bold/Italic/Underline/Strike/목록/링크) — <x-ui.rich-editor> ── */
.rich-editor{position:relative}
.rich-toolbar{display:flex;align-items:center;gap:4px;padding:6px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
/* 작성자 CSS의 display:flex가 [hidden]의 기본 display:none을 덮어써 숨김이 안 되던 문제 해결 */
.rich-toolbar[hidden]{display:none}
.rich-toolbar button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:6px;
  background:transparent;color:var(--muted);cursor:pointer;font-size:13px;font-weight:700}
.rich-toolbar button:hover{color:var(--p);background:var(--p-soft)}
.rich-body{outline:none;font-size:14.5px;line-height:1.6;color:var(--ink)}
.rich-body ul,.rich-body ol{margin:6px 0;padding-left:22px}
.rich-body a{color:var(--p);text-decoration:underline}
.rich-body:empty::before{content:attr(data-placeholder);color:var(--faint)}
/* 내장 토글 — 본문 하단 A 버튼 + 그 버튼 바로 위 팝오버 툴바 */
.rich-inline-bar{position:relative;margin-top:8px}
.rich-inline-bar .rich-toolbar{position:absolute;bottom:calc(100% + 6px);left:0;z-index:20;
  box-shadow:0 4px 14px rgba(0,0,0,.14)}
.rich-toggle{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);font-weight:700;font-size:13px;cursor:pointer}
.rich-toggle:hover{color:var(--p);border-color:var(--p)}
/* 하단 공용 서식 버튼(Write Post) — footer 구분선 위로 올려 팝오버 표시 */
.fw-rich-host{position:relative;display:inline-flex}
.fw-rich-host .rich-toolbar{position:absolute;bottom:calc(100% + 20px);left:0;z-index:30;
  box-shadow:0 4px 14px rgba(0,0,0,.14)}

/* ── Stock 모듈 공용(마스터 데이터 테이블·드래그·보관 토글) ── */
/* 스톡 모듈 탭(Pending/Mine/All 등) — pill 세그먼트 */
.stk-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.stk-tab{padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.stk-tab:hover{color:var(--ink);border-color:var(--p);background:var(--p-soft)}
.stk-tab.active{background:var(--p);border-color:var(--p);color:#fff}
.stk-table{width:100%;border-collapse:collapse;font-size:13px}
.stk-table th{padding:10px 14px;text-align:left;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-bottom:1.5px solid var(--border)}
.stk-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.stk-table tbody tr:last-child td{border-bottom:none}
.stk-row:hover td{background:var(--p-soft)}
.stk-row.dragging{opacity:.4}
.stk-table .drag-handle{cursor:grab;color:var(--faint);user-select:none;text-align:center}
.stk-table .mono{font-family:ui-monospace,monospace;color:var(--p)}
.input-sm{padding:4px 8px;font-size:12px;max-width:180px}
.btn-sm{padding:4px 10px;font-size:12px}
.stk-archived{margin-top:26px}
.stk-arch-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;background:none;border:none;font-size:13px;font-weight:600;color:var(--muted);padding:8px 0}
.stk-arch-toggle:hover{color:var(--ink)}
.stk-arch-toggle svg{transition:transform .2s}
.stk-arch-toggle.open svg{transform:rotate(90deg)}
.stk-arch-body{display:none;margin-top:8px}
.stk-arch-body.open{display:block}
.stk-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.stk-item-card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.stk-item-thumb{aspect-ratio:4/3;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.stk-item-thumb img{width:100%;height:100%;object-fit:cover}
.stk-item-thumb .ph{color:var(--faint)}
.stk-item-body{padding:10px 12px}
.stk-item-code{font-family:ui-monospace,monospace;color:var(--p);font-size:12px}
.stk-item-name{font-weight:600;color:var(--ink);font-size:14px;margin:2px 0}
.stk-item-meta{color:var(--muted);font-size:12px}
/* 품목 테이블 썸네일(행 레이아웃) */
.stk-item-tile{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg);cursor:pointer}
.stk-item-tile img{width:100%;height:100%;object-fit:cover}
.stk-item-tile .ph{color:var(--faint);display:inline-flex}
.table td.stk-item-name{font-weight:600;color:var(--ink)}
.noti-chip-plant{background:color-mix(in srgb,#1E9E5A 14%,transparent);color:#117A42}