/* ============================================================================
   SANJUNMO BACKOFFICE v8.4 FINAL — COMMON DESIGN SYSTEM & LAYOUT LOCK
   파일명: common-v84.css
   역할: 전 화면 공통 변수, 좌측 고정 SNB(#v4-master-snb), 상단 바(v4-gen3-topbar),
         본문 여백 평탄화(#v4-root-shell) 및 공통 카드·버튼·배지·테이블 스타일 통합
   ============================================================================ */

/* Pretendard — 레포 내 로컬 폰트 (CDN 미사용, file:// 대응) */
@font-face { font-family: "Pretendard Variable"; src: url("fonts/PretendardVariable.woff2") format("woff2-variations"), url("fonts/PretendardVariable.woff2") format("woff2"); font-weight: 45 920; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("fonts/PretendardVariable.woff2") format("woff2-variations"), url("fonts/PretendardVariable.woff2") format("woff2"); font-weight: 45 920; font-style: normal; font-display: swap; }

:root {
  --navy-950: #0B1120;
  --navy-900: #0F172A;
  --navy-800: #1E293B;
  --navy-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50: #F8FAFC;
  --white: #FFFFFF;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-soft: #EFF6FF;
  --primary-light: #EFF6FF;
  --primary-border: #BFDBFE;
  --emerald: #059669;
  --emerald-soft: #ECFDF5;
  --emerald-border: #A7F3D0;
  --amber: #D97706;
  --amber-soft: #FFFBEB;
  --amber-border: #FDE68A;
  --rose: #E11D48;
  --rose-soft: #FFF1F2;
  --rose-border: #FECDD3;
  --violet: #7C3AED;
  --violet-soft: #F5F3FF;
  --violet-border: #DDD6FE;
  --snb-width: 260px;
  --topbar-height: 60px;
}

html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  background-color: #F8FAFC !important;
  color: #0F172A;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 13px;
  line-height: 1.5;
  display: block !important;
  -webkit-font-smoothing: antialiased;
}

/* 구버전 잔재 사이드바 및 중복 헤더 숨김 */
aside.v4-master-snb:not(#v4-master-snb),
aside.snb, nav.snb, .snb:not(#v4-master-snb), .sidebar, #sidebar,
.page-top-banner, .wb-header, .wireframe-banner, .legacy-top-banner,
#v4-page-body .topbar {
  display: none !important;
}

/* ============================================================================
   1. 좌측 고정 마스터 SNB (#v4-master-snb) — 전 화면 1px 오차 없는 고정 규격
   ============================================================================ */
#v4-master-snb {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100vh !important;
  background: #0F172A !important;
  color: #F8FAFC !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 9999 !important;
  border-right: 1px solid #1E293B !important;
  user-select: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  line-height: 18px !important;
}
#v4-master-snb * {
  box-sizing: border-box !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.01em !important;
}
#v4-master-snb .snb-brand {
  margin: 0 !important;
  padding: 18px 18px 14px 18px !important;
  border-bottom: 1px solid #1E293B !important;
  flex: 0 0 auto !important;
  height: 71px !important;
  cursor: pointer !important;
}
#v4-master-snb .snb-brand-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 4px 0 !important;
  height: 20px !important;
}
#v4-master-snb .snb-brand-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
#v4-master-snb .snb-brand-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #3B82F6 !important;
  display: inline-block !important;
}
#v4-master-snb .snb-version-pill {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(59, 130, 246, 0.18) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  line-height: 14px !important;
}
#v4-master-snb .snb-brand-sub {
  font-size: 11px !important;
  color: #64748B !important;
  font-weight: 500 !important;
  line-height: 15px !important;
}
#v4-master-snb .snb-scroll-area {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px 10px 20px 10px !important;
}
#v4-master-snb .snb-scroll-area::-webkit-scrollbar { width: 5px !important; }
#v4-master-snb .snb-scroll-area::-webkit-scrollbar-track { background: #0F172A !important; }
#v4-master-snb .snb-scroll-area::-webkit-scrollbar-thumb { background: #334155 !important; border-radius: 3px !important; }

#v4-master-snb .snb-group {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}
#v4-master-snb .snb-group-title {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #64748B !important;
  margin: 0 0 5px 0 !important;
  padding: 0 8px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  line-height: 16px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  display: block !important;
}
#v4-master-snb .snb-item-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
#v4-master-snb .snb-item,
#v4-master-snb a.snb-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  text-decoration: none !important;
  color: #CBD5E1 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  transition: background 0.12s, color 0.12s !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
#v4-master-snb .snb-item:hover {
  background: #1E293B !important;
  color: #FFFFFF !important;
}
#v4-master-snb .snb-item.active {
  background: #2563EB !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}
#v4-master-snb .snb-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 0 5px !important;
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 4px !important;
  background: rgba(148, 163, 184, 0.14) !important;
  color: #94A3B8 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
}
#v4-master-snb .snb-item.active .snb-code {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}
#v4-master-snb .snb-label {
  flex: 1 1 auto !important;
  height: 18px !important;
  line-height: 18px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#v4-master-snb .snb-footer {
  padding: 0 16px !important;
  height: 36px !important;
  border-top: 1px solid #1E293B !important;
  font-size: 10.5px !important;
  line-height: 36px !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ============================================================================
   2. 본문 루트 쉘 (#v4-root-shell) 및 3가지 스타일 그룹 여백 평탄화
   ============================================================================ */
#v4-root-shell {
  margin-left: 260px !important;
  width: calc(100% - 260px) !important;
  max-width: calc(100% - 260px) !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: #F8FAFC !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

#v4-page-body {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #F8FAFC !important;
  flex: 1 1 auto !important;
}

#v4-root-shell .layout,
#v4-root-shell .app-layout,
#v4-root-shell .app-shell {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

#v4-root-shell main.content,
#v4-root-shell .content,
#v4-root-shell main.main-container,
#v4-root-shell .main-container,
#v4-root-shell main.page-container,
#v4-root-shell .page-container,
#v4-root-shell main.main,
#v4-root-shell .layout > .main,
#v4-root-shell .app-layout > .main,
#v4-page-body > .main {
  padding: 22px 28px 96px 28px !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#v4-root-shell main.main:has(> .content),
#v4-page-body > .main:has(> .content),
#v4-root-shell .content .main {
  padding: 0 !important;
}

.savebar, .footer-bar {
  left: 260px !important;
  width: calc(100% - 260px) !important;
  z-index: 800 !important;
}

/* ============================================================================
   3. 3세대 표준 상단 Top Bar (header.top-bar.v4-gen3-topbar)
   ============================================================================ */
header.top-bar.v4-gen3-topbar {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  width: 100% !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 0 28px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
  box-sizing: border-box !important;
}
header.top-bar.v4-gen3-topbar .top-bar-left,
header.top-bar.v4-gen3-topbar .topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
header.top-bar.v4-gen3-topbar .crumb-group {
  font-size: 12px !important;
  color: #64748B !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
header.top-bar.v4-gen3-topbar .crumb-sep {
  color: #CBD5E1 !important;
  font-size: 12px !important;
}
header.top-bar.v4-gen3-topbar .crumb-code,
header.top-bar.v4-gen3-topbar .screen-id-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  white-space: nowrap !important;
}
header.top-bar.v4-gen3-topbar .crumb-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}
header.top-bar.v4-gen3-topbar .top-bar-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
header.top-bar.v4-gen3-topbar .subview-switcher {
  display: inline-flex !important;
  background: #F1F5F9 !important;
  padding: 3px !important;
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  gap: 2px !important;
}
header.top-bar.v4-gen3-topbar .subview-btn {
  border: none !important;
  background: transparent !important;
  padding: 5px 11px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
header.top-bar.v4-gen3-topbar .subview-btn.active {
  background: #FFFFFF !important;
  color: #1D4ED8 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
header.top-bar.v4-gen3-topbar .subview-btn .code-pill,
header.top-bar.v4-gen3-topbar .subview-btn .code-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  background: #E2E8F0 !important;
  color: #475569 !important;
}
header.top-bar.v4-gen3-topbar .subview-btn.active .code-pill,
header.top-bar.v4-gen3-topbar .subview-btn.active .code-tag {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}

/* ==========================================================================
   4. 전 화면 공통 스코어 카드 (.kpi-grid / .kpi-card / .k-title / .k-num / .k-sub)
      - button/div 태그 무관 100% 좌측 정렬 통일
      - 배지(1층) / 타이틀(2층) / 숫자(3층) / 보조설명(4층) 단독 라인 분리 및 Y축 고정
   ========================================================================== */
#v4-page-body .kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  align-items: stretch !important;
}

#v4-page-body .kpi-card,
#v4-page-body button.kpi-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  text-align: left !important;
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.15s ease !important;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: pointer;
}

#v4-page-body .kpi-card:hover {
  border-color: #CBD5E1 !important;
  transform: translateY(-1px);
}

#v4-page-body .kpi-card.active {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14) !important;
  background: #F8FAFC !important;
}

/* 1층(참조 배지) + 2층(타이틀) 고정 높이 컨테이너: 배지 유무와 무관하게 숫자(3층)의 Y축 위치를 통일 */
#v4-page-body .kpi-card .k-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  min-height: 38px !important;
  margin: 0 0 6px 0 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  width: 100% !important;
}

/* 배지가 있을 때는 배지(2번째 span)를 1층(위)으로 올리고, 타이틀(1번째 span)을 2층(아래) 단독 라인으로 배치 */
#v4-page-body .kpi-card .k-title > span:first-child {
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

/* 1층: 화면코드 / 조항 / 상태 미니 캡션 배지 (설계 참조용이므로 작고 차분하게) */
#v4-page-body .kpi-card .k-title > .badge,
#v4-page-body .kpi-card .k-title > .chip {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
   align-self: flex-start !important;
  height: 17px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  border: 1px solid #E2E8F0 !important;
  line-height: 1 !important;
}

/* 3층: 메인 숫자 (Pretendard 고딕 22px Bold, 모든 카드에서 동일한 Y축 수평선) */
#v4-page-body .kpi-card .k-num {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0F172A;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  margin: 0 0 6px 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#v4-page-body .kpi-card .k-num.neg { color: #DC2626 !important; }
#v4-page-body .kpi-card .k-num.pos { color: #16A34A !important; }

/* 4층: 하단 보조 설명 (1줄 고정) */
#v4-page-body .kpi-card .k-sub {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ==========================================================================
   5. 워크플로우 4단계 신호등 (.step-banner-grid / .step-node) 통일 규격
      - 1층: 신호등 상태 배지 (.step-light)
      - 2층: 단계 타이틀 (.step-num) 단독 라인
      - 3층: 상세 설명 (.step-desc) 및 화면코드 미니 태그
   ========================================================================== */
#v4-page-body .step-banner-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

#v4-page-body .step-node {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.15s ease !important;
  min-height: 108px !important;
}

#v4-page-body .step-node:hover {
  border-color: #94A3B8 !important;
  background: #FFFFFF !important;
  transform: translateY(-1px);
}

#v4-page-body .step-node.current-screen {
  border: 1.5px solid #2563EB !important;
  background: #EFF6FF !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.10) !important;
}

/* 신호등(1층)과 단계명(2층)을 상하 단독 라인으로 분리해 줄바꿈 찌그러짐 방지 */
#v4-page-body .step-node-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  margin-bottom: 6px !important;
}

#v4-page-body .step-node-top .step-light {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#v4-page-body .step-node-top .step-num {
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#v4-page-body .step-node .step-desc {
  font-size: 11.5px !important;
  color: #475569 !important;
  line-height: 1.45 !important;
  word-break: keep-all !important;
}

#v4-page-body .step-node .step-desc code {
  display: inline-block !important;
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  background: #E2E8F0 !important;
  color: #475569 !important;
  margin-right: 3px !important;
}

/* ==========================================================================
   6. 상단 바(Topbar) 화면코드 배지 축소 및 타이틀 간격 정리
   ========================================================================== */
header.top-bar.v4-gen3-topbar .crumb-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

header.top-bar.v4-gen3-topbar .crumb-code {
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  border: 1px solid #E2E8F0 !important;
  letter-spacing: 0 !important;
}

header.top-bar.v4-gen3-topbar .crumb-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
}


/* SNB 브랜드 로고 (img/sjm_logo-horizontal-white.png) */
#v4-master-snb .snb-brand-logo { height: 17px !important; width: auto !important; display: block !important; }


/* === [TYPOGRAPHY-PRETENDARD-UNIFICATION-LOCK] === */
:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
  --mono: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
  --font-mono: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
}

/* 1. 모든 텍스트·폼 컨트롤·테이블·모달 요소에 Pretendard 강제 상속 (시스템 기본 굴림/바탕 원천 차단) */
html, body,
button, input, select, textarea, optgroup, option,
table, thead, tbody, tfoot, tr, th, td,
div, span, p, a, li, dl, dt, dd, label, strong, b, em, small,
h1, h2, h3, h4, h5, h6 {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 2. 코드·식별자·금액·모노 클래스: 굴림체(monospace 한글 폴백) 대신 Pretendard + 등폭 숫자(tabular-nums) 적용 */
code, pre, kbd, samp,
.mono, .num, .k-num,
.code, .code-pill, .code-badge, .code-tag, .crumb-code, .nav-code, .screen-id-badge,
[style*="monospace"] {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}


/* === [GLOBAL-PRETENDARD-FONT-LOCK: NO-BROWSER-MONOSPACE] === */
:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
  --mono: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
  --font-mono: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
}
*, *::before, *::after,
html, body,
code, pre, kbd, samp, tt, var,
button, input, select, textarea, optgroup, option,
table, thead, tbody, tfoot, tr, th, td,
.code, .code-pill, .code-badge, .code-tag, .crumb-code, .nav-code, .snb-code, .screen-id-badge, .mono, .num, .k-num {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
code, pre, kbd, samp,
.code, .code-pill, .code-badge, .code-tag, .crumb-code, .nav-code, .snb-code, .screen-id-badge, .mono, .num, .k-num {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}


/* === [UI-HOTFIX-V84-LAYOUT-AND-MODAL] === */
/* 1. 상단 Top Bar: 버튼이 많을 때 좌측 타이틀과 절대 겹치지 않도록 높이 자동 확장 및 버튼 컴팩트화 */
header.top-bar.v4-gen3-topbar {
  height: auto !important;
  min-height: 60px !important;
  max-height: none !important;
  padding: 10px 24px !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
}
header.top-bar.v4-gen3-topbar .top-bar-left,
header.top-bar.v4-gen3-topbar .topbar-left {
  flex: 1 1 280px !important;
  min-width: 240px !important;
  overflow: hidden !important;
}
header.top-bar.v4-gen3-topbar .top-bar-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  flex: 0 1 auto !important;
}
header.top-bar.v4-gen3-topbar .top-bar-right .btn,
header.top-bar.v4-gen3-topbar .top-bar-right .select {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* 2. KPI 스코어카드: 22px 큰 숫자(괄호·쉼표 포함) 및 보조 텍스트 하단 잘림(clipping) 완전 방지 */
#v4-page-body .kpi-card,
#v4-page-body button.kpi-card {
  height: auto !important;
  min-height: 112px !important;
  overflow: visible !important;
  padding: 15px 16px !important;
}
#v4-page-body .kpi-card .k-num {
  line-height: 1.38 !important;
  padding-bottom: 2px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
}
#v4-page-body .kpi-card .k-sub {
  line-height: 1.45 !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* 3. 전 화면 공통 모달 & 정산 P1/S1/S2 모달: 좌측 고정 SNB(260px, z-index:9999)와 절대 겹치지 않도록 우측 본문 영역 중앙 정렬 */
.modal-backdrop,
.p1-modal-backdrop,
.s1-modal-backdrop,
.s2-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(100vw - 260px) !important;
  height: 100vh !important;
  z-index: 10500 !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 파트너 단독 격리 세션(SNB 숨김 상태)일 때는 모달을 전체 화면(left:0, width:100vw) 기준으로 배치 */
body.partner-isolated-mode .modal-backdrop,
body.partner-isolated-mode .p1-modal-backdrop,
body.partner-isolated-mode .s1-modal-backdrop,
body.partner-isolated-mode .s2-modal-backdrop {
  left: 0 !important;
  width: 100vw !important;
}

/* === [MODAL-VISIBILITY-AND-CLOSE-LOCK] === */
.modal-backdrop,
.p1-modal-backdrop,
.s1-modal-backdrop,
.s2-modal-backdrop {
  display: none !important;
}

.modal-backdrop.show,
.modal-backdrop.open,
.modal-backdrop.active,
.p1-modal-backdrop.show,
.p1-modal-backdrop.open,
.p1-modal-backdrop.active,
.s1-modal-backdrop.show,
.s1-modal-backdrop.open,
.s1-modal-backdrop.active,
.s2-modal-backdrop.show,
.s2-modal-backdrop.open,
.s2-modal-backdrop.active,
.modal-backdrop[style*="display: flex"],
.modal-backdrop[style*="display:flex"],
.modal-backdrop[style*="display: block"],
.modal-backdrop[style*="display:block"],
.p1-modal-backdrop[style*="display: flex"],
.p1-modal-backdrop[style*="display:flex"],
.s1-modal-backdrop[style*="display: flex"],
.s1-modal-backdrop[style*="display:flex"],
.s2-modal-backdrop[style*="display: flex"],
.s2-modal-backdrop[style*="display:flex"] {
  display: flex !important;
}

.modal-backdrop.force-closed,
.p1-modal-backdrop.force-closed,
.s1-modal-backdrop.force-closed,
.s2-modal-backdrop.force-closed {
  display: none !important;
}