/* ════════════════════════════════════════
   권한관리 화면 — public/css/permissions.css

   모듈 화면 서식은 인라인 style 이 아니라 모듈 CSS 로 모은다(개발표준 31).
   색은 교단 CI 를 따른다 — Denim #2f557f(주), Campfire #e36520(주의).
   ★계열색 위 흰 글자는 쓰지 않는다. 배지는 「옅은 바탕 + 진한 글자」로 대비를 확보한다(표준 32).
════════════════════════════════════════ */

#view-permissions { padding: 24px; }

.pm-title { font-size: 20px; font-weight: 800; color: #16283f; margin-bottom: 10px; }

/* 2단계 안내 — 아직 적용되지 않는다는 사실을 눈에 띄게 */
.pm-note {
  background: #fdefe4; border: 1px solid #f3c9a6; color: #a44708;
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.6;
  margin-bottom: 16px;
}

/* ── 좌(그룹 목록) · 우(편집) 2단 ── */
.pm-wrap { display: flex; gap: 16px; align-items: flex-start; }
.pm-side { width: 240px; flex-shrink: 0; }
.pm-main { flex: 1; min-width: 0; }

.pm-side-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; color: #16283f; margin-bottom: 8px;
}
.pm-group-list {
  background: #fff; border: 1.5px solid var(--border-light); border-radius: 12px;
  padding: 6px; max-height: calc(100vh - 260px); overflow-y: auto;
}
.pm-group-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-radius: 8px; padding: 9px 10px; cursor: pointer; margin-bottom: 2px;
}
.pm-group-item:hover { background: #f2f6fb; }
.pm-group-item.on { background: #eaf2fa; box-shadow: inset 3px 0 0 #2f557f; }
.pm-group-name { display: block; font-size: 13px; font-weight: 700; color: #16283f; }
.pm-group-name em { font-style: normal; font-size: 10.5px; color: #23558c; }
.pm-group-sub { display: block; font-size: 11.5px; color: var(--text-sub); margin-top: 2px; }

.pm-placeholder {
  background: #fff; border: 1.5px dashed var(--border-light); border-radius: 12px;
  padding: 60px 20px; text-align: center; color: var(--text-sub); font-size: 13px;
}

/* ── 편집기 머리(그룹명·메모) ── */
.pm-edit-head { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pm-field { display: flex; flex-direction: column; gap: 4px; }
.pm-field-wide { flex: 1; min-width: 220px; }
.pm-field-label { font-size: 12px; font-weight: 700; color: #4a5568; }
.pm-input {
  border: 1.5px solid #d8e0ea; border-radius: 8px; padding: 8px 10px;
  font-size: 13px; color: #16283f; background: #fff; min-width: 220px;
}
.pm-input:focus { outline: none; border-color: #2f557f; }

/* ── 권한 트리 · 사용자 관리 카드 ── */
.pm-cols { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.pm-card {
  flex: 1; min-width: 300px; background: #fff;
  border: 1.5px solid var(--border-light); border-radius: 12px; padding: 14px;
}
.pm-card-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-light);
}
.pm-card-title { font-size: 14px; font-weight: 800; color: #16283f; }
.pm-card-sub { font-size: 11.5px; color: var(--text-sub); }
.pm-card-btns { margin-left: auto; display: flex; gap: 6px; }

.pm-tree, .pm-user-list { max-height: 420px; overflow-y: auto; }

.pm-node { margin-bottom: 10px; }
.pm-g {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: #23558c;
  background: #eaf2fa; border-radius: 7px; padding: 7px 10px; cursor: pointer;
}
.pm-g-fixed { color: #4a5568; background: #f2f4f7; cursor: default; }
.pm-children { padding: 6px 0 0 18px; }
.pm-m {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #2d3540; padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.pm-m:hover { background: #f7f9fc; }
.pm-m-locked { color: #8b95a3; cursor: default; }

.pm-badge {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  background: #f2f4f7; color: #5a6a7e; border: 1px solid #e2e8f0;
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.pm-badge-admin { background: #eaf2fa; color: #23558c; border-color: #b9d3ec; }
.pm-badge-base { background: #eef3f8; color: #4a6a8c; border-color: #d6e3ef; }

/* 기본권한 — 보기엔 체크(회색)지만 이 그룹에 저장되지 않는다.
   누르면 이 그룹이 직접 갖도록 바뀐다(그때부터 일반 검정 체크). */
.pm-m-base { cursor: pointer; }
.pm-m-base > span { color: #8b95a3; }
.pm-m-base input:disabled { opacity: 0.5; }
.pm-m-base:hover { background: #f2f6fb; }

/* ── 사용자 목록 ── */
.pm-u {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 7px; font-size: 12.5px; cursor: pointer;
}
.pm-u:hover { background: #f7f9fc; }
.pm-u-name { font-weight: 700; color: #16283f; }
.pm-u-sub { font-size: 11.5px; color: var(--text-sub); }
.pm-u-view {
  margin-left: auto; background: none; border: 1px solid #d8e0ea; border-radius: 6px;
  font-size: 11px; color: #23558c; padding: 2px 8px; cursor: pointer;
}
.pm-u-view:hover { background: #eaf2fa; }

.pm-empty { color: var(--text-sub); font-size: 12.5px; text-align: center; padding: 24px 8px; line-height: 1.7; }

/* ── 하단 버튼 ── */
.pm-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.pm-actions-left { display: flex; gap: 6px; }
.pm-btn-danger { color: #a44708; border-color: #f3c9a6; }
.pm-btn-danger:hover { background: #fdefe4; }

/* ── 모달(회원 찾기 · 저장 확인 · 역방향 조회) ── */
.pm-modal {
  position: fixed; inset: 0; background: rgba(16, 30, 48, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 4200; padding: 20px;
}
.pm-modal-box {
  background: #fff; border-radius: 14px; padding: 18px;
  width: 100%; max-width: 560px; max-height: 82vh; display: flex; flex-direction: column; gap: 10px;
}
.pm-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 800; color: #16283f;
}
.pm-modal-x { background: none; border: none; font-size: 22px; color: #8b95a3; cursor: pointer; line-height: 1; }
.pm-modal-sub { font-size: 12px; color: var(--text-sub); }
.pm-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

.pm-member-list { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--border-light); padding-top: 8px; }
.pm-member {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 7px; padding: 8px 10px; cursor: pointer;
}
.pm-member:hover { background: #f2f6fb; }
.pm-member.on { background: #f7f9fc; }
.pm-member .pm-badge { margin-left: auto; }

/* ── 저장 전 변경 요약 ── */
.pm-diff { display: flex; gap: 12px; flex-wrap: wrap; overflow-y: auto; }
.pm-diff-col { flex: 1; min-width: 200px; }
.pm-diff-col h4 { font-size: 12.5px; font-weight: 800; color: #4a5568; margin-bottom: 6px; }
.pm-view-row {
  font-size: 12.5px; color: #2d3540; padding: 5px 8px;
  border-bottom: 1px solid var(--border-light);
}
.pm-add { color: #23558c; background: #eaf2fa; border-radius: 5px; border-bottom: none; margin-bottom: 3px; }
.pm-del { color: #a44708; background: #fdefe4; border-radius: 5px; border-bottom: none; margin-bottom: 3px; }
.pm-view-none { color: #8b95a3; border-bottom: none; }

/* ── 좁은 화면 ── */
@media (max-width: 1100px) {
  .pm-wrap { flex-direction: column; }
  .pm-side { width: 100%; }
  .pm-group-list { max-height: 200px; }
}