/* ===== Base Template Layout (moved from base.html <style>) ===== */
      /* Global Styles */
      body {
         font-family: 'Noto Sans KR', sans-serif;
         background-color: #f5f7fa;
         /* 부드러운 배경색 */
         color: #333;
         min-height: 100vh;
         display: flex;
         flex-direction: column;
      }

      /* Navbar Styling */
      .navbar {
         /* 고급스러운 그린 그라데이션 */
         background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

         /* 좌우 여백을 2rem(약 32px)으로 늘려 왼쪽 쏠림 해결 */
         padding: 0.8rem 2rem;
      }

      .navbar-brand {
         font-family: 'Poppins', sans-serif;
         font-weight: 700;
         font-size: 1.5rem;
         display: flex;
         align-items: center;
         letter-spacing: 0.5px;
         max-width: 100%;
         white-space: normal !important; /* 부트스트랩 기본 nowrap 속성 강제 무효화 */
      }

      /* 로고 영역 묶음 처리 */
      .brand-title {
         display: flex;
         align-items: center;
         white-space: nowrap;
         font-size: 1.3rem; /* 메뉴보다 약간 더 크게 포인트 */
         font-weight: 700;
      }

      .navbar-brand i.fa-leaf {
         color: #81c784;
         /* 아이콘 포인트 컬러 */
         margin-right: 10px;
      }

      /* 설명 텍스트를 위아래 2줄로 묶는 래퍼 */
      .brand-desc-wrapper {
         display: flex;
         flex-direction: column;
         justify-content: center;
         margin-left: 15px;
         padding-left: 15px;
         border-left: 1px solid rgba(255, 255, 255, 0.4);
         gap: 4px; /* 줄 간격 여유 추가 */
         min-width: 0; /* 플렉스 아이템이 부모 영역을 넘어 생략되지 않고 수축되도록 허용 */
      }

      .brand-desc {
         font-family: 'Noto Sans KR', sans-serif;
         font-size: 0.75rem; /* 더 작은 글씨 사이즈 */
         font-weight: 500;
         color: #ffffff; /* 흰색으로 뚜렷하게 */
         opacity: 1; /* 투명도 제거 */
         white-space: normal !important; /* 화면 크기에 상관없이 텍스트 생략 절대 방지 */
         word-break: keep-all;
         line-height: 1.2;
      }

      /* Nav Items */
      .navbar-dark .navbar-nav .nav-link {
         color: rgba(255, 255, 255, 0.9);
         font-weight: 500;
         font-size: 0.95rem;
         padding: 0.5rem 1rem;
         transition: all 0.3s ease;
         border-radius: 5px;
         white-space: nowrap;
         /* 메뉴 텍스트 줄바꿈 방지 */
      }

      /* 메뉴 아이템 사이에 간격 추가 */
      .navbar-nav .nav-item {
         margin-left: 15px;
      }

      /* 모바일에서는 간격 제거 (세로로 쌓일 때) */
      @media (max-width: 991px) {
         .navbar-nav .nav-item {
            margin-left: 0;
            margin-bottom: 5px;
         }
      }

      .navbar-dark .navbar-nav .nav-link:hover,
      .navbar-dark .navbar-nav .show>.nav-link {
         color: #ffffff;
         background-color: rgba(255, 255, 255, 0.15);
         transform: translateY(-1px);
      }

      .navbar-dark .navbar-nav .active>.nav-link {
         color: #fff;
         font-weight: 700;
         background-color: rgba(255, 255, 255, 0.25);
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      /* Dropdown Menu */
      .dropdown-menu {
         border: none;
         border-radius: 8px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
         margin-top: 12px;
         /* 메뉴와 드롭다운 사이 간격 */
         padding: 0.5rem 0;
         animation: fadeIn 0.3s ease;
      }

      .dropdown-item {
         padding: 12px 24px;
         font-size: 0.9rem;
         font-weight: 400;
         color: #444;
         transition: background 0.2s;
      }

      .dropdown-item i {
         width: 24px;
         text-align: center;
         margin-right: 10px;
         color: #2e7d32;
         /* 메인 테마 색상 */
      }

      .dropdown-item:hover {
         background-color: #e8f5e9;
         color: #1b5e20;
         font-weight: 500;
      }

      .dropdown-divider {
         border-top: 1px solid #e9ecef;
         margin: 0.5rem 0;
      }

      /* Main Content Wrapper */
      #wrapper {
         flex: 1;
         padding: 20px 0;
         /* 본문 상하 여백 조금 더 확보 */
      }

      #capture-area {
         background-color: transparent;
      }

      /* Footer */
      footer {
         background-color: #fff;
         padding: 20px 0;
         border-top: 1px solid #e9ecef;
         text-align: center;
         font-size: 0.85rem;
         color: #888;
         margin-top: auto;
      }

      /* Animation */
      @keyframes fadeIn {
         from {
            opacity: 0;
            transform: translateY(10px);
         }

         to {
            opacity: 1;
            transform: translateY(0);
         }
      }

      /* Responsive Adjustments */

      .fa-blink {
         animation: alarmBlink 1s linear infinite;
         color: #ff5252 !important; /* 강렬한 빨간색 */
      }

      @keyframes alarmBlink {
         0% { opacity: 1; }
         50% { opacity: 0.2; }
         100% { opacity: 1; }
      }

      /* 커스텀 툴팁 스타일 */
      .custom-tooltip-container {
         position: relative;
         display: flex !important; /* flex 컨테이너 유지 (정렬 위함) */
      }

      .custom-tooltip-container .custom-tooltip-text {
         visibility: hidden;
         width: max-content;
         background-color: #2c3e50; /* 다크 네이비 고급스러운 배경 */
         color: #ecf0f1;
         text-align: center;
         border-radius: 6px;
         padding: 8px 14px;
         position: absolute;
         z-index: 1050;
         top: 130%; /* 아이콘 아래 위치 */
         left: 50%;
         transform: translateX(-50%);
         opacity: 0;
         transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
         font-size: 0.8rem;
         font-weight: 500;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
         pointer-events: none; /* 툴팁이 마우스 이벤트를 막지 않도록 설정 */
      }

      .custom-tooltip-container .custom-tooltip-text::after {
         content: "";
         position: absolute;
         bottom: 100%; /* 위쪽 화살표 */
         left: 50%;
         margin-left: -6px;
         border-width: 6px;
         border-style: solid;
         border-color: transparent transparent #2c3e50 transparent;
      }

      .custom-tooltip-container:hover .custom-tooltip-text {
         visibility: visible;
         opacity: 1;
         transform: translateX(-50%) translateY(-3px); /* 약간 떠오르는 애니메이션 */
      }

      /* 3) 991px 이하: 모바일 햄버거 메뉴 모드 화면 */
      @media (max-width: 991px) {
         .navbar-brand {
            flex-direction: column;
            /* 텍스트를 상하로 배치 */
            align-items: flex-start;
         }

         .brand-title {
            margin-bottom: 4px;
         }

         .brand-desc-wrapper {
            margin-left: 0;
            padding-left: 0;
            border-left: none;
            margin-top: 4px;
         }

         .brand-desc {
            font-size: 0.75rem; /* 모바일에서 텍스트 줄일 때 너무 작아지지 않게 조정 */
            white-space: normal; /* 긴 텍스트 자동 줄바꿈 허용하여 생략 방지 */
            word-break: keep-all;
         }

      .btn-nav {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
         }

         .navbar-nav {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
         }

         .navbar {
            padding: 0.8rem 1rem;
         }
      }


.background-white{background:#ffffff}

.animate{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.nav-main-color{background-color: #228638}
.nav-padding{padding: 10px 60px 10px 60px}

.main-color{color:#228638}

.chartboard{padding:10px;height:300px}
.radiusbox{ border-radius:5px;border:1px solid #b2b2b2}
.sidebar{padding:0 2em 0 0 }
.text-align-right{text-align:right}
.text-align-left{text-align:left}
.iframe_map{border: 1px solid black}
.cpointer{cursor:pointer}
.dp-off{display:none !important}

.line-left{border-left:1px solid #cccccc}

.table-fixed{table-layout:fixed}
.table-padding{padding: 0px 15px 0px 15px}
.font-small{font-size:small}
.table-td{margin-left: 0px; margin-right: 0px}

.chart-height{height:600px;width: content-box}

.clr-blue{color:#0275d8}
.clr-green{color:#5cb85c}
.clr-sky{color:#5bc0de}
.clr-yellow{color:#f0ad4e}
.clr-red{color:#d9534f}

.font-bold{font-weight:bold}

.float-right{float:right}
.float-left{float:left}

.row [class^="col-"] canvas,
.row [class^="col-"] img {
    max-width: 100%; /* 부모 너비를 넘지 않도록 강제 */
    height: auto;    /* 비율 유지를 위해 높이 자동 조정 */
}

/* 그리드 거터 축소: 카드 좌우 간격을 위아래(20px)에 맞춰 20px(10px+10px)로 통일 */
.row {
    margin-right: -10px;
    margin-left: -10px;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-12, .col-auto,
.col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-8, .col-sm-9, .col-sm-12,
.col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-12,
.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-12,
.col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-9 {
    padding-right: 10px;
    padding-left: 10px;
}

/* 이 CSS 코드를 PDF 변환 함수가 실행되는 페이지에 적용하세요. */

/* 기본 템플릿 카드 (거의 모든 페이지에서 반복 정의되던 스타일을 공통화) */
.card {
    border: 1px solid #d5dbe0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    margin-bottom: 20px;
    transition: transform 0.2s;
}

/* 특히 그림자 유틸리티 클래스 (shadow)를 사용하는 경우 */
.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* ===================================================
   상단 네비게이션(Navbar) 반응형 오버플로우 강제 해결
   =================================================== */
@media (max-width: 1500px) and (min-width: 992px) {
    /* 네비게이션 바 자체 여백 대폭 축소 */
    .navbar { padding: 0.5rem 0.5rem !important; }
    
    /* 우측 메뉴들 간격 및 글자 크기 축소 */
    .navbar-nav .nav-item { margin-left: 2px !important; }
    .navbar-dark .navbar-nav .nav-link { 
        font-size: 0.8rem !important; 
        padding: 0.3rem 0.4rem !important; 
        letter-spacing: -0.5px !important;
    }
    
    /* 로고 텍스트 크기 축소 */
    .navbar-brand { 
        font-size: 1.1rem !important; 
        margin-right: 0 !important; 
        flex-shrink: 0 !important; /* 공간 부족 시 로고/시계가 찌그러지며 잘리는 현상 완벽 방지 */
    }
    
    /* 두 번째 span (EMS - 에너지관리 모니터링 시스템) 강제 숨김 해제 (자동 줄바꿈으로 해결) */
    /* .navbar-brand .brand-desc:not(:last-child) { display: none !important; } */
    
    /* 세 번째 span (시계) 사이즈 및 여백 조절 */
    .navbar-brand .brand-desc:last-child { 
        display: inline-block !important; /* 강제 표시 */
        font-size: 0.85rem !important; 
        margin-left: 10px !important; 
        padding-left: 10px !important;
        overflow: visible !important; /* 시계 텍스트 잘림 방지 */
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    /* 1200px 미만 가장 좁은 구간에서는 시계를 로고 밑으로 상하 배치하여 가로 공간 추가 확보 */
    .navbar-brand { 
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }
    .navbar-brand .brand-desc:last-child {
        border-left: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-top: 3px !important;
    }
}


.save-pdf-btn {
    /* 배경색: 녹색 계열 */
    background-color: #4CAF50; /* 구글 머티리얼 디자인 그린 */
    /* 글자색: 흰색 */
    color: white;
    /* 테두리: 없음 */
    border: none;
    /* 패딩: 버튼 크기 조정 */
    padding: 10px 20px;
    /* 텍스트 정렬: 중앙 */
    text-align: center;
    /* 텍스트 장식: 없음 */
    text-decoration: none;
    /* 인라인 블록 요소 */
    display: inline-block;
    /* 글꼴 크기 */
    font-size: 16px;
    /* 커서 모양: 포인터 */
    cursor: pointer;
    /* 모서리 둥글게 */
    border-radius: 8px;
    /* 그림자 효과 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 트랜지션: 호버 효과를 부드럽게 */
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* 마우스 오버 시 효과 (Hover Effect) */
.save-pdf-btn:hover {
    background-color: #45a049; /* 살짝 어두운 녹색 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* 버튼 활성화 시 효과 (Active Effect) */
.save-pdf-btn:active {
    background-color: #3e8e41; /* 더 어두운 녹색 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


@media print {
    /* 1칸 (8.33333333%) */
    .col-lg-1 {
        flex: 0 0 8.33333333%;
        max-width: 8.33333333%;
    }

    /* 2칸 (16.66666667%) */
    .col-lg-2 {
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%;
    }

    /* 3칸 (25%) */
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    /* 4칸 (33.33333333%) */
    .col-lg-4 {
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
    }

    /* 5칸 (41.66666667%) */
    .col-lg-5 {
        flex: 0 0 41.66666667%;
        max-width: 41.66666667%;
    }

    /* 6칸 (50%) */
    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* 7칸 (58.33333333%) */
    .col-lg-7 {
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    /* 8칸 (66.66666667%) */
    .col-lg-8 {
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%;
    }

    /* 9칸 (75%) */
    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    /* 10칸 (83.33333333%) */
    .col-lg-10 {
        flex: 0 0 83.33333333%;
        max-width: 83.33333333%;
    }

    /* 11칸 (91.66666667%) */
    .col-lg-11 {
        flex: 0 0 91.66666667%;
        max-width: 91.66666667%;
    }

    /* 12칸 (100%) */
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    
    
    /* 1. 네비게이션 바 강제 표시 (display: none !important;를 덮어씀) */
    .navbar {
        display: block !important; 
        
        /* 2. 배경색을 강제 적용하여 인쇄 시 흰 종이에 묻히는 것을 방지 */
        /* 'nav-main-color'가 어떤 색상인지 모르므로, 어두운 계열 색상으로 예시를 듭니다. */
        background-color: #343a40 !important; 
        color: white !important;
        
        /* 3. 인쇄 시 레이아웃을 위해 높이도 강제 */
        height: auto !important;
    }

    /* 4. 드롭다운 메뉴도 강제 표시 (드롭다운 내 메뉴가 숨겨지는 것을 방지) */
    .dropdown-menu {
        display: block !important; 
        position: static !important;
    }

    /* 5. 혹시 모를 충돌을 막기 위해 폰트 색상도 명시적으로 지정 */
    .navbar a {
        color: white !important;
    }
    
    
   /* 테이블 행(<tr>)이 페이지 경계를 넘어갈 때 잘리지 않도록 강제합니다. */
   .table-responsive tr {
       page-break-inside: avoid !important;
       break-inside: avoid !important;
   }
   
   /* 테이블 자체에 적용하여 테이블 전체가 한 페이지에 담기도록 시도 (테이블이 너무 크면 무시됨) */
   .table-responsive table {
       page-break-inside: avoid !important;
       break-inside: avoid !important;
   }
   
   /* 전체 카드가 잘리는 것을 방지 */
   .card {
       page-break-inside: avoid !important;
       break-inside: avoid !important;
   }    
    
}