/* Design tokens */
:root {
  /* ============================================================
     FHD (1920px) 기준 vw 반응형 스케일 시스템
     변환 공식: (px / 1920) * 100 = vw
     ============================================================ */

  /* vw 기반 spacing */
  --space-1: 0.208vw; /* 4px @ FHD */
  --space-2: 0.417vw; /* 8px @ FHD */
  --space-3: 0.625vw; /* 12px @ FHD */
  --space-4: 0.781vw; /* 15px @ FHD */
  --space-5: 1.042vw; /* 20px @ FHD */

  /* vw 기반 border-radius */
  --radius-sm: 0.208vw; /* 4px @ FHD */
  --radius-md: 0.417vw; /* 8px @ FHD */
  --radius-lg: 0.625vw; /* 12px @ FHD */
  --radius-xl: 1.25vw; /* 24px @ FHD */

  /* vw 기반 font-size */
  --font-xs: 0.469vw; /* 9px @ FHD */
  --font-sm: 0.625vw; /* 12px @ FHD */
  --font-base: 0.677vw; /* 13px @ FHD */
  --font-md: 0.833vw; /* 16px @ FHD */
  --font-lg: 1.094vw; /* 21px @ FHD */
  --font-xl: 1.25vw; /* 24px @ FHD */
  --font-2xl: 2.083vw; /* 40px @ FHD */

  /* vw 기반 widget 크기 */
  --header-height: 60px; /* 헤더 높이 고정 (UnifiedHeader height: 60px와 동일) */
  --widget-gap: 0.781vw; /* 15px @ FHD */
  --row-gap: 0.99vw; /* 19px @ FHD */
  --stat-card-height: 5.885vw; /* 113px @ FHD */
  --widget-height: 17.5vw; /* 336px @ FHD */
  --widget-padding: 1.042vw; /* 20px @ FHD */

  /* Colors */
  --gray-50: #f8f9fa;
  --gray-100: #f7fafc;
  --gray-200: #edf2f7;
  --gray-300: #e0e0e0;
  --gray-400: #cbd5e0;
  --gray-500: #a0aec0;
  --gray-700: #4a5568;
  --gray-800: #2d3748;

  --brand: #6366f1; /* indigo-500 */
  --brand-200: #f5f0ff; /* light brand bg */

  /* vw 기반 shadow */
  --shadow-sm: 0 0.104vw 0.417vw rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0.208vw 0.625vw rgba(0, 0, 0, 0.15);
  --shadow-widget: 0 0 0.391vw 0 rgba(0, 0, 0, 0.15);

  --transition-fast: 0.2s ease;
  --transition-med: 0.3s ease;
}

/* 말줄임표 처리 */
.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* =========================
   BaseTable 스타일
   ========================= */

.base-table-search-section {
  padding-bottom: 18px;
}

.base-table-search-wrapper {
  width: 337px;
  position: relative;
}

.base-table-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.base-table-search-input {
  width: 337px;
  height: 36px;
  padding-left: 14px;
  border: 2px solid #e6e8ea;
}

.base-table-search-input:focus {
  outline: none;
  box-shadow: none;
  border-color: #000;
}

.base-table-search-input::placeholder {
  color: #d1d1d1;
  font-size: 12px;
}
.base-table-th {
  font-size: clamp(11px, 0.625vw, 18px) !important;
  padding: clamp(4px, 0.3vw, 12px) clamp(6px, 0.4vw, 14px) !important;
}

.base-table-td {
  font-size: clamp(10px, 0.57vw, 16px) !important;
  padding: clamp(4px, 0.3vw, 12px) clamp(6px, 0.4vw, 14px) !important;
  vertical-align: middle;
}

.col-filter-btn-base-table {
  border: 1px solid #e6e8ea;
  border-radius: 4px;
}

/* BaseTable 스크롤바 숨기기 (스크롤 기능은 유지) */
/* 기존 base-table-outer 숨김 규칙은 유지되나, 분리된 헤더/바디 구조에서는 아래 클래스를 사용 */

/* BaseTable 분리 헤더/바디 레이아웃 */

.base-table-header-container {
  overflow: visible;
}

.base-table-header-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.base-table-header-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.base-table-body-container {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0; /* flex 컨테이너 내에서 스크롤 영역 확보 */
}

/* BaseTable 루트는 플렉스 레이아웃을 사용 (헤더/바디 분리 시 필요) */
.base-table {
  display: flex;
  flex-direction: column;
}

.base-table-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Column Filter Dropdown 스타일 */
.col-filter-dropdown {
  width: 175px;
  border-radius: 6px;
}
.col-filter-dropdown-inner {
  padding: 8px 10px 7px;
}
.col-filter-dropdown-inner > div.relative {
  padding-bottom: 8px;
}
.col-filter-dropdown input[type="text"] {
  width: 100%;
  height: 27px;
  border: 1px solid #e6e8ea;
  border-radius: 20px;
  box-sizing: border-box;
  font-size: 9px;
  padding: 8px 24px 6px 12px;
}
.col-filter-dropdown input[type="text"]::placeholder {
  font-size: 9px;
  color: #d1d1d1;
}
.col-filter-search-icon {
  width: 10px;
  height: 10px;
  top: 29%;
  right: 6px;
  transform: translateX(-50%);
}
.col-filter-reset-icon {
  width: 15px;
  height: 15px;
}
.col-filter-options {
  height: 158px;
  font-size: 12px;
}
.col-filter-btn {
  font-size: 13px;
  flex: 1;
  text-align: center;
  white-space: nowrap;
}
.col-filter-apply-btn {
  color: #fff;
  background-color: #e9e9e9;
  border-radius: 4px;
  padding: 4px 14px;
}
.col-filter-apply-btn.active {
  background-color: #2385f6;
}

/* =========================
   System Settings Modal 스타일
   ========================= */
.system-settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.system-settings-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.system-settings-modal {
  position: relative;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.system-settings-modal-detail {
  max-width: 600px;
}

.system-settings-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e8eaed;
  background-color: #fafafa;
}

.system-settings-header-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #202124;
}

.system-settings-back-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 8px;
}

.system-settings-back-btn:hover {
  background-color: #f1f3f4;
}

.system-settings-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
}

.system-settings-close-btn:hover {
  background-color: #f1f3f4;
}

.system-settings-body {
  padding: 0 2rem 1rem;
  overflow-y: auto;
  flex: 1;
}

.system-settings-title-section {
  margin: 2rem 0;
}

.system-settings-main-title {
  font-size: 2rem;
  font-weight: 600;
  color: #1a73e8;
  margin: 0 0 0.5rem 0;
}

.system-settings-subtitle {
  color: #5f6368;
  margin: 0;
}

.system-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.system-settings-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e8eaed;
}

.system-settings-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.system-settings-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.system-settings-card-header h2 {
  font-size: 1.125rem;
  font-weight: 500;
  color: #202124;
  margin: 0;
}

.system-settings-card > p {
  font-size: 0.875rem;
  color: #5f6368;
  margin: 0;
  line-height: 1.5;
}

.system-settings-card-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e8eaed;
  color: #5f6368;
}

.system-settings-detail-header {
  margin: 1.5rem 0;
}

.system-settings-detail-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a73e8;
  margin: 0 0 0.5rem 0;
}

.system-settings-detail-header p {
  color: #5f6368;
  margin: 0;
  font-size: 0.875rem;
}

.system-settings-footer {
  padding: 1rem 2rem;
  border-top: 1px solid #e8eaed;
  display: flex;
  justify-content: center;
}

.system-settings-close-action-btn {
  padding: 0.5rem 1.5rem;
  background-color: white;
  color: #202124;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.system-settings-close-action-btn:hover {
  background-color: #f1f3f4;
}

/* =========================
   Setting Dialog (상세 설정 모달) 스타일
   ========================= */
.setting-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: settingDialogFadeIn 0.2s ease-out;
}

.setting-dialog-container {
  background: white;
  width: 700px;
  max-width: 90%;
  max-height: 80vh;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  animation: settingDialogSlideUp 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.setting-dialog-header {
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.setting-dialog-close {
  cursor: pointer;
  font-size: 28px;
  color: #999;
  line-height: 1;
  font-weight: 300;
}

.setting-dialog-close:hover {
  color: #666;
}

.setting-dialog-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.setting-dialog-footer {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.setting-dialog-btn-cancel {
  padding: 8px 20px;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.setting-dialog-btn-cancel:hover {
  color: #333;
}

.setting-dialog-btn-save {
  padding: 8px 20px;
  border: none;
  background: #2563eb;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.setting-dialog-btn-save:hover {
  background: #1d4ed8;
}

@keyframes settingDialogFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes settingDialogSlideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =========================
   Unit Settings Form (Wonik.Data 디자인과 동일)
   ========================= */

.unit-setting-form {
  padding: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.unit-form-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
  align-items: center;
}

.unit-form-header {
  font-weight: 600;
  font-size: 1rem;
  color: #333;
}

.unit-form-header.decimal-header {
  justify-self: start;
}

.unit-form-label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.unit-form-label label {
  font-weight: 500;
  font-size: 1rem;
  text-align: end;
  color: #333;
}

.unit-form-select {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.unit-form-select select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
}

.unit-form-select select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.unit-form-select.time-select {
  grid-column: 2 / 3;
}

/* =========================
   Display Settings Form (Wonik.Data 디자인과 동일)
   ========================= */

.display-setting-panel-layout {
  display: flex;
  height: 100%;
  min-height: 400px;
}

.display-setting-checkbox-panel {
  flex: 1;
  padding: 1.5rem;
  border-right: 1px solid #e0e0e0;
  max-height: 500px;
  overflow-y: auto;
}

.display-setting-select-all {
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.display-setting-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.display-setting-list-item {
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}

.display-setting-list-item:hover {
  background-color: #f8f9fa;
}

.display-setting-list-item.disabled {
  opacity: 0.6;
}

.display-setting-preview-panel {
  flex: 1;
  padding: 1.5rem;
  background: #f8f9fa;
  max-height: 500px;
  overflow-y: auto;
}

.display-setting-preview-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #202124;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #2563eb;
}

.display-setting-preview-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.display-setting-selected-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.display-setting-selected-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.display-setting-selected-item.fixed-item {
  background-color: #e8e8e8;
  cursor: default;
}

.display-setting-selected-item.draggable {
  cursor: move;
}

.display-setting-selected-item.dragging {
  opacity: 0.4;
  background-color: #e0f7fa !important;
  border: 2px dashed #26c6da !important;
}

.display-setting-selected-item.drop-target {
  border: 2px dashed #26c6da !important;
  background-color: #e0f7fa !important;
}

.display-setting-selected-item .drag-handle {
  margin-right: 8px;
  color: #888;
  cursor: grab;
  font-size: 1.1rem;
}

.display-setting-selected-item .item-text {
  flex: 1;
  font-weight: 500;
  color: #202124;
  font-size: 0.9rem;
}

.display-setting-no-selection {
  padding: 2rem;
  text-align: center;
  color: #5f6368;
  background: white;
  border-radius: 4px;
  font-style: italic;
}

/* 스크롤바 스타일 */
.display-setting-checkbox-panel::-webkit-scrollbar,
.display-setting-preview-panel::-webkit-scrollbar {
  width: 6px;
}

.display-setting-checkbox-panel::-webkit-scrollbar-track,
.display-setting-preview-panel::-webkit-scrollbar-track {
  background: transparent;
}

.display-setting-checkbox-panel::-webkit-scrollbar-thumb,
.display-setting-preview-panel::-webkit-scrollbar-thumb {
  background: rgba(160, 160, 160, 0.5);
  border-radius: 10px;
}

.display-setting-checkbox-panel::-webkit-scrollbar-thumb:hover,
.display-setting-preview-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(130, 130, 130, 0.7);
}

/* =========================
   Request Progress Widget 테이블 스타일
   ========================= */

.request-progress-table-container {
  overflow-x: auto;
  overflow-y: auto;
  height: 100%;
  border-top: 1px solid #d1d1d1;
  -webkit-overflow-scrolling: touch;
}

/* 가로 스크롤바 스타일 */
.request-progress-table-container::-webkit-scrollbar {
  height: 0.417vw; /* 8px @ FHD */
  width: 0.417vw; /* 8px @ FHD */
}

.request-progress-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 0.208vw;
}

.request-progress-table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 0.208vw;
}

.request-progress-table-container::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.request-progress-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* vw 기반 행 높이 - 7줄 표시를 위해 축소 */
.request-progress-table th {
  white-space: nowrap;
  padding: clamp(4px, 0.3vw, 6px) clamp(6px, 0.4vw, 8px);
  height: clamp(32px, 2vw, 40px); /* 헤더 행 축소 */
  box-sizing: border-box;
  font-size: clamp(10px, 0.6vw, 12px);
}

.request-progress-table td {
  white-space: nowrap;
  padding: clamp(4px, 0.25vw, 5px) clamp(6px, 0.4vw, 8px);
  height: clamp(36px, 2.3vw, 44px); /* 데이터 행 축소 */
  box-sizing: border-box;
  font-size: clamp(9px, 0.55vw, 11px);
}

/* =========================
   StatusBadge 스타일
   ========================= */

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 77px;
  height: 24px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  text-align: center;
}

.status-badge-pass {
  background-color: #298bff;
}

.status-badge-fail {
  background-color: #e30000;
}

.status-badge-incoming {
  background-color: #ffb114;
}

.status-badge-in-process {
  background-color: #298bff;
}

.status-badge-in-storage {
  background-color: #3fa654;
}

.status-badge-disposed {
  background-color: #e30000;
}

.status-badge-default {
  background-color: #9ca3af;
}

/* 설비 상세 테이블 상태 배지 */
.status-badge-used {
  background-color: #3fa654;
}

.status-badge-unused {
  background-color: #d1d1d1;
  color: #000000;
}

.status-badge-faulty {
  background-color: #e30000;
}

/* Step Badge 스타일 */
.status-badge-charge {
  background-color: #fba8a8;
  color: #000000;
}

.status-badge-discharge {
  background-color: #2385f6;
}

.status-badge-rest {
  background-color: #fcf6b6;
  color: #000000;
}

.status-badge-pattern {
  background-color: #8464af;
}

.status-badge-impedance {
  background-color: #88dd9f;
  color: #000000;
}

.status-badge-ocv {
  background-color: #b8b8b8;
}

/* =========================
   FullScreenModal 스타일
   ========================= */

.fullscreen-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
}

.fullscreen-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}

.fullscreen-modal-backdrop.visible {
  opacity: 1;
}

.fullscreen-modal-backdrop.hidden {
  opacity: 0;
}

.fullscreen-modal-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px;
}

.fullscreen-modal-content {
  position: relative;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  max-width: calc(100vw - 60px);
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.fullscreen-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 28px 0 28px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.fullscreen-modal-header-no-title {
  position: relative;
  padding: 0;
  padding-right: 40px;
}

.fullscreen-modal-header-title {
  display: flex;
  align-items: center;
  gap: 24px;
  line-height: 1;
}

.fullscreen-modal-header-title h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1;
}

.fullscreen-modal-close-btn {
  transition: background-color 0.2s ease;
}

.fullscreen-modal-close-btn:hover {
  background-color: #e5e7eb;
}

.fullscreen-modal-close-btn svg {
  width: 24px;
  height: 24px;
  color: #4b5563;
}

.fullscreen-modal-close-btn:hover svg {
  color: #1f2937;
}

.fullscreen-modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 67px 28px;
  background-color: white;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}

.fullscreen-modal-body.no-padding {
  padding: 0;
}

.fullscreen-modal-scroll-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 모달 안의 페이지 컴포넌트들 */
.fullscreen-modal-scroll-wrapper > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 모달 안의 테이블은 남은 공간을 채움 */
.fullscreen-modal-scroll-wrapper .base-table {
  flex: 1;
  height: auto !important;
  min-height: 0;
}

.fullscreen-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ========== Search Highlight ========== */
mark {
  background-color: #fef08a; /* yellow-200 */
  color: #1f2937; /* gray-900 */
  padding: 2px 0;
  border-radius: 2px;
  font-weight: 500;
}

/* ========== Containers ========== */
.dashboard-container {
  padding: var(--space-5);
}

.dashboard-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(
    12,
    1fr
  ); /* size-1: span 4, size-2: span 6, size-3: span 12 */
  gap: var(--space-4);

  margin-bottom: var(--space-5);
  min-height: 250px; /* 200px → 250px */
  border-radius: var(--radius-md);
  background: var(--gray-50);
  transition: border-color var(--transition-fast),
    background var(--transition-fast);
}

.dashboard-row:hover {
  border-color: var(--gray-400);
  background: var(--gray-100);
}

/* .dashboard-row.drag-over 및 rowHighlight 애니메이션 제거됨 */

.row-label {
  position: absolute;
  top: -10px;
  left: 10px;
  padding: 2px 8px;
  background: #fff;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}

/* ========== Widget ========== */
.dashboard-widget {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: move;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease-out,
    filter 0.2s ease;
  will-change: transform, box-shadow;
}

.dashboard-widget:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dashboard-widget:active {
  opacity: 0.8;
  cursor: grabbing;
  transform: scale(0.99);
}

.dashboard-widget.resizing {
  outline: 2px dashed var(--brand);
  transition: outline 0.15s ease, grid-column 0.1s ease-out;
}

.dashboard-widget.resize-limit {
  outline: 2px dashed #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.dashboard-widget.drag-over-widget {
  outline: 2px solid var(--brand);
  background-color: rgba(99, 102, 241, 0.05);
}

.dashboard-widget.dragging {
  opacity: 0.4;
  /* pointer-events는 유지 - 드롭 타겟으로 필요 */
}

/* Width presets (12-col grid) */
.dashboard-widget.size-1 {
  grid-column: span 4;
} /* 1/3 */
.dashboard-widget.size-2 {
  grid-column: span 6;
} /* 1/2 */
.dashboard-widget.size-4 {
  grid-column: span 8;
} /* 2/3 */
.dashboard-widget.size-3 {
  grid-column: span 12;
} /* Full */

/* Resize handle - removed, using edge-based resizing instead */

/* ========== Widget Header ========== */
.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4); /* 상하 패딩 증가: 20px */
  min-height: 56px; /* 최소 높이 설정 */
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-300);
  cursor: grab;
  transition: background 0.2s ease, border-color 0.2s ease;
  user-select: none; /* 텍스트 선택 방지 */
}

.widget-header:hover {
  background: var(--gray-100);
  border-bottom-color: var(--gray-400);
}

.widget-header:active {
  cursor: grabbing;
  background: var(--gray-200);
}

.widget-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--gray-800);
  transition: color 0.2s ease;
}

.drag-handle {
  user-select: none;
  font-size: 20px; /* 18px → 20px */
  font-weight: 700; /* 더 두껍게 */
  color: var(--gray-500);
  cursor: grab;
  padding: 4px; /* 클릭 영역 확대 */
  margin: -4px; /* 패딩 보정 */
  transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  border-radius: 4px;
}

.drag-handle:hover {
  color: var(--brand);
  background: rgba(99, 102, 241, 0.1); /* 배경 하이라이트 */
  transform: scale(1.15); /* 1.1 → 1.15 */
}

.drag-handle:active {
  cursor: grabbing;
  transform: scale(0.95);
  background: rgba(99, 102, 241, 0.2);
}

/* ========== Widget Controls ========== */
.size-controls {
  display: flex;
  gap: var(--space-2);
}

.size-controls button {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: background var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast);
}

.size-controls button:hover {
  background: var(--gray-200);
  border-color: var(--gray-500);
}

.size-controls button.active {
  background: #4299e1;
  border-color: #4299e1;
  color: #fff;
}

.size-controls button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ========== Widget Body ========== */
.widget-content {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

/* 양쪽 가장자리 및 하단 가장자리에서 리사이즈 커서 표시 */
.widget-content {
  position: relative;
}

/* 좌측 가장자리 */
.widget-content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  cursor: ew-resize;
  z-index: 10;
  background: linear-gradient(
    to right,
    rgba(99, 102, 241, 0),
    rgba(99, 102, 241, 0)
  );
  transition: background 0.2s ease;
}

/* WidgetTile style (vw 반응형) */
.widget-tile {
  width: 100%;
  padding: 1.042vw; /* 20px @ FHD */
  padding-bottom: 0.5vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
.widget-tile.current-completed-tile {
  padding: clamp(10px, 0.625vw, 14px);
  padding-bottom: clamp(6px, 0.365vw, 8px);
}
.widget-tile.current-completed-tile .widget-head {
  margin-bottom: clamp(4px, 0.313vw, 8px);
}
.widget-tile.login-info-tile {
  padding: 1.042vw; /* 20px @ FHD - 상하좌우 동일 */
}
.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 0.625vw; /* 12px @ FHD */
}
.widget-head h3 {
  font-size: 1.094vw; /* 21px @ FHD */
  margin: 0;
  font-weight: 600;
}

.last-updated {
  font-size: var(--font-sm);
  opacity: 0.7;
}
.last-updated-icon {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.last-updated-icon:hover {
  opacity: 0.65;
}
.last-updated-icon img {
  display: block;
}

/* 전체보기 아이콘 버튼 */
.view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  background: none;
  border: none;
}
.view-all-btn:hover {
  opacity: 0.65;
}
.view-all-btn img {
  display: block;
}

/* 전역 툴팁 (body 레벨) */
.global-tooltip {
  position: fixed;
  background-color: white;
  color: #d1d1d1;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 99999;
  font-weight: 600;
}
.global-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.widget-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  container-type: size; /* 높이 기반 container query 지원 */
}
.widget-body.skeleton {
  opacity: 0.6;
}
.widget-body.error {
  color: #b91c1c;
}
.retry {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.widget-foot {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.8;
  flex-shrink: 0;
}

/* ========== 공통 위젯 타일 스타일(기존 유지) ========== */
.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.widget-head-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex: 1;
}

.widget-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  right: 20px;
  top: 18px;
}
.last-updated {
  font-size: 12px;
  opacity: 0.7;
}
.widget-body.skeleton {
  opacity: 0.6;
}
.widget-body.error {
  color: #b91c1c;
}
.retry {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.widget-foot {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.8;
}

/* 우측 가장자리 */
.widget-content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px;
  cursor: ew-resize;
  z-index: 10;
  background: linear-gradient(
    to left,
    rgba(99, 102, 241, 0),
    rgba(99, 102, 241, 0)
  );
  transition: background 0.2s ease;
}

.widget-content:hover::before {
  background: linear-gradient(
    to right,
    rgba(99, 102, 241, 0.05),
    rgba(99, 102, 241, 0)
  );
}

.widget-content:hover::after {
  background: linear-gradient(
    to left,
    rgba(99, 102, 241, 0.05),
    rgba(99, 102, 241, 0)
  );
}

/* 하단 가장자리 - 높이 조절용 */
.widget-content .resize-handle-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  cursor: ns-resize;
  z-index: 10;
  background: linear-gradient(
    to top,
    rgba(99, 102, 241, 0),
    rgba(99, 102, 241, 0)
  );
  transition: background 0.2s ease;
}

.widget-content:hover .resize-handle-bottom {
  background: linear-gradient(
    to top,
    rgba(99, 102, 241, 0.05),
    rgba(99, 102, 241, 0)
  );
}

.widget-info {
  text-align: center;
  color: var(--gray-700);
  font-size: 14px;
  line-height: 1.8;
}
.widget-info div {
  padding: 2px 0;
}

/* ========== Responsive ========== */
/* 예시: 좁은 화면에서 size-1을 6칸, size-2를 12칸로 내려 배치 */
@media (max-width: 1024px) {
  .dashboard-widget.size-1 {
    grid-column: span 6;
  }
  .dashboard-widget.size-2 {
    grid-column: span 12;
  }
}

@media (max-width: 640px) {
  .dashboard-widget.size-1,
  .dashboard-widget.size-2,
  .dashboard-widget.size-3 {
    grid-column: span 12;
  }
}

/* =========================
   PX Dashboard Layout (DashboardLayout2)
   ========================= */

/* ========== PX Containers (vw 반응형) ========== */

.px-dashboard-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%; /* wrapper의 패딩을 제외한 전체 높이 */
  gap: var(--row-gap); /* row-gap (vw 반응형) */
  box-sizing: border-box;
}

.px-dashboard-row {
  position: relative;
  gap: var(--widget-gap);
  display: flex;
  flex-wrap: nowrap;
  /* flex는 인라인 스타일로 제어 (Row0,1: 0 0 {height}px, Row2: 1 1 auto) */
  min-height: 0;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
    background var(--transition-fast);
}

.px-dashboard-row:hover {
  border-color: var(--gray-400);
  background: var(--gray-100);
}

/* .px-dashboard-row.px-drag-over 드래그 효과 제거됨 */

.px-row-label {
  position: absolute;
  top: -0.521vw; /* -10px @ FHD */
  left: 0.521vw; /* 10px @ FHD */
  padding: 0.104vw 0.417vw; /* 2px 8px @ FHD */
  background: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--gray-500);
}

/* ========== PX Widget (vw 반응형) ========== */
.px-widget {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-widget);
  cursor: move;
  transition: box-shadow 0.15s ease-out;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%; /* flex 자식이 부모 높이를 채우도록 */
  border: 0.104vw solid #e6e8ea; /* 2px @ FHD */
  /* Performance: Isolate layout/style recalculations */
  contain: layout style;
}

.px-widget:hover {
  box-shadow: var(--shadow-md);
}

.px-widget:active {
  cursor: grabbing;
  box-shadow: var(--shadow-md);
  outline: 1px solid var(--brand);
  z-index: 100;
}

/* 드래그 중 모든 효과 비활성화 (성능 최적화) */
body.px-dragging .px-widget {
  transition: none !important;
  transform: none !important;
}

body.px-dragging .px-widget:hover,
body.px-dragging .px-widget:active {
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 터치패드 드래그 피드백 */

.px-widget.px-resizing {
  outline: 2px dashed var(--brand);
  transition: outline 0.15s ease;
  z-index: 99;
}

.px-widget.px-resize-limit {
  outline: 2px dashed #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
  animation: shake 0.3s ease-in-out;
}

.px-widget.px-drag-over-widget {
  outline: 2px solid var(--brand);
  background-color: rgba(99, 102, 241, 0.05);
}

/* ========== PX Widget Header ========== */
.px-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  min-height: 56px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-300);
  cursor: grab;
  transition: background 0.2s ease, border-color 0.2s ease;
  user-select: none;
  flex-shrink: 0;
}

.px-widget-header:hover {
  background: var(--gray-100);
  border-bottom-color: var(--gray-400);
}

.px-widget-header:active {
  cursor: grabbing;
  background: var(--gray-200);
}

.px-widget-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--gray-800);
  transition: color 0.2s ease;
}

.px-drag-handle {
  user-select: none;
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-500);
  cursor: grab;
  padding: 4px;
  margin: -4px;
  transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  border-radius: 4px;
}

.px-drag-handle:hover {
  color: var(--brand);
  background: rgba(99, 102, 241, 0.1);
  transform: scale(1.15);
}

.px-drag-handle:active {
  cursor: grabbing;
  transform: scale(0.95);
  background: rgba(99, 102, 241, 0.2);
}

/* ========== PX Widget Content ========== */
.px-widget-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  overflow: auto;
  transition: height 0.15s ease-out;
}

/* Cell 현황 위젯: 부모 컨테이너를 완전히 채우도록 */
.px-widget-content:has(.battery-count-connected) {
  align-items: stretch;
  justify-content: stretch;
}

/* Cell 현황 위젯: transform/will-change 항상 해제 (드롭다운 fixed positioning이 viewport 기준으로 동작하도록) */
.px-widget:has(.battery-count-connected),
.px-widget:has(.battery-count-connected):hover {
  will-change: auto;
  transform: none !important;
}

/* Cell 현황 위젯: 드롭다운이 열려있을 때 z-index 높임 및 contain 해제 */
.px-widget:has(.period-dropdown) {
  z-index: 100;
  contain: none !important;
  overflow: visible !important;
}

/* =========================
   Cell 현황 위젯 (BatteryCountWidget) 스타일
   ========================= */

/* =========================
   Cell 현황 위젯 (vw 반응형)
   ========================= */
.battery-count-connected {
  display: flex;
  gap: 0;
  width: 100%;
  height: 100%;
  flex: 1;
  align-self: stretch;
}

.battery-count-connected .stat-item {
  flex: 1;
  padding: 1.875vw 1.563vw; /* 36px 30px @ FHD */
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-color: white;
  border: none;
  border-right: 1px solid #e6e8ea;
  cursor: pointer;
}

.battery-count-connected .stat-item:first-child {
  border-radius: 0;
}

.battery-count-connected .stat-item:last-child {
  border-radius: 0;
  border-right: none;
  position: relative;
}

/* Cell 현황 위젯 최근 업데이트 아이콘 (폐기/반출 카드 우측 상단) */
.battery-count-connected .stat-maintenance .cell-last-updated {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

/* 기간 설정 버튼 (폐기/반출 카드 우측 하단) */
.battery-count-connected .period-setting-btn {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
}

.battery-count-connected .period-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.battery-count-connected .period-btn svg {
  width: 20px;
  height: 20px;
  padding: 4px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  color: #374151;
}

.battery-count-connected .period-btn:hover svg {
  background: rgba(107, 114, 128, 0.1);
}

.battery-count-connected .stat-maintenance:hover .period-btn {
  color: white;
}

.battery-count-connected .stat-maintenance:hover .period-btn svg {
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}

.battery-count-connected .stat-maintenance:hover .period-btn:hover svg {
  background: rgba(255, 255, 255, 0.2);
}

/* 드롭다운 메뉴 - fixed position으로 위젯 밖에 표시 */
.battery-count-connected .period-dropdown {
  min-width: 120px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  overflow: hidden;
}

/* 드롭다운 헤더 */
.battery-count-connected .period-dropdown-header {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

/* 드롭다운 옵션 컨테이너 */
.battery-count-connected .period-dropdown-options {
  padding: 4px 0;
}

/* 드롭다운 옵션 버튼 */
.battery-count-connected .period-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.battery-count-connected .period-option:hover {
  background-color: #f3f4f6;
}

.battery-count-connected .period-option.selected {
  color: #2385f6;
}

.battery-count-connected .period-option.selected svg {
  color: #2385f6;
}

/* 드롭다운 푸터 */
.battery-count-connected .period-dropdown-footer {
  padding: 8px 12px;
}

/* 적용하기 버튼 */
.battery-count-connected .period-apply-btn {
  width: 100%;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background-color: #2385f6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.battery-count-connected .period-apply-btn:hover {
  background-color: #1a6fd4;
}

.battery-count-connected .stat-label {
  font-size: 1.094vw; /* 21px @ FHD */
  color: #6b7280;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.battery-count-connected .stat-highlight {
  font-weight: 700;
}

.battery-count-connected .stat-value {
  font-size: 2.083vw; /* 40px @ FHD */
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* 카드별 색상 - Default */
.battery-count-connected .stat-total .stat-value,
.battery-count-connected .stat-total .stat-label {
  color: #2385f6;
}

.battery-count-connected .stat-active .stat-value,
.battery-count-connected .stat-active .stat-label {
  color: #3fa654;
}

.battery-count-connected .stat-inactive .stat-value,
.battery-count-connected .stat-inactive .stat-label {
  color: #ffb114;
}

.battery-count-connected .stat-maintenance .stat-value,
.battery-count-connected .stat-maintenance .stat-label {
  color: #f05f42;
}

/* Hover 상태 */
.battery-count-connected .stat-total:hover {
  background-color: #2385f6;
}

.battery-count-connected .stat-total:hover .stat-value,
.battery-count-connected .stat-total:hover .stat-label {
  color: white;
}

.battery-count-connected .stat-active:hover {
  background-color: #3fa654;
}

.battery-count-connected .stat-active:hover .stat-value,
.battery-count-connected .stat-active:hover .stat-label {
  color: white;
}

.battery-count-connected .stat-inactive:hover {
  background-color: #ffb114;
}

.battery-count-connected .stat-inactive:hover .stat-value,
.battery-count-connected .stat-inactive:hover .stat-label {
  color: white;
}

.battery-count-connected .stat-maintenance:hover {
  background-color: #f05f42;
}

.battery-count-connected .stat-maintenance:hover .stat-value,
.battery-count-connected .stat-maintenance:hover .stat-label {
  color: white;
}

.battery-count-connected .spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #e5e7eb;
  border-top-color: #6b7280;
  border-radius: 50%;
  animation: battery-spinner 1s linear infinite;
}

@keyframes battery-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 좌측 가장자리 */
.px-widget-content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  cursor: ew-resize;
  z-index: 10;
  background: linear-gradient(
    to right,
    rgba(99, 102, 241, 0),
    rgba(99, 102, 241, 0)
  );
  transition: background 0.2s ease;
}

/* 우측 가장자리 */
.px-widget-content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px;
  cursor: ew-resize;
  z-index: 10;
  background: linear-gradient(
    to left,
    rgba(99, 102, 241, 0),
    rgba(99, 102, 241, 0)
  );
  transition: background 0.2s ease;
}

.px-widget-content:hover::before {
  background: linear-gradient(
    to right,
    rgba(99, 102, 241, 0.05),
    rgba(99, 102, 241, 0)
  );
}

.px-widget-content:hover::after {
  background: linear-gradient(
    to left,
    rgba(99, 102, 241, 0.05),
    rgba(99, 102, 241, 0)
  );
}

/* 하단 가장자리 - 높이 조절용 */
.px-widget-content .px-resize-handle-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  cursor: ns-resize;
  z-index: 10;
  background: linear-gradient(
    to top,
    rgba(99, 102, 241, 0),
    rgba(99, 102, 241, 0)
  );
  transition: background 0.2s ease;
}

.px-widget-content:hover .px-resize-handle-bottom {
  background: linear-gradient(
    to top,
    rgba(99, 102, 241, 0.05),
    rgba(99, 102, 241, 0)
  );
}

.px-widget-info {
  text-align: center;
  color: var(--gray-700);
  font-size: 14px;
  line-height: 1.8;
}

.px-widget-info div {
  padding: 2px 0;
}

/* =========================
   Drag Handle Box (Grid & PX) - REMOVED
   위젯 전체를 드래그 가능하도록 변경
   ========================= */

/* =========================
   Battery Count Widget - Container Query Responsive Layout
   ========================= */

/* Battery Count Widget Responsive Layout with Container Queries */
.battery-count-grid {
  container-type: inline-size;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  height: 100%;
  width: 100%;
}

@container (max-width: 600px) {
  .battery-count-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .battery-count-grid .stat-card {
    padding: 16px;
  }
  .battery-count-grid .stat-label {
    font-size: 12px;
  }
  .battery-count-grid .stat-value {
    font-size: 24px;
  }
}

@container (max-width: 400px) {
  .battery-count-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
    padding: 8px;
  }
  .battery-count-grid .stat-card {
    padding: 12px;
  }
  .battery-count-grid .stat-label {
    font-size: 11px;
  }
  .battery-count-grid .stat-value {
    font-size: 20px;
  }
}

.stat-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 24px;
  border: 2px solid #e9ecef;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat-card.active {
  background: #d4edda;
  border-color: #28a745;
}

.stat-card.inactive {
  background: #f8d7da;
  border-color: #dc3545;
}

.stat-card.maintenance {
  background: #fff3cd;
  border-color: #ffc107;
}

.stat-label {
  font-size: 14px;
  color: #6c757d;
  transition: font-size 0.2s ease;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #212529;
  transition: font-size 0.2s ease;
}

/* =========================
   Pie Chart Widget
   ========================= */

.pie-chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  overflow: hidden;
}

.pie-chart {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.pie-segment {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.pie-segment:hover {
  opacity: 0.85;
}

.pie-label-name {
  font-size: 11px;
  font-weight: 600;
  fill: #1f2937;
}

.pie-label-percentage {
  font-size: 13px;
  font-weight: bold;
  fill: #1f2937;
}

.pie-update-time {
  font-size: 9px;
  fill: #9ca3af;
}

.pie-center-text-sub {
  font-size: 12px;
  fill: #6b7280;
}

.pie-chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.pie-chart-container .apexcharts-datalabels {
  transform: translate(0, 0) !important;
}

.pie-chart-container .apexcharts-datalabel-label,
.pie-chart-container .apexcharts-datalabel-value {
  fill: #fff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
}

.pie-update-time {
  margin-top: 1rem;
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
}

.pie-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.empty-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #f3f4f6;
  margin-bottom: 1rem;
}

.pie-empty-state p {
  color: #6b7280;
  font-size: 14px;
}

/* =========================
   Login Info Widget (Container Query)
   ========================= */

/* =========================
   Login Info Widget (vw 반응형)
   ========================= */
.login-info-container {
  container-type: size;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 기본 스타일 (vw 기반) */
.login-icon {
  width: 1.667vw; /* 32px @ FHD */
  height: 1.667vw; /* 32px @ FHD */
}
.login-title {
  font-size: 0.833vw; /* 16px @ FHD */
  font-weight: 600;
  line-height: 1.2;
}
.login-time {
  font-size: 0.625vw; /* 12px @ FHD */
  color: #00418e;
  font-weight: 600;
  line-height: 1.2;
}
.login-gap {
  gap: 0.469vw; /* 9px @ FHD */
}
.login-empty-message {
  text-align: center;
  font-size: 0.729vw; /* 14px @ FHD */
  color: #6b7280;
}

/* Small: width >= 180px (9.375vw) */
@container (min-width: 9.375vw) {
  .login-icon {
    width: 2.083vw; /* 40px @ FHD */
    height: 2.083vw; /* 40px @ FHD */
  }
}

/* Medium: width >= 220px (11.458vw) */
@container (min-width: 11.458vw) {
  .login-icon {
    width: 2.5vw; /* 48px @ FHD */
    height: 2.5vw; /* 48px @ FHD */
  }
}

/* Large: width >= 280px (14.583vw) */
@container (min-width: 14.583vw) {
  .login-icon {
    width: 2.917vw; /* 56px @ FHD */
    height: 2.917vw; /* 56px @ FHD */
  }
}

/* XLarge: width >= 350px */
/* =========================
   Process Status Widget (Container Query with Breakpoints)
   width AND height 둘 다 커야 컨텐츠가 커짐
   ========================= */

/* 위젯 컨테이너 - widget-body의 container-type: size 활용 */
.process-status-container {
  padding: clamp(0.5rem, min(2cqw, 4cqh), 0.75rem);
  gap: clamp(8px, min(6cqw, 12cqh), 34px);
}

/* 도넛 차트 섹션 */
.process-chart-section {
  flex: 0 0 auto; /* 고정 크기 (늘어나지 않음) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

/* 도넛 차트 래퍼 - 반응형 크기 (너비/높이 중 작은 값 기준) */
.donut-chart-wrapper {
  position: relative;
  width: clamp(100px, min(38cqw, 76cqh), 220px);
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.donut-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* 막대 그래프 섹션 */
.process-bar-section {
  flex: 1; /* 남은 공간 모두 차지 */
  gap: clamp(4px, 8cqh, 20px);
}

/* 범례 스타일 - 반응형 크기 (너비/높이 중 작은 값 기준) */
.process-legend {
  gap: clamp(4px, min(2cqw, 4cqh), 7px);
  margin-top: clamp(4px, 2cqh, 12px);
}

.legend-dot {
  width: clamp(6px, min(2cqw, 4cqh), 10px);
  height: clamp(6px, min(2cqw, 4cqh), 10px);
  border-radius: 50%;
}

.legend-text {
  font-size: clamp(9px, min(2.5cqw, 5cqh), 12px);
  color: #000;
  font-weight: 500;
}

/* 막대그래프 레이블 - 반응형 크기 (너비/높이 중 작은 값 기준) */
.process-bar-section .bar-label {
  font-size: clamp(10px, min(3cqw, 6cqh), 16px);
  font-weight: 600;
  color: #000;
}

.process-bar-section .bar-percent {
  font-size: clamp(12px, min(4cqw, 8cqh), 18px);
  font-weight: 600;
}

.process-bar-section .bar-track {
  height: clamp(6px, 2.2cqh, 14px);
  background-color: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

.process-bar-section .bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

/* 도넛 차트 퍼센트 텍스트 - 반응형 크기 (너비/높이 중 작은 값 기준) */
.donut-percent-text {
  font-size: clamp(10px, min(3cqw, 6cqh), 14px);
  font-weight: 700;
  fill: #464c53;
}

/* =========================
   Pie Chart (Alarm Widget) - Container Query
   ========================= */

/* 알람 위젯 컨테이너 (process-status-container 오버라이드) */
/* widget-body의 container-type: size 를 활용 */
.alarm-status-widget {
  padding: clamp(0.5rem, min(2cqw, 4cqh), 0.75rem);
  gap: clamp(8px, min(6cqw, 12cqh), 34px);
}

/* 알람 위젯 차트 섹션 */
.alarm-chart-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* 알람 위젯 파이차트 래퍼 - 반응형 크기 (너비/높이 중 작은 값 기준) */
.alarm-status-widget .pie-chart-wrapper {
  width: clamp(80px, min(38cqw, 76cqh), 200px);
}

/* 알람 위젯 bar-section */
.alarm-status-widget .process-bar-section {
  flex: 1;
  gap: clamp(4px, 8cqh, 20px);
}

/* 알람 위젯 bar-label 스타일 - 반응형 크기 (너비/높이 중 작은 값 기준) */
.alarm-status-widget .bar-label {
  font-size: clamp(9px, min(3cqw, 6cqh), 13px);
  font-weight: 500;
}

/* 알람 위젯 범례 점 - 반응형 크기 (clamp + 높이 반응) */
.alarm-legend-dot {
  width: clamp(10px, min(3.5cqw, 7cqh), 18px);
  height: clamp(10px, min(3.5cqw, 7cqh), 18px);
}

/* 알람 위젯 막대그래프 (50% 작게) */
.alarm-bar-track {
  height: clamp(5px, 2.2cqh, 14px);
}

/* 알람 위젯 퍼센트 - 반응형 크기 (너비/높이 중 작은 값 기준) */
.alarm-status-widget .bar-percent {
  font-size: clamp(12px, min(4.5cqw, 9cqh), 18px);
  width: 38px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

/* 파이 차트 래퍼 - vw 기반 min/max + cqw 반응 */
.pie-chart-wrapper {
  position: relative;
  width: clamp(6vw, 40cqw, 10vw); /* FHD: 115px ~ 192px - Figma 기준 */
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.pie-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* 파이 차트 퍼센트 텍스트 - 반응형 크기 */
.pie-percent-text {
  font-size: clamp(9px, 2.5cqw, 12px);
  font-weight: 700;
  fill: #808080;
}

/* =========================
   Running Time Top 5 Widget (Container Query)
   ========================= */

/* =========================
   Running Time Top 5 Widget (vw 반응형)
   Container Queries: width AND height 둘 다 커야 컨텐츠가 커짐
   ========================= */
.running-time-container {
  container-type: size;
  gap: 0.26vw; /* 5px @ FHD */
  justify-content: center;
}

.process-item {
  gap: 0.104vw; /* 2px @ FHD */
}

/* Running Time 텍스트 - vw 기반 반응형 */
.process-name {
  font-size: clamp(0.729vw, 3.8cqw, 0.833vw); /* 14px ~ 16px @ FHD */
}

.process-bar {
  height: 1.406vw; /* 27px @ FHD */
}

.time-text {
  font-size: 0.729vw; /* 14px @ FHD */
}

/* =========================
   Dashboard Container (vw 반응형)
   ========================= */

/* 대시보드 페이지일 때 body 스크롤 방지 */
body.dashboard-page {
  overflow: hidden;
}

.dashboard-wrapper {
  height: calc(100vh - var(--header-height));
  padding: 19px 20px 16px;
  box-sizing: border-box;
}

/* =========================
   Current Completed Widget (최근 완료 공정) - vw 반응형
   ========================= */

.current-completed-container {
  container-type: size;
  height: 100%;
}

.completed-card {
  flex: 1 1 0;
  gap: 0;
  border-bottom: 0.052vw solid #e6e8ea; /* 1px @ FHD */
  padding: clamp(4px, 0.417vw, 8px) 0;
}
.completed-card:last-child {
  border-bottom: 0;
}

.completed-info {
  flex: 1 1 28%;
  min-width: 0;
}

.completed-bar {
  width: 0.208vw; /* 4px @ FHD */
  height: 100%;
  min-height: 1.25vw; /* 24px @ FHD */
  align-self: center;
  margin-right: 0.208vw; /* 4px @ FHD */
  background-color: #298bff;
}

.completed-process-name {
  font-size: 0.677vw; /* 13px @ FHD */
  line-height: 1.1;
  font-weight: 600;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-serial {
  font-size: 0.625vw; /* 12px @ FHD */
  line-height: 1.1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-column {
  flex: 1 1 16%;
  min-width: 0;
}

/* End Date 컬럼 (첫 번째 completed-column) */
.completed-card > .completed-column:nth-child(2) {
  flex: 1 1 28%;
  padding: 0;
}

/* Duration 컬럼 (두 번째 completed-column) */
.completed-card > .completed-column:nth-child(3) {
  flex: 1 1 16%;
  padding: 0;
}

.completed-label {
  font-size: 0.625vw; /* 12px @ FHD */
  font-weight: 600;
  color: #808080;
  line-height: 1.1;
}

.completed-value {
  font-size: 0.677vw; /* 13px @ FHD */
  font-weight: 500;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-status {
  flex: 0 1 21%;
  min-width: 0;
  padding-left: 0.417vw; /* 8px @ FHD */
  font-size: 0.521vw; /* 10px @ FHD */
  line-height: 1.1;
  height: 100%;
  margin-bottom: 0;
}

.status-dot {
  width: 0.521vw; /* 10px @ FHD */
  height: 0.521vw; /* 10px @ FHD */
  background-color: #298bff;
  margin-right: 0.313vw; /* 6px @ FHD */
  flex-shrink: 0;
}

.status-text {
  color: #298bff;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Small: width >= 500px (26.042vw @ FHD) */
@container (min-width: 26.042vw) {
  .completed-info {
    flex: 1 1 30%;
  }
  .completed-card > .completed-column:nth-child(2) {
    flex: 1 1 29%;
  }
  .completed-card > .completed-column:nth-child(3) {
    flex: 0 1 18%;
  }
  .completed-status {
    flex: 0 1 16%;
    font-size: 0.625vw; /* 12px @ FHD */
  }
  .completed-bar {
    margin-right: 0.365vw; /* 7px @ FHD */
  }
  .completed-process-name {
    font-size: 0.729vw; /* 14px @ FHD */
  }
  .completed-serial {
    font-size: 0.573vw; /* 11px @ FHD */
  }
  .completed-label {
    font-size: 0.625vw; /* 12px @ FHD */
  }
  .completed-value {
    font-size: 0.677vw; /* 13px @ FHD */
  }
}

/* Medium: width >= 550px (28.646vw @ FHD) */
@container (min-width: 28.646vw) {
  .completed-bar {
    width: 0.208vw; /* 4px @ FHD */
  }
  .completed-process-name {
    font-size: 0.781vw; /* 15px @ FHD */
  }
  .completed-serial {
    font-size: 0.625vw; /* 12px @ FHD */
  }
  .completed-label {
    font-size: 0.625vw; /* 12px @ FHD */
  }
  .completed-value {
    font-size: 0.677vw; /* 13px @ FHD */
  }
  .completed-status {
    font-size: 0.625vw; /* 12px @ FHD */
  }
}

/* Large: width >= 700px (36.458vw @ FHD) */
@container (min-width: 36.458vw) {
  .completed-process-name {
    font-size: 0.833vw; /* 16px @ FHD */
  }
  .completed-serial {
    font-size: 0.677vw; /* 13px @ FHD */
  }
  .completed-label {
    font-size: 0.677vw; /* 13px @ FHD */
  }
  .completed-value {
    font-size: 0.677vw; /* 13px @ FHD */
  }
  .completed-status {
    font-size: 0.625vw; /* 12px @ FHD */
  }
}

/* =========================
   Chamber Status Widget (챔버 가동률) - vw 반응형
   ========================= */

/* 챔버 위젯: overflow hidden으로 변경 */
.chamber-widget .widget-body {
  overflow: hidden;
}

.chamber-status-container {
  justify-content: flex-start; /* 기본: 높이 300px 미만일 때 */
}

.chamber-gauge-row {
  display: flex;
  justify-content: space-around; /* 균등 배치 */
  gap: 0;
}

/* 1개일 때 좌측 정렬 - "챔버 온도 현황" 타이틀과 정렬 */
.chamber-gauge-row:has(> :only-child) {
  justify-content: flex-start;
  margin-left: 4.458cqw;
}

.chamber-gauge-card {
  min-width: 4.167vw; /* 80px @ FHD */
}

/* 챔버 반원 게이지 - cqw 기반 (FHD 1920 기준 환산) */
.chamber-gauge-svg {
  width: 153px; /* 컨테이너 400px 기준: 76px ~ 116px */
  aspect-ratio: 138 / 64;
}

.chamber-gauge-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* 기본: 높이 250px 미만 (최소 크기) - vw 기반 */
.chamber-gauge-percent {
  font-size: clamp(0.5vw, 4.2cqw, 4vw); /* 15px ~ 25px @ FHD - Figma 기준 */
  font-weight: 600;
  line-height: 1.2;
}

.chamber-gauge-name {
  font-size: clamp(0.5vw, 3.5cqw, 0.85vw); /* 10px ~ 16px @ FHD - Figma 기준 */
  font-weight: 600;
  line-height: 1.2;
  max-width: 15cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 온도 그래프 섹션 */
.chamber-temp-section {
  min-height: 0;
}

/* 온도 그래프 타이틀 - 컨테이너 쿼리 기반 */
.chamber-temp-title {
  font-size: clamp(16px, 2.5cqw, 20px); /* 컨테이너 기반 */
  font-weight: 600;
  margin-left: 4.458cqw; /* 컨테이너 너비 기반 */
  margin-top: 3cqh; /* 컨테이너 높이 기반 */
  margin-bottom: 0.5cqh; /* 컨테이너 높이 기반 */
}

.chamber-temp-chart-wrapper {
  position: relative;
  flex: 1; /* 남은 공간 차지 */
  min-height: 4vw; /* 77px @ FHD */
  max-height: 7vw; /* 134px @ FHD */
  padding-left: 1.6vw; /* 19px @ FHD */
  padding-right: 0.8vw; /* 15px @ FHD */
  padding-bottom: 0; /* x축에 붙이기 */
  height: clamp(4vw, 39cqh, 7vw);
}

/* ========================================
   위젯용 차트 CSS (vw 반응형)
   ======================================== */
.chamber-temp-chart-custom {
  position: relative;
  height: 100%;
  width: 100%;
}

/* 위젯 Y축 레이블 컨테이너 */
.widget-chart-y-labels {
  position: absolute;
  left: 0;
  top: 0.521vw; /* 10px @ FHD */
  bottom: 1.302vw; /* 25px @ FHD */
  width: 1.563vw; /* 30px @ FHD */
  pointer-events: none;
}

/* 위젯 Y축 개별 레이블 */
.widget-chart-yaxis-label {
  position: absolute;
  right: 0.26vw; /* 5px @ FHD */
  transform: translateY(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #000000;
  text-align: right;
  font-weight: 500;
  font-size: 0.521vw; /* 10px @ FHD */
}

/* 위젯 X축 레이블 컨테이너 */
.widget-chart-x-labels {
  position: absolute;
  left: 1.823vw; /* 35px @ FHD */
  right: 0.521vw; /* 10px @ FHD */
  bottom: 0;
  height: 1.042vw; /* 20px @ FHD */
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

/* 위젯 X축 개별 레이블 */
.widget-chart-xaxis-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #000000;
  font-size: 0.469vw; /* 9px @ FHD */
  text-align: center;
  font-weight: 500;
}

/* 위젯 SVG 차트 */
.widget-chart-svg {
  position: absolute;
  left: 1.823vw; /* 35px @ FHD */
  right: 0.521vw; /* 10px @ FHD */
  top: 0.521vw; /* 10px @ FHD */
  bottom: 1.302vw; /* 25px @ FHD */
  width: calc(100% - 2.344vw); /* 100% - 45px @ FHD */
  height: calc(100% - 1.823vw); /* 100% - 35px @ FHD */
}

/* X축 레이블 (정확한 위치 계산용) */
.widget-chart-x-labels-exact {
  position: absolute;
  left: 1.823vw; /* 35px @ FHD - SVG와 동일 */
  right: 0.521vw; /* 10px @ FHD - SVG와 동일 */
  bottom: 0;
  height: 1.042vw; /* 20px @ FHD */
  pointer-events: none;
}

.widget-chart-xaxis-label-exact {
  position: absolute;
  transform: translateX(-50%);
  color: #000000;
  font-size: 0.469vw; /* 9px @ FHD */
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
}

/* ========================================
   상세 모달용 차트 CSS (기존 유지)
   ======================================== */

/* Y축 레이블 컨테이너 */
.chamber-temp-chart-wrapper .chart-y-labels {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 25px;
  width: 30px;
  pointer-events: none;
}

/* Y축 개별 레이블 */
.chart-yaxis-label {
  position: absolute;
  right: 5px;
  transform: translateY(-50%);
  color: #000000;
  font-size: 6px;
  text-align: right;
  font-weight: 500;
}

/* X축 레이블 컨테이너 */
.chart-x-labels {
  position: absolute;
  left: 35px;
  right: 10px;
  bottom: 0;
  height: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  pointer-events: none;
}

/* X축 개별 레이블 */
.chart-xaxis-label {
  font-size: 9px;
  text-align: right;
  flex: 1;
  font-weight: 500;
}

/* SVG 차트 (막대 + Grid) */
.chart-svg {
  position: absolute;
  left: 35px;
  right: 10px;
  top: 10px;
  bottom: 25px;
  width: calc(100% - 45px);
  height: calc(100% - 35px);
}

/* Equipment 상세보기용 차트 컨테이너 */
.equipment-temp-chart-custom {
  position: relative;
  height: 147px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 25px;
}

.equipment-temp-chart-custom .chart-y-labels {
  position: absolute;
  left: -8px;
  top: 10px;
  bottom: 25px;
  width: 30px;
  pointer-events: none;
}

/* 채널 차트 y축 레이블 너비 (숫자 + ch 단위) */
.equipment-temp-chart-custom.channel-chart .chart-y-labels {
  width: 45px;
}

.equipment-temp-chart-custom.channel-chart .chart-x-labels {
  left: 60px;
  width: calc(100% - 60px);
}

.equipment-temp-chart-custom.channel-chart .chart-svg {
  left: 50px;
  width: calc(100% - 60px);
}

.equipment-temp-chart-custom .chart-x-labels {
  left: 50px;
  right: 10px;
  width: calc(100% - 50px);
  justify-content: space-between;
}

.equipment-temp-chart-custom .chart-svg {
  left: 26px;
  bottom: 25px;
  width: calc(100% - 26px);
  height: calc(100% - 35px);
}

.equipment-temp-chart-custom .chart-yaxis-label {
  font-size: 10px;
  right: 5px;
  font-weight: 500;
}

.equipment-temp-chart-custom .chart-xaxis-label {
  font-size: 10px;
  text-align: center;
  flex: 0 0 auto;
  font-weight: 500;
}

/* Equipment 상세보기용 wrapper */
.equipment-temp-chart-wrapper {
  position: relative;
  flex: 1;
  min-height: 147px;
  max-height: 147px;
}

.chart-label-value {
  position: absolute;
  left: 15px;
  top: 5px;
  font-size: 10px;
  color: #808080;
  writing-mode: vertical-rl;
  transform: rotate(0deg);
}

.chart-label-temp {
  position: absolute;
  bottom: -12px;
  right: 0px;
  font-size: 10px;
  color: #808080;
}

/* 위젯 크기 450px 이상 */
@container (min-width: 450px) {
  .chart-yaxis-label {
    font-size: 10px;
  }
  .chart-xaxis-label {
    font-size: 10px;
  }
}

/* 위젯 크기 600px 이상 */
@container (min-width: 600px) {
  .chart-yaxis-label {
    font-size: 11px;
  }
  .chart-xaxis-label {
    font-size: 11px;
  }
  .chart-label-value {
    font-size: 10px;
  }
  .chart-label-temp {
    font-size: 10px;
    bottom: -8px;
    right: 30px;
  }
}

/* 위젯 크기 800px 이상 */
@container (min-width: 800px) {
  .chart-yaxis-label {
    font-size: 12px;
  }
  .chart-xaxis-label {
    font-size: 12px;
  }
  .chart-label-value,
  .chart-label-temp {
    font-size: 12px;
  }
}

/* 설비 카드 스타일 (챔버/채널 전체화면) */
.equipment-card {
  background: white;
  border-radius: 8px;
  padding: 20px 20px 30px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid #e6e8ea;
  margin-bottom: 23px; /* 16px */
}

.equipment-card:last-child {
  margin-bottom: 0;
}

.equipment-card:hover {
  border-color: #cbd5e0;
}

/* 모바일 반응형 */
@media (max-width: 640px) {
  .equipment-card {
    margin-bottom: 0.75rem; /* 12px */
  }
}

/* 설비 온도 현황 영역 */
.equipment-temp-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 600;
}

.equipment-temp-chart-area {
  position: relative;
}

/* 위젯 크기 800px 이하일 때 여백 제거 */
@media (max-width: 800px) {
  .equipment-temp-chart-area {
    padding: 0;
  }

  .equipment-card {
    padding: 12px; /* 카드 전체 여백도 축소 */
  }
}

.equipment-temp-unit {
  font-size: 10px;
  color: #808080;
  display: block;
  font-weight: 500;
}

/* 설비 온도 차트 가로선 (그리드 라인) - Y축 라벨과 정확히 정렬 */
.equipment-temp-chart-grid {
  background-image: linear-gradient(#d1d1d1, #d1d1d1),
    linear-gradient(#d1d1d1, #d1d1d1), linear-gradient(#d1d1d1, #d1d1d1),
    linear-gradient(#d1d1d1, #d1d1d1), linear-gradient(#d1d1d1, #d1d1d1);
  background-size: 100% 1px;
  background-position: 0 0%, 0 25%, 0 50%, 0 75%, 0 100%;
  background-repeat: no-repeat;
}

/* 설비 온도 차트 Y축 라벨 */
.equipment-temp-y-axis {
  font-size: 14px;
  color: #000000;
  padding-right: 4px;
  text-align: right;
}

.equipment-temp-y-axis span {
  line-height: 1;
  display: flex;
  align-items: center;
  height: 0; /* 라벨이 정확히 그리드 라인 위치에 오도록 */
}

/* 설비 온도 차트 X축 라벨 */
.equipment-temp-x-axis {
  font-size: 14px;
  color: #000000;
}

/* 설비 카드 가로 막대그래프 */
.equipment-bar-graph {
  width: 100%;
  height: 28px;
  overflow: hidden;
  display: flex;
  border-radius: 4px;
  gap: 5px; /* 막대 사이 흰색 여백 */
  background-color: #ffffff; /* 여백 색상 */
}

.bar-used {
  background-color: #0077ff; /* 사용 - 파란색 */
  border-radius: 4px;
}

.bar-faulty {
  background-color: #e30000; /* 고장 - 빨강 */
  border-radius: 4px;
}

.bar-unused {
  background-color: #d1d1d1; /* 미사용 - 회색 */
  border-radius: 4px;
}

/* 막대그래프 내부 텍스트 */
.bar-text {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.bar-text-white {
  color: #ffffff;
}

.bar-text-gray {
  color: #6b7280;
}

/* 막대그래프 외부 텍스트 (위/아래) */
.bar-label-above {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  top: -11px;
}

.bar-label-below {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  bottom: -4px; /* 막대 아래쪽으로 8px 여백 */
}

/* 고장 텍스트 (항상 빨간색) */
.bar-label-faulty {
  color: #ef4444;
}

/* 미사용 텍스트 (항상 회색) */
.bar-label-unused {
  color: #9ca3af;
}

/* 설비 카드 Total/가동률 영역 */
.equipment-stats-top {
  margin-bottom: 42px;
}
.equipment-stats-left {
  margin-right: 20px;
}

.equipment-total-label {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.equipment-total-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.equipment-total-unit {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.equipment-usage-rate {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.equipment-usage-rate .usage-label {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.equipment-usage-rate .usage-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.equipment-name-wrapper {
  text-align: center;
  line-height: 1;
}

.equipment-name {
  font-size: 28px;
  font-weight: 600;
  display: inline-block;
}

/* 챔버 위젯 좌우 네비게이션 버튼 */
.chamber-nav-btn {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 42px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 10;
}

.chamber-nav-btn:hover {
  color: #9ca3af;
}

.chamber-nav-btn svg {
  width: 100%;
  height: 100%;
}

.chamber-nav-left {
  left: -11px;
}

.chamber-nav-right {
  right: -12px;
}

/* 채널 위젯 좌우 네비게이션 버튼 */
.channel-nav-btn {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 42px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 10;
}

.channel-nav-btn:hover {
  color: #9ca3af;
}

.channel-nav-btn svg {
  width: 100%;
  height: 100%;
}

.channel-nav-left {
  left: 0;
}

.channel-nav-right {
  right: -24px;
}

/* 채널 위젯 상단 통계 카드 */
.channel-stats-section {
  flex-shrink: 0;
  margin-bottom: clamp(8px, 2cqh, 16px);
}

.channel-stats-row {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 1.5cqw, 12px);
}

.channel-stats-card {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5cqw, 12px);
}

.channel-stats-text {
  display: flex;
  flex-direction: column;
}

/* 채널 통계 - 기본 (400px 미만) */

.channel-stats-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.channel-stats-value {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

/* 채널 위젯 컨테이너 (container query용) */
.channel-status-container {
  container-type: size;
  justify-content: center;
  margin-left: -14px;
}

/* 채널 위젯 3열 그리드 */
.channel-widget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  justify-items: center;
  width: 100%;
  gap: 0;
}

.channel-widget-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.channel-widget-column:not(:last-child) {
  border-right: 1px solid #e6e8ea;
}

/* 채널 게이지 카드 */
.channel-gauge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 채널 게이지 SVG 컨테이너 - vw 기반 min/max + cqw 반응 */
.channel-gauge-svg {
  width: clamp(3.5vw, 24cqw, 7vw); /* FHD: 67px ~ 115px - max 축소 */
  aspect-ratio: 228 / 197;
  position: relative;
}

/* 채널 게이지 내부 텍스트 (기본: 400px 이하) */
.channel-gauge-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: clamp(22px, 4cqh, 46px);
}

/* 채널 게이지 라벨 - 반응형 (clamp + 높이 반응) */
.channel-gauge-label {
  font-size: clamp(11px, 2.5cqw, 13px);
  line-height: 1;
  font-weight: 600;
}

/* 채널 게이지 퍼센트 - 반응형 (clamp + 높이 반응) */
.channel-gauge-percent {
  font-size: clamp(12px, 4.3cqw, 24px);
  font-weight: 600;
  line-height: 1;
}

/* 채널 게이지 내부 스펙/채널수 텍스트 - 반응형 (clamp + 높이 반응) */
.channel-gauge-spec {
  font-size: clamp(6px, 1.8cqw, 10px); /* 축소 */
  font-weight: 600;
  line-height: 1;
  margin-top: clamp(1px, 0.5cqh, 6px);
}

.channel-gauge-count {
  font-size: clamp(6px, 1.8cqw, 10px); /* 축소 */
  color: #808080;
  font-weight: 600;
}

/* 채널 통계 아이콘 - 반응형 (clamp + 높이 반응) */

.channel-stats-icon {
  width: clamp(20px, 7cqw, 37px);
  height: clamp(20px, 7cqw, 37px);
}

/* 채널 통계 라벨 - 반응형 (clamp + 높이 반응) */
.channel-stats-label {
  font-size: clamp(9px, min(2cqw, 6cqh), 19px);
}

/* 채널 통계 값 - 반응형 (clamp + 높이 반응) */
.channel-stats-value {
  font-size: clamp(14px, 4.4cqw, 24px);
}

/* ========== 채널 위젯 반응형 (Container Queries) ========== */
/* 채널 위젯 350px 이상 */
@container (min-width: 350px) {
  .channel-gauge-inner {
    top: clamp(15px, 15cqh, 55px);
  }
}

/* 채널 위젯 400px 이상 */
@container (min-width: 400px) {
  .channel-gauge-inner {
    top: clamp(15px, 15cqh, 55px);
  }
  .channel-stats-label {
    font-size: clamp(6px, 3cqw, 16px);
  }
  .channel-stats-value {
    font-size: clamp(14px, 4.4cqw, 24px);
  }

  /* 채널 마지막 컬럼 마진 (기본: 400px 미만) */
  .channel-widget-column:last-of-type .channel-stats-card {
    margin-left: 11px;
  }
}

/* ========== 챔버 위젯 반응형 (Container Queries) ========== */
/* Small: width >= 400px */

@container (min-width: 300px) {
  .channel-gauge-spec {
    margin-top: clamp(8px, 6cqh, 13px);
  }
}
/* Medium: width >= 600px */
@container (min-width: 600px) {
  .channel-widget-column:last-of-type .channel-stats-card {
    margin-left: 0;
  }
  .chamber-temp-title {
    font-size: clamp(16px, 5.5cqw, 20px); /* 컨테이너 기반 */
    font-weight: 600;
    margin-left: 4.458cqw; /* 컨테이너 너비 기반 */
    margin-top: 3cqh; /* 컨테이너 높이 기반 */
    margin-bottom: 0.5cqh; /* 컨테이너 높이 기반 */
  }
}

/* ========== 챔버 위젯 높이 반응형 (min-height, Mobile-First) ========== */
/* 높이 200px 이상 */

/* 높이 250px 이상: 중간 크기 */
@container (min-height: 250px) {
  .chamber-temp-chart-wrapper {
    height: clamp(3vw, 50cqh, 7vw);
  }
}

/* 높이 300px 이상: 기본 크기 */
@container (min-height: 300px) {
  .chamber-status-container {
    justify-content: center; /* 높이 300px 이상일 때 중앙 정렬 */
  }
  .chamber-temp-chart-wrapper {
    height: clamp(3vw, 42cqh, 7vw);
  }
  .chamber-temp-title {
    font-size: clamp(0.8vw, 4cqw, 1vw);
    margin-top: 1vw;
  }
  .chamber-gauge-name {
    font-size: clamp(0.4vw, 2.6cqw, 0.8vw);
  }
}

/* 높이 500px 이상: 차트 래퍼 높이 조정 */
@container (min-height: 500px) {
  .chamber-temp-chart-wrapper {
    height: clamp(4vw, 67cqh, 8vw);
  }
  .chart-label-value {
    left: 20px;
  }
}

/* ========== 챔버 위젯 조합 쿼리 (특수 케이스) ========== */
/* 좁고 높음: 너비 500px 미만 + 높이 300px 이상 */
@container (max-width:400px) and (min-height: 300px) {
  .chamber-gauge-svg {
    width: clamp(19cqw, 25cqw, 32cqw); /* 컨테이너 350px 기준: 67px ~ 112px */
  }
  .chamber-temp-chart-wrapper {
    height: clamp(3vw, 54cqh, 7vw);
  }
  .chamber-gauge-percent {
    font-size: clamp(0.3vw, 4.2cqw, 4vw);
  }
  .chamber-gauge-name {
    font-size: clamp(0.3vw, 1.8cqw, 0.5vw);
  }
}

/* 좁고 낮음: 너비 300px 이하 + 높이 300px 이하 */
@container (max-width: 350px) and (max-height: 300px) {
  .chamber-temp-chart-wrapper {
    height: 55cqh;
  }
}

/* ========== 채널 위젯 반응형 (Container Queries) ========== */
/* 채널 위젯 350px 이상 */
@container (min-width: 350px) {
  .channel-gauge-inner {
    top: clamp(15px, 15cqh, 55px);
  }
}

/* 채널 위젯 400px 이상 */
@container (min-width: 400px) {
  .channel-gauge-inner {
    top: clamp(15px, 15cqh, 55px);
  }
  .channel-stats-label {
    font-size: clamp(6px, 3cqw, 16px);
  }
  .channel-stats-value {
    font-size: clamp(14px, 4.4cqw, 24px);
  }

  /* 채널 마지막 컬럼 마진 (기본: 400px 미만) */
  .channel-widget-column:last-of-type .channel-stats-card {
    margin-left: 11px;
  }
}

@container (min-width: 300px) {
  .channel-gauge-spec {
    margin-top: clamp(8px, 6cqh, 13px);
  }
}

/* Medium: width >= 600px */
@container (min-width: 600px) {
  .channel-widget-column:last-of-type .channel-stats-card {
    margin-left: 0;
  }
  .chamber-temp-title {
    font-size: clamp(16px, 5.5cqw, 20px);
    font-weight: 600;
    margin-left: 4.458cqw;
    margin-top: 3cqh;
    margin-bottom: 0.5cqh;
  }
}

/* ========== 챔버 위젯 높이 반응형 (너비+높이 둘 다 조건 만족 필요, 2:1 비율) ========== */
/* 450px x 225px (2:1 비율) */
@container (min-width: 450px) and (min-height: 225px) {
  .chamber-temp-chart-wrapper {
    height: clamp(3vw, 43cqh, 6vw);
  }
  .chamber-gauge-svg {
    width: 153px;
  }
  .chamber-gauge-percent {
    font-size: 24px;
  }
  .chamber-gauge-name {
    font-size: 18px;
    max-width: 100px;
  }
}

/* 600px x 300px (2:1 비율) */
@container (min-width: 600px) and (min-height: 300px) {
  .chamber-temp-chart-wrapper {
    height: clamp(3vw, 50cqh, 7vw);
  }
  .chamber-gauge-svg {
    width: 180px;
  }
  .chamber-gauge-percent {
    font-size: 32px;
  }
  .chamber-gauge-name {
    font-size: 20px;
    max-width: 120px;
  }
}

/* 800px x 400px (2:1 비율) */
@container (min-width: 800px) and (min-height: 400px) {
  .chamber-status-container {
    justify-content: center;
  }
  .chamber-temp-chart-wrapper {
    height: clamp(3vw, 42cqh, 7vw);
  }
  .chamber-temp-title {
    font-size: clamp(0.8vw, 4cqw, 1vw);
    margin-top: 1vw;
  }
  .chamber-gauge-svg {
    width: 200px;
  }
  .chamber-gauge-percent {
    font-size: 36px;
  }
  .chamber-gauge-name {
    font-size: 22px;
    max-width: 140px;
  }
}

/* 1000px x 500px (2:1 비율) */
@container (min-width: 1000px) and (min-height: 500px) {
  .chamber-temp-chart-wrapper {
    height: clamp(4vw, 67cqh, 8vw);
  }
  .chart-label-value {
    left: 20px;
  }
  .chamber-gauge-svg {
    width: 220px;
  }
  .chamber-gauge-percent {
    font-size: 40px;
  }
  .chamber-gauge-name {
    font-size: 24px;
    max-width: 160px;
  }
}

/* ========== 챔버 위젯 조합 쿼리 (특수 케이스, 2:1 비율) ========== */
/* 좁고 높음: 400px x 200px (2:1 비율) */
@container (max-width: 400px) and (min-height: 200px) {
  .chamber-gauge-svg {
    width: 110px;
  }
  .chamber-temp-chart-wrapper {
    height: clamp(3vw, 49cqh, 7vw);
  }
}

/* 좁고 낮음: 350px x 175px (2:1 비율) */
@container (max-width: 350px) and (max-height: 175px) {
  .chamber-temp-chart-wrapper {
    height: 55cqh;
  }
  .chamber-gauge-svg {
    width: 140px;
  }
  .chamber-gauge-percent {
    font-size: 24px;
  }
  .chamber-gauge-name {
    font-size: 16px;
    max-width: 80px;
  }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #e5e7eb;
  border-top-color: #6b7280;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  /* Performance: Enable GPU acceleration for animation */
  will-change: transform;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========== BaseTable Search ========== */
.base-table-search-container {
  position: relative;
  max-width: 500px; /* 3840px 화면에서 적절한 크기 */
  flex: 1;
}
@media (min-width: 2560px) {
  .base-table-search-container {
    max-width: 600px; /* 큰 화면에서 조금 더 여유있게 */
  }
}

/* ========== Equipment Detail Table ========== */

/* 디테일 영역 - wrapper가 스크롤 담당 */
.equipment-detail-wrapper {
  max-height: 300px;
  overflow-y: auto; /* wrapper가 스크롤 컨테이너 */
  overflow-x: hidden;
}

/* 디테일 테이블에서 검색 섹션 숨김 */
.equipment-detail-wrapper .base-table-search-section {
  display: none !important;
}

/* 디테일 테이블 가로 넘침 방지 */
.equipment-detail-wrapper table,
.equipment-detail-wrapper .base-table table,
table.equipment-detail-table {
  width: 100% !important;
  table-layout: fixed !important;
}

/* 디테일 테이블 셀 텍스트 넘침 처리 */
.equipment-detail-wrapper td,
.equipment-detail-wrapper th,
.equipment-detail-table td,
.equipment-detail-table th {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 0;
}

/* 스크롤바 스타일 - wrapper에 적용 */
.equipment-detail-wrapper::-webkit-scrollbar {
  width: 8px;
}

.equipment-detail-wrapper::-webkit-scrollbar-track {
  background: transparent;
  border: none;
}

.equipment-detail-wrapper::-webkit-scrollbar-thumb {
  background: #d1d1d1;
  border-radius: 4px;
  border: none;
}

.equipment-detail-wrapper::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* 좌측 패널 클릭 시 우측 테이블 행 강조 효과 */
.equipment-detail-wrapper.highlight-row,
tr.highlight-row {
  animation: highlight-pulse 1.5s ease-out;
}

tr.highlight-row td {
  background-color: rgba(0, 119, 255, 0.15) !important;
}

@keyframes highlight-pulse {
  0% {
    background-color: rgba(0, 119, 255, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.equipment-detail-table {
  width: 100%;
  table-layout: fixed;
  border-bottom: 1px solid #d1d1d1;
}

.equipment-detail-thead {
  position: sticky;
  top: 0;
  background-color: #fbfbfb;
  border-bottom: 1px solid #e5e7eb;
  z-index: 5;
}

.equipment-detail-thead tr,
.equipment-detail-thead th {
  background-color: #fbfbfb;
}

/* 디테일 테이블 컬럼 너비 고정 */
.equipment-detail-table th,
.equipment-detail-table td {
  width: 20%;
}

.equipment-detail-table th:first-child,
.equipment-detail-table td:first-child {
  width: 20px;
}

.equipment-detail-thead-row {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.equipment-detail-th,
.base-table-th.equipment-detail-th {
  height: 48px !important;
}

.equipment-detail-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.equipment-detail-th-sortable:hover {
  background-color: #f3f4f6; /* gray-100 */
}

.equipment-detail-tbody-row {
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
}
.equipment-detail-tbody-row:last-of-type {
  border-bottom: 0;
}

.equipment-detail-tbody-row:hover {
  background-color: #ffffff;
}

.equipment-detail-td,
.base-table-td.equipment-detail-td {
  height: 36px !important;
  text-align: center;
  font-weight: 500;
}

.equipment-detail-td-primary {
  font-weight: 500;
}

.equipment-detail-td-secondary {
  color: #000000;
}

.equipment-detail-td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipment-detail-temp-target {
  color: #9ca3af;
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

/* ========== Equipment 디테일 테이블 첫 번째 컬럼 반응형 (트리 구조 들여쓰기) ========== */

/* 작은 화면 기본값 */
@media (max-width: 1199px) {
  .equipment-status-container .equipment-detail-table th:first-child,
  .equipment-status-container .equipment-detail-table td:first-child {
    width: 60px !important;
    max-width: 60px;
  }
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    th:first-child,
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    td:first-child {
    width: 90px !important;
    max-width: 90px;
  }
}

/* 1200px ~ 1399px */
@media (min-width: 1200px) and (max-width: 1399px) {
  .equipment-status-container .equipment-detail-table th:first-child,
  .equipment-status-container .equipment-detail-table td:first-child {
    width: 80px !important;
    max-width: 80px;
  }
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    th:first-child,
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    td:first-child {
    width: 114px !important;
    max-width: 114px;
  }
}

/* 1400px ~ 1599px */
@media (min-width: 1400px) and (max-width: 1599px) {
  .equipment-status-container .equipment-detail-table th:first-child,
  .equipment-status-container .equipment-detail-table td:first-child {
    width: 100px !important;
    max-width: 100px;
  }
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    th:first-child,
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    td:first-child {
    width: 117px !important;
    max-width: 117px;
  }
}

/* 1600px ~ 1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
  .equipment-status-container .equipment-detail-table th:first-child,
  .equipment-status-container .equipment-detail-table td:first-child {
    width: 110px !important;
    max-width: 110px;
  }
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    th:first-child,
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    td:first-child {
    width: 140px !important;
    max-width: 140px;
  }
}

/* 1920px 이상 - 가장 넓게 */
@media (min-width: 1920px) {
  .equipment-status-container .equipment-detail-table th:first-child,
  .equipment-status-container .equipment-detail-table td:first-child {
    width: 120px !important;
    max-width: 120px;
  }
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    th:first-child,
  .equipment-status-container.channel-status-container
    .equipment-detail-table
    td:first-child {
    width: 146px !important;
    max-width: 146px;
  }
}

/* ========== Channel Equipment Card ========== */
.channel-equipment-card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.channel-equipment-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ========== Equipment BaseTable Container (공통) ========== */
.equipment-basetable-container {
  container-type: inline-size; /* 컨테이너 쿼리 활성화 */
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto !important; /* sticky 기준 컨테이너 */
  padding: 0 45px 0 45px;
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 검색 영역 sticky - 스크롤 시 테이블 내용 가리기 */
.equipment-basetable-container .base-table-search-section {
  position: sticky;
  top: 0;
  inset-inline: 0;
  background: white;
  z-index: 30;
  padding-top: 35px;
  padding-bottom: 10px;
  margin-left: -45px;
  margin-right: -45px;
  padding-left: 45px;
  padding-right: 45px;
}

/* 마스터 테이블 헤더 - 디테일 영역보다 위에 표시 */
.equipment-basetable-container > .base-table > div > table > thead {
  z-index: 20 !important;
  background-color: #f0f7ff;
}

.equipment-basetable-container > .base-table > div > table > thead th {
  background-color: #f0f7ff;
}

/* ========== Equipment BaseTable 반응형 스타일 ========== */
/* 테이블 레이아웃 - 비율 기반 */
.equipment-basetable-container table {
  table-layout: auto !important; /* 고정 레이아웃 해제 */
  width: 100%;
}

/* 테이블 헤더 - 반응형 + 비율 기반 너비 */
.equipment-basetable-container th {
  font-size: clamp(11px, 2cqw, 16px);
  height: 48px;
  width: auto !important; /* 인라인 width 오버라이드 */
  min-width: 0;
  white-space: nowrap;
}

/* 테이블 셀 - 반응형 */
.equipment-basetable-container td {
  font-size: clamp(10px, 1.8cqw, 13px);
  width: auto !important;
}

/* 검색창 - 반응형 (메인 검색창만 적용, 컬럼 필터 드롭다운 제외) */
.equipment-basetable-container .base-table .base-table-search-input {
  font-size: clamp(11px, 1.8cqw, 14px);
  padding: clamp(4px, 1cqw, 8px) clamp(8px, 1.5cqw, 12px);
}

/* 검색창 focus 시 변형 제거 (메인 검색창만) */
.equipment-basetable-container .base-table .base-table-search-input:focus {
  outline: none;
  box-shadow: none;
  --tw-ring-shadow: none;
  border-color: inherit;
}

/* 페이지네이션 - 반응형 (필터 버튼, 컬럼 필터 드롭다운 버튼 제외) */
.equipment-basetable-container
  .base-table
  button:not([class*="items-center"]):not(.col-filter-btn) {
  font-size: clamp(10px, 1.6cqw, 14px);
  padding: clamp(2px, 0.5cqw, 4px) clamp(6px, 1cqw, 12px);
}

/* 카운트 텍스트 - 반응형 */
.equipment-basetable-container .base-table th {
  font-size: clamp(10px, 2cqw, 16px);
}

.equipment-basetable-container .base-table th span {
  font-weight: 600;
}

/* 정렬 아이콘 SVG 표시 */
.equipment-basetable-container .base-table .text-wonik-primary svg {
  display: inline-block;
  vertical-align: middle;
}

/* 좌측 패널과 우측 테이블 컨테이너 */
.equipment-status-container {
  gap: 0;
}

/* 좌측 패널 wrapper */
.equipment-left-panel-wrapper {
  min-width: 0;
  border-right: 1px solid #e6e8ea;
}

/* ========== Equipment Table Center Alignment ========== */
.equipment-table-hide-expansion th,
.equipment-table-hide-expansion td {
  text-align: center;
}
.equipment-table-hide-expansion td {
  background-color: #fff;
  font-weight: 500;
}

/* 마스터 테이블 데이터 행 - 작은 높이 */
.equipment-table-hide-expansion td:not([colspan]),
.equipment-table-hide-expansion td.base-table-td:not([colspan]) {
  height: 36px !important;
}

/* 펼쳐진 마스터 행 (디테일 확장 행 바로 위) - 헤더와 동일한 높이 */
.equipment-table-hide-expansion tr:has(+ tr td[colspan]) td:not([colspan]),
.equipment-table-hide-expansion
  tr:has(+ tr td[colspan])
  td.base-table-td:not([colspan]) {
  height: 48px !important;
}

/* Equipment 테이블 헤더 sticky 위치 (검색창 아래) */
.equipment-table-hide-expansion > thead {
  position: sticky;
  top: 81px !important;
  z-index: 10 !important;
}
/* ========== Equipment Panel Padding (Responsive) ========== */
.equipment-panel-padding {
  padding-right: 30px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.equipment-panel-padding::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* 2000px 이하 */
@media (max-width: 3000px) {
  .equipment-panel-padding {
    padding: 40px 45px 0 45px;
  }
}

/* 1600px 이하 */
@media (max-width: 1600px) {
  .equipment-panel-padding {
    padding: 40px 45px 0 45px;
  }
}

/* ========== Equipment Panel Typography - 반응형 ========== */
/* 설비 가동 및 온도현황 타이틀 */
.equipment-panel-title {
  font-size: clamp(16px, 2.5cqw, 21px);
  font-weight: 600;
  margin-bottom: clamp(12px, 2cqw, 20px);
}

/* 빈 상태 메시지 */
.equipment-empty-message {
  text-align: center;
  color: #6b7280;
  font-size: clamp(12px, 1.8cqw, 14px);
}

/* 빈 상태 아이콘 */
.equipment-empty-icon {
  color: #d1d5db;
}

/* 테이블 헤더 텍스트 */
.equipment-table-header-text {
  font-size: clamp(12px, 2cqw, 16px);
  font-weight: 600;
}

/* 테이블 컬럼 스타일 */
.equipment-table-col-name {
  font-weight: 500;
}

.equipment-table-col-total {
  text-align: center;
  font-weight: 500;
}

.equipment-table-col-used {
  text-align: center;
  color: #000000;
  font-weight: 500;
}

.equipment-table-col-unused {
  text-align: center;
  color: #000000;
}

.equipment-table-col-faulty {
  text-align: center;
  color: #000000;
  font-weight: 600;
}

/* 테이블 빈 상태 - 반응형 */
.equipment-table-empty-state {
  text-align: center;
  padding-top: clamp(1.5rem, 4cqw, 3rem);
  padding-bottom: clamp(1.5rem, 4cqw, 3rem);
  color: #6b7280;
  font-size: clamp(12px, 1.8cqw, 14px);
}

/* 테이블 셀 - 반응형 */
.equipment-table-cell {
  padding: clamp(6px, 1cqw, 12px) clamp(8px, 1.2cqw, 16px);
  font-size: clamp(11px, 1.8cqw, 13px);
}

/* 설비 테이블 확장 버튼 - 클릭 시 행 클릭으로 전달 (DetailTemplate 내부 테이블 제외) */
.equipment-table-hide-expansion
  > tbody
  > tr
  > td:first-child:not([colspan])
  button {
  pointer-events: none;
}

/* ========== 챔버 가동현황 전체화면 반응형 (2000px 이하) ========== */

/* 2000px 이하 */
@media (max-width: 3840px) {
  .equipment-name {
    font-size: 24px;
  }
  .equipment-total-label {
    font-size: 13px;
  }
  .equipment-total-value {
    font-size: 16px;
  }
  .equipment-total-unit {
    font-size: 13px;
  }
  .equipment-usage-rate .usage-label {
    font-size: 13px;
  }
  .equipment-usage-rate .usage-value {
    font-size: 16px;
  }
  .bar-text {
    font-size: 13px;
  }
  .bar-label-above,
  .bar-label-below {
    font-size: 13px;
  }
  .equipment-temp-title {
    font-size: 18px;
  }
  .equipment-stats-top {
    margin-bottom: 42px;
  }
  .equipment-basetable-container .base-table-search-section {
    padding-top: 45px;
  }
}

/* 1600px 이하 */
@media (max-width: 1600px) {
  .equipment-card {
    padding: 16px;
    margin-bottom: 24px;
  }
  .equipment-name {
    font-size: 20px;
  }
  .equipment-total-label {
    font-size: 14px;
  }
  .equipment-total-value {
    font-size: 20px;
  }
  .equipment-total-unit {
    font-size: 13px;
  }
  .equipment-usage-rate .usage-label {
    font-size: 14px;
  }
  .equipment-usage-rate .usage-value {
    font-size: 20px;
  }
  .bar-text {
    font-size: 13px;
  }
  .bar-label-above,
  .bar-label-below {
    font-size: 13px;
  }
  .equipment-bar-graph {
    height: 28px;
  }
  .equipment-temp-title {
    font-size: 16px;
  }
  .equipment-stats-top {
    margin-bottom: 30px;
  }
  .equipment-panel-title {
    font-size: 20px;
    margin-bottom: 16px;
  }
}

/* 1400px 이하 */
@media (max-width: 1400px) {
  .equipment-card {
    padding: 14px;
    margin-bottom: 20px;
  }
  .equipment-name {
    font-size: 18px;
  }
  .equipment-total-label {
    font-size: 13px;
  }
  .equipment-total-value {
    font-size: 18px;
  }
  .equipment-total-unit {
    font-size: 13px;
  }
  .equipment-usage-rate .usage-label {
    font-size: 13px;
  }
  .equipment-usage-rate .usage-value {
    font-size: 18px;
  }
  .bar-text {
    font-size: 12px;
  }
  .bar-label-above,
  .bar-label-below {
    font-size: 12px;
  }
  .equipment-bar-graph {
    height: 28px;
  }
  .equipment-temp-title {
    font-size: 15px;
  }
  .equipment-stats-top {
    margin-bottom: 24px;
  }
  .equipment-panel-title {
    font-size: 18px;
    margin-bottom: 14px;
  }
}

/* 1200px 이하 */
@media (max-width: 1200px) {
  .equipment-card {
    padding: 12px;
    margin-bottom: 16px;
  }
  .equipment-name {
    font-size: 16px;
  }
  .equipment-total-label {
    font-size: 12px;
  }
  .equipment-total-value {
    font-size: 16px;
  }
  .equipment-total-unit {
    font-size: 13px;
  }
  .equipment-usage-rate .usage-label {
    font-size: 12px;
  }
  .equipment-usage-rate .usage-value {
    font-size: 16px;
  }
  .equipment-usage-rate {
    margin-top: 8px;
  }
  .bar-text {
    font-size: 11px;
  }
  .bar-label-above,
  .bar-label-below {
    font-size: 11px;
  }
  .equipment-bar-graph {
    height: 28px;
  }
  .equipment-temp-title {
    font-size: 14px;
  }
  .equipment-stats-top {
    margin-bottom: 20px;
  }
  .equipment-panel-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

/* ========== Chamber/Channel Modal Tab ========== */
.modal-tab-btn {
  width: 221px;
  padding: 12px 0;
  font-size: 21px;
  border: 1px solid #e6e8ea;
  border-bottom: 0;
}

/* Equipment 상세보기 테이블 expansion 컬럼 너비 */
.equipment-status-container table th:first-child,
.equipment-status-container table td:first-child {
  width: 20px !important;
  min-width: 20px;
  max-width: 20px;
}
.request-progress-table {
  border-left: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  border-top: 0;
}

/* =========================
   Login Info Widget (vw 반응형)
   ========================= */
.login-info-container {
  container-type: size;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 기본 스타일 (작은 고정 크기) - 좌우나 높이 하나만 커져서는 변화 없음 */
.login-icon {
  width: 32px;
  height: 32px;
}
.login-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.login-time {
  font-size: 11px;
  color: #00418e;
  font-weight: 600;
  line-height: 1.2;
}
.login-gap {
  gap: 6px;
}
.login-empty-message {
  text-align: center;
  font-size: 12px;
  color: #6b7280;
}

/* 중간 크기: 너비 AND 높이 둘 다 커져야 적용 (width >= 250px AND height >= 150px) */
@container (min-width: 250px) and (min-height: 150px) {
  .login-icon {
    width: clamp(48px, 20cqw, 100px);
    height: clamp(48px, 20cqw, 100px);
  }
  .login-title {
    font-size: clamp(16px, 10cqw, 28px);
  }
  .login-time {
    font-size: clamp(13px, 8cqw, 22px);
  }
  .login-gap {
    gap: clamp(8px, 6cqh, 20px);
  }
}

/* 큰 크기: 너비 AND 높이 둘 다 더 커져야 적용 (width >= 400px AND height >= 200px) */
@container (min-width: 400px) and (min-height: 200px) {
  .login-icon {
    width: clamp(64px, 18cqw, 120px);
    height: clamp(64px, 18cqw, 120px);
  }
  .login-title {
    font-size: clamp(20px, 10cqw, 32px);
  }
  .login-time {
    font-size: clamp(16px, 8cqw, 26px);
  }
  .login-gap {
    gap: clamp(12px, 8cqh, 24px);
  }
}