@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Pacifico&family=Pretendard:wght@300;400;500;600;700;800;900&display=swap');

/* ==========================================================================
[FONT-MALGUN-UNIFICATION: 맑은 고딕 통일 적용 (원복 시 본 주석 블록 참고)]
설명: 시스템 전체 시인성과 가독성을 위해 모든 UI 요소의 글꼴을 'Malgun Gothic'으로 일원화합니다.
원복 시 아래 fallback 폰트 변수를 Pretendard 계열로 전환하십시오.
========================================================================== */
:root {
  --font-family-base: "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: "JetBrains Mono", "Malgun Gothic", "맑은 고딕", monospace;

  --primary-blue: #2563eb;
  --primary-blue-hover: #1d4ed8;
  --primary-blue-light: #eff6ff;
  --cyan-accent: #0891b2;
  --teal-accent: #0d9488;
  --purple-ai: #7c3aed;
  --purple-ai-hover: #6d28d9;
  --purple-ai-light: #f5f3ff;
  /* 4단계 상태 판정 색상 */
  --status-normal: #10b981;
  --status-normal-bg: #ecfdf5;
  --status-caution: #f59e0b;
  --status-caution-bg: #fffbeb;
  --status-critical: #ef4444;
  --status-critical-bg: #fef2f2;
  --status-offline: #64748b;
  --status-offline-bg: #f8fafc;
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --border-color: #e2e8f0;
  --border-dark: #cbd5e1;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-sub: #334155;
  /* 사이드패널 폭 기준 변수 */
  --sidebar-width: 230px;
  --sidebar-collapsed-width: 58px;
}

/* ==========================================================================
1-1. 사이드바 하위 메뉴 우측 정렬 및 아코디언/드로어 최적화
========================================================================== */
#main-sidebar .sidebar-sub-drawer {
  padding-right: 0.5rem !important;
  transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease-in-out;
  overflow: hidden !important;
  font-family: var(--font-family-base) !important;
}
#main-sidebar .sidebar-sub-drawer.closed {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
}
#main-sidebar .sidebar-sub-drawer:not(.closed) {
  display: flex !important;
  flex-direction: column !important;
  max-height: 350px !important;
  opacity: 1 !important;
}
#main-sidebar .sidebar-sub-drawer > button,
#main-sidebar #simulation-hub-wrapper > button {
  justify-content: flex-end !important;
  text-align: right !important;
  gap: 0.35rem !important;
  font-family: var(--font-family-base) !important;
}
#main-sidebar .sidebar-sub-drawer > button > span,
#main-sidebar #simulation-hub-wrapper > button > span {
  text-align: right !important;
  font-family: var(--font-family-base) !important;
}

/* 아코디언 꺾쇠 화살표 회전 기준점 및 트랜지션 교정 */
.sidebar-arrow {
  transform-origin: center center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ==========================================================================
2. 전역 기본 레이아웃 및 맑은 고딕 강제 통일
========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  font-family: var(--font-family-base);
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100dvh;
  font-family: var(--font-family-base) !important;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  color-scheme: light !important;
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea {
  font-family: var(--font-family-base) !important;
}

/* ==========================================================================
3. 좌측 사이드패널 접기/펼치기 및 마우스 오버/터치 임시 확장(Auto-Expand) 기능
========================================================================== */
#main-sidebar {
  width: var(--sidebar-width);
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
  flex-shrink: 0;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  position: relative;
  font-family: var(--font-family-base) !important;
}
.sidebar-menu-icon {
  width: 16px;
  height: 16px;
  transition: none !important;
}

/* 접힌 상태 전용 오버레이 */
#sidebar-collapsed-overlay {
  display: none;
}

@media (min-width: 1024px) {
  #main-sidebar.is-collapsed {
    width: var(--sidebar-collapsed-width) !important;
  }
  
  #main-sidebar.is-collapsed #sidebar-collapsed-overlay {
    display: block !important;
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    cursor: pointer;
    background: transparent;
  }

  #main-sidebar.is-collapsed .sidebar-text,
  #main-sidebar.is-collapsed .sidebar-badge,
  #main-sidebar.is-collapsed .sidebar-header-title,
  #main-sidebar.is-collapsed .sidebar-section-header,
  #main-sidebar.is-collapsed .sidebar-arrow,
  #main-sidebar.is-collapsed .sidebar-sub-drawer,
  #main-sidebar.is-collapsed .tech-support-box {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }
  #main-sidebar.is-collapsed .sidebar-top-header {
    padding: 0.6rem 0.25rem !important;
  }
  #main-sidebar.is-collapsed #sidebar-content {
    padding: 0.35rem 0.2rem !important;
    gap: 0.25rem !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }
  #main-sidebar.is-collapsed #sidebar-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
  #main-sidebar.is-collapsed a,
  #main-sidebar.is-collapsed button.sidebar-menu-btn {
    justify-content: center !important;
    padding: 0.35rem 0.15rem !important;
    height: 36px !important;
    border-radius: 11.5px !important;
    transform: none !important;
  }
  #main-sidebar.is-collapsed .sidebar-icon-wrap {
    margin: 0 auto !important;
    width: 28px !important;
    height: 28px !important;
  }
  #main-sidebar.is-collapsed .sidebar-menu-icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    transform: none !important;
  }
  #main-sidebar.is-collapsed .sidebar-footer-box {
    padding-top: 0.25rem !important;
    gap: 0.25rem !important;
  }
  #main-sidebar.is-collapsed #sidebar-bottom-toggle-btn {
    padding: 0.35rem 0.15rem !important;
    justify-content: center !important;
  }
  #main-sidebar.is-collapsed #sidebar-toggle-icon {
    transform: rotate(180deg);
  }

  /* 접힌 상태에서 마우스 오버 또는 공란 터치로 임시 확장되었을 때 */
  #main-sidebar.is-collapsed:hover,
  #main-sidebar.is-collapsed.is-hover-expanded {
    width: var(--sidebar-width) !important;
    z-index: 100005 !important;
    box-shadow: 15px 0 30px rgba(0, 0, 0, 0.15) !important;
  }

  #main-sidebar.is-collapsed:hover #sidebar-collapsed-overlay,
  #main-sidebar.is-collapsed.is-hover-expanded #sidebar-collapsed-overlay {
    display: none !important;
    pointer-events: none !important;
  }

  #main-sidebar.is-collapsed:hover .sidebar-text,
  #main-sidebar.is-collapsed:hover .sidebar-badge,
  #main-sidebar.is-collapsed:hover .sidebar-header-title,
  #main-sidebar.is-collapsed:hover .sidebar-section-header,
  #main-sidebar.is-collapsed:hover .sidebar-arrow,
  #main-sidebar.is-collapsed:hover .sidebar-sub-drawer,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-text,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-badge,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-header-title,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-section-header,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-arrow,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-sub-drawer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    pointer-events: auto !important;
  }
  #main-sidebar.is-collapsed:hover .sidebar-sub-drawer.closed,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-sub-drawer.closed {
    display: none !important;
  }
  #main-sidebar.is-collapsed:hover .sidebar-sub-drawer:not(.closed),
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-sub-drawer:not(.closed) {
    display: flex !important;
    flex-direction: column !important;
  }
  #main-sidebar.is-collapsed:hover .sidebar-header-title,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-header-title {
    display: block !important;
  }
  #main-sidebar.is-collapsed:hover .sidebar-top-header,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-top-header {
    padding: 0.625rem 0.75rem !important;
    height: 52px !important;
  }
  #main-sidebar.is-collapsed:hover #sidebar-content,
  #main-sidebar.is-collapsed.is-hover-expanded #sidebar-content {
    padding: 0.5rem !important;
    gap: 0 !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }
  #main-sidebar.is-collapsed:hover #sidebar-content::-webkit-scrollbar,
  #main-sidebar.is-collapsed.is-hover-expanded #sidebar-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
  
  #main-sidebar.is-collapsed:hover a,
  #main-sidebar.is-collapsed:hover button.sidebar-menu-btn,
  #main-sidebar.is-collapsed.is-hover-expanded a,
  #main-sidebar.is-collapsed.is-hover-expanded button.sidebar-menu-btn {
    justify-content: flex-start !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    height: 36px !important;
    border-radius: 0.75rem !important;
    transform: none !important;
  }
  #main-sidebar.is-collapsed:hover .sidebar-icon-wrap,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-icon-wrap {
    margin: 0 !important;
    width: 28px !important;
    height: 28px !important;
  }
  #main-sidebar.is-collapsed:hover .sidebar-menu-icon,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-menu-icon {
    width: 16px !important;
    height: 16px !important;
    transform: none !important;
  }

  /* 로그아웃 버튼 정중앙 정렬 유지 */
  #main-sidebar #logout-btn,
  #main-sidebar.is-collapsed:hover #logout-btn,
  #main-sidebar.is-collapsed.is-hover-expanded #logout-btn {
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    height: 32px !important;
  }

  #main-sidebar.is-collapsed:hover #sidebar-bottom-toggle-btn,
  #main-sidebar.is-collapsed.is-hover-expanded #sidebar-bottom-toggle-btn {
    justify-content: center !important;
    padding-left: 0.5rem !important;
  }
  #main-sidebar.is-collapsed:hover #sidebar-toggle-icon,
  #main-sidebar.is-collapsed.is-hover-expanded #sidebar-toggle-icon {
    transform: rotate(0deg);
  }
}

/* ==========================================================================
4. PC / 태블릿 공통 고정 화면 레이아웃 (768px 이상)
========================================================================== */
@media (min-width: 768px) {
  html,
  body {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  #pdf-report-area {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0.5rem !important;
  }

  #dashboard {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: calc(100dvh - 128px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 128px) !important;
    gap: 0.5rem !important;
    overflow: hidden !important;
  }

  #dashboard > div:first-child {
    flex: 0 0 155px !important;
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #dashboard > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    width: 100% !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    gap: 0.5rem !important;
    overflow: hidden !important;
  }

  #dashboard > div:nth-child(2) > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    gap: 0.5rem !important;
  }

  #right-column-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    gap: 0.5rem !important;
  }

  #main-second-row-grid {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #asset-vertical-status-section {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #main-third-row-container {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 185px !important;
    height: 185px !important;
    min-height: 185px !important;
    max-height: 185px !important;
    overflow: hidden !important;
    gap: 0.5rem !important;
  }

  #quick-remote-agent-merged-section {
    flex: 0 0 185px !important;
    height: 185px !important;
    min-height: 185px !important;
    max-height: 185px !important;
    overflow: hidden !important;
  }

  #pc-server-monitoring-section,
  #network-status-map-section {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #topology-view {
    flex: 1 1 0% !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #inline-netmap-container,
  #inline-ping-monitor-container {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
  }

  #urgent-alert-feed,
  #ai-troubleshoot-feed,
  #recent-remote-connections {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #main-sidebar {
    position: relative !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .chart-container-box {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
5. 태블릿 PC 화면 최적화 (1024px ~ 1439px): 스크롤바 100% 제거 & 1:1 완벽 일치
========================================================================= */
@media (min-width: 1024px) and (max-width: 1439px) {
  #main-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #main-sidebar .sidebar-top-header {
    padding: 0.625rem 0.75rem !important;
    height: 52px !important;
  }

  #main-sidebar #sidebar-content,
  #main-sidebar.is-collapsed:hover #sidebar-content,
  #main-sidebar.is-collapsed.is-hover-expanded #sidebar-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 0 !important;
    padding: 0.5rem !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  #main-sidebar #sidebar-content::-webkit-scrollbar,
  #main-sidebar.is-collapsed:hover #sidebar-content::-webkit-scrollbar,
  #main-sidebar.is-collapsed.is-hover-expanded #sidebar-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #main-sidebar .sidebar-menu-btn,
  #main-sidebar a,
  #main-sidebar.is-collapsed:hover a,
  #main-sidebar.is-collapsed:hover button.sidebar-menu-btn,
  #main-sidebar.is-collapsed.is-hover-expanded a,
  #main-sidebar.is-collapsed.is-hover-expanded button.sidebar-menu-btn {
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12px !important;
  }
  #main-sidebar .sidebar-icon-wrap,
  #main-sidebar.is-collapsed:hover .sidebar-icon-wrap,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-icon-wrap {
    width: 28px !important;
    height: 28px !important;
  }
  #main-sidebar .sidebar-menu-icon,
  #main-sidebar.is-collapsed:hover .sidebar-menu-icon,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-menu-icon {
    width: 16px !important;
    height: 16px !important;
  }
  #main-sidebar .sidebar-section-header {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    font-size: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #main-sidebar .sidebar-sub-drawer,
  #main-sidebar.is-collapsed:hover .sidebar-sub-drawer,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-sub-drawer {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    gap: 0.1rem !important;
  }
  #main-sidebar .sidebar-sub-drawer > button,
  #main-sidebar #simulation-hub-wrapper > button {
    height: 22px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  #main-sidebar .sidebar-footer-box,
  #main-sidebar > div:last-child,
  #main-sidebar.is-collapsed:hover .sidebar-footer-box,
  #main-sidebar.is-collapsed.is-hover-expanded .sidebar-footer-box {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 0.25rem !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    z-index: 10 !important;
  }

  #main-sidebar #logout-btn,
  #main-sidebar.is-collapsed:hover #logout-btn,
  #main-sidebar.is-collapsed.is-hover-expanded #logout-btn {
    justify-content: center !important;
    height: 32px !important;
  }

  #sidebar-bottom-toggle-btn {
    height: 26px !important;
    font-size: 10px !important;
  }
  #main-sidebar .tech-support-box {
    display: none !important;
  }

  #topology-view .grid,
  #topology-view > div,
  #topology-view [class*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  #tenant-summary-tbody tr td,
  .mobile-fit-table th,
  .mobile-fit-table td {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 8.5px !important;
    letter-spacing: -0.01em !important;
  }

  #asset-vertical-status-section {
    padding: 0.5rem !important;
  }
  #asset-vertical-status-section .flex-1.grid {
    gap: 0.35rem !important;
  }
  #asset-vertical-status-section .grid > div {
    padding: 0.35rem 0.25rem !important;
  }
  #asset-vertical-status-section h3 {
    font-size: 11.5px !important;
    letter-spacing: -0.01em !important;
  }

  .asset-donut-chart-box {
    width: 62px !important;
    height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    margin: 2px auto !important;
  }
  .asset-donut-chart-box span.text-sm {
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
  .asset-donut-chart-box span.text-\[7\.5px\],
  .asset-donut-chart-box .mobile-total-txt {
    font-size: 7.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    margin-top: 1.5px !important;
    color: #64748b !important;
  }

  #asset-vertical-status-section .grid > div span.text-\[9\.5px\] {
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  #asset-vertical-status-section .grid > div span.text-\[7\.5px\] {
    font-size: 8px !important;
    font-weight: 700 !important;
  }

  #asset-hw-subtext,
  #asset-sw-subtext,
  #asset-nw-subtext,
  #asset-lic-subtext {
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    min-height: 16px !important;
    padding: 1px 3px !important;
    line-height: 1.2 !important;
    color: #475569 !important;
  }
  #asset-hw-subtext span,
  #asset-sw-subtext span,
  #asset-nw-subtext span,
  #asset-lic-subtext span {
    font-weight: 700 !important;
  }

  #asset-vertical-status-section .border-t {
    padding-top: 0.35rem !important;
    margin-top: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    white-space: nowrap !important;
  }
  #asset-vertical-status-section .border-t span {
    font-size: 9px !important;
    letter-spacing: -0.01em !important;
    color: #475569 !important;
  }
  #asset-vertical-status-section .border-t strong {
    font-size: 10px !important;
  }

  #quick-remote-agent-merged-section {
    padding: 0.5rem !important;
  }
  #quick-remote-agent-merged-section h3 {
    font-size: 11px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }
  #quick-remote-agent-merged-section #latest-agent-ver-badge {
    font-size: 8px !important;
    padding: 1px 4px !important;
  }

  #quick-remote-target {
    font-size: 9.5px !important;
    padding: 0.2rem 0.4rem !important;
    height: 24px !important;
  }
  #quick-remote-agent-merged-section button.bg-cyan-600 {
    font-size: 10px !important;
    padding: 0.2rem 0.5rem !important;
    height: 24px !important;
  }

  #quick-remote-agent-merged-section .flex.items-center.justify-start {
    gap: 0.6rem !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  #quick-remote-agent-merged-section div[class*="w-16"][class*="h-16"] {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
  }
  #quick-remote-agent-merged-section #agent-version-total-count {
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  #agent-version-legend {
    font-size: 9px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    padding-right: 0 !important;
  }
  #agent-version-legend .max-w-\[210px\] {
    max-width: 100% !important;
    gap: 0.4rem !important;
    padding-top: 1.5px !important;
    padding-bottom: 1.5px !important;
  }
  #agent-version-legend span.font-mono {
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }
}

/* ==========================================================================
5-1. [PC 전용 확대 및 정렬 최적화] 1440px 이상 대화면 전용
========================================================================== */
@media (min-width: 1440px) {
  /* PC 전용 [통합 자산 현황] 요약 집계 현황 카운팅 각각 간격 적절히 재조정 (과도한 넓힘 축소) */
  #asset-vertical-status-section .border-t {
    justify-content: flex-end !important;
    gap: 1.25rem !important;
    padding-right: 0.5rem !important;
	font-size: 10px !important;
	font-weight: 600 !important;
  }
  #asset-vertical-status-section .border-t > div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  /* PC 전용 [Agent 버전 & 빠른 연결] 도넛차트 / 버전명 / 수량(퍼센트) 묶어서 한세트로 좌측 정렬 */
  #quick-remote-agent-merged-section .flex.items-center.justify-start {
    justify-content: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    padding-left: 0.25rem !important;
    padding-right: 0 !important;
  }
  #quick-remote-agent-merged-section div[class*="w-16"][class*="h-16"] {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    flex-shrink: 0 !important;
  }
  #quick-remote-agent-merged-section #agent-version-total-count {
    font-size: 16px !important;
    font-weight: 900 !important;
  }
  #agent-version-legend {
    font-size: 10.5px !important;
    flex: 0 1 auto !important;
  }

  /* PC 전용 [통합 자산 현황] 서브텍스트 가독성·시인성 뚜렷함 최대 상향 */
  #asset-hw-subtext,
  #asset-sw-subtext,
  #asset-nw-subtext,
  #asset-lic-subtext {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    padding: 2px 4px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
  }
  #asset-hw-subtext span,
  #asset-sw-subtext span,
  #asset-nw-subtext span,
  #asset-lic-subtext span {
    font-weight: 900 !important;
    color: #1e293b !important;
  }
  #asset-hw-norm,
  #asset-sw-auth,
  #asset-nw-live,
  #asset-lic-active {
	  font-size: 12px !important;
	  font-weight: 900 !important;
  }
}

/* ==========================================================================
6. 10인치 태블릿 세로 900px 이하 최적화
========================================================================== */
@media (min-width: 1024px) and (max-height: 900px) {
  #dashboard {
    height: calc(100vh - 110px) !important;
    gap: 0.35rem !important;
  }
  #main-sidebar {
    height: 100dvh !important;
  }
  #main-sidebar #sidebar-content {
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  #main-sidebar #sidebar-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
  #main-sidebar a,
  #main-sidebar button {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    font-size: 10.5px !important;
  }
}

/* ==========================================================================
7. D3.js Passive Event Violation 방지
========================================================================== */
#inline-netmap-container,
#topology-dagre-svg {
  touch-action: none !important;
}

/* ==========================================================================
8. [철저 보존] 모바일앱(삼성 갤럭시 S24 울트라 세로 384~412px 기준) 전용 레이아웃
========================================================================== */
@media (max-width: 767px) {
  html,
  body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 24px);
  }
  #pdf-report-area {
    height: auto !important;
    overflow-y: visible !important;
    padding: 0.5rem !important;
    padding-bottom: 4rem !important;
  }
  #dashboard {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  #dashboard > div,
  .dashboard-card-section {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 0.5rem !important;
  }
  .chart-container-box {
    position: relative !important;
    height: 220px !important;
    width: 100% !important;
    min-height: 220px !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  #pc-server-monitoring-section,
  #network-status-map-section {
    min-height: 280px !important;
    height: auto !important;
  }
  #inline-netmap-container {
    min-height: 240px !important;
    height: 240px !important;
  }
  #urgent-alert-section {
    margin-top: 0.5rem !important;
    height: auto !important;
    min-height: auto !important;
  }
  #main-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100000;
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.12);
    background: #ffffff;
  }
  #main-sidebar.mobile-open {
    transform: translateX(0) !important;
  }
  #sidebar-remote-support-menu {
    display: none !important;
  }
  .asset-donut-chart-box {
    width: 62px !important;
    height: 62px !important;
    margin: 5px auto 4px auto !important;
  }
  #asset-vertical-status-section {
    padding: 0.65rem !important;
  }
  #asset-vertical-status-section .flex-1.grid {
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  #asset-vertical-status-section .grid > div {
    padding: 0.5rem 0.35rem !important;
    border-radius: 14px !important;
  }
  #asset-hw-subtext,
  #asset-sw-subtext,
  #asset-nw-subtext,
  #asset-lic-subtext {
    font-size: 9px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    margin-top: 4px !important;
  }
  #asset-hw-total,
  #asset-sw-total,
  #asset-nw-total,
  #asset-lic-total {
    font-size: 15px !important;
  }
  .mobile-total-txt {
    font-size: 6.5px !important;
  }
  #asset-vertical-status-section .border-t {
    margin-top: 0.5rem !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.2rem !important;
    font-size: 11px !important;
  }
  #quick-remote-agent-merged-section #agent-version-total-count {
    font-size: 15px !important;
  }
  #agent-version-legend {
    font-size: 11px !important;
  }
  #quick-remote-agent-merged-section .flex.items-center.justify-start {
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  #quick-remote-agent-merged-section div[class*="w-16"][class*="h-16"] {
    width: 100px !important;
    height: 100px !important;
    min-width: 86px !important;
    min-height: 86px !important;
    flex-shrink: 0 !important;
  }
  #agent-version-legend {
    flex: 1 1 auto !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  #agent-version-legend > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
  }
}

/* ==========================================================================
9. 인증 완료 전 화면 숨김
========================================================================== */
body {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
body.auth-ready {
  visibility: visible;
  opacity: 1;
}

/* ==========================================================================
10. 상단 헤더 공통
========================================================================== */
header {
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
header select {
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

/* ==========================================================================
11. 스마트폰 상단 헤더 전용 (0~767px)
========================================================================== */
@media (max-width: 767px) {
  header .flex-col {
    gap: 0.5rem !important;
  }
  header .flex-1.min-w-0 {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }
  header select {
    flex: 1 1 auto !important;
    min-width: 90px !important;
    max-width: none !important;
    font-size: 11.5px !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    height: 32px !important;
  }
  #mobile-menu-btn {
    height: 32px !important;
    padding: 0 0.6rem !important;
  }
  #tenant-fixed-badge {
    flex: 1 1 auto !important;
    max-width: none !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 0.5rem !important;
  }
  header .border-t {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 0.45rem !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
  }
  #header-clock-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
  }
  #clock-date {
    display: inline !important;
    font-size: 10.5px !important;
    color: #64748b !important;
    font-family: var(--font-family-mono) !important;
  }
  #clock {
    font-size: 10.5px !important;
    padding: 2px 5px !important;
    font-family: var(--font-family-mono) !important;
  }
}

/* ==========================================================================
12. 초소형 스마트폰 헤더 (480px 이하)
========================================================================== */
@media (max-width: 480px) {
  header select {
    font-size: 11px !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  header .border-t {
    gap: 0.25rem !important;
  }
  #clock-date {
    font-size: 10px !important;
  }
  #clock {
    font-size: 10px !important;
    padding: 2px 4px !important;
  }
}

/* ==========================================================================
13. 자산 상태 영역 내부 높이 안정화 (2열과 1:1 완벽 일치 레이아웃)
========================================================================== */
#asset-vertical-status-section {
  padding: 0.5rem !important;
}
#asset-vertical-status-section .flex-1.grid {
  min-height: 0 !important;
  overflow: hidden !important;
  align-content: stretch !important;
}
#asset-vertical-status-section .grid > div {
  transition: all 0.15s ease-in-out;
}
#asset-vertical-status-section .grid > div:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
14. 웹 접근성 및 텍스트 선택
========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.select-text,
.copyable-text,
main,
#dashboard,
#log-box,
#cmd-log-box,
#dashboard-global-log-table-body,
#urgent-alert-feed,
#ai-troubleshoot-feed,
#recent-events,
table,
td,
th {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* ==========================================================================
15. 테이블 / 최근 이벤트 / 종합현황 / 지연 모니터링 테이블
========================================================================== */
.table-responsive-wrapper {
  width: 100% !important;
  overflow-x: hidden !important;
}
.mobile-fit-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
}
.mobile-fit-table th,
.mobile-fit-table td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: keep-all !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
}
#tenant-summary-tbody tr td,
#dashboard-global-log-table-body tr td,
#inline-ping-tbody tr td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: keep-all !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
#tenant-summary-tbody td.font-mono,
#dashboard-global-log-table-body td.font-mono,
#inline-ping-tbody td.font-mono,
.mobile-fit-table td.font-mono {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  font-family: var(--font-family-mono) !important;
}
#event-log-history-modal table th,
#event-log-history-modal table td {
  white-space: nowrap !important;
  overflow: hidden !important;
}


/* 최근 시스템 이벤트 로그: 이벤트 내용 컬럼은 전체 표시 */
#event-log-history-modal table th:nth-child(4),
#event-log-history-modal table td:nth-child(4) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  height: auto !important;
  max-height: none !important;
}
@media (max-width: 640px) {
  .mobile-fit-table th {
    font-size: 8.5px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
  .mobile-fit-table td {
    font-size: 9.5px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

/* ==========================================================================
16. 로그인 모달 및 인증 화면
========================================================================== */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(241, 245, 249, 0.92);
}
.login-box {
  width: 100%;
  max-width: 420px;
  padding: 2.25rem 2rem;
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
  border: 1px solid var(--border-color);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.12),
    0 0 1px rgba(0, 0, 0, 0.08);
}
.login-input {
  width: 100%;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  margin-bottom: 1rem;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a !important;
}
.login-input:focus {
  border-color: var(--primary-blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.login-btn {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

/* ==========================================================================
17. SweetAlert2 및 모달 공통
========================================================================== */
.swal2-container {
  z-index: 99999999 !important;
}
html.swal2-shown,
body.swal2-shown {
  height: 100% !important;
  overflow: hidden !important;
  padding-right: 0px !important;
  margin-right: 0px !important;
}
body.swal2-height-auto {
  height: 100% !important;
}
.swal2-popup {
  border-radius: 18px !important;
  font-size: 0.92rem !important;
  padding: 1.4rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.16) !important;
  background: #ffffff !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
}
.swal2-title {
  color: var(--text-main) !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.02em !important;
}
.swal2-html-container {
  color: #334155 !important;
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
  text-align: left;
}
.swal2-input,
.swal2-select,
.swal2-textarea {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
}
.swal2-input:focus,
.swal2-select:focus,
.swal2-textarea:focus {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
@media (max-width: 768px) {
  .swal2-popup {
    width: 94vw !important;
    padding: 1rem !important;
    border-radius: 14px !important;
  }
  .swal2-title {
    font-size: 1.1rem !important;
  }
  #it-asset-modal > div,
  #network-topology-modal > div,
  #quick-remote-history-modal > div,
  #simulation-batch-modal > div,
  #developer-agent-manager-modal > div {
    width: 98vw !important;
    height: 96dvh !important;
    max-height: 96dvh !important;
    max-width: 98vw !important;
    border-radius: 14px !important;
  }
}

/* ==========================================================================
18. 상세 제어 슬라이드 패널 / 원격 명령어
========================================================================== */
.slide-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  z-index: 200001 !important;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
}
.slide-panel.open {
  transform: translateX(0);
}
#agent-control-panel {
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.cmd-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid #cbd5e1;
  user-select: none;
  text-align: center;
  background: #f8fafc;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  min-height: 38px;
}
.cmd-btn:hover {
  background: #ffffff;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}
.cmd-btn:active {
  transform: translateY(0);
}
.cmd-btn.network {
  border-color: rgba(37, 99, 235, 0.3);
  color: var(--primary-blue);
  background: rgba(37, 99, 235, 0.04);
}
.cmd-btn.network:hover {
  background: #ffffff;
  border-color: var(--primary-blue);
}
.cmd-btn.reboot {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--status-critical);
  background: rgba(239, 68, 68, 0.04);
}
.cmd-btn.reboot:hover {
  background: #ffffff;
  border-color: var(--status-critical);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.12);
}

@media (max-width: 768px) {
  .slide-panel {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* ==========================================================================
19. 로그 / 모노스페이스 숫자
========================================================================== */
#log-box,
#cmd-log-box {
  font-size: 10px !important;
  line-height: 1.5 !important;
}
#log-box .border-b,
#cmd-log-box .rounded-lg {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.data-container {
  scrollbar-width: thin;
}
.font-mono {
  font-family: var(--font-family-mono) !important;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
20. 장비 모니터링 맵 기본 스타일
========================================================================== */
#topology-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 3px !important;
  contain: layout paint;
}
#topology-view .grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  align-content: start !important;
  width: 100% !important;
  padding: 2px !important;
  gap: 0.5rem !important;
}
#topology-view .grid > div {
  position: relative;
  box-sizing: border-box !important;
  margin: 0 !important;
  contain: paint;
  border-radius: 12px;
}
#topology-view .grid > div:hover {
  transform: none !important;
  box-shadow: inset 0 0 0 2px var(--primary-blue) !important;
  z-index: 1;
}
#topology-view .grid > div.selected-normal {
  background-color: var(--status-normal-bg) !important;
  border-color: var(--status-normal) !important;
  box-shadow: 0 0 0 2px var(--status-normal) !important;
}
.node-hostname,
#topology-view .node-hostname,
#topology-view .truncate {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: keep-all !important;
  letter-spacing: -0.02em !important;
}

/* ==========================================================================
21. 시스템 리소스 도넛 / 버전 차트 / 4대 개별 도넛 차트
========================================================================== */
#gauge-cpu-donut,
#gauge-ram-donut,
#gauge-disk-donut,
#gauge-net-donut,
#asset-hw-donut-chart,
#asset-sw-donut-chart,
#asset-nw-donut-chart,
#asset-lic-donut-chart {
  width: 100% !important;
  height: 100% !important;
  display: block;
  font-family: var(--font-family-base) !important;
}
.chartjs-tooltip,
#chartjs-tooltip,
.chartjs-tooltip-wrapper,
div[id^="chartjs-tooltip"] {
  font-family: var(--font-family-base) !important;
  font-size: 9.5px !important;
  line-height: 1.25 !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  pointer-events: none !important;
  max-width: 180px !important;
}

/* ==========================================================================
22. 네트워크 상태맵 / Dagre-D3
========================================================================== */
#inline-netmap-container,
#network-topology-modal-content {
  background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);
  background-size: 16px 16px;
  background-color: rgba(248, 250, 252, 0.85);
  border-radius: 12px;
}
.dagre-node rect {
  stroke-width: 1.8px !important;
  rx: 8px !important;
  ry: 8px !important;
  transition: all 0.2s ease;
}
.dagre-node:hover rect {
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.2));
  cursor: pointer;
}
.dagre-node text {
  font-family: var(--font-family-base) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  fill: #0f172a !important;
  letter-spacing: -0.02em !important;
  pointer-events: none !important;
}
.dagre-node .label-container {
  background: transparent !important;
}
.dagre-edgePath path {
  stroke: #94a3b8 !important;
  stroke-width: 1.5px !important;
  fill: none !important;
  stroke-dasharray: 4 2 !important;
  transition: stroke 0.2s ease;
}
.dagre-edgePath:hover path {
  stroke: var(--primary-blue) !important;
  stroke-width: 2px !important;
  stroke-dasharray: none !important;
}

/* ==========================================================================
23. 우측 긴급알림 / AI / 원격지원 카드
========================================================================== */
#urgent-alert-section {
  background: #ffffff;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 12px;
}
#urgent-alert-feed {
  scrollbar-gutter: stable;
}
#urgent-alert-feed > div {
  min-height: 38px;
}
#ai-troubleshoot {
  background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 12px;
}
#ai-troubleshoot-feed {
  scrollbar-gutter: stable;
}
#ai-troubleshoot-feed > div {
  min-height: 38px;
}
#quick-remote-section {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

/* ==========================================================================
24. Beta 배지 / 기술지원 영역
========================================================================== */
.badge-beta-pro,
#sidebar-beta-badge {
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-mono) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #4338ca;
  background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
  border: 1.5px solid #a5b4fc;
  border-radius: 9999px;
  padding: 1.5px 7px;
  box-shadow:
    0 1px 3px rgba(79, 70, 229, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  user-select: none;
  line-height: 1.2;
  vertical-align: middle;
}
#sidebar-beta-badge.active,
#sidebar-beta-badge.show {
  display: inline-flex !important;
}
.tech-support-box {
  font-size: 10.5px;
  color: #64748b;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  margin-top: 6px;
}

/* ==========================================================================
25. 전역 스마트 툴팁 정밀 개선 (글자 수 자동 너비 & 메뉴 100% 비가림 구조)
========================================================================== */
#global-smart-tooltip {
  position: fixed;
  z-index: 99999999;
  pointer-events: none;
  display: none;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.4;
  width: max-content !important;
  max-width: 320px !important;
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: opacity 0.12s ease;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #334155;
  color: #f8fafc;
  font-family: var(--font-family-base) !important;
  white-space: normal;
  word-break: keep-all;
}

.custom-scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
#pwa-install-banner {
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.16);
  animation: slideDownFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* STEP 5-1F FULL MOBILE UI OVERRIDE */
@media (max-width: 767px) {

  /* ----------------------------------------------------------
     1. 네트워크 상태 헤더
     제목/탭 = 1행
     고객사/근무지/줌/상세 = 2행
     ---------------------------------------------------------- */
  #network-status-map-section {
    min-width: 0 !important;
    width: 100% !important;
  }

  #netmap-header-bar {
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    flex-wrap: nowrap !important;

    gap: 4px !important;

    overflow: visible !important;

    padding-bottom: 4px !important;
  }

  #netmap-header-bar > div:first-child {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex-wrap: nowrap !important;

    gap: 4px !important;
  }

  #netmap-header-bar > div:first-child h3 {
    font-size: 10.5px !important;
    flex-shrink: 0 !important;
  }

  #inline-tab-netmap-topo,
  #inline-tab-netmap-ping {
    padding-left: 6px !important;
    padding-right: 6px !important;

    font-size: 9.5px !important;
    min-width: 0 !important;

    touch-action: manipulation;
  }

  #netmap-header-controls {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex-wrap: nowrap !important;

    gap: 3px !important;

    overflow: visible !important;
  }

  #inline-netmap-tenant-select-wrap,
  #inline-netmap-branch-select-wrap {
    flex: 1 1 0 !important;

    min-width: 0 !important;
    max-width: none !important;
  }

  #inline-netmap-tenant-select,
  #inline-netmap-branch-select {
    width: 100% !important;

    min-width: 0 !important;
    max-width: none !important;

    height: 25px !important;

    padding-left: 4px !important;
    padding-right: 4px !important;

    font-size: 9px !important;

    touch-action: manipulation;
  }

  #netmap-header-controls button {
    flex-shrink: 0 !important;

    touch-action: manipulation;
  }

  #netmap-header-controls > button:last-child {
    padding-left: 5px !important;
    padding-right: 5px !important;

    font-size: 9px !important;
  }

  /* ----------------------------------------------------------
     2. 상단 전역 고객사/근무지 SELECT
     모바일 native select 터치 안정화
     ---------------------------------------------------------- */
  #tenant-filter,
  #branch-filter {
    min-width: 0 !important;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

    transition: none !important;
  }

  /* ----------------------------------------------------------
     3. 모든 일반 모달 오버레이
     화면 바깥으로 벗어나지 않도록 공통 제한
     ---------------------------------------------------------- */
  [id$="-modal"].fixed.inset-0 {
    box-sizing: border-box !important;

    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left))
      !important;

    overflow: hidden !important;
  }

  [id$="-modal"].fixed.inset-0 > div {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: calc(100vw - 12px) !important;

    max-height: calc(100dvh - 12px) !important;

    margin: 0 !important;

    border-radius: 12px !important;
  }

  /*
   * 기존 CSS에 ID 단위 height:96dvh !important가 존재하는
   * 핵심 대형 모달은 더 높은 specificity로 모바일 화면에 맞춤.
   */
  #it-asset-modal > div,
  #network-topology-modal > div,
  #quick-remote-history-modal > div,
  #simulation-batch-modal > div,
  #developer-agent-manager-modal > div {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;

    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;

    margin: 0 !important;
  }

  /* 대시보드/메뉴에서 열리는 나머지 주요 모달 */
  #tenant-incident-history-modal > div,
  #tenant-group-logs-detail-modal > div,
  #event-log-history-modal > div,
  #license-mgmt-modal > div,
  #device-type-detail-modal > div,
  #admin-auth-modal > div,
  #ai-recommendations-modal > div,
  #urgent-alert-modal > div {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;

    max-height: calc(100dvh - 12px) !important;

    margin: 0 !important;
  }

  /* ----------------------------------------------------------
     4. SweetAlert 기반 설정/입력/확인 화면
     ---------------------------------------------------------- */
  .swal2-container {
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left))
      !important;
  }

  .swal2-popup {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;

    max-height: calc(100dvh - 12px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;
  }

  .swal2-html-container {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* ----------------------------------------------------------
     5. 오른쪽에서 열리는 Agent/제어 패널
     ---------------------------------------------------------- */
  .slide-panel {
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    left: 0 !important;
    right: 0 !important;

    box-sizing: border-box !important;
  }
}



/* STEP 5-1I ALL MODAL INNER MOBILE */
@media (max-width: 767px) {

  /* ==========================================================
     A. 모든 모달 공통 외곽
     ========================================================== */
  #tenant-incident-history-modal,
  #tenant-group-logs-detail-modal,
  #event-log-history-modal,
  #network-topology-modal,
  #device-type-detail-modal,
  #quick-remote-history-modal,
  #simulation-batch-modal,
  #it-asset-modal,
  #license-mgmt-modal,
  #developer-agent-manager-modal,
  #admin-auth-modal,
  #ai-recommendations-modal,
  #urgent-alert-modal {
    padding: 5px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #tenant-incident-history-modal > div,
  #tenant-group-logs-detail-modal > div,
  #event-log-history-modal > div,
  #network-topology-modal > div,
  #device-type-detail-modal > div,
  #quick-remote-history-modal > div,
  #simulation-batch-modal > div,
  #it-asset-modal > div,
  #license-mgmt-modal > div,
  #developer-agent-manager-modal > div,
  #admin-auth-modal > div,
  #ai-recommendations-modal > div,
  #urgent-alert-modal > div {
    width: calc(100vw - 10px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 10px) !important;

    height: calc(100dvh - 10px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border-radius: 10px !important;
  }

  /* ==========================================================
     B. 모달 헤더
     제목 / 배지 / 버튼이 모바일 폭에서 줄바꿈
     ========================================================== */
  #tenant-incident-history-modal > div > div:first-child,
  #tenant-group-logs-detail-modal > div > div:first-child,
  #event-log-history-modal > div > div:first-child,
  #network-topology-modal > div > div:first-child,
  #device-type-detail-modal > div > div:first-child,
  #quick-remote-history-modal > div > div:first-child,
  #simulation-batch-modal > div > div:first-child,
  #it-asset-modal > div > div:first-child,
  #license-mgmt-modal > div > div:first-child,
  #developer-agent-manager-modal > div > div:first-child,
  #admin-auth-modal > div > div:first-child,
  #ai-recommendations-modal > div > div:first-child,
  #urgent-alert-modal > div > div:first-child {
    min-width: 0 !important;
    max-width: 100% !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #tenant-incident-history-modal h2,
  #tenant-incident-history-modal h3,
  #tenant-group-logs-detail-modal h2,
  #tenant-group-logs-detail-modal h3,
  #event-log-history-modal h2,
  #event-log-history-modal h3,
  #network-topology-modal h2,
  #network-topology-modal h3,
  #device-type-detail-modal h2,
  #device-type-detail-modal h3,
  #quick-remote-history-modal h2,
  #quick-remote-history-modal h3,
  #simulation-batch-modal h2,
  #simulation-batch-modal h3,
  #it-asset-modal h2,
  #it-asset-modal h3,
  #license-mgmt-modal h2,
  #license-mgmt-modal h3,
  #developer-agent-manager-modal h2,
  #developer-agent-manager-modal h3,
  #admin-auth-modal h2,
  #admin-auth-modal h3,
  #ai-recommendations-modal h2,
  #ai-recommendations-modal h3,
  #urgent-alert-modal h2,
  #urgent-alert-modal h3 {
    min-width: 0 !important;
    max-width: 100% !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* ==========================================================
     C. 이벤트 로그 / 장애 통계 필터
     ========================================================== */
  #event-log-history-modal > div > div:nth-child(2),
  #tenant-incident-history-modal > div > div:nth-child(2) {
    flex-wrap: wrap !important;

    align-items: stretch !important;

    gap: 6px !important;

    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #event-log-history-modal > div > div:nth-child(2) > div,
  #tenant-incident-history-modal > div > div:nth-child(2) > div {
    min-width: 0 !important;
    max-width: 100% !important;

    flex-wrap: wrap !important;
  }

  #event-log-tenant-filter-wrap,
  #event-log-branch-filter-wrap {
    flex: 1 1 145px !important;

    min-width: 0 !important;
    max-width: 100% !important;
  }

  #event-log-tenant-filter,
  #event-log-branch-filter,
  #tenant-incident-modal-search {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ==========================================================
     D. 네트워크 상세보기 모달
     ========================================================== */
  #network-topology-modal > div > div:first-child {
    align-items: flex-start !important;
  }

  #network-topology-modal select,
  #network-topology-modal input {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #netmap-modal-tenant-wrap,
  #netmap-modal-branch-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #netmap-modal-tenant-select,
  #netmap-modal-branch-select {
    min-width: 0 !important;
    max-width: 125px !important;
  }

  #modal-ping-status-filter-group {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
  }

  #netmap-modal-zoom-controls {
    flex-shrink: 0 !important;
  }

  #network-topology-modal-content {
    min-width: 0 !important;
    min-height: 0 !important;

    overflow: auto !important;
  }

  /* ==========================================================
     E. 자산관리
     기존 650/800px 데이터 영역은 모달 안에서만 가로스크롤
     ========================================================== */
  #it-asset-modal > div > div:first-child {
    align-items: flex-start !important;
  }

  #it-asset-modal > div > div:first-child > div {
    min-width: 0 !important;
    max-width: 100% !important;

    flex-wrap: wrap !important;
  }

  #it-asset-modal > div > div:first-child button {
    flex-shrink: 0 !important;
  }

  #it-asset-modal > div > div:nth-child(2) {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  #it-asset-modal .overflow-hidden {
    min-width: 0 !important;
  }

  #it-asset-modal [class*="min-w-[650px]"],
  #it-asset-modal [class*="min-w-[800px]"] {
    flex-shrink: 0 !important;
  }

  #it-asset-modal
  div:has(> [class*="min-w-[650px]"]),
  #it-asset-modal
  div:has(> [class*="min-w-[800px]"]) {
    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
  }

  /* ==========================================================
     F. 라이선스 관리
     8열 테이블은 모달 내부 가로스크롤
     ========================================================== */
  #license-mgmt-modal > div > div:first-child {
    align-items: flex-start !important;
  }

  #license-mgmt-modal > div > div:first-child > div {
    min-width: 0 !important;
    max-width: 100% !important;

    flex-wrap: wrap !important;
  }

  #license-mgmt-modal > div > div:nth-child(2) {
    padding: 10px !important;
  }

  #license-mgmt-modal table {
    min-width: 720px !important;
    width: 720px !important;
  }

  #license-mgmt-modal
  div:has(> table) {
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
  }

  /* ==========================================================
     G. 개발사 Agent 관리
     ========================================================== */
  #developer-agent-manager-modal > div > div:first-child {
    align-items: flex-start !important;
  }

  #developer-agent-manager-modal > div > div:first-child > div,
  #developer-agent-manager-modal > div > div:nth-child(2),
  #developer-agent-manager-modal > div > div:nth-child(2) > div {
    min-width: 0 !important;
    max-width: 100% !important;

    flex-wrap: wrap !important;
  }

  #developer-agent-manager-modal input,
  #developer-agent-manager-modal select {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #developer-agent-manager-modal table {
    min-width: 900px !important;
  }

  #developer-agent-manager-modal
  div:has(> table) {
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  /* ==========================================================
     H. 장애 상세 / 이벤트 테이블
     ========================================================== */
  #tenant-incident-history-modal table {
    min-width: 620px !important;
  }

  #tenant-group-logs-detail-modal table {
    min-width: 720px !important;
  }

  #event-log-history-modal table {
    min-width: 760px !important;
  }

  #tenant-incident-history-modal
  div:has(> table),
  #tenant-group-logs-detail-modal
  div:has(> table),
  #event-log-history-modal
  div:has(> table) {
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  /* ==========================================================
     I. 빠른연결 / AI / 긴급알림 / 승인센터
     ========================================================== */
  #quick-remote-history-modal > div > div:first-child,
  #ai-recommendations-modal > div > div:first-child,
  #urgent-alert-modal > div > div:first-child,
  #admin-auth-modal > div > div:first-child {
    align-items: flex-start !important;
  }

  #quick-remote-history-modal > div > div:first-child > div,
  #ai-recommendations-modal > div > div:first-child > div,
  #urgent-alert-modal > div > div:first-child > div,
  #admin-auth-modal > div > div:first-child > div {
    min-width: 0 !important;
    max-width: 100% !important;

    flex-wrap: wrap !important;
  }

  #quick-remote-history-modal > div > div:nth-child(2),
  #ai-recommendations-modal > div > div:nth-child(2),
  #urgent-alert-modal > div > div:nth-child(2),
  #admin-auth-modal > div > div:nth-child(2) {
    min-width: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ==========================================================
     J. 시뮬레이션
     ========================================================== */
  #simulation-batch-modal > div > div:first-child {
    align-items: flex-start !important;
  }

  #simulation-batch-modal table {
    min-width: 680px !important;
  }

  #simulation-batch-modal
  div:has(> table) {
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
  }

  /* ==========================================================
     K. 장비 상세
     ========================================================== */
  #device-type-detail-modal > div {
    min-width: 0 !important;
  }

  #device-type-detail-modal table {
    min-width: 650px !important;
  }

  #device-type-detail-modal
  div:has(> table) {
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  /* ==========================================================
     L. 모달 footer
     ========================================================== */
  #tenant-incident-history-modal > div > div:last-child,
  #event-log-history-modal > div > div:last-child,
  #quick-remote-history-modal > div > div:last-child {
    min-width: 0 !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}



/* STEP 5-1K-1 CORE MODAL MOBILE REDESIGN */
@media (max-width: 767px) {

  /* ---------------------------------------------
     공통: 대시보드 핵심 모달
     --------------------------------------------- */
  .mobile-modal-shell {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(15, 23, 42, .58) !important;
  }

  .mobile-modal-shell > div {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;

    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    overflow: hidden !important;
  }

  /* ---------------------------------------------
     헤더: PC형 큰 제목/설명/버튼을 모바일형으로 축소
     --------------------------------------------- */
  .mobile-modal-shell > div > div:first-child {
    min-height: 48px !important;
    padding: 8px 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .mobile-modal-shell > div > div:first-child > div {
    min-width: 0 !important;
  }

  .mobile-modal-shell h2,
  .mobile-modal-shell h3 {
    font-size: 11.5px !important;
    line-height: 1.3 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    margin: 0 !important;
  }

  .mobile-modal-shell p {
    font-size: 9px !important;
    line-height: 1.3 !important;

    margin-top: 2px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-modal-shell button {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .mobile-modal-shell
  > div
  > div:first-child
  button {
    min-height: 30px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* ---------------------------------------------
     배지
     --------------------------------------------- */
  #tenant-incident-modal-badge,
  #group-logs-detail-count,
  #event-log-modal-total-badge,
  #quick-remote-modal-total-badge,
  #urgent-modal-total-badge {
    font-size: 9px !important;
    line-height: 1 !important;

    padding: 3px 6px !important;

    white-space: nowrap !important;
  }

  /* ---------------------------------------------
     장애 통계 전체보기
     --------------------------------------------- */
  #tenant-incident-history-modal > div > div:nth-child(2) {
    padding: 7px 9px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  #tenant-incident-modal-search {
    height: 30px !important;
    font-size: 10px !important;
  }

  #tenant-incident-history-modal
  > div
  > div:nth-child(2)
  > div:last-child {
    font-size: 9px !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  /* ---------------------------------------------
     장애/경고 상세 로그
     --------------------------------------------- */
  #tenant-group-logs-detail-modal table,
  #tenant-incident-history-modal table {
    font-size: 9.5px !important;
  }

  #tenant-group-logs-detail-modal th,
  #tenant-group-logs-detail-modal td,
  #tenant-incident-history-modal th,
  #tenant-incident-history-modal td {
    padding: 6px 7px !important;
  }

  /* ---------------------------------------------
     이벤트 로그 전체보기
     필터를 모바일 2열
     --------------------------------------------- */
  #event-log-history-modal > div > div:nth-child(2) {
    padding: 7px 9px !important;
    display: block !important;
  }

  #event-log-history-modal
  > div
  > div:nth-child(2)
  > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #event-log-history-modal
  > div
  > div:nth-child(2)
  > div:first-child
  > span {
    display: none !important;
  }

  #event-log-tenant-filter-wrap,
  #event-log-branch-filter-wrap {
    display: block !important;
    min-width: 0 !important;
  }

  #event-log-tenant-filter-wrap > span,
  #event-log-branch-filter-wrap > span {
    display: block !important;
    margin-bottom: 3px !important;
    font-size: 8.5px !important;
  }

  #event-log-tenant-filter,
  #event-log-branch-filter {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 30px !important;

    font-size: 9.5px !important;
    padding: 3px 6px !important;
  }

  #event-log-history-modal table {
    min-width: 680px !important;
    font-size: 9px !important;
  }

  #event-log-history-modal th,
  #event-log-history-modal td {
    padding: 5px 6px !important;
  }

  /* ---------------------------------------------
     빠른 원격 이력
     --------------------------------------------- */
  #quick-remote-history-modal > div > div:first-child {
    min-height: 46px !important;
  }

  #quick-remote-history-modal
  > div
  > div:first-child
  > div:last-child {
    gap: 4px !important;
  }

  #quick-remote-clear-btn {
    height: 28px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
  }

  #quick-remote-modal-list {
    font-size: 9.5px !important;
  }

  /* ---------------------------------------------
     긴급알림 / AI 추천
     --------------------------------------------- */
  #urgent-modal-list,
  #ai-modal-list {
    font-size: 9.5px !important;
  }

  #urgent-modal-list > *,
  #ai-modal-list > * {
    padding: 8px !important;
  }

  /* ---------------------------------------------
     본문 공통
     --------------------------------------------- */
  .mobile-modal-shell
  > div
  > div:not(:first-child):not(:last-child) {
    min-width: 0 !important;
  }

  /* ---------------------------------------------
     footer / pagination
     --------------------------------------------- */
  #tenant-incident-history-modal > div > div:last-child,
  #event-log-history-modal > div > div:last-child,
  #quick-remote-history-modal > div > div:last-child,
  #urgent-alert-modal > div > div:last-child {
    min-height: 42px !important;

    padding: 7px 9px !important;

    font-size: 9px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  #tenant-incident-history-modal > div > div:last-child button,
  #event-log-history-modal > div > div:last-child button,
  #quick-remote-history-modal > div > div:last-child button,
  #urgent-alert-modal > div > div:last-child button {
    min-height: 28px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
  }
}



/* STEP 5-1K-2 NETWORK DEVICE AGENT MOBILE REDESIGN */
@media (max-width: 767px) {

  /* ==========================================================
     1. 네트워크 상세보기
     ========================================================== */
  .mobile-network-modal {
    padding: 0 !important;

    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .mobile-network-modal > div {
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    border-radius: 0 !important;

    overflow: hidden !important;
  }

  .mobile-network-modal > div > div:first-child {
    padding: 7px 8px !important;

    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 6px !important;
  }

  .mobile-network-modal h2,
  .mobile-network-modal h3 {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  #modal-tab-topo-btn,
  #modal-tab-ping-btn {
    height: 28px !important;

    padding: 3px 7px !important;

    font-size: 9.5px !important;

    white-space: nowrap !important;
  }

  #netmap-modal-tenant-wrap,
  #netmap-modal-branch-wrap {
    min-width: 0 !important;

    flex: 1 1 0 !important;

    gap: 3px !important;
  }

  #netmap-modal-tenant-wrap > span,
  #netmap-modal-branch-wrap > span {
    font-size: 8px !important;
    white-space: nowrap !important;
  }

  #netmap-modal-tenant-select,
  #netmap-modal-branch-select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 28px !important;

    padding: 2px 5px !important;

    font-size: 9px !important;
  }

  #modal-ping-search-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 28px !important;

    padding-top: 2px !important;
    padding-bottom: 2px !important;

    font-size: 9px !important;
  }

  #modal-ping-status-filter-group {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    flex-wrap: nowrap !important;

    font-size: 8.5px !important;

    -webkit-overflow-scrolling: touch;
  }

  #modal-ping-status-filter-group button {
    min-width: max-content !important;

    padding: 4px 7px !important;

    font-size: 8.5px !important;
  }

  #netmap-modal-zoom-controls {
    gap: 3px !important;
  }

  #netmap-modal-zoom-controls button {
    width: 27px !important;
    height: 27px !important;

    font-size: 9px !important;
  }

  #network-topology-modal-content {
    padding: 6px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    overflow: auto !important;
  }

  #modal-ping-top-risk-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 5px !important;
  }

  #modal-ping-top-risk-cards > * {
    min-width: 0 !important;

    padding: 6px !important;

    font-size: 9px !important;
  }

  #network-topology-modal table {
    font-size: 9px !important;
  }

  #network-topology-modal th,
  #network-topology-modal td {
    padding: 5px 6px !important;
  }


  /* ==========================================================
     2. 장비 상세보기
     ========================================================== */
  .mobile-device-detail-modal {
    padding: 0 !important;

    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .mobile-device-detail-modal > div {
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    border-radius: 0 !important;
  }

  .mobile-device-detail-modal
  > div
  > div:first-child {
    min-height: 46px !important;

    padding: 7px 9px !important;

    gap: 6px !important;
  }

  #dev-detail-modal-icon {
    width: 27px !important;
    height: 27px !important;

    font-size: 11px !important;
  }

  #dev-detail-modal-title {
    font-size: 10.5px !important;

    line-height: 1.2 !important;
  }

  #dev-detail-modal-subtitle {
    font-size: 8.5px !important;

    line-height: 1.2 !important;
  }

  .mobile-device-detail-modal
  > div
  > div:nth-child(2) {
    padding: 7px !important;
  }

  .mobile-device-detail-modal table {
    min-width: 520px !important;

    font-size: 8.8px !important;
  }

  .mobile-device-detail-modal th,
  .mobile-device-detail-modal td {
    padding: 5px 6px !important;
  }

  .mobile-device-detail-modal
  > div
  > div:last-child {
    min-height: 38px !important;

    padding: 6px 9px !important;

    font-size: 9px !important;
  }


  /* ==========================================================
     3. Agent 상세 제어 패널
     ========================================================== */
  #agent-control-panel-backdrop {
    z-index: 200000 !important;
  }

  .mobile-agent-control-panel {
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    left: 0 !important;
    right: 0 !important;

    border-left: 0 !important;

    box-sizing: border-box !important;
  }

  .mobile-agent-control-panel
  > div:first-child {
    min-height: 48px !important;

    padding: 7px 9px !important;

    gap: 6px !important;
  }

  .mobile-agent-control-panel
  > div:first-child
  > div:first-child {
    min-width: 0 !important;

    gap: 6px !important;
  }

  #panel-hostname {
    max-width: 145px !important;

    font-size: 11px !important;
  }

  #panel-status-badge {
    font-size: 8px !important;

    padding: 2px 4px !important;
  }

  #panel-ip-user {
    max-width: 210px !important;

    font-size: 8.5px !important;
  }

  .mobile-agent-control-panel
  > div:first-child
  button {
    min-height: 28px !important;

    padding: 3px 7px !important;

    font-size: 9px !important;
  }

  /*
   * PC에서는 상세자산 버튼이 sm 이상에서만 보였지만
   * 모바일 Agent 제어에서도 연결 기능을 사용할 수 있도록 표시
   */
  .mobile-agent-control-panel
  > div:first-child
  button[onclick*="openAssetManagementModal"] {
    display: inline-flex !important;
    align-items: center !important;
  }

  .mobile-agent-control-panel
  > div:nth-child(2) {
    padding: 7px !important;

    gap: 7px !important;
  }

  .mobile-agent-control-panel
  > div:nth-child(2)
  > div {
    border-radius: 8px !important;
  }

  /*
   * 이벤트 로그 / 명령 이력:
   * 모바일 높이를 과도하게 점유하지 않도록 축소
   */
  .mobile-agent-control-panel
  > div:nth-child(2)
  > div:first-child {
    height: 175px !important;
  }

  #cmd-history-section {
    height: 155px !important;
  }

  .mobile-agent-control-panel
  > div:nth-child(2)
  > div
  > div:first-child {
    min-height: 34px !important;

    padding: 5px 7px !important;
  }

  #log-box,
  #cmd-log-box {
    padding: 6px !important;

    font-size: 8.5px !important;

    line-height: 1.35 !important;
  }

  #cmd-status-indicator {
    font-size: 8px !important;

    padding: 2px 4px !important;
  }

  /*
   * 긴급 원격명령 3열 -> 모바일 2열
   */
  .mobile-agent-control-panel
  .grid.grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 5px !important;
  }

  .mobile-agent-control-panel
  .grid.grid-cols-3 button {
    min-height: 38px !important;

    padding: 5px 4px !important;

    font-size: 8.8px !important;

    line-height: 1.2 !important;

    white-space: normal !important;
  }

  .mobile-agent-control-panel h3 {
    font-size: 9px !important;

    margin-bottom: 5px !important;
  }

  .mobile-agent-control-panel input,
  .mobile-agent-control-panel select {
    min-width: 0 !important;
    max-width: 100% !important;

    font-size: 9px !important;
  }
}



/* STEP 5-1K-3 ASSET LICENSE DEV MOBILE REDESIGN */
@media (max-width: 767px) {

  /* ==========================================================
     1. 자산관리 모달
     ========================================================== */
  .mobile-asset-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .mobile-asset-modal > div {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .mobile-asset-modal > div > div:first-child {
    padding: 7px 8px !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .mobile-asset-modal > div > div:first-child > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .mobile-asset-modal > div > div:first-child > div:last-child {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }

  .mobile-asset-modal h2 {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .mobile-asset-modal p {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }

  #it-modal-tenant-badge {
    font-size: 7.5px !important;
    padding: 2px 4px !important;
  }

  #tab-btn-sw,
  #tab-btn-hw,
  .mobile-asset-modal button {
    font-size: 8.8px !important;
  }

  #tab-btn-sw,
  #tab-btn-hw {
    min-height: 27px !important;
    padding: 3px 7px !important;
  }

  .mobile-asset-modal
  button[onclick*="openSwWhitelistManagerModal"],
  .mobile-asset-modal
  button[onclick*="refreshAllAssetData"] {
    min-height: 27px !important;
    padding: 3px 6px !important;
  }

  .mobile-asset-modal > div > div:nth-child(2) {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .mobile-asset-modal .grid.grid-cols-2 {
    gap: 5px !important;
  }

  .mobile-asset-modal .grid.grid-cols-2 > * {
    padding: 7px !important;
    min-width: 0 !important;
  }

  .mobile-asset-modal
  [class*="min-w-[650px]"],
  .mobile-asset-modal
  [class*="min-w-[800px]"] {
    font-size: 8.5px !important;
  }

  .mobile-asset-modal
  [class*="min-w-[650px]"] > *,
  .mobile-asset-modal
  [class*="min-w-[800px]"] > * {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  /* 좌측 조직 트리는 모바일에서 상단 짧은 영역으로 */
  .mobile-asset-modal
  > div
  > div:nth-child(2)
  > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    height: 120px !important;
    min-height: 120px !important;
    flex: 0 0 120px !important;
    overflow-y: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgb(226 232 240) !important;
  }

  .mobile-asset-modal
  > div
  > div:nth-child(2)
  > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }


  /* ==========================================================
     2. 라이선스 관리
     ========================================================== */
  .mobile-license-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .mobile-license-modal > div {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .mobile-license-modal > div > div:first-child {
    min-height: 46px !important;
    padding: 7px 9px !important;
    gap: 6px !important;
  }

  .mobile-license-modal h2,
  .mobile-license-modal h3 {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .mobile-license-modal p {
    font-size: 8.5px !important;
  }

  #license-modal-tenant-badge {
    font-size: 7.5px !important;
    padding: 2px 4px !important;
  }

  .mobile-license-modal > div > div:nth-child(2) {
    padding: 8px !important;
    gap: 7px !important;
  }

  .mobile-license-modal .grid {
    gap: 6px !important;
  }

  .mobile-license-modal .grid.grid-cols-1 {
    grid-template-columns: 1fr !important;
  }

  .mobile-license-modal input,
  .mobile-license-modal select {
    height: 30px !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 9px !important;
    padding: 3px 6px !important;
  }

  .mobile-license-modal label,
  .mobile-license-modal span {
    font-size: 8.5px !important;
  }

  .mobile-license-modal button {
    font-size: 8.8px !important;
    min-height: 28px !important;
  }

  .mobile-license-modal table {
    min-width: 680px !important;
    width: 680px !important;
    font-size: 8.5px !important;
  }

  .mobile-license-modal th,
  .mobile-license-modal td {
    padding: 5px 6px !important;
  }


  /* ==========================================================
     3. 개발사 Agent 관리
     ========================================================== */
  .mobile-dev-agent-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .mobile-dev-agent-modal > div {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .mobile-dev-agent-modal > div > div:first-child {
    min-height: 46px !important;
    padding: 7px 9px !important;
    gap: 6px !important;
  }

  .mobile-dev-agent-modal h2,
  .mobile-dev-agent-modal h3 {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .mobile-dev-agent-modal
  > div
  > div:nth-child(2) {
    padding: 7px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    align-items: end !important;
  }

  .mobile-dev-agent-modal
  > div
  > div:nth-child(2)
  > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #dev-agent-search-input {
    width: 100% !important;
    max-width: none !important;
    height: 29px !important;
    font-size: 8.8px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  .mobile-dev-agent-modal select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 29px !important;
    font-size: 8.8px !important;
    padding: 3px 5px !important;
  }

  .mobile-dev-agent-modal button {
    font-size: 8.5px !important;
    min-height: 28px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  .mobile-dev-agent-modal
  > div
  > div:nth-child(3) {
    padding: 5px !important;
    overflow: auto !important;
  }

  .mobile-dev-agent-modal
  > div
  > div:nth-child(3)
  > div {
    min-width: 1120px !important;
  }

  .mobile-dev-agent-modal table {
    min-width: 1120px !important;
    font-size: 8px !important;
  }

  .mobile-dev-agent-modal thead {
    font-size: 8px !important;
  }

  .mobile-dev-agent-modal th,
  .mobile-dev-agent-modal td {
    padding: 5px 5px !important;
  }

  .mobile-dev-agent-modal
  > div
  > div:last-child {
    min-height: 38px !important;
    padding: 5px 8px !important;
    font-size: 8.5px !important;
  }
}



/* STEP 5-1K-4B DYNAMIC SWAL MOBILE REDESIGN */
@media (max-width: 767px) {

  /* ----------------------------------------------------------
     SweetAlert 공통 외곽
     ---------------------------------------------------------- */
  .swal2-container {
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left))
      !important;
  }

  .swal2-popup {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;

    max-height: calc(100dvh - 12px) !important;

    padding: 10px !important;

    border-radius: 11px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }

  .swal2-title {
    margin: 2px 0 6px !important;
    padding: 0 4px !important;

    font-size: 13px !important;
    line-height: 1.3 !important;

    word-break: keep-all !important;
  }

  .swal2-html-container {
    margin: 4px 0 0 !important;
    padding: 0 2px !important;

    max-width: 100% !important;
    min-width: 0 !important;

    max-height: calc(100dvh - 150px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    font-size: 10px !important;
    line-height: 1.4 !important;

    -webkit-overflow-scrolling: touch;
  }

  .swal2-actions {
    width: 100% !important;

    margin: 8px 0 0 !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 6px !important;
  }

  .swal2-actions:has(.swal2-confirm:only-child) {
    grid-template-columns: 1fr !important;
  }

  .swal2-confirm,
  .swal2-cancel,
  .swal2-deny {
    min-width: 0 !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    font-size: 9.5px !important;
    line-height: 1.2 !important;

    white-space: normal !important;
  }

  /* ----------------------------------------------------------
     모든 복합 폼 입력
     ---------------------------------------------------------- */
  .swal2-popup input:not([type="checkbox"]):not([type="radio"]),
  .swal2-popup select,
  .swal2-popup textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    font-size: 9.5px !important;
  }

  .swal2-popup input:not([type="checkbox"]):not([type="radio"]),
  .swal2-popup select {
    min-height: 30px !important;

    padding: 4px 6px !important;
  }

  .swal2-popup textarea {
    padding: 6px !important;
  }

  .swal2-popup label {
    font-size: 8.8px !important;
    line-height: 1.3 !important;
  }

  /* ----------------------------------------------------------
     고객사 계약 관리
     ---------------------------------------------------------- */
  .swal2-popup:has(#new-tenant-id)
  .swal2-html-container > div {
    gap: 7px !important;
  }

  .swal2-popup:has(#new-tenant-id)
  form {
    padding: 8px !important;
    gap: 7px !important;
  }

  .swal2-popup:has(#new-tenant-id)
  .grid {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .swal2-popup:has(#new-tenant-id)
  table {
    min-width: 650px !important;
    font-size: 8px !important;
  }

  .swal2-popup:has(#new-tenant-id)
  th,
  .swal2-popup:has(#new-tenant-id)
  td {
    padding: 5px !important;
  }

  /* ----------------------------------------------------------
     SMTP 설정
     ---------------------------------------------------------- */
  .swal2-popup:has(#smtp-host)
  .swal2-html-container form {
    gap: 7px !important;
  }

  .swal2-popup:has(#smtp-host)
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .swal2-popup:has(#smtp-target-tenant)
  #smtp-target-tenant {
    width: 100% !important;
  }

  /* ----------------------------------------------------------
     계약 조건 수정
     ---------------------------------------------------------- */
  .swal2-popup:has(#edit-tenant-name)
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  /* ----------------------------------------------------------
     계약 연장/갱신
     ---------------------------------------------------------- */
  .swal2-popup:has(#contract-renewal-request-note)
  .swal2-html-container {
    font-size: 9.5px !important;
  }

  /* ----------------------------------------------------------
     HW 상세 / SW 사용자 / 화이트리스트
     ---------------------------------------------------------- */
  .swal2-popup:has(table)
  .swal2-html-container {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  .swal2-popup:has(table)
  table {
    font-size: 8.2px !important;
  }

  .swal2-popup:has(table)
  th,
  .swal2-popup:has(table)
  td {
    padding: 5px !important;
  }

  .swal2-popup:has(#wl-filter-tenant-select)
  .grid {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .swal2-popup:has(#wl-filter-tenant-select)
  table {
    min-width: 650px !important;
  }

  /* ----------------------------------------------------------
     원격 이력 대상 선택
     ---------------------------------------------------------- */
  .swal2-popup
  .max-h-\[60vh\] {
    max-height: calc(100dvh - 175px) !important;
  }

  /* ----------------------------------------------------------
     고정 IP / Agent 근무지·사용자 수정
     ---------------------------------------------------------- */
  .swal2-popup:has(#swal-ip)
  .swal2-html-container,
  .swal2-popup:has(#swal-edit-branch)
  .swal2-html-container {
    font-size: 9.5px !important;
  }

  /* ----------------------------------------------------------
     AI 상세
     ---------------------------------------------------------- */
  .swal2-popup
  .bg-red-50,
  .swal2-popup
  .bg-amber-50,
  .swal2-popup
  .bg-purple-50,
  .swal2-popup
  .bg-slate-50 {
    padding: 7px !important;
  }

  .swal2-popup
  .text-sm {
    font-size: 10.5px !important;
  }

  .swal2-popup
  .text-xs {
    font-size: 9px !important;
  }

  .swal2-popup
  .text-\[11px\],
  .swal2-popup
  .text-\[10\.5px\],
  .swal2-popup
  .text-\[10px\] {
    font-size: 8.5px !important;
  }
}



/* STEP 5-1K-5B AUTH SIM MOBILE FINAL */
@media (max-width: 767px) {

  /* ==========================================================
     1. 승인센터
     ========================================================== */
  .mobile-auth-center-modal {
    padding: 0 !important;

    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .mobile-auth-center-modal > div {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;

    border-radius: 0 !important;

    overflow: hidden !important;
  }

  .mobile-auth-center-modal
  > div
  > div:first-child {
    min-height: 46px !important;

    padding: 7px 9px !important;

    align-items: center !important;

    flex-wrap: nowrap !important;

    gap: 6px !important;
  }

  .mobile-auth-center-modal
  > div
  > div:first-child
  > div {
    min-width: 0 !important;

    flex: 1 1 auto !important;
  }

  #auth-modal-title {
    font-size: 10.5px !important;
    line-height: 1.2 !important;

    letter-spacing: 0.02em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-auth-center-modal
  > div
  > div:first-child
  button {
    width: 28px !important;
    height: 28px !important;

    min-width: 28px !important;
    min-height: 28px !important;

    flex: 0 0 28px !important;

    font-size: 10px !important;
  }

  #pending-users-list {
    padding: 7px !important;

    gap: 6px !important;

    font-size: 9px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  /*
   * 승인 대기 카드들은 JS에서 동적으로 생성되므로
   * pending-users-list 하위 전체를 모바일 크기로 제한
   */
  #pending-users-list > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #pending-users-list .flex {
    min-width: 0 !important;
  }

  #pending-users-list .justify-between {
    gap: 5px !important;
  }

  #pending-users-list button {
    min-height: 28px !important;

    padding: 4px 7px !important;

    font-size: 8.5px !important;
    line-height: 1.2 !important;

    white-space: normal !important;

    touch-action: manipulation;
  }

  #pending-users-list input,
  #pending-users-list select,
  #pending-users-list textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    font-size: 9px !important;

    box-sizing: border-box !important;
  }

  #pending-users-list .text-sm {
    font-size: 9.5px !important;
  }

  #pending-users-list .text-xs {
    font-size: 8.5px !important;
  }

  #pending-users-list .text-\[11px\],
  #pending-users-list .text-\[10\.5px\],
  #pending-users-list .text-\[10px\] {
    font-size: 8px !important;
  }


  /* ==========================================================
     2. AI 시뮬레이션 센터
     ========================================================== */
  .mobile-simulation-modal {
    padding: 0 !important;

    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .mobile-simulation-modal > div {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;

    border-radius: 0 !important;

    overflow: hidden !important;
  }

  /* ----------------------------------------------------------
     시뮬레이션 헤더
     ---------------------------------------------------------- */
  .mobile-simulation-modal
  > div
  > div:first-child {
    min-height: 50px !important;

    padding: 6px 8px !important;

    align-items: center !important;

    flex-wrap: nowrap !important;

    gap: 5px !important;
  }

  .mobile-simulation-modal
  > div
  > div:first-child
  > div:first-child {
    min-width: 0 !important;

    flex: 1 1 auto !important;

    gap: 5px !important;
  }

  .mobile-simulation-modal
  > div
  > div:first-child
  > div:first-child
  > span:first-child {
    width: 7px !important;
    height: 7px !important;

    flex: 0 0 7px !important;
  }

  .mobile-simulation-modal
  > div
  > div:first-child
  h3 {
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 4px !important;

    font-size: 9.5px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
  }

  .mobile-simulation-modal
  > div
  > div:first-child
  h3
  > span:first-child {
    min-width: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-simulation-modal
  > div
  > div:first-child
  h3
  > span:last-child {
    flex-shrink: 0 !important;

    padding: 2px 4px !important;

    font-size: 7px !important;
  }

  .mobile-simulation-modal
  > div
  > div:first-child
  p {
    max-width: 235px !important;

    margin-top: 1px !important;

    font-size: 7.8px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-simulation-modal
  > div
  > div:first-child
  > div:last-child {
    flex: 0 0 auto !important;

    gap: 3px !important;
  }

  .mobile-simulation-modal
  > div
  > div:first-child
  button {
    min-height: 27px !important;

    padding: 3px 6px !important;

    font-size: 8px !important;
  }

  .mobile-simulation-modal
  > div
  > div:first-child
  button:last-child {
    width: 27px !important;
    height: 27px !important;

    min-width: 27px !important;

    padding: 0 !important;
  }


  /* ----------------------------------------------------------
     탭 / 전체삭제
     ---------------------------------------------------------- */
  .mobile-simulation-modal
  > div
  > div:nth-child(2) {
    padding: 5px 6px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 5px !important;
  }

  .mobile-simulation-modal
  > div
  > div:nth-child(2)
  > div:first-child {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 3px !important;
  }

  #sim-tab-btn-inject,
  #sim-tab-btn-active,
  #sim-tab-btn-kb {
    min-width: 0 !important;
    min-height: 31px !important;

    padding: 3px 4px !important;

    font-size: 7.8px !important;
    line-height: 1.15 !important;

    white-space: normal !important;

    text-align: center !important;
  }

  .mobile-simulation-modal
  > div
  > div:nth-child(2)
  > button {
    width: 100% !important;

    min-height: 27px !important;

    padding: 3px 6px !important;

    font-size: 8px !important;
  }


  /* ----------------------------------------------------------
     본문
     ---------------------------------------------------------- */
  .mobile-simulation-modal
  > div
  > div:nth-child(3) {
    padding: 7px !important;

    font-size: 8.5px !important;

    gap: 7px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #sim-panel-inject {
    gap: 7px !important;
  }

  #sim-panel-inject
  > .grid {
    grid-template-columns: 1fr !important;

    gap: 6px !important;
  }

  #sim-panel-inject
  > .grid
  > div {
    padding: 8px !important;
  }

  #sim-panel-inject
  span {
    font-size: 8.5px !important;
  }

  #sim-event-type {
    width: 100% !important;
    min-width: 0 !important;

    min-height: 31px !important;

    padding: 4px 6px !important;

    font-size: 8.5px !important;

    text-overflow: ellipsis !important;
  }

  #sim-scenario-guide-box {
    padding: 7px !important;

    font-size: 8px !important;
    line-height: 1.35 !important;
  }

  #sim-node-count {
    min-height: 30px !important;

    padding: 4px 6px !important;

    font-size: 9px !important;
  }

  #sim-panel-inject button {
    min-height: 34px !important;

    margin-top: 6px !important;

    padding: 5px 7px !important;

    font-size: 8.5px !important;
  }


  /* ----------------------------------------------------------
     ACTIVE / KB 넓은 표
     모바일에서는 해당 패널 내부에서만 좌우 스크롤
     ---------------------------------------------------------- */
  #sim-panel-active,
  #sim-panel-kb {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #sim-panel-active
  > div:last-child,
  #sim-panel-kb
  > div:last-child {
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
  }

  #sim-panel-active table {
    width: 720px !important;
    min-width: 720px !important;

    font-size: 8px !important;
  }

  #sim-panel-kb table {
    width: 760px !important;
    min-width: 760px !important;

    font-size: 8px !important;
  }

  #sim-panel-active thead,
  #sim-panel-kb thead {
    font-size: 7.5px !important;
  }

  #sim-panel-active th,
  #sim-panel-active td,
  #sim-panel-kb th,
  #sim-panel-kb td {
    padding: 5px !important;
  }

  #sim-panel-active button,
  #sim-panel-kb button {
    min-height: 26px !important;

    padding: 3px 5px !important;

    font-size: 7.5px !important;
  }


  /* ----------------------------------------------------------
     KB 설명 / 배지
     ---------------------------------------------------------- */
  #sim-panel-kb
  > div:first-child {
    padding: 7px !important;

    display: flex !important;
    align-items: flex-start !important;

    gap: 5px !important;
  }

  #sim-panel-kb
  > div:first-child
  > div {
    min-width: 0 !important;

    flex: 1 1 auto !important;
  }

  #sim-panel-kb
  > div:first-child
  > div
  > div:first-child {
    font-size: 8.5px !important;
    line-height: 1.25 !important;
  }

  #sim-panel-kb
  > div:first-child
  > div
  > div:last-child {
    font-size: 7.5px !important;
    line-height: 1.25 !important;
  }

  #sim-kb-total-badge {
    flex: 0 0 auto !important;

    padding: 3px 5px !important;

    font-size: 7.5px !important;

    white-space: nowrap !important;
  }
}



/* STEP 5-1M MOBILE APP 5 ACTIONS COMPACT MODALS */

/*
 * 설치된 모바일/태블릿 PWA에서만 적용.
 * - PC 브라우저 영향 없음
 * - 일반 모바일 브라우저 영향 없음
 * - 좌측 사이드패널 영향 없음
 * - 홈 대시보드 자체 카드/배치 영향 없음
 */
@media (max-width: 1024px) and (display-mode: standalone) {

  /* ==========================================================
     A. HOME DASHBOARD
     모달 호출 버튼은 아래 5개만 표시
     ========================================================== */

  #dashboard button[onclick*="open"][onclick*="Modal"] {
    display: none !important;
  }

  #dashboard button[onclick*="openTenantIncidentModal"],
  #dashboard button[onclick*="openEventLogHistoryModal"],
  #dashboard button[onclick*="openQuickRemoteHistoryModal"],
  #dashboard button[onclick*="openUrgentAlertModal"],
  #dashboard button[onclick*="openAllAiRecommendationsModal"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  /* ==========================================================
     B. 5개 대상 모달 공통
     기존 100dvh 전체화면 강제 제거
     ========================================================== */

  #tenant-incident-history-modal,
  #event-log-history-modal,
  #quick-remote-history-modal,
  #urgent-alert-modal,
  #ai-recommendations-modal {
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left))
      !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
  }

  #tenant-incident-history-modal > div,
  #event-log-history-modal > div,
  #quick-remote-history-modal > div,
  #urgent-alert-modal > div,
  #ai-recommendations-modal > div {
    width: calc(100vw - 20px) !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    border-radius: 12px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;

    overflow: hidden !important;
  }


  /* ==========================================================
     C. 장애 통계 전체보기
     10건 페이징 범위까지만
     ========================================================== */

  #tenant-incident-history-modal > div {
    max-width: 720px !important;
    max-height: min(610px, calc(100dvh - 24px)) !important;
  }

  #tenant-incident-history-modal
  > div
  > div:first-child {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }

  #tenant-incident-history-modal
  > div
  > div:nth-child(2) {
    padding: 6px 8px !important;
  }

  #tenant-incident-history-modal
  > div
  > div:nth-child(3) {
    flex: 0 1 auto !important;

    max-height: 390px !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #tenant-incident-history-modal table {
    min-width: 620px !important;
    width: 620px !important;
  }

  #tenant-incident-history-modal th,
  #tenant-incident-history-modal td {
    padding: 5px 6px !important;
    font-size: 8.5px !important;
  }

  #tenant-incident-history-modal
  > div
  > div:last-child {
    min-height: 38px !important;
    padding: 5px 8px !important;
  }


  /* ==========================================================
     D. 최근 이벤트 로그 전체보기
     10건 페이징 + 이 모달만 가로스크롤 허용
     ========================================================== */

  #event-log-history-modal > div {
    max-width: 920px !important;
    max-height: min(620px, calc(100dvh - 24px)) !important;
  }

  #event-log-history-modal
  > div
  > div:first-child {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }

  #event-log-history-modal
  > div
  > div:nth-child(2) {
    padding: 6px 8px !important;
  }

  #event-log-history-modal
  > div
  > div:nth-child(3) {
    flex: 0 1 auto !important;

    max-height: 400px !important;

    padding: 6px !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #event-log-history-modal
  > div
  > div:nth-child(3)
  > div {
    width: max-content !important;
    min-width: 100% !important;

    overflow: visible !important;
  }

  #event-log-history-modal table th:nth-child(4),
  #event-log-history-modal table td:nth-child(4) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    min-width: 360px !important;
  }

  #event-log-history-modal table {
    min-width: 720px !important;
    width: max-content !important;

    table-layout: auto !important;
  }

  #event-log-history-modal th,
  #event-log-history-modal td {
    padding: 5px 6px !important;
    font-size: 8.5px !important;
  }

  #event-log-history-modal
  > div
  > div:last-child {
    min-height: 38px !important;
    padding: 5px 8px !important;
  }


  /* ==========================================================
     E. 빠른 연결 이력보기
     목록형 - 가로스크롤 금지
     ========================================================== */

  #quick-remote-history-modal > div {
    max-width: 720px !important;
    max-height: min(560px, calc(100dvh - 24px)) !important;
  }

  #quick-remote-history-modal
  > div
  > div:first-child {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }

  #quick-remote-history-modal
  > div
  > div:nth-child(2) {
    flex: 0 1 auto !important;

    max-height: 390px !important;

    padding: 7px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #quick-remote-modal-list,
  #quick-remote-modal-list > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #quick-remote-history-modal
  > div
  > div:last-child {
    min-height: 38px !important;
    padding: 5px 8px !important;
  }


  /* ==========================================================
     F. 긴급 알림 전체보기
     6건 페이징 - 가로스크롤 금지
     ========================================================== */

  #urgent-alert-modal > div {
    max-width: 760px !important;
    max-height: min(520px, calc(100dvh - 24px)) !important;
  }

  #urgent-alert-modal
  > div
  > div:first-child {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }

  #urgent-alert-modal
  > div
  > div:nth-child(2) {
    flex: 0 1 auto !important;

    max-height: 360px !important;

    padding: 7px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #urgent-modal-list,
  #urgent-modal-list > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #urgent-alert-modal
  > div
  > div:last-child {
    min-height: 38px !important;
    padding: 5px 8px !important;
  }


  /* ==========================================================
     G. AI 조치 추천 전체보기
     카드 목록형 - 내용 높이만 사용 / 가로스크롤 금지
     ========================================================== */

  #ai-recommendations-modal > div {
    max-width: 760px !important;
    max-height: min(520px, calc(100dvh - 24px)) !important;
  }

  #ai-recommendations-modal
  > div
  > div:first-child {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }

  #ai-recommendations-modal
  > div
  > div:nth-child(2) {
    flex: 0 1 auto !important;

    max-height: 430px !important;

    padding: 7px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #ai-modal-list,
  #ai-modal-list > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}



/* STEP 5-1M-R1 RESTORE EXACT 5 DASHBOARD BUTTONS */
@media (max-width: 1024px) and (display-mode: standalone) {

  /*
   * STEP 5-1M의 전체 모달버튼 숨김 규칙보다
   * 동일 이상의 specificity로 지정 5개만 다시 표시
   */

  #dashboard button[onclick*="openTenantIncidentModal"][onclick],
  #dashboard button[onclick*="openEventLogHistoryModal"][onclick],
  #dashboard button[onclick*="openQuickRemoteHistoryModal"][onclick],
  #dashboard button[onclick*="openUrgentAlertModal"][onclick],
  #dashboard button[onclick*="openAllAiRecommendationsModal"][onclick] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}



/* STEP 5-1N-R1 MOBILE ROOT SCROLL LOCK */
@media (max-width: 1024px) and (display-mode: standalone) {

  html.infra-mobile-modal-scroll-lock,
  html.infra-mobile-modal-scroll-lock body {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;

    overscroll-behavior: none !important;
  }

  /*
   * 모달 자체의 내부 스크롤은 유지.
   * 배경 홈만 잠금.
   */
  html.infra-mobile-modal-scroll-lock
  #tenant-incident-history-modal,
  html.infra-mobile-modal-scroll-lock
  #event-log-history-modal,
  html.infra-mobile-modal-scroll-lock
  #quick-remote-history-modal,
  html.infra-mobile-modal-scroll-lock
  #urgent-alert-modal,
  html.infra-mobile-modal-scroll-lock
  #ai-recommendations-modal {
    overscroll-behavior: contain !important;
  }
}



/* STEP 0 DEVICE MAP PC 5 COLUMN FINAL */
@media (min-width: 1024px) {
  #topology-view .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  #topology-view .grid > div {
    min-width: 0 !important;
    width: 100% !important;
  }
}



/* STEP 0-3 MOBILE APPROVAL AUTO HEIGHT FINAL */
/*
 * 설치 PWA의 단말 변경 승인 센터 전용
 * - 내용이 적으면 내용 높이에 맞춰 축소
 * - 내용이 많으면 화면 범위까지만 확대
 * - 목록 영역만 내부 세로 스크롤
 * - 메인 홈 / PC 브라우저 영향 없음
 */
@media (max-width: 1024px) and (display-mode: standalone) {

  .mobile-auth-center-modal {
    padding: max(8px, env(safe-area-inset-top))
             max(8px, env(safe-area-inset-right))
             max(8px, env(safe-area-inset-bottom))
             max(8px, env(safe-area-inset-left))
             !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
  }

  .mobile-auth-center-modal > div {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
  }

  .mobile-auth-center-modal
  > div
  > div:first-child {
    flex: 0 0 auto !important;

    min-height: 46px !important;

    padding: 8px 10px !important;

    flex-wrap: nowrap !important;

    align-items: center !important;
  }

  .mobile-auth-center-modal
  #pending-users-list {
    flex: 0 1 auto !important;

    height: auto !important;
    min-height: 0 !important;

    max-height: calc(100dvh - 82px) !important;

    padding: 8px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /*
   * 승인 요청 카드가 1건처럼 적을 경우
   * 불필요하게 빈 공간을 크게 만들지 않습니다.
   */
  .mobile-auth-center-modal
  #pending-users-list
  > * {
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
  }

  /*
   * 요청 카드 내부의 긴 텍스트 때문에
   * 승인센터 전체 폭이 가로로 밀려나지 않도록 합니다.
   */
  .mobile-auth-center-modal
  #pending-users-list
  .min-w-0 {
    min-width: 0 !important;
  }

  .mobile-auth-center-modal
  #pending-users-list
  button,
  .mobile-auth-center-modal
  #pending-users-list
  select,
  .mobile-auth-center-modal
  #pending-users-list
  input,
  .mobile-auth-center-modal
  #pending-users-list
  textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}



/* STEP 0-3 MOBILE APPROVAL REAL HEIGHT OVERRIDE */
/*
 * 기존 #admin-auth-modal > div 의 ID selector가
 * .mobile-auth-center-modal > div 보다 우선하여
 * height:calc(100dvh - 10px)를 계속 적용하던 문제를
 * 동일한 ID selector 우선순위로 최종 재정의합니다.
 */
@media (max-width: 1024px) and (display-mode: standalone) {

  #admin-auth-modal.mobile-auth-center-modal {
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #admin-auth-modal.mobile-auth-center-modal > div {
    width: min(720px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;

    /*
     * 기존 전체화면 고정 높이를 완전히 제거
     */
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;

    display: flex !important;
    flex-direction: column !important;

    border-radius: 16px !important;
    overflow: hidden !important;
  }

  #admin-auth-modal.mobile-auth-center-modal
  #pending-users-list {
    flex: 0 1 auto !important;

    height: auto !important;
    min-height: 0 !important;

    /*
     * 헤더 높이를 제외한 범위까지만 내부 스크롤
     */
    max-height: calc(100dvh - 78px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;
  }

  /*
   * 내용이 적을 때 빈 공간을 강제로 만들지 않습니다.
   */
  #admin-auth-modal.mobile-auth-center-modal
  #pending-users-list
  > * {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
}



/* STEP 0-3 MOBILE APPROVAL UNIVERSAL AUTO HEIGHT R50 */
/*
 * 실제 #admin-auth-modal 전용.
 *
 * standalone 여부에 의존하지 않습니다.
 * 모바일/태블릿 웹기반 앱 환경에서 실제 ID selector에
 * 직접 적용하여 기존 100dvh 고정 규칙을 확실히 제거합니다.
 */
@media (max-width: 1024px) {

  #admin-auth-modal.mobile-auth-center-modal {
    padding: max(8px, env(safe-area-inset-top))
             max(8px, env(safe-area-inset-right))
             max(8px, env(safe-area-inset-bottom))
             max(8px, env(safe-area-inset-left))
             !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
  }

  /*
   * 기존:
   * height: calc(100dvh - 10px)
   *
   * -> 내용 기반 auto height로 전환
   */
  #admin-auth-modal.mobile-auth-center-modal > div {
    width: min(
      720px,
      calc(100vw - 16px)
    ) !important;

    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;

    display: flex !important;
    flex-direction: column !important;

    border-radius: 16px !important;

    overflow: hidden !important;
  }

  /*
   * 실제 모달 본문은 flex-1을 해제하고
   * 콘텐츠 자체 높이를 사용하게 합니다.
   *
   * 내용이 적으면 모달도 작아지고,
   * 내용이 많으면 max-height까지만 커집니다.
   */
  #admin-auth-modal.mobile-auth-center-modal
  > div
  #pending-users-list {
    flex: 0 1 auto !important;

    height: auto !important;
    min-height: 0 !important;

    max-height: calc(100dvh - 78px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;

    overscroll-behavior: contain !important;

    -webkit-overflow-scrolling: touch !important;
  }

  /*
   * 대기 카드 자체에 강제 높이가 생기지 않도록 합니다.
   */
  #admin-auth-modal.mobile-auth-center-modal
  #pending-users-list
  > * {
    flex: 0 0 auto !important;

    height: auto !important;
    min-height: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
  }

  /*
   * 실제 헤더는 고정 크기,
   * 목록만 내용에 따라 늘어나도록 합니다.
   */
  #admin-auth-modal.mobile-auth-center-modal
  > div
  > div:first-child {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    max-height: none !important;
  }
}



/* STEP 0-3 MOBILE APPROVAL ACTION BUTTON READABILITY FINAL R51 */
/*
 * 모바일/태블릿 승인센터의 계약 연장/갱신/반려 액션 버튼 전용.
 * 기존 다른 승인 버튼에는 영향을 주지 않습니다.
 */
@media (max-width: 1024px) {

  #admin-auth-modal.mobile-auth-center-modal
  #pending-users-list
  select[id^="contract-renewal-term-"]
  + .flex
  button {
    min-height: 40px !important;

    padding: 0 12px !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;
    letter-spacing: -0.1px !important;

    border-radius: 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;
    word-break: keep-all !important;

    box-sizing: border-box !important;

    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /*
   * 두 버튼 사이 간격 확보
   */
  #admin-auth-modal.mobile-auth-center-modal
  #pending-users-list
  select[id^="contract-renewal-term-"]
  + .flex {
    gap: 8px !important;
    width: 100% !important;
  }

  /*
   * 연장/갱신 처리 버튼
   */
  #admin-auth-modal.mobile-auth-center-modal
  #pending-users-list
  select[id^="contract-renewal-term-"]
  + .flex
  button:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;

    background: #059669 !important;
    color: #ffffff !important;

    border: 1px solid #047857 !important;

    box-shadow:
      0 2px 4px rgba(0,0,0,0.12) !important;
  }

  /*
   * 반려 버튼
   */
  #admin-auth-modal.mobile-auth-center-modal
  #pending-users-list
  select[id^="contract-renewal-term-"]
  + .flex
  button:last-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;

    background: #dc2626 !important;
    color: #ffffff !important;

    border: 1px solid #b91c1c !important;

    box-shadow:
      0 2px 4px rgba(0,0,0,0.12) !important;
  }
}



/* STEP 0-3 MOBILE APPROVAL TERM SELECT READABILITY R53 */
/*
 * 모바일/태블릿 승인센터 계약기간 선택 셀렉트 전용
 */
@media (max-width: 1024px) {

  #admin-auth-modal.mobile-auth-center-modal
  #pending-users-list
  select[id^="contract-renewal-term-"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 0 12px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;
    letter-spacing: -0.1px !important;

    border-radius: 9px !important;
    border-width: 2px !important;

    box-sizing: border-box !important;

    color: #065f46 !important;
    background-color: #ffffff !important;

    white-space: nowrap !important;

    cursor: pointer !important;

    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /*
   * 옵션 글자도 동일한 가독성 기준 적용
   */
  #admin-auth-modal.mobile-auth-center-modal
  #pending-users-list
  select[id^="contract-renewal-term-"] option {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background: #ffffff !important;
  }
}



/* STEP 0-3 MOBILE CONTRACT ALERT BUTTON SIZE */
/*
 * 계약 연장/갱신/반려 관련 SweetAlert 버튼 전용.
 * 모바일/태블릿에서만 적용하며 PC 화면은 변경하지 않습니다.
 */
@media (max-width: 1024px) {

  .swal2-container
  .mobile-contract-alert-confirm,
  .swal2-container
  .mobile-contract-alert-cancel {
    min-height: 40px !important;

    padding: 0 16px !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;
    letter-spacing: -0.1px !important;

    border-radius: 9px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;
    word-break: keep-all !important;

    box-sizing: border-box !important;

    touch-action: manipulation !important;

    margin-top: 4px !important;
  }

  .swal2-container
  .mobile-contract-alert-confirm {
    min-width: 96px !important;
  }

  .swal2-container
  .mobile-contract-alert-cancel {
    min-width: 82px !important;
  }

  /*
   * 확인/취소 버튼 간격
   */
  .swal2-container
  .swal2-actions {
    gap: 8px !important;
  }
}




/* ==========================================================
   STEP 5 ADDITION: 로그관리 모달 긴 증상 내용 가로폭 제한
   - 장애 통계 전체보기 모달 가로폭/스크롤 변경 없음
   - 로그관리 4번째 컬럼만 자연 줄바꿈
   ========================================================== */

#tenant-group-logs-detail-modal
> div
> div:nth-child(2) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

#tenant-group-logs-detail-modal table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

#tenant-group-logs-detail-modal th,
#tenant-group-logs-detail-modal td {
    max-width: 0 !important;
}

#tenant-group-logs-detail-modal th:nth-child(1) {
    width: 17% !important;
}

#tenant-group-logs-detail-modal th:nth-child(2) {
    width: 10% !important;
}

#tenant-group-logs-detail-modal th:nth-child(3) {
    width: 23% !important;
}

#tenant-group-logs-detail-modal th:nth-child(4) {
    width: 40% !important;
}

#tenant-group-logs-detail-modal th:nth-child(5) {
    width: 10% !important;
}

#tenant-group-logs-detail-modal th:nth-child(4),
#tenant-group-logs-detail-modal td:nth-child(4) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
    max-width: none !important;
}