/*
 * 파일관리 (시스템설정 > 파일관리) — 2026-09-08, 개발자 전용. B 탐색기형: 좌 트리 · 우 목록.
 * A-4 토큰(차콜블루 accent · 밴드 band · 보더 line). 시스템/업체 탭 공용.
 */
.sfm { font-size: 12.5px; color: var(--ord-text); }
.sfm-wrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 12px; min-height: 520px; }
@media (max-width: 860px) { .sfm-wrap { grid-template-columns: 1fr; } }

/* ── 트리 ── */
.sfm-tree { background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.sfm-tree-hd { padding: 8px 12px; background: var(--ord-band); border-bottom: 1px solid var(--ord-line); font-size: 12px; font-weight: 700; color: var(--ord-accent); }
.sfm-tree-hd-2 { border-top: 1px solid var(--ord-line-soft); margin-top: 6px; }
.sfm-tree-hd small { display: block; font-weight: 400; color: var(--ord-text-4); font-size: 10.5px; margin-top: 1px; }
.sfm-tree-srch { padding: 8px; border-bottom: 1px solid var(--ord-line-soft); }
.sfm-tree-srch input { width: 100%; border: 1.5px solid var(--ord-line-2); border-radius: 9px; padding: 6px 9px; font-size: 12px; background: var(--ord-band); color: var(--ord-text); }
.sfm-tree-srch input:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-focus-ring); background: var(--ord-surface); }
.sfm-tree-scroll { max-height: 52vh; overflow: auto; }
.sfm-node { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12.5px; color: var(--ord-text-2); text-decoration: none;
  border-left: 3px solid transparent; cursor: pointer; }
.sfm-node:hover { background: var(--ord-surface-2); }
.sfm-node.on { background: var(--ord-tint-blue-bg); color: var(--ord-accent); font-weight: 700; border-left-color: var(--ord-accent); }
.sfm-node.sfm-sub { padding-left: 28px; font-size: 12px; }
.sfm-node.sfm-static { cursor: default; }
.sfm-node.sfm-static:hover { background: transparent; }
.sfm-node .sfm-cnt { margin-left: auto; font-size: 11px; color: var(--ord-text-4); font-weight: 500; white-space: nowrap; }
.sfm-node.sfm-co { flex-direction: column; align-items: stretch; gap: 3px; }
.sfm-node.sfm-co.sel { background: var(--ord-surface-2); }
.sfm-node.sfm-co.on { background: var(--ord-tint-blue-bg); }
.sfm-co-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sfm-co-t .sfm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfm-tree-ft { margin-top: auto; border-top: 1px solid var(--ord-line-soft); padding: 6px 0; }
.sfm-btn { width: 100%; background: transparent; border: none; border-left: 3px solid transparent; text-align: left; font: inherit; font-size: 12.5px; }

/* ── 본문 ── */
.sfm-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sfm-crumb { font-size: 12px; color: var(--ord-text-3); }
.sfm-crumb b { color: var(--ord-text); }
.sfm-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; padding: 10px 14px; font-size: 12px; }
.sfm-strip .sfm-bar { flex: 1 1 160px; }
.sfm-strip b { font-weight: 800; }
.sfm-mut { color: var(--ord-text-4); font-size: 11.5px; }
.sfm-bar { height: 6px; border-radius: 4px; background: var(--ord-band); overflow: hidden; display: block; }
.sfm-bar i { display: block; height: 100%; background: var(--ord-head-bg); border-radius: 4px; }
.sfm-bar i.warn { background: var(--ord-solid-amber); } .sfm-bar i.bad { background: var(--ord-solid-red); } .sfm-bar i.teal { background: var(--ord-solid-cyan); }
.sfm-bar.sfm-mini { height: 4px; }
.sfm-btn-sm { margin-left: auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ord-line); background: var(--ord-surface); font-size: 11.5px; font-weight: 600; color: var(--ord-text-2); cursor: pointer; }
.sfm-btn-sm:hover { border-color: var(--ord-accent); color: var(--ord-accent); }
.sfm-btn-danger { margin-left: auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ord-tint-red-line); background: var(--ord-surface); font-size: 11.5px; font-weight: 600; color: var(--ord-tint-red-fg); cursor: pointer; }
.sfm-btn-danger:hover { background: var(--ord-tint-red-bg); }

/* ── 섹션(필터+표) ── */
.sfm-sec { background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; }
.sfm-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; background: var(--ord-band); border-bottom: 1px solid var(--ord-line); }
.sfm-filter input[type="text"], .sfm-filter select { border: 1.5px solid var(--ord-line-2); border-radius: 10px; background: var(--ord-band); padding: 6px 10px; font-size: 12px; color: var(--ord-text-2); }
.sfm-filter input[type="text"] { min-width: 180px; }
.sfm-filter input:focus, .sfm-filter select:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-focus-ring); background: var(--ord-surface); }
.sfm-filter button[type="submit"] { padding: 6px 14px; background: var(--ord-head-bg); color: var(--ord-on-solid); border: none; border-radius: 999px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.sfm-filter button[type="submit"]:hover { background: color-mix(in srgb, var(--ord-head-bg) 85%, black); }
.sfm-seg { display: inline-flex; background: var(--ord-band); border-radius: 999px; padding: 2px; }
.sfm-seg a { padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--ord-text-3); text-decoration: none; }
.sfm-seg a.on { background: var(--ord-surface); color: var(--ord-accent); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.sfm-count { margin-left: auto; font-size: 11.5px; color: var(--ord-text-3); }
.sfm-empty { padding: 44px 20px; text-align: center; color: var(--ord-text-4); font-size: 13px; background: var(--ord-surface); border: 1px dashed var(--ord-line-2); border-radius: 12px; }
.sfm-sec .sfm-empty { border: none; border-radius: 0; }
.sfm-table-wrap { overflow: auto; max-height: 58vh; }
.sfm-sec > .shared-pagination { margin: 14px 0 16px; }
.sfm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sfm-table th { position: sticky; top: 0; background: var(--ord-surface); text-align: center; font-size: 11px; color: var(--ord-text-4); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--ord-line); white-space: nowrap; }
.sfm-table td { padding: 8px 10px; border-bottom: 1px solid var(--ord-line-soft); text-align: center; vertical-align: middle; }
.sfm-table tr:last-child td { border-bottom: none; }
.sfm-table tr:hover td { background: var(--ord-surface-2); }
.sfm-table .sfm-left { text-align: left; }
.sfm-table .sfm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sfm-table .sfm-name { font-weight: 600; color: var(--ord-text); max-width: 320px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.sfm-ft { display: inline-flex; width: 26px; height: 20px; border-radius: 5px; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; color: var(--ord-on-solid); margin-right: 6px; vertical-align: middle; }
.sfm-ft-image { background: var(--ord-head-bg); } .sfm-ft-audio { background: var(--ord-solid-amber); } .sfm-ft-document { background: var(--ord-solid-gray); } .sfm-ft-video { background: var(--ord-solid-violet); } .sfm-ft-archive { background: var(--ord-solid-cyan); }
.sfm-acts { display: flex; gap: 4px; justify-content: flex-end; }
.sfm-ic { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--ord-line); background: var(--ord-surface); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ord-text-2); cursor: pointer; text-decoration: none; padding: 0; }
.sfm-ic:hover { border-color: var(--ord-accent); color: var(--ord-accent); }
.sfm-ic-red { color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-line); }
.sfm-ic-red:hover { background: var(--ord-tint-red-bg); border-color: var(--ord-tint-red-fg); color: var(--ord-tint-red-fg); }
.sfm-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.sfm-badge-off { background: var(--ord-band); color: var(--ord-text-3); } .sfm-badge-warn { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }
.sfm-badge-new { background: var(--ord-tint-indigo-bg); color: var(--ord-tint-violet-fg); } .sfm-badge-out { background: var(--ord-surface); color: var(--ord-accent); border: 1px solid var(--ord-line-2); }

/* ── 채팅 첨부 정책 모달 (2026-09-09) ── */
.sfm-pol-wrap { padding: 16px; background: var(--ord-surface-2); }
.sfm-pol-title { font-size: 15px; font-weight: 800; padding-left: 10px; border-left: 4px solid var(--ord-accent); line-height: 1.2; margin-bottom: 12px; }
.sfm-pol-title small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ord-text-4); margin-top: 4px; }
.sfm-pol-sec { background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.sfm-pol-hd { padding: 8px 14px; background: var(--ord-band); border-bottom: 1px solid var(--ord-line); font-size: 12px; font-weight: 700; color: var(--ord-accent); }
.sfm-pol-hd small { font-weight: 400; color: var(--ord-text-4); margin-left: 6px; }
.sfm-pol-ref td { font-size: 12px; }
.sfm-pol-in { width: 90px; border: 1.5px solid var(--ord-line-2); border-radius: 10px; background: var(--ord-band); padding: 6px 8px; font-size: 12.5px; text-align: right; color: var(--ord-text); }
.sfm-pol-in:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-focus-ring); background: var(--ord-surface); }
.sfm-pol-note { font-size: 11.5px; color: var(--ord-text-3); line-height: 1.6; background: var(--ord-surface); border: 1px dashed var(--ord-line-2); border-radius: 10px; padding: 8px 12px; }
.sfm-pol-note code { font-size: 11px; background: var(--ord-band); padding: 1px 5px; border-radius: 4px; }