/* ══════════════════════════════════════════════════════════════
   v517 — 👥 가입자 관리 (#/members) — 시안 members.css (클래스 접두사 mb-*)
   토큰 · 페이지 헤더는 category.css 의 #catmap 셸을 그대로 쓴다 (루트 <div id="catmap"><div id="members">)
   ══════════════════════════════════════════════════════════════ */
#members { --danger-line:#e3c2b6; --danger-fg:#8c3721; --danger-bg:#f7e7e1; }
#members .mb-wrap { max-width:1360px; margin:0 auto; padding:14px 16px 40px; display:flex; flex-direction:column; gap:12px; }
#members .mb-note { border:1px solid #e6d3a3; background:#faf1dc; color:var(--warn-fg); font-size:11.5px; padding:8px 12px; line-height:1.6; }
#members .mb-note b { color:var(--text); }
#members .mb-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
@media (max-width:820px) { #members .mb-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#members .mb-kpi { border:1px solid var(--line); background:#fff; padding:10px 12px; text-align:left; font:inherit; color:var(--text); cursor:pointer; }
#members .mb-kpi:hover { background:var(--panel-sub); }
#members .mb-kpi.is-on { border-color:var(--accent-hover); box-shadow:inset 0 -2px 0 var(--accent); }
#members .mb-kpi span { display:block; font-size:10.5px; font-weight:800; color:var(--sub); }
#members .mb-kpi b { display:block; font-size:21px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; }
#members .mb-kpi small { display:block; font-size:10.5px; color:var(--sub); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#members .mb-panel { border:1px solid var(--line); background:#fff; min-width:0; }
#members .mb-panel__h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px; border-bottom:1px solid var(--line-soft); background:var(--panel-sub); }
#members .mb-panel__h b { font-size:12.5px; } #members .mb-panel__h > span { font-size:10.5px; color:var(--sub); }
#members .mb-panel__f { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:10px 12px; border-top:1px solid var(--line-soft); background:var(--panel-sub); }
#members .mb-panel__f > span:first-child { flex:1 1 200px; font-size:10.5px; color:var(--sub); }
#members .mb-search { display:flex; align-items:center; gap:6px; height:30px; border:1px solid var(--line); background:#fff; padding:0 8px; margin-left:auto; font-size:12px; color:var(--muted); }
#members .mb-search input { border:0; outline:none; font:inherit; font-size:12px; width:180px; background:none; color:var(--text); }

#members .mb-tb { width:100%; border-collapse:collapse; }
#members .mb-tb th { text-align:left; font-size:10.5px; font-weight:800; color:var(--sub); background:var(--panel-alt); padding:8px 12px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
#members .mb-tb td { font-size:12px; padding:9px 12px; border-bottom:1px solid var(--line-faint); vertical-align:middle; }
#members .mb-tb tr:hover td { background:var(--panel-sub); }
#members .mb-tb tr.is-on td { background:var(--accent-bg-2); }
#members .mb-tb tr.is-out td { color:var(--faint); }
#members .mb-who { display:flex; align-items:center; gap:9px; min-width:0; }
#members .mb-av { flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--accent-bg); color:var(--accent-fg); position:relative; }
#members .mb-av i { position:absolute; right:-2px; bottom:-2px; width:8px; height:8px; border:2px solid #fff; background:#b9bda6; }
#members .mb-av i.on { background:#4f9a3c; }
#members .mb-who b { display:block; font-size:12.5px; white-space:nowrap; } #members .mb-who small { display:block; font-size:10.5px; color:var(--sub); font-family:'SFMono-Regular',Menlo,monospace; }
#members .mb-tag { display:inline-block; font-size:10px; font-weight:800; padding:2px 7px; white-space:nowrap; }
#members .mb-tag--role { background:#ecead7; color:#4d5434; }
#members .mb-tag--master { background:#4d5434; color:#f2eeda; }
#members .mb-tag--scope { background:var(--panel-alt); color:var(--sub); margin-left:4px; }
#members .mb-tag--emp { background:#eef2f7; color:#475467; }
#members .mb-tag--part { background:#fef3e2; color:#b4530a; }
#members .mb-st { font-size:11.5px; font-weight:800; white-space:nowrap; }
#members .mb-st--on { color:#15803d; } #members .mb-st--pause { color:var(--warn-fg); } #members .mb-st--out { color:var(--faint); } #members .mb-st--wait { color:#475467; }
#members .mb-acts { display:flex; gap:4px; justify-content:flex-end; }
#members .mb-btn { height:28px; border:1px solid var(--line); background:#fff; font:inherit; font-size:11.5px; font-weight:700; color:var(--text-mid); padding:0 10px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
#members .mb-btn:hover { background:var(--panel-alt); }
#members .mb-btn--pri { border-color:var(--accent-hover); background:var(--accent); color:#f2eeda; font-weight:800; }
#members .mb-btn--pri:hover { background:var(--accent-hover); }
#members .mb-btn--danger { color:var(--danger-fg); border-color:var(--danger-line); }
#members .mb-btn--danger:hover { background:var(--danger-bg); }
#members .mb-btn:disabled { color:var(--faint); background:var(--panel-alt); cursor:default; border-color:var(--line); }

/* ── 권한 설정 패널 (오른쪽 드로어) ── */
#members .mb-dim { position:fixed; inset:0; z-index:95; background:rgba(28,32,20,.28); }
#members .mb-drw { position:fixed; top:0; right:0; bottom:0; z-index:96; width:520px; max-width:100vw; background:#fff; border-left:1px solid var(--line); box-shadow:-18px 0 40px rgba(16,24,40,.18); display:flex; flex-direction:column; }
#members .mb-drw__h { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background:#3a4028; color:#f2eeda; }
#members .mb-drw__h .mb-av { background:#4d5434; color:#f2eeda; }
#members .mb-drw__h b { font-size:14px; } #members .mb-drw__h small { display:block; font-size:10.5px; color:#b9bda6; }
#members .mb-drw__x { margin-left:auto; border:1px solid #545b3b; background:none; color:#f2eeda; width:28px; height:28px; cursor:pointer; font:inherit; }
#members .mb-drw__b { flex:1; overflow:auto; }
#members .mb-drw__f { display:flex; gap:7px; padding:11px 16px; border-top:1px solid var(--line); background:var(--panel-sub); }
#members .mb-sec { padding:14px 16px; border-bottom:1px solid var(--line-faint); }
#members .mb-sec__h { display:flex; align-items:baseline; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
#members .mb-sec__h b { font-size:12.5px; } #members .mb-sec__h span { font-size:10.5px; color:var(--sub); }
#members .mb-seg { display:flex; border:1px solid var(--line); }
#members .mb-seg button { flex:1; border:0; background:#fff; font:inherit; font-size:12px; font-weight:700; color:var(--sub); padding:8px 6px; cursor:pointer; text-align:center; }
#members .mb-seg button + button { border-left:1px solid var(--line); }
#members .mb-seg button.is-on { background:var(--accent); color:#fff; }
#members .mb-seg button:disabled { cursor:default; } #members .mb-seg button:disabled:not(.is-on) { color:var(--faint); background:var(--panel-alt); }
#members .mb-seg button small { display:block; font-size:10px; font-weight:400; opacity:.85; margin-top:1px; }
#members .mb-row { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:8px; margin-top:8px; font-size:11.5px; color:var(--sub); }
#members .mb-in { height:30px; border:1px solid var(--line); font:inherit; font-size:12px; padding:0 8px; background:#fff; box-sizing:border-box; width:100%; color:var(--text); }
#members .mb-in:disabled { background:var(--panel-alt); color:var(--sub); }
#members .mb-hint { font-size:10.5px; color:var(--sub); line-height:1.6; margin-top:7px; }
#members .mb-perm { width:100%; border-collapse:collapse; }
#members .mb-perm th { font-size:10px; font-weight:800; color:var(--sub); text-align:center; padding:5px 4px; border-bottom:1px solid var(--line-soft); }
#members .mb-perm th:first-child { text-align:left; }
#members .mb-perm td { font-size:12px; padding:6px 4px; border-bottom:1px solid var(--line-faint); text-align:center; }
#members .mb-perm td:first-child { text-align:left; font-weight:700; }
#members .mb-perm input { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }
#members .mb-perm tr.is-dis td { color:var(--faint); }
#members .mb-danger { border:1px solid var(--danger-line); background:#fffaf8; padding:11px 12px; }
#members .mb-danger + .mb-danger { margin-top:8px; }
#members .mb-danger__h { display:flex; align-items:center; gap:8px; }
#members .mb-danger__h b { flex:1; font-size:12px; }
#members .mb-danger p { margin:5px 0 0; font-size:10.5px; color:var(--sub); line-height:1.6; }