/* ============================================================
   공용 테마 시스템 — CSS 변수 기반으로 다크/라이트를 전환한다.
   실제 색상은 [data-theme] 셀렉터로 주입하므로, 테마 추가 시
   이 파일의 변수 블록만 확장하면 된다 (모듈 분리 원칙).
   ============================================================ */

:root {
  --font-sans: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --radius: 14px;
  --radius-sm: 9px;
  --sidebar-w: 250px;
  --header-h: 62px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
  --transition: 180ms ease;
}

/* ---------- 라이트 테마 (기본) ---------- */
:root,
[data-theme='light'] {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f9fafc;
  --border: #e6e9f0;
  --text: #1b2333;
  --text-muted: #6b7686;
  --primary: #4f6ef7;
  --primary-fg: #ffffff;
  --accent: #00b8a9;
  --danger: #e5484d;
  --warning: #f5a524;
  --success: #17a673;
  --sidebar-bg: #ffffff;
  --sidebar-text: #4a5568;
  --sidebar-active-bg: rgba(79, 110, 247, .1);
  --header-bg: rgba(255, 255, 255, .85);
  --input-bg: #ffffff;
  --hover: #f1f3f9;
  --chart-grid: #eef1f6;
}

/* ---------- 다크 테마 ---------- */
[data-theme='dark'] {
  --bg: #0e1117;
  --surface: #161b25;
  --surface-2: #1c2230;
  --border: #262d3b;
  --text: #e7ebf3;
  --text-muted: #8d97ab;
  --primary: #6d8bff;
  --primary-fg: #0e1117;
  --accent: #2dd4bf;
  --danger: #ff6369;
  --warning: #ffb224;
  --success: #46d39a;
  --sidebar-bg: #121722;
  --sidebar-text: #9aa5b8;
  --sidebar-active-bg: rgba(109, 139, 255, .16);
  --header-bg: rgba(18, 23, 34, .85);
  --input-bg: #10151f;
  --hover: #1d2433;
  --chart-grid: #222a39;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; }

/* ============================ 레이아웃 ============================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 40;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.brand {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 13px;
  letter-spacing: -.5px;
}
.brand-name { font-weight: 700; font-size: 15px; color: var(--text); }
.brand-sub { font-size: 11px; color: var(--text-muted); margin-left: auto; }
/* [로고적용] 사이드바 브랜드: NWC 엠블럼(투명 PNG) — 그라데이션 박스 없이 이미지 그대로 */
.brand-logo { background: none; width: 34px; height: 34px; border-radius: 0; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auth-logo { height: 110px; margin: 0 auto 10px; display: block; }

.nav { padding: 12px 10px 30px; }
.nav-group { margin-bottom: 4px; }
.nav-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--sidebar-text);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nav-group-title:hover { background: var(--hover); color: var(--text); }
.nav-group.open > .nav-group-title { color: var(--primary); background: var(--sidebar-active-bg); }
/* 직속 최상위 항목(대시보드)도 그룹 제목과 동일한 굵기·크기로 통일 */
.nav > .nav-item { font-size: 15px; font-weight: 700; color: var(--sidebar-text); padding: 9px 12px; }
.nav > .nav-item.active { color: var(--primary); background: var(--sidebar-active-bg); }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--sidebar-active-bg); color: var(--primary); font-weight: 650; }
.nav-item.active::before {
  content: '';
  position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);
}
/* ---- 라운드 15 [3](navActiveHighlight): 활성 메뉴 강조 강화 — 진한 색 + 배경 + 좌측 accent 바 ---- */
.nav-item.active { font-weight: 800; color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary-soft, transparent); }
.nav-sub .nav-item.active { background: var(--sidebar-active-bg); }
/* ---- 라운드 15 [4]: 회원가입 필수(*)/선택 표기 ---- */
.req-star { color: var(--danger); font-weight: 800; }
.opt-tag { color: var(--text-muted); font-size: 11.5px; font-weight: 500; }
/* ---- 라운드 15 [2](dateTimeDisplay): 날짜 아래 작게 시간 표기 헬퍼 ---- */
.dt-cell { display: inline-flex; flex-direction: column; line-height: 1.35; }
.dt-cell .dt-d { font-size: inherit; }
.dt-cell .dt-t { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dt-d { display: inline-block; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; }
.nav-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav-group-title .nav-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.nav-group-title .nav-icon svg { width: 20px; height: 20px; }
.nav-badge {
  margin-left: auto;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
}
.nav-sub { display: none; padding-left: 26px; }
.nav-group.open .nav-sub { display: block; }
.nav-sub .nav-item { font-size: 13px; padding: 6px 12px; }
/* ---- 라운드 11(navFixedGroups): 그룹 제목 고정(접힘 동작 없음) + 하위 상시 표시 ----
   .nav-group-title 15px+아이콘 스타일 유지, 캐릿/접힘 하이라이트만 무력화 */
.nav-fixed .nav-group-title { cursor: default; }
.nav-fixed .nav-group-title:hover { background: transparent; color: var(--sidebar-text); }
.nav-fixed .nav-group.open > .nav-group-title { color: var(--sidebar-text); background: transparent; }
.nav-fixed .nav-sub { display: block; }

/* ---- 라운드 12 [A1]: 사이드바 네비 시각 구분 (관리자+유저) ----
   ① 대시보드: 테마 accent 배경의 강조 버튼 — 다른 메뉴와 확실히 구분 */
.nav > .nav-item.nav-dashboard {
  background: var(--accent); color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.nav > .nav-item.nav-dashboard:hover { background: var(--accent); color: #fff; filter: brightness(1.08); }
.nav > .nav-item.nav-dashboard.active { background: var(--accent); color: #fff; }
.nav > .nav-item.nav-dashboard.active::before { display: none; }
/* ② 그룹 제목: 클릭 불가 비활성 섹션 헤더 — 라운드 14: 가독성 개선(본문 크기·굵게·본문 색), 위 구분선 유지 */
.nav-fixed .nav-group-title {
  font-size: 14px; font-weight: 800; color: var(--text);
  padding: 8px 12px 6px; margin-top: 12px; border-top: 1px solid var(--border);
  border-radius: 0; cursor: default; letter-spacing: .3px;
}
.nav-fixed .nav-group:first-of-type > .nav-group-title { margin-top: 6px; }
.nav-fixed .nav-group-title:hover { background: transparent; color: var(--text); }
.nav-fixed .nav-group.open > .nav-group-title { color: var(--text); background: transparent; }
/* 아이콘: 라운드 14 — 라벨과 같은 본문 크기로 가독성 확보 */
.nav-fixed .nav-group-title .nav-icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: .9; }
.nav-fixed .nav-group-title .nav-icon svg { width: 16px; height: 16px; }
/* 라운드 14: 권한 매트릭스 그룹 구분 행 */
.perm-matrix .perm-group-row td {
  background: var(--surface-2, rgba(128,128,128,.08));
  font-weight: 800; font-size: 12.5px;
}

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.header {
  height: var(--header-h);
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-title { font-size: 16px; font-weight: 650; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-clock {
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px;
  font-size: 13px; color: var(--text-muted); font-weight: 600;
}
/* [R31] 사이클 정산 카운트다운 — 시계 옆 강조 칩 */
.header-cycle {
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  padding: 5px 12px; border-radius: 999px;
  font-size: 13px; color: var(--accent); font-weight: 700;
}

.content { padding: 22px; flex: 1 1 auto; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h2 { font-size: 18px; }
.page-head .sub { color: var(--text-muted); font-size: 13px; }
.page-head .spacer { margin-left: auto; }

/* ============================ 컴포넌트 ============================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 18px; }
.card-title { font-size: 14px; font-weight: 650; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.card-title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }

/* ---- 라운드 18 [10]: 자산 잔액 칩 + 결제 후 예상 잔액 + 상품 카드 폴리시 ---- */
.asset-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.asset-chip b { color: var(--text); font-weight: 750; }
.asset-chip.short { background: rgba(229, 72, 77, .1); color: var(--danger); border-color: rgba(229, 72, 77, .3); }
.asset-chip.short b { color: var(--danger); }
.pay-estimate {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 14px;
}
.pay-estimate .stat-label { font-size: 11.5px; }
.pay-estimate-val { color: var(--primary); font-variant-numeric: tabular-nums; }
/* ---- 라운드 20 [6]: 주문신청 결제 3열 정렬(라벨 상단·컨트롤 하단, 열 높이 통일) ---- */
.order-pay-grid { align-items: stretch; margin-bottom: 14px; }
.order-pay-grid .field { margin-bottom: 0; }
.order-pay-grid .field > .flex, .order-pay-grid .pay-estimate { flex: 1; }
.order-pay-grid .pay-estimate { display: flex; align-items: center; margin-bottom: 0; }
/* 쇼핑몰 느낌의 가벼운 폴리시: 상품 카드 호버 리프트 + 구분선 + 구매 버튼 강조 */
.goods-card { transition: border-color var(--transition), transform var(--transition); }
.goods-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.goods-card .stat-label { border-bottom: 1px dashed var(--border); padding-bottom: 3px; }
.goods-card form { border-top: 1px solid var(--border); padding-top: 12px; }
.goods-card .btn-primary { min-height: 40px; font-size: 14px; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .grid-4 { grid-template-columns: 1fr; } }

/* 통계 카드 */
.stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.stat-value { font-size: 24px; font-weight: 750; letter-spacing: -.5px; font-variant-numeric: tabular-nums; text-align: center; }
.stat-value small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.stat-trend { font-size: 12px; color: var(--text-muted); }
.stat-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; margin-left: auto;
  background: var(--sidebar-active-bg); color: var(--primary);
}
.stat-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* 테이블 */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data thead th {
  /* 데이터 정렬 중앙 통일: 본문이 긴 셀(내용/메모/주소)도 예외 없이 중앙 */
  text-align: center;
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 650; font-size: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data tbody td {
  /* 모든 데이터 셀 중앙 정렬 통일 */
  text-align: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--hover); }
table.data td.num { text-align: center; }
table.data .empty { text-align: center; color: var(--text-muted); padding: 34px; }

/* 배지 */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge.ok { background: rgba(23, 166, 115, .12); color: var(--success); border-color: transparent; }
.badge.wait { background: rgba(245, 165, 36, .14); color: var(--warning); border-color: transparent; }
.badge.danger { background: rgba(229, 72, 77, .12); color: var(--danger); border-color: transparent; }
.badge.info { background: var(--sidebar-active-bg); color: var(--primary); border-color: transparent; }
/* 라운드 23 [2]: 관리자 수동 입금확인 표기 */
.badge.manual { background: rgba(0, 184, 169, .12); color: var(--accent); border-color: transparent; font-weight: 700; }
.badge.academy { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; border-color: transparent; font-weight: 800; }
/* [리더뱃지] 회원목록 리더 비율 — 아카데미처럼 눈에 띄는 민트 */
.badge.leader { background: linear-gradient(135deg, #10b981, #14b8a6); color: #fff; border-color: transparent; font-weight: 800; }
/* [연동뱃지] 이름 뒤 텔레그램(파랑)·OTP 방패(초록) — [R47] 텍스트 제거, 아이콘 전용 */
.badge.tg { background: #229ed9; color: #fff; border-color: transparent; font-weight: 800; padding: 3px 5px; }
.badge.tg svg { width: 12px; height: 12px; display: block; }
.badge.otp { background: rgba(16, 185, 129, .16); color: #34d399; border-color: transparent; font-weight: 800; padding: 3px 5px; }
.badge.otp svg { width: 12px; height: 12px; display: block; }

.btn-academy { border-color: #f59e0b; color: #f59e0b; }
.btn-academy:hover { background: rgba(245, 158, 11, .12); color: #f59e0b; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  padding: 8px 14px; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: all var(--transition);
  white-space: nowrap;
}
.btn:hover { background: var(--hover); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { filter: brightness(1.08); background: var(--primary); }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.08); background: var(--success); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); background: var(--danger); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }

/* 폼 */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 650; color: var(--text-muted); }
.input, select.input, textarea.input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font: inherit; font-size: 13.5px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--sidebar-active-bg); }
textarea.input { min-height: 96px; resize: vertical; }
.input-amount { text-align: right; font-variant-numeric: tabular-nums; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .input { width: auto; min-width: 180px; }
.toolbar .spacer { margin-left: auto; }

.alert {
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 550; margin-bottom: 14px;
  border: 1px solid transparent;
}
.alert-error { background: rgba(229, 72, 77, .1); color: var(--danger); border-color: rgba(229, 72, 77, .28); }
.alert-success { background: rgba(23, 166, 115, .1); color: var(--success); border-color: rgba(23, 166, 115, .28); }
.alert-info { background: rgba(59, 130, 246, .1); color: var(--primary); border-color: rgba(59, 130, 246, .28); }

/* 게이지 바 (직급 달성) */
.gauge { position: relative; height: 44px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.gauge-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 700ms ease-out; }
.gauge-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }

/* 테마 토글 */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--text);
  transition: background var(--transition);
}
.theme-toggle:hover { background: var(--hover); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
[data-theme='dark'] .icon-sun { display: none; }
[data-theme='light'] .icon-moon { display: none; }

/* 아바타 */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}
.user-chip { display: flex; align-items: center; gap: 9px; }
.user-chip .name { font-weight: 650; font-size: 13px; line-height: 1.2; }
.user-chip .role { font-size: 11.5px; color: var(--text-muted); }

/* 모달 */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(8, 11, 18, .55);
  display: none; align-items: center; justify-content: center; z-index: 100;
  backdrop-filter: blur(2px);
}
.modal-backdrop.show { display: flex; }
.modal {
  width: min(520px, 92vw); max-height: 88vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.modal-head { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.modal-head h3 { font-size: 15px; }
.modal-head .close { margin-left: auto; cursor: pointer; color: var(--text-muted); font-size: 20px; line-height: 1; }
.modal-body { padding: 18px; }
.modal-foot { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
.modal.modal-lg { width: min(720px, 94vw); }
/* ---- 라운드 12 [A3]: 활동 달력 일별 상세 / 월간 리포트 상세 모달 확대 ----
   폭 ~1100px(viewport 92vw 상한), 높이 85vh 초과 시 본문만 스크롤 */
.modal.modal-calday {
  width: min(1100px, 92vw); max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal.modal-calday .modal-body { flex: 1 1 auto; overflow: auto; }
table.perm-matrix { font-size: 13px; }
table.perm-matrix th, table.perm-matrix td { padding: 7px 10px; }
table.perm-matrix input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
/* [5]+[추가2] 라운드 19: 스크롤 시 헤더 고정 + 심플화(행 줄무늬, 그룹 행 강조) */
table.perm-matrix thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface, #fff);
  box-shadow: 0 1px 0 var(--border, rgba(128,128,128,.25));
}
table.perm-matrix .perm-row td { vertical-align: middle; }
table.perm-matrix .perm-group-row td { letter-spacing: .3px; padding-top: 10px; padding-bottom: 10px; }
.perm-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; }
.perm-toolbar .perm-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.perm-toolbar input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); }
/* ---- 라운드 16 [E](permMatrixCompact): 매트릭스 행 줄바꿈 — 화면명 컬럼을 좁히고
   컬럼 폭을 균등 자동 배분하여 모달 폭을 넘지 않게 한다(CSS 전용, 그룹 구분행 유지) ---- */
body[data-perm-compact="1"] table.perm-matrix { table-layout: fixed; width: 100%; }
body[data-perm-compact="1"] table.perm-matrix th:first-child,
body[data-perm-compact="1"] table.perm-matrix td:first-child { width: 28%; }
body[data-perm-compact="1"] table.perm-matrix th,
body[data-perm-compact="1"] table.perm-matrix td { overflow-wrap: anywhere; }
body[data-perm-compact="1"] table.perm-matrix td.center { white-space: normal; }

/* 조직도 */
.org-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.org-canvas {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto; height: 72vh; position: relative;
}
.org-node {
  width: 190px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 10px 12px; cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.org-node:hover { border-color: var(--primary); transform: translateY(-1px); }
.org-node .n-name { font-weight: 700; font-size: 13px; }
.org-node .n-id { font-size: 11.5px; color: var(--text-muted); }
.org-node .n-sales { font-size: 12px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.org-node .n-grade { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--sidebar-active-bg); color: var(--primary); display: inline-block; margin-top: 6px; }
/* [이름복원] 이름 줄 안의 직급 뱃지 — 위 여백 제거·정렬 맞춤 */
.org-node .n-name .n-grade { margin-top: 0; vertical-align: 1px; }
.org-node .n-academy { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; display: inline-block; margin-top: 6px; margin-left: 5px; box-shadow: 0 0 0 2px rgba(245, 158, 11, .35); }
/* [리더뱃지] 조직도 리더 비율 — 아카데미와 같은 알약 형태, 민트 색상 */
.org-node .n-leader-badge { background: linear-gradient(135deg, #10b981, #14b8a6); box-shadow: 0 0 0 2px rgba(20, 184, 166, .35); }
.org-node .n-badges { margin-top: 4px; line-height: 1.5; }
.org-node .n-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; display: inline-block; margin-right: 4px; font-variant-numeric: tabular-nums; }
.org-node .n-leader { background: rgba(56, 189, 248, .15); color: #38bdf8; }
.org-node .n-deadline { background: rgba(45, 212, 191, .15); color: var(--accent); }
.org-node .n-expired { background: rgba(239, 68, 68, .15); color: #ef4444; }
.org-node .n-share { background: rgba(168, 85, 247, .15); color: #a855f7; }
.org-node.star-1 { border-color: #94a3b8; }
.org-node.star-2 { border-color: #38bdf8; }
.org-node.star-3 { border-color: #4f6ef7; }
.org-node.star-4 { border-color: #a855f7; }
.org-node.star-5 { border-color: #f59e0b; }
.org-node.star-6 { border-color: #ef4444; }
.org-node.has-academy { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18), var(--shadow); }
.org-node.is-me { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, .18); }

/* 로그인 */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-card { width: min(400px, 100%); }
/* [가입2열] 회원가입은 2열 배치로 넓은 카드 사용 */
.auth-card.signup-card { width: min(660px, 100%); }
.auth-brand { text-align: center; margin-bottom: 22px; }
/* [R45] 회원가입 헤더: 로고(40% 크기) 좌측 + 제목 우측 한 행 */
.auth-brand.row { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
.auth-brand.row .auth-logo { height: 44px; margin: 0; }
.auth-brand.row h1 { margin: 0; }
.auth-brand .brand-mark { width: 46px; height: 46px; border-radius: 14px; font-size: 17px; margin: 0 auto 12px; }
.auth-brand h1 { font-size: 20px; }
.auth-brand p { color: var(--text-muted); font-size: 13px; margin: 4px 0 0; }
.auth-hint { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 14px; }

/* 대시보드 월 달력 */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-ym { font-size: 15px; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11.5px; font-weight: 650; color: var(--text-muted); padding: 4px 0; }
.cal-cell { min-height: 64px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 7px; background: var(--surface-2); text-align: center; }
.cal-cell.empty { border: none; background: transparent; }
.cal-cell.has-activity { background: var(--surface); cursor: pointer; transition: border-color var(--transition), transform var(--transition); }
.cal-cell.has-activity:hover { border-color: var(--primary); transform: translateY(-1px); }
.cal-day { font-size: 12px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cal-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 6px; }
.cal-badge { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.cal-badge.buy { color: var(--primary); border-color: transparent; background: var(--sidebar-active-bg); }
.cal-badge.dep { color: var(--success); border-color: transparent; background: rgba(23, 166, 115, .12); }
.cal-badge.wd { color: var(--warning); border-color: transparent; background: rgba(245, 165, 36, .14); }
.cal-badge.inq { color: var(--danger); border-color: transparent; background: rgba(229, 72, 77, .12); }
.cal-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* ---- 활동내역 모달: 상단 통계 칩 (라운드 21) ---- */
.cal-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0 0 14px; }
.cal-sum-plain { display: block; font-weight: 700; margin: 0 0 10px; }
.cal-stat { position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px 9px 14px; display: flex; flex-direction: column; gap: 2px; }
.cal-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.cal-stat-k { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }
.cal-stat-v { font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.2; font-variant-numeric: tabular-nums; }
.cal-stat-u { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-left: 3px; }
.cal-stat-x { font-size: 11px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cal-stat.su-signup::before { background: var(--primary); }
.cal-stat.su-buy::before { background: var(--accent); }
.cal-stat.su-dep::before { background: var(--success); }
.cal-stat.su-wd::before { background: var(--warning); }
.cal-stat.su-inq::before { background: var(--danger); }
.cal-stat.su-signup .cal-stat-v { color: var(--primary); }
.cal-stat.su-buy .cal-stat-v { color: var(--accent); }
.cal-stat.su-dep .cal-stat-v { color: var(--success); }
.cal-stat.su-wd .cal-stat-v { color: var(--warning); }
.cal-stat.su-inq .cal-stat-v { color: var(--danger); }

/* ---- 활동내역 모달: 섹션 제목 배경·구분선 (라운드 21) ---- */
.cal-sec { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.cal-sec-title { font-size: 13px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border-bottom: 1px solid var(--border); color: var(--text); }
.cal-sec .cal-row { font-size: 12.5px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.cal-sec .cal-row:last-child { border-bottom: none; }
.cal-sec .cal-row:nth-child(odd) { background: var(--surface-2); }
.cal-row { font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cal-row:last-child { border-bottom: none; }

/* 헤더 알림 칩 (관리자) */
.alert-chips { display: flex; gap: 8px; align-items: center; }
.alert-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; cursor: pointer; white-space: nowrap; transition: all var(--transition); text-decoration: none; }
.alert-chip:hover { border-color: var(--primary); color: var(--text); }
.alert-chip .cnt { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--danger); }
.alert-chip.zero .cnt { color: var(--text-muted); }
@media (max-width: 1200px) { .alert-chips .chip-label { display: none; } }

/* ---- 공용 페이징 내비 (라운드 10) ---- */
.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px; font-size: 13px; font-weight: 650; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: all var(--transition); }
.pg-btn:hover { border-color: var(--primary); color: var(--text); }
.pg-btn.current { color: var(--primary-fg); background: var(--primary); border-color: var(--primary); }
.pg-btn.disabled { opacity: 0.4; pointer-events: none; }

/* 유틸 */
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-14 { gap: 14px; }
.w-full { width: 100%; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--primary); }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
.fs-24 { font-size: 24px; }
.fw-700 { font-weight: 700; }

/* 모바일 */
.menu-btn { display: none; }
@media (max-width: 980px) {
  .sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
    transition: transform var(--transition); box-shadow: var(--shadow);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after {
    content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 35;
  }
  .menu-btn { display: grid; }
  .content { padding: 16px; }
}

/* ============================================================
   모바일 최적화 (유저 포털 우선). 사이드바 오버레이는 위의
   980px 블록의 body.nav-open 패턴을 그대로 사용하므로 재정의하지 않는다.
   미디어 쿼리는 모바일 전용이라 관리자 데스크톱 레이아웃에는 영향 없음.
   ============================================================ */
@media (max-width: 768px) {
  /* 헤더: 타이틀 축소·오래된 요소(시계/알림 칩) 숨김. 유저의 정보수정/로그아웃 버튼은 유지 */
  .header { gap: 8px; padding: 0 12px; }
  .header-title { font-size: 14px; }
  .header-clock, .header-cycle { display: none; }
  .alert-chips { display: none; }
  .header-right { gap: 6px; }
  .user-chip .name, .user-chip .role { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 터치 타깃 최소 40px */
  .btn, .header-right .btn-sm { min-height: 40px; }
  .nav-item, .nav-group-title { min-height: 40px; }
  .theme-toggle { width: 40px; height: 40px; }
  /* 통계 카드 그리드: 1~2열 (620px 미만은 기존 규칙이 1열로 처리) */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 테이블 가로 스크롤 보장 */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* 모달 폭 */
  .modal, .modal.modal-lg { width: 94vw; }
  /* 폼 입력 풀폭 */
  .toolbar .input { width: 100%; min-width: 0; }
  .content .input { width: 100%; }
  /* 하드코딩 고정 폭 보완: 모바일에서 화면을 넘치지 않도록 */
  .content input.input, .content select.input { max-width: 100%; }
  /* 달력 축소 */
  .cal-grid { gap: 4px; }
  .cal-cell { min-height: 52px; padding: 4px; }
}

@media (max-width: 480px) {
  /* stat 카드 1열 */
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stat-value { font-size: 20px; }
  /* 달력 셀 축소: 배지는 이모지만 표시(.cal-badge-n 숨김), 폰트 축소 */
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 40px; padding: 3px 2px; border-radius: 7px; }
  .cal-day { font-size: 10px; }
  .cal-badge { font-size: 11px; padding: 1px 4px; }
  .cal-badge .cal-badge-n { display: none; }
  .cal-legend { font-size: 11px; gap: 8px; }
  /* 조직도 화면 가로 스크롤 */
  .org-canvas { overflow-x: auto; height: 60vh; }
}

/* 프린트 */
@media print {
  .sidebar, .header, .toolbar, .btn { display: none !important; }
  .content { padding: 0; }
}