/* ==========================================
   Nexus Base — v2.0 NEXUS_DESIGN_SYSTEM.md (정본) 기반 전역 컴포넌트.
   "어느 모듈을 들어가도 똑같은 디자인" — 모든 모듈은 여기 .nx-* 만 쓴다.
   ------------------------------------------
   색·간격·반경 토큰은 nexus-tokens.css(토큰 트랙)의 변수를 사용한다.
   정본 §4.1 변수명(--nova-*, --color-*)을 1순위로 참조하되,
   토큰 트랙 반영 전이라도 깨지지 않도록 기존 --nexus-* 토큰을 폴백으로 둔다.
   ========================================== */

/* ===== 정본 §4.1 토큰 별칭 (폴백 포함) =====
   토큰 트랙이 nexus-tokens.css 에 동일 변수를 정의하면 그 값이 우선한다.
   여기서는 정본 컬러를 폴백으로 박아 어떤 로드 순서에서도 정본 룩이 나오게 한다. */
:root {
  --nova-primary:       #123499;
  --nova-primary-dark:  #0C2680;
  --nova-primary-mid:   #1A4BC4;
  --nova-primary-light: #E8EEF9;
  --nova-beige:         #F5EEE6;

  --nx-bg-page:         var(--color-bg-page, var(--nova-beige));
  --nx-bg-card:         var(--color-bg-card, #FFFFFF);
  --nx-bg-table-header: var(--color-bg-table-header, #F7F7F5);
  --nx-border:          var(--color-border, #E2DED8);
  --nx-border-row:      var(--color-border-row, #F2EFEA);
  --nx-text:            var(--color-text-primary, #0C0C0C);
  --nx-text-2:          var(--color-text-secondary, #4A4A48);
  --nx-text-muted:      var(--color-text-muted, #9A9890);
  --nx-negative:        var(--color-negative, #C84B3A);
  --nx-positive:        var(--color-positive, #2A7A4E);

  /* 정본 §6 간격 */
  --nx-pad-content: 26px 28px 36px;
  --nx-pad-hero:    24px 28px;
  --nx-pad-card:    14px 16px;
  --nx-gap-card:    9px;

  /* 정본 §4.1 반경 */
  --nx-radius-sm: 6px;
  --nx-radius-md: 8px;
  --nx-radius-lg: 10px;
}

/* ==========================================
   Nexus Base — v1.1 디자인 가이드 + nexus-mockup.html AFTER 톤 기반.
   nexus-tokens.css 에 정의된 토큰·컴포넌트(.event, .calendar)와 함께 사용.
   ========================================== */

/* ===== 페이지 골격 ===== */
.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nexus-paper-50);
}

/* 상단 바 — 기본 숨김. 테마 레이어(예: longchamp)에서만 노출 */
.nexus-topbar { display: none; }

/* ===== 흰 헤더 1단 (mockup AFTER) ===== */
.nexus-header {
  background: white;
  border-bottom: 3px solid var(--nexus-blue-700);  /* 테마 강조선 (테마 메인색) */
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 50;  /* 헤더(+테마 드롭다운)를 본문 위로 — page-body z-index 위에 쌓이게 */
}

.nexus-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nexus-header-logo {
  height: 28px;
  width: auto;
  display: block;
}
.nexus-header-mark {
  font-family: var(--font-mark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--nexus-ink-900);
  line-height: 1.05;
  text-transform: uppercase;
}

.nexus-header-divider {
  width: 1px;
  height: 32px;
  background: var(--nexus-paper-200);
  margin: 0 8px;
}

.nexus-header-app {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.nexus-header-eyebrow {
  font-size: 9.5px;
  color: var(--nexus-ink-500);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.nexus-header-wordmark {
  font-family: var(--font-mark);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--nexus-blue-700);  /* NEXUS 워드마크 = 테마 메인색 */
  text-decoration: none;
  padding-right: 0.22em;  /* letter-spacing 우측 시각 보정 */
}
.nexus-header-wordmark:hover { color: var(--nexus-blue-900); }

.nexus-header-version {
  padding: 2px 9px;
  background: var(--nexus-paper-100);
  color: var(--nexus-ink-500);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

/* 우측 모듈 스위처 */
.nexus-header-nav {
  margin-left: auto;
  display: flex;
  gap: 2px;
}
.nexus-nav-item {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--nexus-ink-500);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: all var(--duration-fast) var(--ease-out);
}
.nexus-nav-item:hover {
  color: var(--nexus-ink-900);
  background: var(--nexus-paper-100);
}
.nexus-nav-item.is-active {
  color: #fff;
  background: var(--nexus-blue-700);  /* 활성 그룹 = 테마 메인색 강조 */
  font-weight: 600;
}

/* 헤더 네비 모바일: 좁은 화면에서 가로 스크롤(넘침 방지) */
@media (max-width: 768px) {
  .nexus-header-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nexus-header-nav::-webkit-scrollbar { display: none; }
  .nexus-nav-item { white-space: nowrap; }
}

/* ===== 서브탭바 (복수멤버 그룹의 형제 탭 — 인플관리: 발굴/인플DB·일정/정산) ===== */
.nexus-subtabs {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  background: white;
  border-bottom: 1px solid var(--nexus-paper-200);
  padding: 0 var(--space-8);
  flex-shrink: 0;
  position: relative;
  z-index: 40;  /* 헤더(50) 아래, 본문 위 */
  overflow-x: auto;
  scrollbar-width: none;
}
.nexus-subtabs::-webkit-scrollbar { display: none; }
.nexus-subtab {
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  font-weight: 500;
  color: var(--nexus-ink-500);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;  /* 컨테이너 하단 보더와 겹쳐 밑줄 일체화 */
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.nexus-subtab:hover {
  color: var(--nexus-ink-900);
}
.nexus-subtab.is-active {
  color: var(--nexus-blue-700);
  border-bottom-color: var(--nexus-blue-700);
  font-weight: 600;
}

/* ===== 본문 컨테이너 ===== */
.page-body {
  flex: 1;
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8);
}

/* 페이지 헤더 (H1 + 액션) */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--nexus-paper-200);
}
.page-head-title h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--nexus-blue-900);  /* 제목도 테마 색 (테마 진한 메인) */
}
.page-head-title p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--nexus-ink-500);
}
.page-head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ===== 버튼 (mockup .after-btn 톤) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
  background: white;
  color: var(--nexus-ink-900);
  border-color: var(--nexus-paper-300);
}
.btn:hover {
  background: var(--nexus-paper-100);
  border-color: var(--nexus-ink-300);
}
.btn-primary {
  background: var(--nexus-blue-700);
  color: white;
  border-color: var(--nexus-blue-700);
}
.btn-primary:hover {
  background: var(--nexus-blue-900);
  border-color: var(--nexus-blue-900);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--nexus-ink-700);
}
.btn-ghost:hover {
  background: var(--nexus-paper-100);
  color: var(--nexus-ink-900);
}

/* ===== Input ===== */
.input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--nexus-paper-300);
  border-radius: var(--radius-md);
  background: white;
  color: var(--nexus-ink-900);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.input:focus {
  outline: none;
  border-color: var(--nexus-blue-700);
  box-shadow: 0 0 0 3px rgba(46, 67, 116, 0.08);
}
.input::placeholder { color: var(--nexus-ink-300); }

/* ===== Card / Placeholder ===== */
.card {
  background: white;
  border: 1px solid var(--nexus-paper-200);
  border-radius: var(--radius-md);
  padding: 24px;
}

.placeholder {
  background: var(--nexus-paper-50);
  border: 1px dashed var(--nexus-paper-300);
  border-radius: var(--radius-md);
  padding: 48px 32px;
  text-align: center;
  color: var(--nexus-ink-500);
}
.placeholder-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--nexus-ink-700);
  margin-bottom: 6px;
}
.placeholder-hint { font-size: 12.5px; }

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nexus-ink-900);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: 1000;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; }
.toast.is-success { background: var(--nexus-success); }
.toast.is-error   { background: var(--nexus-error); }

/* ===== Utility ===== */
.muted { color: var(--nexus-ink-500); }


/* ==========================================
   캘린더 컨테이너 + FullCalendar 톤 오버라이드 (mockup AFTER)
   ========================================== */
.calendar-shell {
  /* 반투명 흰색 → 뒤 페이지(테마) 배경이 ~28% 비쳐 캘린더가 테마 톤으로 통일.
     불투명도 0.72: 테마 톤은 살리되 텍스트·일정 시인성 유지하는 균형점. */
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--nexus-paper-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calendar-legend {
  display: flex;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--nexus-paper-200);
  background: var(--nexus-paper-50);
  flex-wrap: wrap;
}
.calendar-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--nexus-ink-500);
}
.calendar-legend-bar {
  width: 12px;
  height: 3px;
  border-radius: 1px;
}
/* 범례를 클릭 토글 '칩'으로 — 켜짐/꺼짐이 한눈에 보이도록 */
.calendar-legend-item.is-toggle,
.calendar-legend-item.is-static {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--nexus-paper-200);
  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
}
.calendar-legend-item.is-toggle {
  cursor: pointer;
  user-select: none;
}
/* 켜짐 — 또렷한 글자 + 옅은 배경 */
.calendar-legend-item.is-on {
  background: var(--nexus-paper-50);
  color: var(--nexus-ink-900);
  font-weight: 600;
}
.calendar-legend-item.is-toggle:hover { border-color: var(--nexus-ink-500); }
/* 꺼짐 — 흐리게 + 취소선으로 확실히 구분 */
.calendar-legend-item.is-off {
  opacity: 0.45;
  text-decoration: line-through;
  background: transparent;
}
.calendar-legend-item.is-off .calendar-legend-bar { opacity: 0.4; }
.calendar-legend-check {
  display: inline-block;
  width: 9px;
  font-size: 10px;
  line-height: 1;
  color: var(--nexus-ink-900);
}
/* 공휴일 '항상' 배지 */
.calendar-legend-always {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(178, 58, 58, 0.12);
  color: #8A2C2C;
}

#calendarRoot { font-family: var(--font-body); }
#calendarRoot .fc {
  font-family: var(--font-body);
  font-size: 13px;
}
#calendarRoot .fc-toolbar {
  padding: 16px 20px;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--nexus-paper-200);
}
#calendarRoot .fc-toolbar-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--nexus-ink-900);
  letter-spacing: -0.02em;
}
/* 좌측 prev/next/today */
#calendarRoot .fc-prev-button,
#calendarRoot .fc-next-button,
#calendarRoot .fc-today-button {
  background: white !important;
  color: var(--nexus-ink-700) !important;
  border: 1px solid var(--nexus-paper-300) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  text-transform: none !important;
  box-shadow: none !important;
}
#calendarRoot .fc-prev-button:hover,
#calendarRoot .fc-next-button:hover,
#calendarRoot .fc-today-button:hover {
  background: var(--nexus-paper-100) !important;
  border-color: var(--nexus-ink-300) !important;
}
/* 우측 뷰 토글 (월·주·목록) — 회색 배경 + 흰 active 알약 */
#calendarRoot .fc-button-group {
  background: var(--nexus-paper-100);
  padding: 2px;
  border-radius: var(--radius-md);
  gap: 0;
}
#calendarRoot .fc-button-group .fc-button {
  background: transparent !important;
  color: var(--nexus-ink-500) !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 !important;
  box-shadow: none !important;
}
#calendarRoot .fc-button-group .fc-button:hover {
  color: var(--nexus-ink-900) !important;
}
#calendarRoot .fc-button-group .fc-button-active {
  background: white !important;
  color: var(--nexus-ink-900) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 요일 헤더 */
#calendarRoot .fc-col-header-cell {
  background: white;
  border-color: var(--nexus-paper-200) !important;
}
#calendarRoot .fc-col-header-cell-cushion {
  padding: 10px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--nexus-ink-500) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 그리드 셀 */
#calendarRoot .fc-daygrid-day { border-color: var(--nexus-paper-200) !important; }
#calendarRoot .fc-scrollgrid { border-color: var(--nexus-paper-200) !important; }
#calendarRoot .fc-scrollgrid-section > * { border-color: var(--nexus-paper-200) !important; }
#calendarRoot .fc-day-other { background: transparent; }  /* 다른 달도 동일 배경으로 통일 (날짜 숫자 흐림으로만 구분) */
#calendarRoot .fc-day-other .fc-daygrid-day-number { color: var(--nexus-ink-300); }
#calendarRoot .fc-day-today { background: var(--nexus-blue-50) !important; }
#calendarRoot .fc-day-today .fc-daygrid-day-number {
  color: var(--nexus-blue-700);
  font-weight: 700;
}
#calendarRoot .fc-daygrid-day-number {
  font-size: 13px;
  color: var(--nexus-ink-700);
  font-weight: 500;
  padding: 6px 8px !important;
}

/* 이벤트 — 가이드 §9.9 .event.cat-* 톤 (왼쪽 띠 + 흰 배경)
   JS의 eventClassNames가 .fc-event에 .event 클래스 같이 부여.
   FullCalendar 기본 색채움/보더만 제거하고, .event 스타일이 그대로 살아나게 한다. */
#calendarRoot .fc-event {
  margin: 1px 4px;
  cursor: pointer;
}

/* 카테고리간 가시성 강화 — 가이드 §9.9 베이스 위에 농도 약간 올림 */
#calendarRoot .event {
  border-left-width: 4px;
  font-weight: 500;
}
#calendarRoot .event.cat-influencer {
  background: rgba(46, 67, 116, 0.07);
  color: var(--nexus-blue-900);
}
#calendarRoot .event.cat-holiday-kr {
  background: rgba(178, 58, 58, 0.10);
  color: #8A2C2C;
}
#calendarRoot .event.cat-holiday-cn {
  background: rgba(184, 116, 28, 0.10);
  color: #8C5814;
}
#calendarRoot .event.cat-delivery {
  background: rgba(45, 122, 79, 0.10);
  color: #1F5634;
}
#calendarRoot .event.cat-meeting {
  background: rgba(45, 122, 79, 0.12);
  color: #1E5236;
  border-left-color: #2D7A4F;
}
/* 인사일정 — 보라 (급여·휴가·안내) */
#calendarRoot .event.cat-hr {
  background: rgba(124, 58, 237, 0.10);
  color: #5B21B6;
  border-left-color: #7C3AED;
}
/* 분류 안 된 일정 — 테마 메인색 톤 (회색으로 안 먹히게) */
#calendarRoot .event.cat-default {
  background: var(--nexus-blue-50);
  color: var(--nexus-blue-900);
  border-left-color: var(--nexus-blue-700);
}
/* FullCalendar 기본 dot/time 마커 숨김 (텍스트만 표시) */
#calendarRoot .fc-daygrid-event-dot { display: none; }
#calendarRoot .fc-event-time { display: none; }
#calendarRoot .fc-event-title-container { min-width: 0; }
#calendarRoot .fc-event-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
/* .event 클래스가 display:flex 라서 .fc-event-main도 flex 자식으로 truncate */
#calendarRoot .fc-event-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: inherit;
}


/* ==========================================
   모달 (사이드 패널 — 일정 상세/편집)
   ========================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.40);
}
.modal-panel { justify-content: flex-end; align-items: stretch; }
.modal-panel .panel-content {
  position: relative;
  background: white;
  width: 520px;
  max-width: 90vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.16);
  animation: slide-in-right 200ms var(--ease-out);
}
@keyframes slide-in-right {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--nexus-paper-200);
}
.panel-title-input {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  color: var(--nexus-ink-900);
  border: none;
  background: transparent;
  padding: 4px 0;
  font-family: inherit;
  letter-spacing: -0.02em;
  outline: none;
}
.panel-title-input:focus { border-bottom: 2px solid var(--nexus-blue-700); }
.modal-close {
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--nexus-ink-500);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.modal-close:hover { background: var(--nexus-paper-100); color: var(--nexus-ink-900); }
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 24px;
}
.panel-props { display: flex; flex-direction: column; gap: 2px; }
.prop-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 4px 8px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background var(--duration-fast) var(--ease-out);
  min-height: 30px;
}
.prop-row:hover { background: var(--nexus-paper-50); }
.prop-label {
  font-size: 12.5px;
  color: var(--nexus-ink-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.prop-icon {
  font-size: 12px;
  width: 16px;
  text-align: center;
  color: var(--nexus-ink-300);
  flex-shrink: 0;
}
.prop-value-readonly {
  padding: 4px 6px;
  color: var(--nexus-ink-300);
  font-size: 13px;
}
.prop-value-readonly.has-value { color: var(--nexus-ink-900); }
.prop-input, .prop-select, .prop-textarea {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  background: transparent;
  color: var(--nexus-ink-900);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.prop-input:hover, .prop-select:hover, .prop-textarea:hover { background: var(--nexus-paper-100); }
.prop-input:focus, .prop-select:focus, .prop-textarea:focus {
  outline: none;
  background: white;
  border-color: var(--nexus-blue-700);
}
.prop-input::placeholder { color: var(--nexus-ink-300); }
.prop-date-range { display: flex; align-items: center; gap: 4px; }
.prop-date-range .prop-input { flex: 1; min-width: 0; }
.prop-date-range .dash { color: var(--nexus-ink-300); font-size: 12px; }
.prop-row input[type="checkbox"] { margin-left: 6px; width: 16px; height: 16px; }
.panel-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-top: 1px solid var(--nexus-paper-200);
  background: var(--nexus-paper-50);
}
.panel-footer-link {
  font-size: 13px;
  color: var(--nexus-blue-700);
  text-decoration: none;
}
.panel-footer-link:hover { text-decoration: underline; }


/* ==========================================================================
   NEXUS 전역 컴포넌트 (.nx-*) — 정본 NEXUS_DESIGN_SYSTEM.md §4 1:1 구현
   ==========================================================================
   "어느 모듈을 들어가도 똑같은 디자인" — 모든 모듈은 자체 <style>·토큰 없이
   아래 클래스만 조합해 쓴다. 클래스명은 하위 템플릿 호환을 위해 유지하되
   값은 정본 디자인(Deep Blue #123499 + Soft Beige)으로 교체했다.
   금지(정본 §7): box-shadow(hover 포커스링 제외)·배경 그라디언트·weight 500/800.
   사용 가이드: docs/DESIGN_STANDARD.md
   ========================================================================== */

/* ==========================================
   레이아웃 셸 — 사이드바 + 메인 (정본 §1, §4.2/4.3)
   ========================================== */
.nx-shell {
  display: flex;
  min-height: 100vh;
  background: var(--nx-bg-page);
}

/* ----- 사이드바 (Deep Blue, 흰 글자 투명도) -----
   가시성 우선(사장님 요청): 너비 220px. 콘텐츠 높이와 무관하게 항상 전체가 보이도록
   화면에 고정(sticky, 100vh) → 짧은 페이지에서도 하단 유저영역이 잘리지 않는다(버그A 근본해결). */
.nx-sidebar {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--nova-primary);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
}
.nx-sidebar-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nx-sidebar-brand-mark {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.nx-sidebar-brand-mark { color: rgba(255, 255, 255, 0.55); }  /* 가시성: 0.45 → 0.55 */
.nx-sidebar-brand-name {
  font-size: 16px;  /* 가시성: 15 → 16 */
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
/* 사이드바 네비: 그룹들을 항상 단일 칼럼으로 세로 적층.
   (전역 `nav { display:flex }` 같은 규칙이 가로 배치로 새지 않게 명시 고정) */
.nx-sidebar-nav {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.nx-sidebar-group { padding: 6px 0; }
.nx-sidebar-group + .nx-sidebar-group {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
}
/* 시스템 그룹은 정본 §4.2대로 주요 메뉴 바로 아래(구분선 분리). 하단 고정 안 함. */
.nx-sidebar-group-label {
  padding: 6px 16px;
  font-size: 10.5px;  /* 가시성: 10 → 10.5 */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);  /* 가시성: 0.35 → 0.42 */
}

/* 가시성 우선: 글자 13.5px, 기본 대비 0.62, hover/active 대비 상향 */
.nx-sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.nx-sidebar-item:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.09);
}
.nx-sidebar-item.is-active {
  color: #fff;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border-left-color: rgba(255, 255, 255, 0.80);
  padding-left: 14px;  /* 16 - 2px 보더 보정 */
}
.nx-sidebar-item .nx-ico { flex-shrink: 0; font-size: 17px; line-height: 1; }

/* 유저 영역 = 사이드바 맨 밑 고정(정본 §4.2). margin-top:auto 로 빈 공간을 위로 밀어
   항상 바닥에 둔다. (admin 은 클릭 시 관리자 진입) */
.nx-sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}
.nx-sidebar-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.nx-sidebar-user-name { color: #fff; font-weight: 600; }
.nx-sidebar-user-sub { color: rgba(255, 255, 255, 0.45); font-size: 11px; }
/* admin: 하단 유저 영역 전체가 관리자 진입 링크(호버 표시로 클릭 가능 시그널) */
.nx-sidebar-user.is-admin-link { cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.nx-sidebar-user.is-admin-link:hover { background: rgba(255, 255, 255, 0.07); }

/* ----- 메인 영역 ----- */
.nx-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--nx-bg-page);
}

/* ----- 탑바 (42px, White, 하단 border) + 서브탭 (정본 §4.3) ----- */
.nx-topbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 42px;
  padding: 0 22px;
  flex-shrink: 0;
  background: var(--nx-bg-card);
  border-bottom: 1px solid var(--nx-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.nx-topbar::-webkit-scrollbar { display: none; }
.nx-subtab {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--nx-text-muted);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.nx-subtab:hover { color: var(--nx-text-2); }
.nx-subtab.is-active {
  color: var(--nova-primary);
  background: var(--nova-primary-light);
  font-weight: 600;
}

/* ----- 콘텐츠 영역 (패딩 26 / 28 / 36) -----
   모든 모듈 공통: 메인 영역 좌측 상단 정렬. 콘텐츠를 가운데로 몰지 않는다
   (max-width+margin:auto 금지). 정렬은 가이드 §6 패딩만으로 결정된다. */
.nx-content {
  flex: 1;
  min-width: 0;
  padding: var(--nx-pad-content);
  margin: 0;          /* 중앙 정렬(auto) 차단 */
  text-align: left;   /* 상위에서 새어든 center 정렬 차단 */
}

/* 햄버거 버튼 / 메뉴 오버레이 — 데스크탑에선 숨김(모바일 @media 에서만 노출) */
.nx-navbtn { display: none; }
.nx-nav-overlay { display: none; }

@media (max-width: 768px) {
  /* 모바일: 사이드바를 화면 밖으로 빼고 햄버거(☰)로 슬라이드인.
     데스크탑(>768px)은 위 .nx-shell/.nx-sidebar 기본값 그대로라 영향 없음. */
  .nx-navbtn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-right: 6px; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    color: var(--nx-text); font-size: 21px; line-height: 1; padding: 0;
  }
  .nx-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 250px; max-width: 82vw;
    z-index: 1500; transform: translateX(-100%);
    transition: transform var(--duration-base, .24s) var(--ease-out, ease);
    overflow-y: auto;
  }
  .nx-shell.nav-open .nx-sidebar { transform: translateX(0); }
  .nx-nav-overlay {
    display: block; position: fixed; inset: 0; background: rgba(20, 24, 40, 0.42);
    z-index: 1490; opacity: 0; visibility: hidden;
    transition: opacity var(--duration-fast, .2s) var(--ease-out, ease),
                visibility var(--duration-fast, .2s) var(--ease-out, ease);
  }
  .nx-shell.nav-open .nx-nav-overlay { opacity: 1; visibility: visible; }
  /* 모바일 콘텐츠·탑바 여백 축소(좁은 화면에서 가로 넘침 방지) */
  .nx-content { padding: 16px 14px; }
  .nx-topbar { padding: 0 12px; }
  /* 페이지 헤더: 제목 위 / 액션 버튼은 아래로 줄바꿈 (좁은 화면에서 제목 짜부라짐 방지) */
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head-actions { flex-wrap: wrap; }
  .page-head-title h1 { font-size: 20px; }
}

/* ==========================================
   히어로 카드 (Deep Blue + 서클 패턴 장식) — 정본 §4.4
   ========================================== */
.nx-hero {
  position: relative;
  overflow: hidden;
  background: var(--nova-primary);
  color: #fff;
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-pad-hero);
  margin-bottom: 14px;
}
/* 브랜드 서클 패턴 — 장식용 (그라디언트 아님, 정본 §7 허용) */
.nx-hero::before,
.nx-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.nx-hero::before {
  top: -32px; right: -20px;
  width: 160px; height: 160px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.nx-hero::after {
  top: -10px; right: 20px;
  width: 100px; height: 100px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.nx-hero > * { position: relative; }
.nx-hero-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}
.nx-hero-amount {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.nx-hero-amount .nx-hero-unit {
  font-size: 16px;
  font-weight: 400;
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.4);
}
.nx-hero-sub {
  font-size: 11.5px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.35);
}
.nx-hero-sub b {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* ledger 호환: 히어로 내부 분해 표시(브레이크다운) */
.nx-hero-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
}
.nx-hero-breakdown b { color: rgba(255, 255, 255, 0.7); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==========================================
   스탯 카드 (White 0.5px border, hover 포커스링) — 정본 §4.5
   ========================================== */
.nx-stat {
  background: var(--nx-bg-card);
  border: 0.5px solid var(--nx-border);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-pad-card);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.nx-stat:hover {
  border-color: var(--nova-primary-light);
  box-shadow: 0 0 0 3px var(--nova-primary-light);  /* 정본 §7 허용: hover 포커스링 */
}
.nx-stat-label {
  font-size: 10px;
  color: var(--nx-text-muted);
  margin-bottom: 5px;
}
.nx-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-text);
  font-variant-numeric: tabular-nums;
}
.nx-stat.is-negative .nx-stat-value { color: var(--nx-negative); }
.nx-stat.is-positive .nx-stat-value { color: var(--nx-positive); }
/* ledger 호환: is-info(연한 면) / is-neutral(중립 숫자색) */
.nx-stat.is-info { background: var(--nx-bg-table-header); }
.nx-stat-value.is-neutral { color: var(--nx-text); }
.nx-stat-hint {
  font-size: 10px;
  color: #D0CEC9;
  margin-top: 2px;
}
/* 스탯 카드 그리드 컨테이너 */
.nx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--nx-gap-card);
  margin-bottom: 4px;
}

/* ==========================================
   카드 / 그리드 — 정본 §6
   ========================================== */
.nx-card {
  background: var(--nx-bg-card);
  border: 0.5px solid var(--nx-border);
  border-radius: var(--nx-radius-md);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.nx-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nx-gap-card);
  margin-bottom: 14px;
}
/* ledger 호환: 미니 카드 */
.nx-mini-card {
  background: var(--nx-bg-card);
  border: 0.5px solid var(--nx-border);
  border-radius: var(--nx-radius-md);
  padding: 14px 16px;
}
.nx-mini-card .nx-mini-name { font-size: 12.5px; color: var(--color-text-secondary); font-weight: 600; }
.nx-mini-card .nx-mini-amount {
  font-size: 17px; color: var(--nx-text); font-weight: 700; margin-top: 5px;
  letter-spacing: -0.015em; font-variant-numeric: tabular-nums;
}
.nx-mini-card .nx-mini-sub { font-size: 11.5px; color: var(--color-text-secondary); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .nx-card-grid { grid-template-columns: 1fr; } }

/* ==========================================
   금액 텍스트 유틸 (정본 §3) — tabular-nums + 입출금 색
   ========================================== */
.nx-amount {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.nx-amount.is-out { color: var(--nx-negative); }
.nx-amount.is-in  { color: var(--nx-positive); }

/* ==========================================
   버튼 (.nx-btn) — 정본 §4.6 (primary / ghost)
   ========================================== */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--nx-radius-sm);
  border: 0.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.nx-btn.is-primary {
  background: var(--nova-primary);
  color: #fff;
}
.nx-btn.is-primary:hover { background: var(--nova-primary-dark); }
.nx-btn.is-ghost {
  background: var(--nx-bg-card);
  color: var(--nx-text-2);
  border-color: var(--nx-border);
}
.nx-btn.is-ghost:hover { border-color: var(--nx-text-muted); }
.nx-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ledger 호환: 알약 액션 버튼 (.nx-btn-pill) — 같은 룩을 더 둥근 알약으로 */
.nx-btn-pill {
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 9999px;
  border: 0.5px solid var(--nova-primary);
  background: var(--nova-primary);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.nx-btn-pill:hover { background: var(--nova-primary-dark); border-color: var(--nova-primary-dark); }
.nx-btn-pill.is-outline {
  background: var(--nx-bg-card);
  color: var(--nova-primary);
  border-color: var(--nx-border);
}
.nx-btn-pill.is-outline:hover { background: var(--nova-primary-light); border-color: var(--nova-primary-light); }

/* ==========================================
   인풋 / 셀렉트 (.nx-input / .nx-select)
   ========================================== */
.nx-input,
.nx-select {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--nx-text);
  background: var(--nx-bg-card);
  border: 0.5px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.nx-input:hover, .nx-select:hover { border-color: var(--nx-text-muted); }
.nx-input:focus, .nx-select:focus {
  outline: none;
  border-color: var(--nova-primary);
  box-shadow: 0 0 0 3px var(--nova-primary-light);  /* 정본 §7 허용: 포커스링 */
}
.nx-input::placeholder { color: var(--nx-text-muted); }

/* ==========================================
   배지 (.nx-badge) — 정본 톤(연한 Deep Blue 칩)
   ========================================== */
.nx-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--nx-radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--nova-primary-light);
  color: var(--nova-primary);
}
.nx-badge.is-green { background: rgba(42, 122, 78, 0.10); color: var(--nx-positive); }
.nx-badge.is-muted { background: var(--nx-bg-table-header); color: var(--nx-text-muted); font-weight: 400; }

/* ==========================================
   테이블 (.nx-table / .nx-table-wrap) — 정본 §4.7
   ========================================== */
.nx-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--nx-bg-card);
  font-size: 12.5px;
}
.nx-table thead th {
  text-align: left;
  padding: 9px 14px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nx-text-muted);
  background: var(--nx-bg-table-header);
  border-bottom: 0.5px solid var(--nx-border);
  position: sticky;
  top: 0;
}
.nx-table thead th.num { text-align: right; }
.nx-table tbody td {
  padding: 9px 14px;
  color: var(--nx-text-2);
  border-bottom: 0.5px solid var(--nx-border-row);
}
.nx-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.nx-table tbody tr { cursor: pointer; transition: background 0.1s; }
.nx-table tbody tr:hover td { background: var(--nx-bg-table-header); }
.nx-table tbody tr:last-child td { border-bottom: none; }
.nx-table-wrap { max-height: 620px; overflow-y: auto; }

/* ==========================================
   알약 탭 (.nx-tabs / .nx-tab) — 화면(pane) 전환용
   탑바 서브탭(.nx-subtab)과 별개. 콘텐츠 영역 내부 큰 탭.
   ========================================== */
.nx-tabs {
  display: flex;
  gap: 6px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.nx-tab {
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 9999px;
  border: 0.5px solid var(--nx-border);
  background: var(--nx-bg-card);
  color: var(--nx-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.nx-tab:hover { color: var(--nx-text-2); }
.nx-tab.is-active {
  background: var(--nova-primary);
  color: #fff;
  border-color: var(--nova-primary);
}

/* ==========================================
   ledger 호환 잔여 컴포넌트 — 정본 토큰으로 재매핑
   ========================================== */
/* 합산잔액 라인 (.nx-total) */
.nx-total { font-size: 12.5px; color: var(--nx-text-muted); font-weight: 600; margin-bottom: 14px; }
.nx-total b {
  display: block; font-size: 30px; color: var(--nova-primary); font-weight: 700;
  letter-spacing: -0.03em; margin-top: 3px; font-variant-numeric: tabular-nums;
}
/* 계좌 칩 (.nx-chip) */
.nx-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 13px; border: 0.5px solid var(--nx-border); border-radius: var(--nx-radius-lg);
  font-size: 12px; color: var(--nx-text-muted); font-weight: 600;
}
.nx-chip b { color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-chip.is-total { background: var(--nova-primary); color: #fff; border-color: var(--nova-primary); }
.nx-chip.is-total b { color: #fff; }
/* 진행 막대 (.nx-bar-*) */
.nx-bar-row {
  display: grid; grid-template-columns: 130px 1fr 130px;
  align-items: center; gap: 12px; margin-bottom: 11px;
}
.nx-bar-track { height: 12px; background: var(--nx-bg-table-header); border-radius: 6px; overflow: hidden; }
.nx-bar-fill { height: 100%; border-radius: 6px; background: var(--nova-primary); }