/* ISG2 MPA 공통 스타일 — GAS 사이드바 디자인 통합 (2026-05-27). */

:root {
  /* 데스크탑은 헤더 hidden (사이드바 안에 사용자 카드) — 헤더 높이 0. */
  --mpa-header-h: 0px;
  --mpa-sidebar-w: 260px;
  --mpa-sidebar-bg: #2d323e;            /* 살짝 깊고 차가운 슬레이트 — 컬러 아이콘이 살아나게 */
  --mpa-sidebar-text: #cdd4e0;          /* 비활성 메뉴 = 맑은 쿨화이트 (무채색 회색 탈피) */
  --mpa-sidebar-text-hover: #ffffff;
  --mpa-accent: #5b94ff;                /* 활성 강조색 (브랜드 블루 계열) */
  --mpa-accent-soft: rgba(91,148,255,0.15);
}
@media (max-width: 991.98px) {
  :root { --mpa-header-h: 48px; }
}

html, body { height: 100%; }
body.mpa-body { margin: 0; }

/* ── 헤더 — 모바일에서만 표시 (데스크탑은 사이드바 안에 사용자 카드) ────── */
.mpa-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--mpa-header-h);
}
.mpa-brand { font-size: 1rem; }

.mpa-shell {
  display: flex;
  min-height: calc(100vh - var(--mpa-header-h));
}

/* ── 사이드바 (GAS 스타일) — 다크 배경 ───────────────────────────────── */
.mpa-sidebar {
  width: var(--mpa-sidebar-w);
  flex: 0 0 var(--mpa-sidebar-w);
  position: sticky;
  top: var(--mpa-header-h);
  align-self: flex-start;
  max-height: calc(100vh - var(--mpa-header-h));
  overflow-y: auto;
  background-color: var(--mpa-sidebar-bg) !important;
  color: #ffffff;
  padding: 20px 16px;
  border-right: 0 !important;
  transition: margin-left 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── 데스크탑 사이드바 접기/펴기 (GAS #sidebar-toggle) ───────────────── */
body.sidebar-collapsed .mpa-sidebar { margin-left: calc(-1 * var(--mpa-sidebar-w)); }

#mpa-sidebar-toggle-desktop {
  position: fixed;
  top: 12px;
  left: calc(var(--mpa-sidebar-w) - 46px);  /* 사이드바(회색 패널) 안 우측 상단 */
  z-index: 1056;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background-color: rgba(255,255,255,0.1); color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: left 0.22s cubic-bezier(0.4,0,0.2,1), background-color 0.2s;
}
#mpa-sidebar-toggle-desktop:hover { background-color: rgba(255,255,255,0.2); }
/* 접힘 시 — 사이드바가 숨으므로 버튼은 좌상단 밖(펴기용)으로, 다크 원형 */
body.sidebar-collapsed #mpa-sidebar-toggle-desktop {
  left: 12px;
  border-radius: 50%;
  background-color: var(--mpa-sidebar-bg); color: #fff;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 사이드바 로고/타이틀 — <a> 태그지만 링크 밑줄/색 제거 (GAS 의 h5 와 동일 룩) */
.mpa-sidebar .sidebar-brand,
.mpa-sidebar .sidebar-brand:hover,
.mpa-sidebar .sidebar-brand:focus {
  text-align: center;
  border-bottom: 1px solid #495057;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
  user-select: none;
  text-decoration: none;   /* 링크 밑줄 제거 */
  display: block;
}
/* hover 시 메뉴 .nav-link 의 translateX/배경 효과 상속 차단 */
.mpa-sidebar .sidebar-brand:hover { transform: none; background: transparent; }
/* ARCA 워드마크 — 자비스(HUD) 톤: 시안-블루 그라데이션 + 은은한 글로우.
   사이드바/모바일 헤더/로그인 공용 (2026-08-12 리브랜딩). 자간은 좁게 — 벌리면 사전 표제어처럼 보임. */
.brand-arca {
  font-weight: 800;
  letter-spacing: .09em;
  background: linear-gradient(100deg, #7dd3fc 0%, #38bdf8 38%, #2563eb 78%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #38bdf8; /* background-clip 미지원 폴백 */
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, .35));
}
.mpa-sidebar .sidebar-brand .title-main {
  font-size: 1.5rem;
  line-height: 1.15;
  padding-left: .09em; /* 마지막 글자 뒤 letter-spacing 보정 — 가운데 정렬 유지 */
}
.mpa-sidebar .sidebar-brand .title-sub {
  color: #8fa3b8;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: .18em;
  margin-top: 0.35rem;
}
.mpa-header .mpa-brand.brand-arca { font-size: 1.05rem; }

/* 사용자 카드 */
.mpa-sidebar .user-card {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin: 0 0.25rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.mpa-sidebar .user-card .user-name { color: #ffffff; font-weight: 600; font-size: 0.95rem; }
.mpa-sidebar .user-card .user-email { color: rgba(255,255,255,0.55); font-size: 0.7rem; word-break: break-all; margin-bottom: 0.5rem; }
.mpa-sidebar .user-card .btn { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.4rem; }

/* 통합 검색 박스 */
.mpa-sidebar .search-box { margin-bottom: 1rem; padding: 0 0.25rem; }
.mpa-sidebar .search-box .form-control {
  background: rgba(0,0,0,0.3); border: 1px solid #495057; color: #ffffff;
  font-size: 0.85rem;
}
.mpa-sidebar .search-box .form-control::placeholder { color: rgba(255,255,255,0.4); }
.mpa-sidebar .search-box .btn { color: rgba(255,255,255,0.7); border-color: #495057; }

/* 메뉴 항목 — GAS .sidebar a 와 동일 ─────────────────────────── */
.mpa-sidebar .nav-link {
  position: relative;
  color: var(--mpa-sidebar-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  margin-bottom: 2px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mpa-sidebar .nav-link:hover {
  color: var(--mpa-sidebar-text-hover);
  background-color: rgba(255,255,255,0.05);
}
.mpa-sidebar .nav-link.active {
  color: #ffffff;
  font-weight: 600;
  background-color: rgba(255,255,255,0.1);
}
/* 현재 페이지 — 좌측 액센트 바 (어떤 아이콘 색이든 일관된 "여기 있음" 신호) */
.mpa-sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 56%;
  border-radius: 3px;
  background: var(--mpa-accent);
}
.mpa-sidebar .sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 8px 12px;
}
.mpa-sidebar .sidebar-heading {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  margin: 18px 0 6px 14px;
}

/* 메인 콘텐츠 */
.mpa-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem 1.75rem;
  background-color: #f4f6f9;   /* GAS body 배경 — 카드 분리감 */
  position: relative;          /* #mpa-loading 오버레이 기준 */
}

/* 공용 로딩 오버레이 — 모든 MPA 페이지 (mpa_compat.bootGasPage 가 로드 후 .hidden 부여) */
.mpa-loading {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  background: #f4f6f9; color: #6b7280; font-size: .9rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;   /* 기본 숨김 → 250ms 후에만 .show */
}
.mpa-loading.show { opacity: 1; pointer-events: auto; }
.mpa-loading.hidden { display: none; }
.mpa-spinner {
  width: 32px; height: 32px; border: 3px solid rgba(0,0,0,.12);
  border-top-color: #2563eb; border-radius: 50%; animation: mpaspin .7s linear infinite;
}
@keyframes mpaspin { to { transform: rotate(360deg); } }
[data-bs-theme="dark"] .mpa-loading { background: #1a1a2e; color: #9aa4b2; }
[data-bs-theme="dark"] .mpa-spinner { border-color: rgba(255,255,255,.15); border-top-color: #5b8cff; }
/* 데스크탑: 우상단 top-bar(🔔🌙) 가 페이지 우상단 버튼을 가리지 않게 상단 여백 (GAS main-content padding-top 55px). */
@media (min-width: 992px) {
  .mpa-main { padding-top: 3.5rem; }
}

/* ── 대시보드/카드 모던 UI (GAS index.html 이식) ───────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.4s ease forwards; }

.cursor-pointer { cursor: pointer; }

/* 모던 카드 — .mpa-main 안의 모든 .card (사이드바 .user-card 는 영향 없음) */
.mpa-main .card {
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease;
}
.mpa-main .card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.mpa-main .card-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* 대시보드 위젯 카드 */
.dash-card {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 18px rgba(0,0,0,0.03);
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
}
.dash-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* ── 대시보드 Flow 스타일 (scoped: .dashboard-page) — 이슈보드와 톤 통일 ── */
.dashboard-page { --dfl-line:#e6e8ec; --dfl-sub:#6b7280; --dfl-primary:#2563eb; }
[data-bs-theme="dark"] .dashboard-page { --dfl-line:#2d3744; --dfl-sub:#9aa4b2; }

.dashboard-page .dash-card,
.dashboard-page .card {
  border-radius: 14px !important;
  border: 1px solid var(--dfl-line) !important;
  box-shadow: 0 1px 2px rgba(9,30,66,0.06) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
.dashboard-page .dash-card:hover,
.dashboard-page .card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(9,30,66,0.10) !important; }

/* 컬러 2px 보더 → 좌측 얇은 액센트 바로 (카드 톤 통일, Flow 느낌 유지) */
.dashboard-page .dash-card.border-2 { border-width: 1px !important; }
.dashboard-page .dash-card.border-primary { border-left: 3px solid var(--dfl-primary) !important; }
.dashboard-page .dash-card.border-danger { border-left: 3px solid #ef4444 !important; }

/* 카드 헤더 — 투명·깔끔하게 */
.dashboard-page .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--dfl-line) !important;
  padding: .8rem 1rem !important;
}
.dashboard-page h2 { letter-spacing: -.4px; }
.dashboard-page .card-header h6,
.dashboard-page .card-header .fs-5 { letter-spacing: -.2px; }

/* 테이블 헤더 — Flow 톤 (옅은 회색·소문자 라벨) */
.dashboard-page thead.table-light th,
.dashboard-page .table-light th {
  background: #f7f8fa !important; color: var(--dfl-sub) !important;
  font-weight: 800; font-size: .74rem; text-transform: none; border-color: var(--dfl-line) !important;
}
[data-bs-theme="dark"] .dashboard-page thead.table-light th,
[data-bs-theme="dark"] .dashboard-page .table-light th { background: #1c242e !important; }
.dashboard-page .table > :not(caption) > * > * { border-color: var(--dfl-line); }

/* 담당자별 이슈 현황 — 아바타 원형 */
.avatar-sm {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: bold; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

/* ── 우상단 고정 바 (알림 벨 + 다크모드 토글) — GAS top-bar 이식 ──────── */
#top-bar {
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 1055;
  gap: 8px;
}
#top-bar button {
  border-radius: 50%;
  width: 40px; height: 40px;
  padding: 0;
  font-size: 1.1rem;
  border: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  position: relative;
}
/* 알림 벨 미읽음 배지 (updateNotificationBell 이 #notif-bell 안에 span 삽입) */
#notif-bell .badge,
#notif-bell .notif-count {
  position: absolute; top: -4px; right: -4px;
  background: #dc3545; color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* ── 다크 모드 (GAS [data-bs-theme=dark] 이식) ─────────────────────── */
[data-bs-theme="dark"] body.mpa-body { background-color: #1a1a2e; }
[data-bs-theme="dark"] .mpa-main { background-color: #1a1a2e; color: #e0e0e0; }
[data-bs-theme="dark"] .mpa-main .card { background-color: #1e2a3a; border-color: #2d3f52; }
[data-bs-theme="dark"] .mpa-main .card-header { background-color: #16293d !important; color: #e0e0e0 !important; border-color: #2d3f52; }
[data-bs-theme="dark"] .dash-card { background-color: #1e2a3a; border-color: #2d3f52; }
[data-bs-theme="dark"] .mpa-main .bg-light,
[data-bs-theme="dark"] .mpa-main .bg-white { background-color: #1e2a3a !important; color: #cdd3da; }
[data-bs-theme="dark"] .mpa-main .text-dark { color: #cdd3da !important; }
[data-bs-theme="dark"] .mpa-main .table { color: #cdd3da; }
[data-bs-theme="dark"] .mpa-main .table-light,
[data-bs-theme="dark"] .mpa-main .table-secondary { background-color: #16293d !important; color: #cdd3da; }
[data-bs-theme="dark"] .mpa-main .border { border-color: #2d3f52 !important; }
/* 다크 모드 시 달 아이콘 → 해 (시각 피드백) */
[data-bs-theme="dark"] #dark-mode-toggle { background-color: #f0ad4e !important; }

/* 게시판 본문 — 구버전 평문 글의 줄바꿈/공백 보존(textContent 렌더 시). */
.board-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.6;
  min-height: 4rem;
}
/* RichEditor(HTML) 본문 — 자체 블록 구조를 가지므로 pre-wrap 해제(빈 줄 중복 방지). */
.board-content.board-content-rich {
  white-space: normal;
}
.board-content.board-content-rich img { max-width: 100%; height: auto; }

/* ── 모바일 (lg 이하) — slide-in 사이드바 ──────────────────────────── */
@media (max-width: 991.98px) {
  .mpa-sidebar {
    position: fixed;
    top: var(--mpa-header-h);
    left: 0;
    height: calc(100vh - var(--mpa-header-h));
    z-index: 1010;
    transform: translateX(-100%);
    transition: transform 0.15s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,0.5);
  }
  .mpa-sidebar.open { transform: translateX(0); }
  .mpa-main { padding: 0.75rem 1rem; }
}

/* ──────────────────────────────────────────────────────────────────────── */
/* 리치 텍스트 에디터 호스트 (.rt-host) — 마운트 전 placeholder 가시화      */
/* 표준: window.RichEditor.html() 이 이 클래스로 호스트 div 를 생성.          */
/* ──────────────────────────────────────────────────────────────────────── */
.rt-host {
  min-height: 140px;
  border: 1px dashed #e6e8ec;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  color: #9aa4b2;
  background: #f7f8fa;
  font-size: 0.88rem;
}
.rt-host:empty::before { content: attr(data-placeholder); }
[data-bs-theme="dark"] .rt-host { background: #1a1d21; border-color: #2d3744; color: #6b7280; }

/* CKEditor 5 외관 — Flow 톤 (radius + 라인 색 통일) */
.ck-editor { border-radius: 8px !important; overflow: hidden; }
.ck.ck-editor__main > .ck-editor__editable {
  border: 1px solid #e6e8ec !important;
  border-radius: 0 0 8px 8px !important;
  min-height: 280px !important;
}
.ck.ck-editor__main > .ck-editor__editable:focus { box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important; }
.ck.ck-toolbar { border: 1px solid #e6e8ec !important; border-bottom: 0 !important; border-radius: 8px 8px 0 0 !important; }
[data-bs-theme="dark"] .ck.ck-editor__main > .ck-editor__editable,
[data-bs-theme="dark"] .ck.ck-toolbar { border-color: #2d3744 !important; }

/* ──────────────────────────────────────────────────────────────────────── */
/* 프로젝트 생성 모달 (pf-*) — 전 페이지 공용 (static/common/project_form.js) */
/* Flow 협업툴 톤: 단일 회색 라벨, 깔끔 그리드, 칩 입력, CKEditor 본문.       */
/* ──────────────────────────────────────────────────────────────────────── */
.pf-backdrop {
  position: fixed; inset: 0; background: rgba(9,30,66,0.4);
  opacity: 0; visibility: hidden; transition: 0.18s; z-index: 1100;
}
.pf-backdrop.show { opacity: 1; visibility: visible; }
.pf-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%);
  width: 940px; max-width: 95vw; max-height: 92vh; overflow-y: auto;
  background: #fff; color: #172b4d; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(9,30,66,0.3);
  opacity: 0; visibility: hidden; transition: 0.18s; z-index: 1110;
  font-family: inherit;
}
.pf-modal.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
[data-bs-theme="dark"] .pf-modal { background: #222a35; color: #e6e9ee; }
body.pf-open { overflow: hidden; }

/* 헤더 */
.pf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem 0.95rem; border-bottom: 1px solid #e6e8ec;
  position: sticky; top: 0; background: inherit; z-index: 2;
}
[data-bs-theme="dark"] .pf-head { border-bottom-color: #2d3744; }
.pf-head-title { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.pf-head-icon { font-size: 1.5rem; }
.pf-head-h { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; }
.pf-head-sub {
  font-size: 0.74rem; color: #6b7280; font-weight: 600; margin-top: 0.18rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-bs-theme="dark"] .pf-head-sub { color: #9aa4b2; }
.pf-x {
  border: 0; background: transparent; font-size: 1.4rem; line-height: 1;
  cursor: pointer; color: #6b7280; padding: 0.3rem 0.55rem; border-radius: 6px;
}
.pf-x:hover { background: #f4f6f9; }
[data-bs-theme="dark"] .pf-x:hover { background: #1a1d21; }

/* 바디 */
.pf-body { padding: 1.1rem 1.4rem 0; }

/* 탭바 (서브탭) — 프로젝트 정보 / 매출·첨부 */
.pf-tabbar {
  display: inline-flex; background: #eceef1; border-radius: 10px;
  padding: 3px; gap: 2px; margin-bottom: 1.1rem;
}
[data-bs-theme="dark"] .pf-tabbar { background: #2d3744; }
.pf-tab {
  border: 0; background: transparent; color: #6b7280;
  font-weight: 800; font-size: 0.84rem; letter-spacing: -0.1px;
  padding: 0.42rem 0.95rem; border-radius: 8px;
  cursor: pointer; transition: 0.12s;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.pf-tab:hover { color: #172b4d; }
[data-bs-theme="dark"] .pf-tab:hover { color: #e6e9ee; }
.pf-tab.active {
  background: #fff; color: #2563eb; box-shadow: 0 1px 3px rgba(9,30,66,0.12);
}
[data-bs-theme="dark"] .pf-tab.active { background: #222a35; color: #60a5fa; }

/* 패널 (탭 콘텐츠 컨테이너) */
.pf-panel { display: block; }
.pf-panel[hidden] { display: none; }

/* 매출 split — 동적 라인 (팀/파트/참여자/금액) */
.pf-rev { margin-top: 1.1rem; border: 1px solid #e6e8ec; border-radius: 12px; padding: 0.9rem 1rem; background: #f7f8fa; }
[data-bs-theme="dark"] .pf-rev { background: #1a1d21; border-color: #2d3744; }
.pf-rev-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.65rem; padding-bottom: 0.55rem; border-bottom: 1px solid #e6e8ec;
}
[data-bs-theme="dark"] .pf-rev-head { border-bottom-color: #2d3744; }
.pf-rev-sum-wrap {
  font-size: 0.78rem; font-weight: 700; color: #6b7280;
  background: #fff; padding: 0.18rem 0.6rem; border-radius: 999px; border: 1px solid #e6e8ec;
}
[data-bs-theme="dark"] .pf-rev-sum-wrap { background: #222a35; color: #9aa4b2; border-color: #2d3744; }
.pf-rev-sum-wrap b { color: #2563eb; font-weight: 800; }
.pf-rev-cur { color: #9aa4b2; font-size: 0.72rem; margin-left: 0.15rem; }

.pf-rev-lines { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.7rem; }
.pf-rev-line {
  display: grid; grid-template-columns: 1.05fr 1fr 1.65fr 1fr auto;
  gap: 0.55rem 0.6rem; align-items: end; padding: 0.55rem; background: #fff;
  border: 1px solid #e6e8ec; border-radius: 9px; position: relative;
}
[data-bs-theme="dark"] .pf-rev-line { background: #222a35; border-color: #2d3744; }
@media (max-width: 880px) {
  .pf-rev-line { grid-template-columns: 1fr 1fr; }
}
.pf-rev-cell { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.pf-rev-cell > .pf-l { font-size: 0.7rem; }
.pf-rev-x {
  border: 0; background: transparent; color: #9aa4b2; font-size: 1.15rem; line-height: 1;
  cursor: pointer; padding: 0.3rem 0.45rem; border-radius: 6px;
  align-self: end; height: 36px;
}
.pf-rev-x:hover { background: #fde8e8; color: #ef4444; }
[data-bs-theme="dark"] .pf-rev-x:hover { background: #3a1717; }

#pf-rev-add {
  border: 1px dashed #cbd5e1; background: transparent; color: #2563eb;
  width: 100%; padding: 0.55rem; border-radius: 9px; font-weight: 700; cursor: pointer;
  transition: 0.12s;
}
#pf-rev-add:hover { background: rgba(37,99,235,0.06); border-style: solid; }
[data-bs-theme="dark"] #pf-rev-add { border-color: #2d3744; color: #60a5fa; }

.pf-rev-hint {
  font-size: 0.72rem; color: #9aa4b2; margin-top: 0.6rem; line-height: 1.5;
}

/* 파일 input — Flow 톤 정리 (브라우저 기본 input 그대로면 너무 튄다) */
.pf-file {
  width: 100%; border: 1px solid #e6e8ec; background: #f7f8fa;
  border-radius: 8px; padding: 0.42rem 0.5rem; font-size: 0.83rem;
  color: inherit; font-family: inherit;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.pf-file:hover { border-color: #9aa4b2; }
.pf-file:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); background: #fff; outline: none; }
[data-bs-theme="dark"] .pf-file { background: #1a1d21; border-color: #2d3744; }
[data-bs-theme="dark"] .pf-file:focus { background: #222a35; }
.pf-file::file-selector-button {
  border: 1px solid #e6e8ec; background: #fff; color: #172b4d;
  border-radius: 6px; padding: 0.3rem 0.7rem; font-weight: 700; font-size: 0.78rem;
  cursor: pointer; margin-right: 0.6rem; transition: 0.12s;
}
.pf-file::file-selector-button:hover { background: #f7f8fa; }
[data-bs-theme="dark"] .pf-file::file-selector-button { background: #222a35; color: #e6e9ee; border-color: #2d3744; }
[data-bs-theme="dark"] .pf-file::file-selector-button:hover { background: #1a1d21; }

/* 섹션 */
.pf-sec { margin-bottom: 1.45rem; }
.pf-sec-t {
  font-size: 0.78rem; font-weight: 800; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 0 0 0.7rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid #e6e8ec;
  display: flex; align-items: baseline; gap: 0.5rem;
}
[data-bs-theme="dark"] .pf-sec-t { border-bottom-color: #2d3744; color: #9aa4b2; }
.pf-sec-h { font-size: 0.7rem; font-weight: 600; color: #9aa4b2; text-transform: none; letter-spacing: 0; }

/* 그리드 */
.pf-grid { display: grid; gap: 0.85rem 0.9rem; margin-bottom: 0.55rem; }
.pf-grid.c2 { grid-template-columns: 1fr 1fr; }
.pf-grid.c3 { grid-template-columns: 1fr 1fr 1fr; }
.pf-grid.c4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 760px) {
  .pf-grid.c2, .pf-grid.c3, .pf-grid.c4 { grid-template-columns: 1fr; }
}

/* 필드 */
.pf-f { display: flex; flex-direction: column; gap: 0.34rem; min-width: 0; }
.pf-l {
  font-size: 0.74rem; font-weight: 800; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.02em; margin: 0;
}
[data-bs-theme="dark"] .pf-l { color: #9aa4b2; }
.pf-l.req::after { content: " *"; color: #ef4444; }
.pf-l-opt { font-weight: 600; color: #9aa4b2; text-transform: none; letter-spacing: 0; }

.pf-i, .pf-s {
  width: 100%; border: 1px solid #e6e8ec; background: #f7f8fa; color: inherit;
  border-radius: 8px; padding: 0.52rem 0.7rem; font-size: 0.88rem; outline: none;
  font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
[data-bs-theme="dark"] .pf-i, [data-bs-theme="dark"] .pf-s {
  background: #1a1d21; border-color: #2d3744;
}
.pf-i:hover, .pf-s:hover { border-color: #9aa4b2; }
.pf-i:focus, .pf-s:focus {
  border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); background: #fff;
}
[data-bs-theme="dark"] .pf-i:focus, [data-bs-theme="dark"] .pf-s:focus { background: #222a35; }

/* 권한 게이트 표기 뱃지 — 일반 팀원에게 안 보이는 요소 옆 칩 (window.PermBadge.html) */
.perm-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.5;
  padding: 1px 5px; border-radius: 5px; margin-left: 5px;
  flex-shrink: 0; white-space: nowrap; user-select: none; cursor: default;
}
.pb-admin   { background: #eef3ff; color: #2f6bff; border: 1px solid rgba(47,107,255,0.28); }
.pb-manager { background: #ecfdf5; color: #059669; border: 1px solid rgba(5,150,105,0.28); }
[data-bs-theme="dark"] .pb-admin   { background: #1c2740; color: #7aa2ff; border-color: rgba(91,140,255,0.32); }
[data-bs-theme="dark"] .pb-manager { background: #0d2b22; color: #34d399; border-color: rgba(52,211,153,0.3); }

/* 칩 입력 */
.pf-chip-wrap {
  position: relative; border: 1px solid #e6e8ec; background: #f7f8fa;
  border-radius: 8px; padding: 0.32rem 0.5rem; min-height: 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.pf-chip-wrap:focus-within {
  border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); background: #fff;
}
[data-bs-theme="dark"] .pf-chip-wrap { background: #1a1d21; border-color: #2d3744; }
[data-bs-theme="dark"] .pf-chip-wrap:focus-within { background: #222a35; }
.pf-chips { display: contents; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 0.15rem;
  background: rgba(37,99,235,0.1); color: #1d4ed8;
  font-size: 0.78rem; font-weight: 700;
  padding: 0.17rem 0.15rem 0.17rem 0.55rem; border-radius: 6px;
}
[data-bs-theme="dark"] .pf-chip { background: rgba(37,99,235,0.22); color: #93c5fd; }
.pf-chip-x {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  padding: 0 0.35rem; opacity: 0.65; font-size: 1rem; line-height: 1;
}
.pf-chip-x:hover { opacity: 1; }
.pf-chip-in {
  flex: 1 1 80px; min-width: 80px;
  border: 0; background: transparent; padding: 0; box-shadow: none;
  font-size: 0.85rem; outline: none; color: inherit; font-family: inherit;
}
.pf-pop {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid #e6e8ec; border-radius: 9px;
  box-shadow: 0 8px 24px rgba(9,30,66,0.18); max-height: 240px; overflow-y: auto;
  z-index: 30; padding: 0.25rem;
}
[data-bs-theme="dark"] .pf-pop { background: #222a35; border-color: #2d3744; }
.pf-pop.show { display: block; }
.pf-pop-i {
  display: flex; align-items: center; justify-content: space-between; gap: 0.45rem;
  padding: 0.4rem 0.55rem; border-radius: 7px; cursor: pointer; font-size: 0.84rem;
}
.pf-pop-i:hover { background: #f7f8fa; }
[data-bs-theme="dark"] .pf-pop-i:hover { background: #1a1d21; }
.pf-pop-n { font-weight: 700; }
.pf-pop-t { font-size: 0.72rem; color: #6b7280; }

/* 푸터 */
.pf-foot {
  position: sticky; bottom: 0; background: inherit;
  padding: 0.95rem 1.4rem; border-top: 1px solid #e6e8ec;
  display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;
}
[data-bs-theme="dark"] .pf-foot { border-top-color: #2d3744; }
.pf-btn {
  border: 0; border-radius: 9px; padding: 0.58rem 1.15rem;
  font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: 0.12s;
}
.pf-btn-primary { background: #2563eb; color: #fff; box-shadow: 0 1px 3px rgba(37,99,235,0.35); }
.pf-btn-primary:hover { filter: brightness(1.08); }
.pf-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.pf-btn-ghost { background: #eceef1; color: #172b4d; }
.pf-btn-ghost:hover { filter: brightness(0.97); }
[data-bs-theme="dark"] .pf-btn-ghost { background: #2d3744; color: #e6e9ee; }