/*neosis.css*/
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;800&display=swap'); */
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css');

body   {
    font-family: 'NanumSquare Neo', 'Noto Sans KR', sans-serif;
    background-color: #FFFFFF;
}

/* Remove bottom line effect from tab navigation */
#tabList.nav-tabs-custom ,
#camera_tabList.nav-tabs-custom {
    border-bottom: none !important;
}

#tabList .nav-link::after,
#camera_tabList .nav-link::after {
    display: none !important;
}

/* Remove border from active nav-link in camera tabs */
#camera_tabList .nav-link.active {
    border: none !important;
    border-color: transparent !important;
}

/* Spectrum button icon for fixedMonitoring */
.spectrum-btn-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../../static/img/mon_icon_spectrum_logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border: none;
    background-color: transparent;
    padding: 0;
}

.hide   {
    display:none!important;
}
.no_a {
    text-decoration : none;
    color           : inherit;
}

/* head-logo positioning */
.head-logo {
    margin-top: 0px;
    margin-left: 0px;
    display: flex;
    align-items: center;
    /* gap: 10px; */
}

.heda-logo-title h1{
    color: #FFFFFF;
    font-size: 25pt;
    font-weight: 800;
    margin: 0;
    line-height: 1;
}

/* login-menu */
.page-wrapper {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    overflow: auto; /* 페이지 전체 스크롤 필요 시 */
    box-sizing: border-box;
}
.auth-page-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    background-image: url('../../static/img/neomon_bg_1.svg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
    position: relative;
}
.pagination {
    display: flex;
    align-items: center;
    gap: 10px; /* 숫자 간격 */
    justify-content: center;
    margin: 3px 0px 13px 0px;
}

.page-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: "NanumSquare Neo", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #000;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  border-radius: 50%;
  padding: 0;
}

.page-btn.active {
  background: #597EFF;
  color: #fff;
}

.page-ellipsis {
  font-size: 12px;
  font-weight: 800;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.page-arrow {
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
}

.page-arrow.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.page-arrow.mon_btn_l {
  background-image: url('../../static/img/mon_icon_l_arrow.svg');
}

.page-arrow.mon_btn_r {
  background-image: url('../../static/img/mon_icon_r_arrow.svg');
}

.pagination-container {
    padding: 0px 0px 10px 0px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.auth-content-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}
.auth-text-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    /*
    justify-content: center;    
    */
    padding-left: 3.8%;
    padding-top: 6.63vh;
    padding-right: 2rem;
}
.auth-form-panel {
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center; /* **ID/PW 영역을 포함한 내부 요소들을 수평 중앙 정렬** */
    width: 35.25%;
    max-width: 676.79px;
    min-width: 300px;
    box-sizing: border-box;
    padding: 12vh 1rem 1.5rem;
}
.login-title-1 {
    font-family: 'NanumSquare Neo OTF', 'Nanum Gothic', sans-serif;
    font-weight: 800;
    font-size: 71px;
    line-height: 78px;
    color: #FFFFFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-bottom: 1.5vh;
}
.login-title-2 {
    font-family: 'NanumSquare Neo OTF', 'Nanum Gothic', sans-serif;
    font-weight: 800;
    font-size: 71px;
    line-height: 78px;
    color: #FFFFFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-bottom: 2vh;
}
.login-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #FFFFFF;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    margin-bottom: 0;
}
.login-subtitle-2 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #FFFFFF;
    margin-top: 0;
}
.form-heading {
    font-family: 'NanumSquare Neo OTF', 'Nanum Gothic', sans-serif;
    font-weight: 800;
    font-size: 51px;
    line-height: 56px;
    color: #FFFFFF;
    margin-bottom: 8vh;
    margin-top: 0;
    text-align: left;
    width: 100%; /* 부모에 꽉 채우도록 유지 */
}

/* 각 input 필드를 감싸는 div (ID, PASSWORD) */
.input-group-container {
    width: 100%; /* **부모(auth-form-panel)의 너비를 100% 사용** */
    max-width: 435.24px; /* **피그마 ID/PW 영역의 너비인 435.24px을 max-width로 제한** */
    margin-left: auto; /* **중앙 정렬을 위해 auto 마진 사용** */
    margin-right: auto; /* **중앙 정렬을 위해 auto 마진 사용** */
    margin-bottom: 1rem;
    box-sizing: border-box;
}
.form-label-custom {
    font-family: 'NanumSquare Neo OTF', 'Nanum Gothic', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
    display: block;
}
.form-control-custom {
    background: transparent;
    border: none;
    border-bottom: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    height: 40px;
    width: 100%; /* 부모(input-group-container)에 꽉 채우도록 */
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    color: #FFFFFF;
}
.form-control-custom::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.form-control-custom:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}
.form-control-custom:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    -webkit-text-fill-color: white;
    transition: background-color 5000s ease-in-out 0s;
}
.form-input-line {
    border-bottom: 1px solid #FFFFFF;
    width: 100%; /* 부모(input-group-container)에 꽉 채우도록 */
    margin-top: 0.5rem;
    margin-bottom: 0;
}
/* forgot password 링크를 감싸는 컨테이너 */
.forgot-password-container {
    width: 100%; /* **부모(auth-form-panel)의 너비를 100% 사용** */
    max-width: 435.24px; /* **ID/PW 영역과 동일한 최대 너비 적용** */
    margin-left: auto; /* **중앙 정렬을 위해 auto 마진 사용** */
    margin-right: auto; /* **중앙 정렬을 위해 auto 마진 사용** */
    margin-bottom: 2rem;
    text-align: left; /* **링크는 왼쪽 정렬 유지** */
}
.forgot-password-link {
    font-family: 'NanumSquare Neo OTF', 'Nanum Gothic', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
    color: #FFFFFF;
    text-decoration: none;
    margin-top: 0.5rem;
    display: inline-block;
    width: fit-content; /* **내용에 맞게 너비 조절** */
}
/* 버튼 컨테이너 */
.button-container {
    width: 100%;
    max-width: 435.24px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 버튼 스타일 */
.login-button, .signup-button {
    width: 100%; /* **부모 컨테이너의 전체 너비 사용** */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
}
.login-button {
    background: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.4);
    border: none;
    margin-top: 3vh;
    margin-bottom: 1rem;
    border-radius: 23px !important;
}
.login-button span {
    font-family: 'NanumSquare Neo OTF', 'Nanum Gothic', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 35px;
    color: #000000;
}
.signup-button {
    border: 1.5px solid #FFFFFF;
    background: transparent;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 23px !important;
}
.signup-button a,
.signup-button span {
    font-family: 'NanumSquare Neo OTF', 'Nanum Gothic', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 35px;
    color: #FFFFFF;
    text-decoration: none;
}
.contact-heading-section {
    width: 100%;
    max-width: 435.24px; /* **추가: ID/PW 영역과 동일한 최대 너비 적용** */
    margin-left: auto; /* **추가: 중앙 정렬을 위해 auto 마진 사용** */
    margin-right: auto; /* **추가: 중앙 정렬을 위해 auto 마진 사용** */
    text-align: left;
}

.contact-info-section {
    margin-top: 4rem;
    width: 100%;
    max-width: 435.24px; /* **추가: ID/PW 영역과 동일한 최대 너비 적용** */
    margin-left: auto; /* **추가: 중앙 정렬을 위해 auto 마진 사용** */
    margin-right: auto; /* **추가: 중앙 정렬을 위해 auto 마진 사용** */
    text-align: left;
    padding-top: 2rem;
}
.contact-info-title, .contact-info-tel, .contact-info-email {
    font-family: 'NanumSquare Neo OTF', 'Nanum Gothic', sans-serif;
    font-weight: 800;
    font-size: 21px;
    line-height: 23px;
    color: #FFFFFF;
    margin-bottom: 0;
}
/* 모바일 화면 (작은 화면) 반응형: 768px 미만 */
@media (max-width: 767.98px) {
    .auth-content-wrapper {
        flex-direction: column;
        background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
        overflow-y: auto;
        height: 100%;
    }
    .auth-text-panel, .auth-form-panel {
        flex: none;
        height: auto;
        max-width: none;
        min-width: unset;
    }
    .auth-text-panel {
        width: 100%;
        padding: 1rem 1.5rem;
        align-items: center;
        text-align: center;
    }
    .login-title-1, .login-title-2 {
        font-size: 30px;
        line-height: 1.2;
        margin-left: 0;
        margin-top: 0;
        max-width: 90%;
    }
    .login-subtitle, .login-subtitle-2 {
        font-size: 14px;
        line-height: 1.4;
        margin-left: 0;
        max-width: 90%;
    }
    .form-heading {
        font-size: 32px;
        line-height: 1.2;
        margin-top: 1rem;
        margin-left: 15px;
    }
    .input-group-container {
        width: 100%; /* 모바일에서는 100% 너비 */
        max-width: none; /* 모바일에서는 max-width 제한 해제 */
        margin-left: 0; /* 모바일에서는 auto 마진 제거 */
        margin-right: 0; /* 모바일에서는 auto 마진 제거 */
        padding: 0 1rem;
    }
    .form-label-custom {
        font-size: 14px;
        line-height: 1.4;
    }
    .forgot-password-container {
        width: 100%; /* 모바일에서는 100% 너비 */
        max-width: none; /* 모바일에서는 max-width 제한 해제 */
        margin-left: 0; /* 모바일에서는 auto 마진 제거 */
        margin-right: 0; /* 모바일에서는 auto 마진 제거 */
        padding: 0 1rem; /* 좌우 패딩으로 여백 조절 */
        text-align: left; /* 왼쪽 정렬 유지 */
    }
    .forgot-password-link {
       u font-size: 14px;
        line-height: 1.4;
    }
    .login-button, .signup-button {
        width: 100%; /* 모바일에서는 100% 너비 */
        max-width: none; /* 모바일에서는 max-width 제한 해제 */
        margin-left: 0; /* 모바일에서는 auto 마진 제거 */
        margin-right: 0; /* 모바일에서는 auto 마진 제거 */
        height: 50px;
        padding: 0 1rem;
    }
    .login-button span, .signup-button span {
        font-size: 20px;
        line-height: 1.2;
    }
    .contact-info-section {
        margin-top: 2rem;
        padding-top: 1rem;
        max-width: none; /* **수정: 모바일에서는 max-width 제한 해제** */
        margin-left: 0; /* **수정: 모바일에서는 auto 마진 제거** */
        margin-right: 0; /* **수정: 모바일에서는 auto 마진 제거** */
    }
    .contact-heading-section {
        margin-top: 2rem;
        padding-top: 1rem;
        max-width: none; /* **수정: 모바일에서는 max-width 제한 해제** */
        margin-left: 0; /* **수정: 모바일에서는 auto 마진 제거** */
        margin-right: 0; /* **수정: 모바일에서는 auto 마진 제거** */
    }
}

/* 회원가입 */
.signup-wrapper {
    width: 100%;
    height: 100dvh; /* ✅ 추가: 실제 디바이스 뷰포트 높이에 맞춤 */
    overflow: hidden;     /* ✅ 추가 */
}
.signup-background {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('../../static/img/neomon_bg_2.svg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.live-logo {
    top: 12px;
    left: 10px;
    display: flex;
    align-items: center;
    z-index: 10;
    margin-left: 10px;
}
.signup-header {
    position: absolute;
    top: 30px;
    left: 40px;
    display: flex;
    align-items: center;
    z-index: 10;
}
.signup-header-logo {
    width: 56px;
    height: 56px;
    margin-right: 10px;
}
.signup-header-title {
    color: white;
    font-weight: 600;
    font-size: 28px;
    /*
    line-height: 1.2;
    */
    line-height: 28px;
}
.signup-form-container {
    position: relative;
    width: 95vw;
    height: 85vh;
    max-width: 614px;
    max-height: 830px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.signup-blur-layer-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95vw;
    height: 85vh;
    max-width: 614px;
    max-height: 830px;
    background: #000;
    opacity: 0.6;
    z-index: 0;
}
.signup-blur-layer-front {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 80vh;
    max-width: 583px;
    max-height: 788px;
    background: #000;
    opacity: 0.15;
    z-index: 1;
}
.signup-form {
    position: relative;
    width: 85vw;
    height: 85vh;
    max-width: 406px;
    max-height: 686px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 2;
    color: white;
}
.signup-title-1 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 24px;

    /* font-family: 'NanumSquare Neo OTF'; */
    font-style: normal;
    font-weight: 800;
    font-size: 40px;
    line-height: 44px;
    color: #FFFFFF;
}
.signup-input-wrapper {
    position: relative;
}
.pw-input {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}
.signup-input {
    padding: 10px 20px;
    border: none;
    border: 1px solid rgba(255, 255, 255, 1);  /* 반투명 테두리 */
    border-radius: 30px;                          /* 더 둥글게 */
    background: rgba(255, 255, 255, 0.1);         /* 약간의 투명 배경 */
    backdrop-filter: blur(10px);                  /* 블러 효과 */

    /* font-family: 'NanumSquare Neo', 'NanumSquare Neo OTF'; */
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #fff;                    /* 텍스트 흰색 */

    width: 100%;
    transition: all 0.3s ease;
}

.signup-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
}
.signup-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    -webkit-text-fill-color: white;
    transition: background-color 5000s ease-in-out 0s;
}
.signup-input::placeholder {
    color: #fff;
    opacity: 1;
}
.signup-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    opacity: 0.8;
}
.signup-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.icon-email {
    width: 24px;
    height: 24px;
    opacity: 0.7;
}
.icon-id-check {
    margin-top: 15px;
    width: 24px;
    height: 17px;
    opacity: 0.7;
}
.signup-code-wrapper .signup-input {
    width: 70%;
}
.signup-code-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 30px;
    background-image: url('../../static/img/mon_icon_check_bg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 버튼 위 V 아이콘 */
.signup-code-icon {
    width: 14px;
    height: 14px;
    pointer-events: none;
}
.signup-timer {
    margin-left: 0.2rem;
    color: white;
    font-family: 'NanumSquare Neo OTF';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
}
.signup-btns {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.signup-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 20px;
    background-color: white;
    color: black;
    cursor: pointer;

    font-family: 'NanumSquare Neo OTF';
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    line-height: 27px;
    text-align: center;
}

/* 비밀번호 찾기 */
.signup-form-container-pw {
    position: relative;
    width: 582.95px;
    height: 402.63px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.signup-submit-button {
    width: 100%;
    max-width: 450px;
    padding: 10px 20px;
    background-color: white;
    color: #000;
    border: none;
    border-radius: 30px;
    font-weight: 800;
    font-size: 20px;
    font-family: 'NanumSquare Neo', 'NanumSquare Neo OTF';
    cursor: pointer;
    margin: 20px auto 0;
    display: block;
    transition: all 0.3s ease;
}

.signup-submit-button:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ✅ 비밀번호 찾기 전용 추가 클래스 */
.findpw-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 100vw;     /* ✅ 추가 */
    overflow: hidden;     /* ✅ 추가 */
}
.findpw-container {
    width: 100%;
    max-width: 409.45px;
}
.findpw-blur-layer-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95vw;
    height: 53vh;
    max-width: 582.95px;
    max-height: 402.63px;
    background: #000;
    opacity: 0.6;
    z-index: 0;
}
.findpw-blur-layer-front {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 50vh;
    max-width: 553.72px;
    max-height: 374.97px;
    background: #000;
    opacity: 0.15;
    z-index: 1;
}
.findpw-content {
    position: relative;
    z-index: 2;
    width: 85vw;
    margin: 0 auto;
    max-width: 409.45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

}
.findpw-title {
    /* font-family: 'NanumSquare Neo OTF'; */
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 44px;
    color: #FFFFFF;
    margin-bottom: 30px;
}

.findpw-message {
    /* font-family: 'NanumSquare Neo', 'NanumSquare Neo OTF'; */
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

/* ✅ 회원가입 블러 레이어 */
.signup-blur-layer-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 614px;
    height: 830px;
    background: #000;
    opacity: 0.6;
    z-index: 0;
}

.signup-blur-layer-front {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 590px;
    height: 800px;
    background: #000;
    opacity: 0.15;
    z-index: 1;
}




/* navbar-menu */
[data-layout=horizontal] .page-content {
    padding:calc(22px) calc(1.5rem * .5) 60px calc(1.5rem * .5);
}
[data-layout=horizontal] .container-fluid, [data-layout=horizontal] .layout-width {
    max-width: 100%;
    margin: 0 auto;
}
.navbar-select {
  z-index:400 !important;
}
.layout-width {
    max-width:100% !important;
}
.navbar-header {
    min-height:80px !important;
    padding:0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: auto !important;
}
.user-name-sub-text {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 (필요시) */
    width: 81.5px;
    height: 20px;
    /* 폰트 속성 */
    font-family: 'NanumSquare Neo OTF', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #FFFFFF;
}
.user-role-icon {
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 (필요시) */
    font-size: 10px;
    width: 12.05px;
    height: 9.12px;
    color: #FFFFFF;
}
.live_alarm_icon {
    position: relative;
    line-height: 22px;
    color: white;
    font-size: 31px;
    text-align: center;
}
.menu-link {
    /* 피그마에서 가져온 공통 속성 */
    color: #FFFFFF;
    font-size: 20.68px;
    line-height: 23px;
    height: 23px;
    text-decoration: none; /* 링크의 기본 밑줄 제거 */
    display: inline-block; /* 글자 너비에 맞추기 위해 inline-block 사용 */
    padding-bottom: 12px; /* 글자와 bar 사이 공간 */
    position: relative; /* ::after 위치 기준 */
    font-family: 'NanumSquare Neo OTF', sans-serif; /* 폰트 설정 복원 */
}



/* ::after로 bar 만들기 */
.menu-link::after {
    content: "";
    position: absolute;
    left: -8px; /* 글자보다 조금 더 긴 bar */
    right: -8px;
    bottom: -8px; /* 패딩 아래 표시 */
    height: 2px;
    background-color: #5F7CFC;
    display: none; /* 기본 숨김 */
}

/* active 상태일 때만 bar 표시 */
.menu-link.active::after {
    display: block;
}




/* "관리" 링크에만 적용되는 스타일 */
.link-admin {
    font-weight: 700;
}

/* "데이터 조회" 링크에만 적용되는 스타일 */
.link-data-query {
    font-weight: 700;
}

/* 고정 메뉴 링크 스타일 (모니터링, 방사선량, 발전소 현황, 환경공단 현황) */
.link-monitoring,
.link-radiation-dose,
.link-plant-status,
.link-korad-status {
    font-weight: 700;
}

/* 메뉴 링크 active 상태 */
.menu-link.active {
    color: #48ad77 !important;
    border-bottom: 2px solid #48ad77;
}

/* "메뉴 전환" 링크에만 적용되는 스타일 (더 이상 사용 안 함) */
.link-menu-transition {
    font-weight: 700;
}
#page-topbar {
--vz-header-border:#272936;
}

/* data-search 스타일 */
.radiation-title-text {
    color: #000;
    font-family: "NanumSquare Neo OTF";
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.data-search-content {
  --data-search-menu-width: 340px;
}
.page-content {
    margin-left: 0;

    flex: 1;
    min-height: calc(100vh - 80px);
}
.plant_back_color {
    background: #E4EBF3 !important;
}
.data-search-content.open .sidebar {
  width: var(--data-search-menu-width);
}
.data-search-content.open .page-content {
  margin-left: var(--data-search-menu-width);
}
@media (max-width: 767px) { /* 예시: 767px 이하를 모바일로 간주 */
    .page-content {
        margin-left: 0;
    }
    .data-search-content.open .page-content {
        margin-left: 0;
    }
}
.down-arrow {
    width: 11px;
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    background-image: url('../../static/img/mon_icon_down_arrow.svg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
    position: relative;
}
.radiation-equipment-device {                                                 
    display: flex;
    align-items: center;
    justify-content: center;
}              
.radiation-equipment-img {                                                 
    width: 187.61px;                                                        
    height: 241.63px;                                                       
    flex-shrink: 0;                                                         
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: contain; 
    background-image: url('../../static/img/mon_device_2GM-01.png');              
}              
.warning-triangle {
    position: relative;

    display: flex;
    width: 18px;
    height: 18px;
    /* 배경 이미지를 사용하여 아이콘 표시 */
    background-image: url('../../static/img/mon_icon_warning.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
    display: inline-block;
    color: #dc3545;
    font-size: 16px;
    cursor: help;
}  
.fixed-warning-triangle {
    position: relative;

    display: flex;
    width: 18px;
    height: 18px;
    /* 배경 이미지를 사용하여 아이콘 표시 */
    background-image: url('../../static/img/mon_icon_warning.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}  
/* 메인 컨테이너: Flexbox를 사용해 자식 요소를 나란히 배치합니다. */
.main-flex-container {
    display: flex;
    justify-content: center; /* 자식 요소들을 가로 중앙 정렬 */
    flex-wrap: wrap; /* 공간이 부족하면 다음 줄로 넘어가도록 설정 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 17px;
    gap: 10px; /* 좌우 영역 사이 간격 */

    min-height: calc(100vh - 150px); /* 최소 높이 설정 */

    border-radius: 14px;
    background: #F5F5F5;
    box-shadow: 4px 4px 4px 1px rgba(0, 0, 0, 0.25);
    /*
    background: #F5F5F5;
    background: #FFF;
    */
}

/* fixedMonitoring 전용 main-flex-container */
.fixed-main-flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 17px;
    gap: 10px;

    /*
    height: calc(100vh - 150px); 
    */
    overflow: hidden; /* 스크롤 제거 */

    border-radius: 14px;
    background: #F5F5F5;
    box-shadow: 4px 4px 4px 1px rgba(0, 0, 0, 0.25);
}
.setting_page-flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0px 17px 17px 17px;

    border-radius: 14px;
    background: #F5F5F5;
    box-shadow: 4px 4px 4px 1px rgba(0, 0, 0, 0.25);
    /*
    background: #F5F5F5;
    background: #FFF;
    */
}
.sample {
}
.mon_table_container {
    padding: 10px !important;
    border: none;
    border-radius: 10px;
    background: none !important;
    background-color: none !important;
}
.mon_bg_l_gray {
    background-color: #F5F5F5;
}
.mon_w_85_p {
    width: 85%;
}
.mon_w_234 {
    width: 234px;
}
.mon_px_10 {
    padding: 0px 10px;
}
.mon_map_detail {
    /*
    margin: var(--vz-card-spacer-y) var(--vz-card-spacer-x);
    */
    margin-top: 32px;
    height: 365px;
}
.mon_btn_close {
    background-image: url('../../static/img/mon_icon_close.svg') !important;
    background-repeat: no-repeat;
    background-size: 17px 17px;
    filter: none !important;
}
.mon_radius {
    border-radius: 20px;
}
.mon_border_none {
    border: none !important;
}
.mon_val_col {
    background: #596074 !important;
}
.card_header_1 {
    background-color: #F5F5F5;
    border: none !important;
    padding: 16px;
}
.mon_box {
    border-radius: 14px;
    background: #F5F5F5;
    box-shadow: 4px 4px 4px 1px rgba(0, 0, 0, 0.25);
}
.mon_bs_none {
    box-shadow: none;
}
.mon_div_m_extended {
    min-height: 700px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.mon_bottom_button_area {
    margin-top: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.mon_setting_save_btn {
    background-color: #597EFF;
    color: #fff;
    border: none;
    padding: 0px 42px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.mon_setting_save_btn:hover {
    background-color: #4A6FE0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(89, 126, 255, 0.3);
}
.mon_val_1 {
    background: #fff;
    height: 28px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 20px;
    color: #22222A;
    font-family: "NanumSquare Neo";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_container_1 {
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0px 10px;
    margin-right: 1%;
}
.mon_f5 {
    background: #F5F5F5;
}
@media (min-width: 1400px) {
    .mon_container_1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 74%;
    }
}
.mon_div_m {
    margin: 10px 15px 20px 15px;
}
.mon_h_27 {
    height: 27px;
}
.mon_btn_shadow:hover {
    border-color: #22222A;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plant-flex-container {
    display: flex;
    justify-content: center; /* 자식 요소들을 가로 중앙 정렬 */
    flex-wrap: wrap; /* 공간이 부족하면 다음 줄로 넘어가도록 설정 */
    margin: 0 auto; /* 중앙 정렬 */
    /*
    padding: 17px;
    box-shadow: 4px 4px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    background: #F5F5F5;
    background: #FFF;
    */
}
.hor_margin_x {
    margin-left: 4px;
    margin-right: 4px;
}
.near_top {
    margin-top: -20px;
}

/* 첫 번째 자식 요소: 최대 너비 894px */
.data_item_1 {
    flex: 12 1 0;
    flex-basis: 300px; /* 요소의 이상적인 기본 너비 */
    min-width: 300px;  /* 최소 너비 설정으로 찌그러짐 방지 */
    height: fit-content;
    max-height: 100%;
}

/* 두 번째 자식 요소: 최대 너비 570px */
.data_item_2 {
    flex: 5.7 1 0;
    flex-basis: 300px; /* 요소의 이상적인 기본 너비 */
    min-width: 300px;  /* 최소 너비 설정으로 찌그러짐 방지 */
    display: flex;
    justify-content: end;
    height: 100%;
    /*
    max-height: calc(100vh - 180px);
    */
    overflow: hidden;
    /*flex-shrink: 1;     공간이 부족할 때 줄어들 수 있도록 설정 */
}

/* 미디어 쿼리: 화면 너비가 1480px 이하일 때 세로로 쌓이도록 설정 */
@media (max-width: 1480px) {
    .main-flex-container {
        flex-direction: column; /* 자식 요소를 세로로 쌓음 */
        align-items: center;    /* 세로로 쌓인 아이템들을 가운데 정렬 */
    }

    /* 다음 줄로 넘어간 경우, max-width 제한을 해제하고 width: 100%를 사용합니다. */
    .data_item_1, .data_item_2 {
        max-width: none;
        width: 100%;
        flex-basis: auto; /* flex-basis 초기화 */
    }
}
.submenu {
    display: none;
}
.submenu.open {
    display: block;
}
.radiation-monitoring-dashboard {
    font-family: 'Noto Sans KR', sans-serif;
    background: #F5F5F5;
    overflow-x: auto;
    padding: 24px;
}

/* 방사선 모니터링 대시보드 전용 스타일 */
/* 메인 레이아웃 */
#layout-wrapper .main-content {
    display: flex;
}
/* 사이드바 스타일 */
.radiation-sidebar {
    background: #22222A;
    min-height: calc(100vh - 80px);
}
.radiation-menu-item {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 32px;
    font-size: 18px;
    font-weight: 800;
    color: white;
    cursor: pointer;
    position: relative;
}
.has-submenu.active {
    color: #22222A;
}
.radiation-menu-item.active {
    background: white;
}
.radiation-menu-item.expanded {
    background: #596074;
}
.radiation-menu-item.sub-item {
    background: #333647;
    padding-left: 45px;
    font-size: 15px;
}
.radiation-menu-item.sub-item.active {
    background: #596074;
}
.radiation-sidebar-arrow {
    position: absolute;
    right: 24px;
    width: auto;
    height: auto;
    font-size: 12px;
    line-height: 1;
    color: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
}
.radiation-sidebar-arrow.up::before {
    content: "▲";
}
.radiation-sidebar-arrow.down::before {
    content: "▼";
    color: #ffffff;
}
.radiation-page-title {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}
.radiation-title-bar {
    width: 5px;
    height: 21px;
    background: black;
    margin-right: 13px;
}
.modal-title-bar {
    width: 5px;
    height: 21px;
    background: #fff;
    margin-right: 13px;
}
/* 검색 조건 박스 */
.radiation-search-container {
    /* 
    width: 894px; 
    height: 129px;
    */
    background: white;
    border-radius: 10px;
    border: 3px solid #DFE5F1;
    padding: 12px 23px;
    margin-bottom: 24px;
}
.radiation-search-container-mini {
    /* 
    height: 129px;
    width: 894px; 
    margin-bottom: 24px;
    background: white;
    */
    border-radius: 10px;
    padding: 12px 15px;
    margin-top: 15px;
    margin-bottom: -30px;
}
.setting-search-container {
    /* 
    width: 894px; 
    height: 129px;
    margin-bottom: 24px;
    */
    background: white;
    border-radius: 10px;
    border: 3px solid #DFE5F1;
    padding: 12px 23px;
}
.radiation-search-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.setting-search-title {
    display: flex;
    align-items: center;
}
.radiation-search-title-bar {
    width: 3px;
    height: 17px;
    background: #22222A;
    margin-right: 10px;
}
.radiation-search-title-text {
    font-size: 17.48px;
    font-weight: 800;
    color: black;
}
.radiation-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-left: 6px;
    width: 100%;  /* 전체 너비 사용 */
    flex-wrap: wrap;  /* 공간 부족 시 줄바꿈 허용 */
}
.radiation-search-row-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0px;
    padding-left: 6px;
    width: 100%;  /* 전체 너비 사용 */
}
.setting-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 6px;
}
.radiation-search-label-s {
    font-size: 15px;
    font-weight: 800;
    color: black;
    min-width: 29px;
}
.radiation-search-label-l {
    font-size: 15px;
    font-weight: 800;
    color: black;
    min-width: 43px;
    margin-right: -5px;
}
.radiation-search-input {
    height: 27px;
    background: white;
    border-radius: 17.5px;
    border: 2px solid #DFE5F1;
    padding: 0 12px;
    font-size: 13px;

    color: #000;
    text-align: center;
    font-family: "NanumSquare Neo OTF";
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.radiation-search-input.date {
    width: 190px;
}
.radiation-search-input.datetime-local {
    width: 200px;
}
/* 태그 입력 컨테이너 */
.device-tag-input-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 13.5px;
    background: white;
    min-height: 27px;
    flex: 1;
    min-width: 200px;
    max-width: 535px;
}

/* 태그 래퍼 - 가로 배치 우선, 공간 부족시 줄바꿈 */
.device-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    flex: 0 1 auto;
}

/* 개별 태그 스타일 */
.device-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #333647;
    color: white;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 25px;
}

/* 태그 삭제 버튼 */
.device-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    transition: background 0.2s;
}

.device-tag-remove:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 태그 입력 필드 (placeholder용) */
.device-tag-input {
    flex: 1 1 auto;
    min-width: 80px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    padding: 2px 4px;
    color: #666;
}

.device-tag-input::placeholder {
    color: #999;
}

/* 드롭다운 버튼 위치 조정 */
.device-tag-input-container .radiation-search-btn {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.radiation-search-input.device {
    width: 138px;
}
.radiation-search-btn {
    display:flex;
    justify-content:center;
    align-items:center;
    background: #333647;
    color: white;
    border: none;
    border-radius: 13.5px;
    min-width: 51px;
    height: 27px;
    cursor: pointer;
}
.radiation-search-execute-btn {
    background: #22222A;
    color: white;
    border: none;
    border-radius: 3px;
    width: 78px;
    height: 27px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    margin-left: auto;
    flex-shrink: 0;
}
.radiation-filter-buttons {
    display: flex;
    gap: 12px;
}
.fixed-radiation-filter-buttons {
    display: flex;
    gap: 7px;
}
.location-set-items {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
}
.location-label-val {
    display: flex;
    gap: 15px;
}
.radiation-filter-btn {
    width: 69px;
    height: 27px;
    border-radius: 17.5px;
    border: 2px solid #DFE5F1;
    background: white;
    color: black;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}
.radiation-filter-btn.active {
    background: #DFE5F1;
}
.radiation-filter-btn.detail {
    width: 98px;
}
.radiation-filter-btn.long {
    width: 123px;
}
.radiation-filter-btn.wide {
    width: 180px;
    height: 36px;
}
.interest_area-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-shrink: 0;
    color: #000;
    text-align: center;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    border-radius: 17.5px;
    border: 3px solid #22222A;
    width: 135px;
    height: 30px;
    flex-shrink: 0;
}

.span-pill {
    display: inline-flex;
    align-items: center;
    background: #fff; /* 흰색 덮어쓰기 */
    overflow: hidden;
    color: #000;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.btn-pill {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    color: #000;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    gap: 5px;
}
/* 라벨 부분 */
.btn-pill .label {
    background: #fff; /* 흰색 덮어쓰기 */
    width: 130px;
    height: 30px;
    margin-right: -70px;
    border-radius: 17.5px;
    border: 3px solid #22222A;
    color: #000;
    padding: 0px 14px 0px 18px;
    z-index: 1;
}
/* 값 부분 */
.btn-pill .value {
    width: 130px;
    height: 30px;
    color: #fff;
    position: relative;
    z-index: 2;
    text-align: center;
    border: 3px solid #22222A;

    border-radius: 17.5px;
    background: #22222A;
}

.btn-pill button {
    display: flex;
    align-items: center;   /* 세로 중앙 */
    justify-content: center; /* 가로 중앙 */
    height: 30px;
    color: #fff;
    position: relative;
    z-index: 2;
    border-radius: 17.5px;
}

.edit-location-btn {
    width: 130px;
    text-align: center;
    border: 3px solid #597EFF;

    background: #597EFF;
}
.view-location-btn {
    width: 130px;
    text-align: center;
    border: 3px solid #22222A;

    background: #22222A;
}

.separator {
    margin: 0 8px;
    font-weight: bold;
    font-size: 18px;
}

.fixed-radiation-condition {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 5px;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 266px;  /* 최소 너비 보장 */
}
.radiation-condition {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 280px;  /* 최소 너비 보장 */
}

.fixed-radiation-condition .radiation-search-input.condition {
    width: 80px;
    height: 27px;
    padding: 0 8px;
    border: 2px solid #DFE5F1;
    border-radius: 17.5px;
    font-family: "NanumSquare Neo";
    font-size: 13px;
    font-weight: 700;
    color: #000;
}
.radiation-condition .radiation-search-input.condition {
    width: 80px;
    height: 27px;
    padding: 0 8px;
    border: 2px solid #DFE5F1;
    border-radius: 17.5px;
    font-family: "NanumSquare Neo";
    font-size: 13px;
    font-weight: 700;
    color: #000;
}
.radiation-condition-unit {
    color: #333647;
    font-family: "NanumSquare Neo";
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin: 0px -2px;
}
.radiation-condition-select-wrapper {
    position: relative;
    display: inline-block;
}

.radiation-condition-select {
    width: 99px;
    height: 27px;
    flex-shrink: 0;
    border: 2px solid #22222A;
    border-radius: 4px;
    padding: 0 30px 0 8px;
    font-family: "NanumSquare Neo";
    font-size: 13px;
    font-weight: 700;
    color: #333647;
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%2322222A" d="M6 8L0 0h12z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.select-separator {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #22222A;
    font-weight: bold;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}
.radiation-condition-select-2 {
    width: 72px;
    height: 25px;
    color: #333647;
    font-family: "NanumSquare Neo";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-left: 6px
}
.mon_select {
    width: 100%;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0 12px;
    height: 30px;
    background-color: #fff;    /* 필요에 따라 색상 변경 */
    cursor: pointer;
}
/* 실제 선택 박스 (화살표 제거 & 전체 영역 클릭 가능) */
.mon_select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;          
    border: none;
    background: transparent;
    padding-right: 28px;          /* 화살표 영역 확보 */
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: #4D4D4D;
    font-family: "NanumSquare Neo";
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_select .divider {
    position: absolute;
    right: 28px;                  /* 화살표 왼쪽 위치 */
    width: 1px;
    height: 16px;
    background: #aaa;
    pointer-events: none;
}   
/* ▼ 화살표 (CSS content 사용) */
.mon_select::after {
    content: "\25BE";             /* ▼ */
    position: absolute;
    right: 2px;
    top: -10px; 
    pointer-events: none;
    color: #4D4D4D;
    font-family: "NanumSquare Neo";
    font-size: 31px;
    font-style: normal;
    font-weight: 800;             
    line-height: normal;
}   
/* 포커스/호버 효과 (선택) */
.mon_select:hover,
.mon_select:focus-within {
    border-color: #666;
}   
.mon_select select:valid {
    color: #22222f;                 /* 선택 완료 후 글자색 */
}   
/* 래퍼: pill 형태 */
.pill-select {
    display: inline-flex;
    align-items: center; /* ← 세로 중앙 정렬 */
    padding: 0px 10px;
    border: 1.5px solid #222;
    border-radius: 9999px;
    background: #fff;
    height: 32px; /* 필요 시 높이 조정 */

    border-radius: 17.5px;
    border: 3px solid #22222A;
}
/* 라벨 */
.pill-label {
    margin: 0;
    text-decoration: none; /* 혹시 전역 underline 제거 */

    color: #000;
    text-align: center;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;

    width: 80px;
    display: flex; /* ← 세로 중앙 정렬 */
    align-items: center;
    justify-content: center;
}
/* 라벨과 값 사이 세로 구분선 */
.pill-divider {
    width: 1px;
    height: 1.2em;
    background: #222;
    opacity: .9;
    flex: 0 0 1px;
}
/* select (값) */
.pill-field {
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    height: 100%;
    line-height: 1; /* 일부 브라우저에서 높이 튐 방지 */

    /* 기본 화살표 제거 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    outline: none;
    cursor: pointer;
    text-align: center;

    padding-left: 15px;
    padding-right: 15px;
    width: 55px;
}
/* 커스텀 화살표: 숫자 오른쪽 끝에 위치 */
.pill-select::after {
    content: "\25BE"; /* ▼ */
    font-size: 34px;
    color: #222;
    pointer-events: none;
    margin-left: -25px;
}
/* (선택) 포커스 스타일 */
.pill-field:focus {
    outline: none;
}
.pill-select:has(.pill-field:focus) {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
    border-color: #111;
}
.poi-container {
    height: 241px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: "NanumSquare Neo OTF", sans-serif;
}
/* 리스트 박스 */
.poi-container .poi-list {
    width: 341px;
    height: 241px;
    border: 2px solid #000;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
}
.poi-container .poi-list li {
    padding: 6px 10px;
    cursor: pointer;
    color: #000;
    font-family: "NanumSquare Neo OTF", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.poi-container .poi-list li.selected {
    background-color: #4a7cff !important;
    color: white;
}
/* 버튼 영역 */
.poi-container .buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 241px; /* 리스트와 동일 높이 */
}
/* 버튼 그룹 */
.poi-container .buttons .top-buttons,
.poi-container .buttons .bottom-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* 버튼 스타일 */
.poi-container .buttons button {
    padding: 5px 10px;
    cursor: pointer;
    background-color: #22222A;
    border: none;
    border-radius: 15px;
    color: #FFF;
    text-align: center;
    font-family: "NanumSquare Neo", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
/* 메인 콘텐츠 영역 */
.radiation-content-wrapper {
    background: white;
    border-radius: 14px;
    padding: 24px;
    display: flex;
    gap: 24px;
    min-height: 893px;
    position: relative;
}

/* 지도와 차트 영역 */
.radiation-map-chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.radiation-map-container {
    flex: 1;
    height: 297.88px;  /* radiation-equipment-content와 동일한 높이 */
    /*
    width: 442.39px;
    */
    background: white;
    box-shadow: 2px 2px 6px rgba(67, 81, 104, 0.25);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.fixed-radiation-map-container {
    flex: 1;
    height: 297.88px;  /* radiation-equipment-content와 동일한 높이 */
    /*
    width: 442.39px;
    */
    background: white;
    box-shadow: 2px 2px 6px rgba(67, 81, 104, 0.25);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.radiation-map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 18px;
}

.radiation-chart-container {
    width: 100%;
    max-height: 307px;
    position: relative;
    border-radius: 10px;

    padding: 10px;
    padding-top: 40px;
    margin-bottom: 40px;
    /*
    height: 100%;
    background: #FFF;
    */
}
.setting-chart-container {
    width: 100%;
    max-height: 307px;
    position: relative;
    border-radius: 10px;

    /*
    padding: 10px;
    padding-top: 40px;
    margin-bottom: 20px;
    height: 100%;
    background: #FFF;
    */
}
.radiation-bar-chart-container {
    width: 90%;
    height: 100%;
    max-height: 307px;
    position: relative;
    border-radius: 10px;

    margin: 0 auto;

    padding: 10px;
    padding-top: 40px;
    /*
    background: #FFF;
    */
}
.radiation-chart-p0 {
    padding: 10px 0px;
}

#dualLineChart {
    width: 100% !important;
    height: 100% !important;
}
.chart-legend {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: row;
    gap: 20px;

    color: #49545A;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #333;
}

.legend-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 50%;
}



.radiation-chart-area {
    width: 773.52px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.radiation-chart-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.radiation-chart-line-pink {
    position: absolute;
    top: 71.14px;
    left: 14.76px;
    width: 750.63px;
    border: 1.42px solid #EB008A;
}

.radiation-chart-line-green {
    position: absolute;
    top: 45.41px;
    left: 14.76px;
    width: 750.63px;
    height: 129.16px;
    border: 1.42px solid #A4CD3C;
}

.radiation-chart-legend {
    position: absolute;
    top: 2.77px;
    right: 80px;
    display: flex;
    gap: 20px;
}

.radiation-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.radiation-legend-dot {
    width: 10.16px;
    height: 10.20px;
    border-radius: 50%;
}

.radiation-legend-dot.pink {
    background: #EB008A;
}

.radiation-legend-dot.green {
    background: #A4CD3C;
}

.radiation-legend-text {
    font-size: 11.76px;
    font-weight: 700;
    color: #49545A;
}

/* 데이터 테이블 영역 */
.radiation-data-section {
    width: 600px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.radiation-data-tabs {
    display: flex;
    width: 188.46px;
    height: 29.61px;
}

.radiation-data-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14.66px;
    font-weight: 800;
    border: 1px solid #202B3D;
    cursor: pointer;
}

.radiation-data-tab.active {
    background: #333647;
    color: white;
}

.radiation-data-tab:not(.active) {
    background: white;
    color: #202B3D;
}

.radiation-data-info-panel {
    background: #333647;
    color: white;
    padding: 12px;
    border-radius: 4px;
}

.radiation-info-section {
    margin-bottom: 16px;
}

.radiation-info-header {
    width: 188px;
    height: 29px;
    background: #333647;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: white;
}

.radiation-info-content {
    width: 188px;
    height: 46px;
    background: #333647;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: white;
    padding: 8px;
    text-align: center;
}

.radiation-data-table {
    width: 100%;
    border-collapse: collapse;
}

.radiation-table-header {
    background: #333647;
    color: white;
    height: 30px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.radiation-table-cell {
    background: white;
    color: black;
    height: 30px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
.device-table-cell {
    background: #ECECEC;
    color: black;
    height: 30px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;

    /*
    padding: 4px;
    */
}
.device-table-cell-2 {
    background: #ECECEC;
    color: black;
    height: 30px;
    text-align: center;
    font-family: "NanumSquare Neo OTF";
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;

    /*
    padding: 4px;
    */
}
.device-table-cell-3 {
    background: #ECECEC;
    color: black;
    height: 30px;
    text-align: center;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;

    /*
    padding: 4px;
    */
}
.isNormal-cell {
    background: #ECECEC;
    color: black;
    height: 30px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding: 4px;
}
.checkStatus-cell {
    background: #A8A8A8;
    color: white;
    height: 30px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding: 4px;
}

.radiation-table-time {
    background: #333647;
    color: white;
    width: 188px;
}

.radiation-alarm-icon {
    width: 20px;
    height: 18px;
    background: #FF0000;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 900;
}

.radiation-equipment-container {
    display: flex;
    gap: 20px; /* 요소들 사이의 좌우 간격 */
    justify-content: space-between;
}
.radiation-equipment-content {
    width: 442.39px;
    height: 297.88px;
    fill: #FFF;
    filter: drop-shadow(2px 2px 6px rgba(67, 81, 104, 0.25));
    flex-direction: row;
    display: flex;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 6px rgba(67, 81, 104, 0.25);
    justify-content: center;
}
/* 장비 정보 패널 */
.radiation-equipment-info {
    width: 232px;
    display: flex;             /* Flexbox 레이아웃 활성화 */
    flex-direction: column;    /* 자식 요소들을 세로 방향으로 정렬 */
    justify-content:center;
    align-items:center;
    gap: 11.4px;                 /* 자식 요소들 사이에 10px의 간격 추가 */
}

.radiation-info-row {
    display: flex;
    height: 37.56px;
}
.fixed-radiation-info-row {
    display: flex;
}

.radiation-info-label {
    width: 93px;
    margin-left: 4px;
    margin-right: 4px;
    background: #333647;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 800;
}

.radiation-info-value {
    width: 139px;
    background: #DFE5F1;
    display: block;
    text-align: center;
    line-height: 37.56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 13px;
    cursor: help;
    position: relative;
    /*
    padding-left: 18px;
    */
    color: #202B3D;
    font-size: 15px;
    font-weight: 800;
    box-sizing: border-box;
}

/* 툴팁은 JavaScript로 처리 (CSS 툴팁 제거) */

.radiation-coordinate-text {
    /*
    font-size: 11px;
    */
    font-size: 15px;
}

/* PDF/Excel 아이콘 */
.radiation-export-icons {
    position: absolute;
    top: -1%;
    right: 5%;
    display: flex;
    gap: 8px;
}

.radiation-export-icon {
    width: 25px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 7px;
    font-weight: 900;
    cursor: pointer;
}

.radiation-pdf-icon {
    background: #E5252A;
    border-radius: 2px;
}

.radiation-excel-icon {
    background: #0E8040;
    border-radius: 2px;
}

.radiation-menu-arrow {
    position: absolute;
    right: 24px;
    width: 8px;
    height: 11px;
    border: 3px solid;
    border-color: transparent transparent transparent currentColor;
    transform: rotate(90deg);
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid white; /* 화살표 색상 */
}

/* 반응형 */
@media (max-width: 1600px) {
    .content-wrapper {
        flex-direction: column;
    }
    
    .data-section {
        width: 100%;
    }
    
    .chart-container {
        width: 100%;
    }
}

.mobile-sidebar-toggle {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    background: #272936;
    color: white;
    border: none;
    padding: 10px 14px;
    font-size: 24px;
    cursor: pointer;
}
@media (max-width: 768px) {
    #sidebar-left {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        position: fixed;
        z-index: 9998;
        width: 240px;
        height: 100vh;
        background: #272936;
        left: 0;
    }

    #sidebar-left.open {
        transform: translateX(0);
    }

    .mobile-sidebar-toggle {
        display: block;
    }
}
.radiation-table-wrapper {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*
    box-sizing: border-box;
    background: #e8e8e8;
    padding: 20px;
    min-height: 100vh;
    */
}
.radiation-table-wrapper * {
    box-sizing: border-box;
}
.table_group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 5px 10px 5px 10px;
}
.table-container {
    position: relative;
    width: 100%;
    max-width: 1573px;
    display: flex;
    flex-direction: column;
    height: 100%;
    /*
    margin: 0 auto;
    padding: 20px;
    height: 893px;
    background: #F5F5F5;
    box-shadow: 4px 4px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    */
}

.table-scrollable-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

/* fixedMonitoring 전용 테이블 스크롤 wrapper */
.fixed-table-scrollable-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    /*
    max-height: calc(100vh - 218px);
    max-height: calc(100vh - 380px);
    */
    width: 100%;
    position: relative;
}

/* fixedMonitoring 전용 스크롤바 스타일 */
.fixed-table-scrollable-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fixed-table-scrollable-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.fixed-table-scrollable-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.fixed-table-scrollable-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 스크롤바 공간 보상을 위한 패딩 */
.fixed-table-scrollable-wrapper {
    scrollbar-gutter: stable;
}

/* 헤더와 바디 너빔 일치 */
.fixed-table-header tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* 헤더 colspan 처리 */
.fixed-table-header .daily-dose-value,
.fixed-table-header .dose-stats-values {
    text-align: center;
}

/* 반응형 조정 */
@media screen and (max-width: 1400px) {
    .fixed-main-table {
        font-size: 14px;
    }
}

@media screen and (max-width: 1200px) {
    .fixed-main-table {
        font-size: 13px;
    }

    .fixed-table-scrollable-wrapper {
        max-height: calc(100vh - 350px);
    }
}

@media screen and (max-width: 992px) {
    .fixed-main-table {
        font-size: 12px;
    }

    .fixed-main-table td {
        padding: 8px 4px;
    }
}

/* fixedMonitoring 전용 radiation-table-wrapper */
.fixed-radiation-table-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.fixed-radiation-table-wrapper * {
    box-sizing: border-box;
}

/* fixedMonitoring 전용 table-container */
.fixed-table-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* fixedMonitoring 전용 main-table */
.fixed-main-table {
    width: calc(100% - 8px);
    border-collapse: separate;
    border-spacing: 2px;
    margin-top: -20px;
    overflow: hidden;
    table-layout: fixed;
}

/* fixedMonitoring sticky 헤더 */
.fixed-table-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
}

/* 헤더 행 배경색 */
.fixed-table-header tr {
    background-color: white;
}

/* 컴럼 너비 고정 - 시간이 가장 크게 */
.fixed-main-table .time-header {
    width: 34%;
}

.fixed-main-table .rate-header,
.fixed-main-table .coord-header,
.fixed-main-table .icon-header {
    width: 22%;
}

/* 데이터 셀 너비 매칭 */
.fixed-main-table td.time-format {
    width: 34%;
}

.fixed-main-table td.radiation-table-cell {
    width: 22%;
}

/* pollutionMonitoring 전용 테이블 스크롤 wrapper */
.pollution-table-scrollable-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 380px);
}

/* pollutionMonitoring 전용 스크롤바 스타일 */
.pollution-table-scrollable-wrapper::-webkit-scrollbar {
    width: 8px;
}

.pollution-table-scrollable-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.pollution-table-scrollable-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.pollution-table-scrollable-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* pollutionMonitoring 전용 radiation-table-wrapper */
.pollution-radiation-table-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pollution-radiation-table-wrapper * {
    box-sizing: border-box;
}

/* pollutionMonitoring 전용 table-container */
.pollution-table-container {
    position: relative;
    width: 100%;
    max-width: 1573px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* pollutionMonitoring 전용 main-table */
.pollution-main-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    margin-top: 0;
    overflow: hidden;
}
.device-table-container {
    position: relative;
    width: 100%;
    max-width: 1573px;
    overflow-x: hidden;
    /*
    margin: 0 auto;
    padding: 20px;
    height: 893px;
    background: #F5F5F5;
    box-shadow: 4px 4px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    */
}
/* 엑셀/PDF 버튼 (우상단) */
.export-buttons {
    display: flex;
    gap: 5px;
    justify-content: end;
    padding: 0px 4px;
}
.export-btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.2s;
}
.export-btn:hover {
    opacity: 0.8;
}
.excel_img {
    background-image: url('../../static/img/mon_icon_excel.svg');
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: left center; /* 이미지를 왼쪽에 배치 */
    width: 16px;
    height: 16px;
}
.pdf_img {
    background-image: url('../../static/img/mon_icon_pdf.svg');
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: left center; /* 이미지를 왼쪽에 배치 */
    width: 16px;
    height: 16px;
}
.del_img {
    background-image: url('../../static/img/mon_icon_del.svg');
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: left center; /* 이미지를 왼쪽에 배치 */
    width: 16px;
    height: 16px;
}
.modify_img {
    background-image: url('../../static/img/mon_icon_insert_txt.svg');
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: left center; /* 이미지를 왼쪽에 배치 */
    width: 16px;
    height: 16px;
}
.pdf-btn {
    background-color: #DC3545;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z'/%3E%3C/svg%3E");
}
/* 엑셀/PDF /del 버튼 (우하단) */
.action_btn_group {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 8px;
    padding: 0 17px;
    margin-top: 50px;
}
.action-btn {
    border: 1px solid #22222A;
    border-radius: 6px;             
    font-family: 'NanumSquare Neo OTF', sans-serif;
    font-weight: 800;               
    font-size: 13px;                
    line-height: 14px;                  
    padding: 3px 10px;              
    background: #fff;               
    display: flex;                      
    align-items: center;            
    gap: 6px; /* 아이콘과 텍스트 간격 */
}
.action-btn .icon {
    width: 16px;
    height: 16px;
}
.dose_bordered_container {
    border-radius: 10px;
    border: 2px solid #54627A;
    flex: 1;
}
.plant_back_panel {
    flex: 1;
    background: #FFF;
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.20));
}
.plant_direction_col {
    display: flex;
    flex-direction: column;
    height: 100%;
    filter: none;
}
.plant_direction_col > .left-top-box {
    flex: 250;
    background: #fff; /* 예시 */
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.20));
}
.plant_direction_col > .left-bottom-box {
    flex: 200; /* 비율 */
    background: #fff; /* 예시 */
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.20));
}
.plant_direction_col > .top-box {
    flex: 226;
    background: #fff; /* 예시 */
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.20));
}
.plant_direction_col > .mid-gap {
    flex: 0 0 15px;
    background: #E4EBF3;
}
.plant_direction_col > .mid-box {
    flex: 153; /* 비율 */
    background: #fff; /* 예시 */
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.20));
}
.plant_direction_col > .bottom-box {
    flex: 250; /* 비율 */
    background: #fff; /* 예시 */
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.20));
}
.plant_direction_col > .bottom-box-2 {
    flex: 312; /* 비율 */
    background: #fff; /* 예시 */
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.20));
}
.comparison_section {
    display: flex;
    gap: 20px;
}
.plant_section_1 {
    display: flex;
    gap: 20px;
    height: 491px
}
.plant_section_2 {
    display: flex;
    gap: 20px;
    height: 250px;
}
.plant_section_3 {
    display: flex;
    gap: 20px;
    height: 124px;
}
.plant_section_4 {
    display: flex;
    gap: 20px;
    height: 721px;
}
.plant_section_5 {
    display: flex;
    gap: 20px;
    height: 156px;
}

/* 전체 테이블 */
.main-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    margin-top: 0;
    overflow: hidden;
    /*
    background: #F5F5F5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    */
}
/* 첫 번째 행: 일일 누적선량, 0.25 mSv */
.daily-dose-header {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    width: 35px;
    /*
    padding: 15px;
    */
}
.daily-dose-value {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 14px;
    text-align: center;

    /*
    padding: 15px;
    */
}
/* 두 번째 행: 선량률 통계, 수치들 */
.dose-stats-header {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    /*
    padding: 15px;
    */
}
.dose-stats-values {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    line-height: 1.2;
    /*
    padding: 8px;
    */
}
/* 세 번째 행: 시간, 선량률, 좌표, 아이콘 */
.column-header {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    /*
    padding: 8px;
    */
}
.column-header-l {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 22px;
    text-align: center;
    /*
    padding: 8px;
    */
}
.column-header-2 {
    background: #333647;
    color: white;
    font-weight: 800;
    text-align: center;
    font-family: "NanumSquare Neo OTF";
    font-size: 20px;
    font-style: normal;
    line-height: normal;
}
.column-header-3 {
    background: #333647;
    color: white;
    font-weight: 800;
    text-align: center;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    line-height: normal;
}
.time-header {
    width: 200px;
}
.rate-header {
    width: 150px;
}
.plant_cell_header_l {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 22px;
    text-align: center;
    /*
    padding: 15px;
    */
}
.plant_cell_header {
    width: 220px;
}
.coord-header {
    width: 150px;
}
.icon-header {
    width: 150px;
}
.item-header {
    width: 90px;
}
.item-header_2 {
    width: 280px;
}
.date-header {
    width: 95px;
}
.table_header_1 {
    width: 134px;
}
.table_header_2 {
    width: 129px;
}
.table_header_3 {
    width: 574px;
}
.table_header_4 {
    width: 285px;
}
/* 네 번째 행: MM/DD HH:mm:ss (시간 컬럼만) */
.time-format {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    width: 200px;
    /*
    padding: 8px;
    */
}
.time-format-2 {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 16px;
    text-align: center;
    width: 200px;
    /*
    padding: 8px;
    */
}
.time-format-3 {
    background: #333647;
    color: white;
    font-weight: 800;
    font-size: 20px;
    text-align: center;
    width: 200px;
    /*
    padding: 8px;
    */
}
.empty-cell {
    background: #333647;
}
.line_row_1 {
    height: 37px;
    background-color: #F5F5F5;
}
.line_row_2 {
    height: 54px;
}

/* 테이블 레이아웃 고정 */
.fixed-main-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    background: #F5F5F5;
}

.fixed-main-table tbody {
    display: block;
}
.line_row_3 {
    height: 38px;
}
.line_row_4 {
    height: 41px;
}
.line_row_5 {
    height: 32px;
}
.line_row_6 {
    height: 72px;
}
.line_row_7 {
    height: 68.4px;
}
.line_row_8 {
    height: 35.4px;
}
.line_row_9 {
    height: 50px;
}
.line_row_10 {
    height: 34px;
}

/* pollutionMonitoring 알람 타입 전용 테이블 컬럼 너비 설정 */
/* alarm-stats-row (4개 컬럼, 3개 spacing × 2px = 6px) */
#alarm-stats-row td:nth-child(1) { width: 24% !important; }
#alarm-stats-row td:nth-child(2) { width: 30% !important; }
#alarm-stats-row td:nth-child(3) { width: 30% !important; }
#alarm-stats-row td:nth-child(4) { width: 16% !important; }  /* spacing 차이 보정 */

/* alarm-header-row와 데이터 행 (6개 컬럼, 5개 spacing × 2px = 10px) */
.pollution_col_alarm_1 { width: 24% !important; }  /* 통과시간 */
.pollution_col_alarm_2 { width: 12% !important; }  /* 결과 */
.pollution_col_alarm_3 { width: 18% !important; }  /* 총 계수 */
.pollution_col_alarm_4 { width: 15% !important; }  /* BKG */
.pollution_col_alarm_5 { width: 15% !important; }  /* 알람레벨 */
.pollution_col_alarm_6 { width: 16% !important; }  /* 비고 */

/* 데이터 테이블의 td에도 강제 적용 (우선순위 높이기) */
.fixed-main-table tbody#dataTableBody tr td.pollution_col_alarm_1 { width: 24% !important; background: #333647; color: #fff; }
.fixed-main-table tbody#dataTableBody tr td.pollution_col_alarm_2 { width: 12% !important; }
.fixed-main-table tbody#dataTableBody tr td.pollution_col_alarm_3 { width: 18% !important; }
.fixed-main-table tbody#dataTableBody tr td.pollution_col_alarm_4 { width: 15% !important; }
.fixed-main-table tbody#dataTableBody tr td.pollution_col_alarm_5 { width: 15% !important; }
.fixed-main-table tbody#dataTableBody tr td.pollution_col_alarm_6 { width: 16% !important; }

/* 데이터 영역 */
.data-wrapper {
    height: calc(100% - 260px);
    overflow-y: auto;
    margin-top: 15px;
    scrollbar-width: thin;
    scrollbar-color: #999 #f5f5f5;
}

.data-wrapper::-webkit-scrollbar {
    width: 8px;
}

.data-wrapper::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.data-wrapper::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
}

.data-wrapper::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    background: #F5F5F5;
}

.data-row {
    height: 30px;
    border-bottom: 1px solid #eee;
}

.data-row:hover {
    background-color: #f8f9fa;
}

.data-cell {
    background: white;
    padding: 8px;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    text-align: center;
    border-radius: 4px;
}

/* 차트 범례 스타일 */
.legend-item {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    transition: opacity 0.3s;
}

.legend-item:hover {
    opacity: 0.7;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 8px;
    transition: background-color 0.3s;
}

#chartLegend {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
}

/* fixedMonitoring 장치명 드롭다운 스타일 */
.device-dropdown-menu {
    position: absolute;
    /* top, left는 JavaScript로 동적 설정 */
    width: 250px;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.device-dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.device-dropdown-item:hover {
    background-color: #f5f5f5;
}

.device-dropdown-item.selected {
    background-color: #e3f2fd;
    font-weight: 600;
    color: #1976d2;
    position: relative;
}

.device-dropdown-item.selected::after {
    content: '✓';
    position: absolute;
    right: 15px;
    color: #1976d2;
    font-weight: bold;
}

.device-dropdown-item:last-child {
    border-bottom: none;
}

.mon_device_group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 245px;  /* 최소 너비 보장 */
}

/* fixedMonitoring 테이블 추가 스타일 */
/* 스크롤 wrapper 높이 조정 */
.fixed-table-scrollable-wrapper {
    height: calc(100% - 200px);
    overflow-y: scroll; /* 항상 스크롤바 표시 */
    overflow-x: hidden;
}

/* 데이터 테이블 너비 */
.fixed-table-scrollable-wrapper table {
    width: 100%;
    table-layout: fixed;
}

/* 데이터 행의 셀 너비 - 헤더와 동일하게 */
.fixed-table-scrollable-wrapper td:nth-child(1) {
    width: 34%;
    text-align: center;
}

.fixed-table-scrollable-wrapper td:nth-child(2),
.fixed-table-scrollable-wrapper td:nth-child(3),
.fixed-table-scrollable-wrapper td:nth-child(4) {
    width: 22%;
    text-align: center;
}

/* 헤더 테이블에 스크롤바 너비만큼 패딩 추가 */
.fixed-main-table:first-of-type {
    box-sizing: border-box;
}

/* 페이지네이션 위치 고정 */
#mon_monitoring_pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* data_item_2 높이 맞추기 */
.data_item_2 {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

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

.fixed-table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 60px;
}

.data-time {
    width: 200px;
}

.data-rate {
    width: 150px;
}

.data-coord {
    width: 150px;
}

.data-icon {
    width: 150px;
}

/* 경고 아이콘 */
.warning-icon {
    width: 20px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.import_ratio_wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 제목을 차트 쪽으로 끌어내림 */
.import_ratio_wrapper .import_ratio_title {
    margin: 0;
    transform: translateY(28px); /* 숫자 조절하여 겹치는 정도 결정 */
    z-index: 5;
    background: transparent;
    margin-right: 56%;
    color: #000;
    font-family: "NanumSquare Neo OTF";
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
/* 차트 컨텐트는 상단 패딩을 조금 줄여서 타이틀과 가까워지게 */
.import_ratio_wrapper .import_ratio_content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 0; /* 필요하면 소폭 조정 */
    transform: translateX(12%); /* 12px 우측으로 이동 */
}

.import_ratio_content canvas {
    max-width: 360px;
    max-height: 300px;
}





/* 반응형 디자인 */
@media (max-width: 1920px) {
    .radiation-table-wrapper .table-container {
        max-width: 573px;
        max-height: calc(100vh - 40px);
    }
}

@media (max-width: 1400px) {
    .radiation-table-wrapper .daily-dose-header,
    .radiation-table-wrapper .dose-stats-header,
    .radiation-table-wrapper .time-header,
    .radiation-table-wrapper .time-format,
    .radiation-table-wrapper .data-time {
        width: 160px;
    }
    
    .radiation-table-wrapper .rate-header, 
    .radiation-table-wrapper .coord-header, 
    .radiation-table-wrapper .icon-header,
    .radiation-table-wrapper .data-rate, 
    .radiation-table-wrapper .data-coord, 
    .radiation-table-wrapper .data-icon {
        width: 120px;
    }
}

@media (max-width: 1024px) {
    .radiation-table-wrapper .table-container {
        height: calc(100vh - 20px);
        border-radius: 10px;
        padding: 15px;
    }
    
    .radiation-table-wrapper .column-header,
    .radiation-table-wrapper .data-cell,
    .radiation-table-wrapper .time-format {
        font-size: 12px;
        padding: 6px;
    }
    
    .radiation-table-wrapper .daily-dose-header,
    .radiation-table-wrapper .dose-stats-header {
        font-size: 12px;
        padding: 12px;
    }
}

@media (max-width: 768px) {
    .radiation-table-wrapper .table-container {
        margin: 10px;
        width: calc(100vw - 20px);
        height: calc(100vh - 20px);
        padding: 10px;
    }
    
    .radiation-table-wrapper .daily-dose-header,
    .radiation-table-wrapper .dose-stats-header,
    .radiation-table-wrapper .time-header,
    .radiation-table-wrapper .time-format,
    .radiation-table-wrapper .data-time {
        width: 120px;
    }
    
    .radiation-table-wrapper .rate-header, 
    .radiation-table-wrapper .coord-header, 
    .radiation-table-wrapper .icon-header,
    .radiation-table-wrapper .data-rate, 
    .radiation-table-wrapper .data-coord, 
    .radiation-table-wrapper .data-icon {
        width: 90px;
    }
    
    .radiation-table-wrapper .column-header,
    .radiation-table-wrapper .data-cell,
    .radiation-table-wrapper .time-format {
        font-size: 11px;
        padding: 5px;
    }
}


/* interestAreas */
#interestAreas {
  margin-top:120px;
  background-color: #e0e0e0;
  z-index:300;
}

.interest-areas-buttons-wrapper {
    display: flex; /* 자식 요소들을 가로로 나열 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 10px; /* 버튼들 사이의 간격 */
    padding: 5px 0; /* 상하 패딩 */
    margin-left: 20px; /* '관심지역' 텍스트와의 간격 조정 */
    /* Velzon의 다른 nav-item과 같은 줄에 오도록 필요시 margin-top/bottom 조정 */
}

/* 원형 버튼 리스트 */
.interest-areas-list {
    list-style: none; /* 기본 리스트 스타일 제거 */
    margin: 0;
    padding: 0;
    display: flex; /* li 요소들을 가로로 나열 */
    gap: 5px; /* li 요소들 사이의 간격 */
}

/* 각 원형 버튼 (li) */
.interest-areas-list li {
    position: relative; /* i_bar (툴팁) 위치 지정을 위해 */
}

/* 각 원형 버튼 (a 태그) */
.interest-areas-list li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px; /* 원형 크기 */
    height: 30px; /* 원형 크기 */
    border-radius: 50%; /* 원형으로 만듦 */
    background-color: var(--vz-secondary-bg); /* Velzon 보조 배경색 (회색 계열) */
    color: var(--vz-body-color); /* 텍스트 색상 */
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: 1px solid var(--vz-border-color); /* 테두리 */
}

/* 활성화된 원형 버튼 (1번 버튼) */
.interest-areas-list li.on a {
    background-color: var(--vz-danger); /* Velzon 경고색 (빨간색 계열) */
    color: var(--vz-white); /* 흰색 텍스트 */
    border-color: var(--vz-danger);
}

/* 원형 버튼 호버 효과 */
.interest-areas-list li a:hover {
    background-color: var(--vz-primary); /* Velzon 기본색 (파란색 계열) */
    color: var(--vz-white);
    border-color: var(--vz-primary);
}

/* 상세 정보 툴팁 (i_bar) */
.interest-areas-list li .i_bar {
    display: none; /* 기본 숨김 */
    position: absolute;
    top: 117%; /* 버튼 아래에 위치 */
    left: 45%;
    transform: translateX(-50%); /* 중앙 정렬 */
    background-color: var(--vz-dark); /* 어두운 배경 */
    color: var(--vz-white); /* 흰색 텍스트 */
    padding: 10px;
    border-radius: 5px;
    white-space: nowrap; /* 줄바꿈 방지 */
    z-index: 201; /* 다른 요소 위로 오도록 */
    box-shadow: var(--vz-box-shadow);
    min-width: 150px; /* 최소 너비 */
    list-style: none;
}

/* 툴팁의 삼각형 */
.interest-areas-list li .i_bar .tri {
    content: ""; /* 비어있는 content */
    display: block; /* 블록 요소로 만들어서 크기 조절 가능하게 */
    position: absolute; /* 부모(li)를 기준으로 위치 지정 */
    bottom: 100%; /* 부모 li의 상단으로 올림 (툴팁 박스 위에 위치) */
    left: 50%; /* 부모 li의 중앙에 위치 */
    transform: translateX(-50%) translateY(5px) rotate(45deg); /* X축 중앙, 위로 살짝 올리고 회전 */
    width: 10px; /* 삼각형 크기 조정 */
    height: 20px; /* 삼각형 크기 조정 */
    background-color: var(--vz-dark); /* 툴팁 박스와 같은 배경색 */
    border-top: 1px solid var(--vz-dark); /* 테두리 (선택 사항) */
    border-left: 1px solid var(--vz-dark); /* 테두리 (선택 사항) */

    /*
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background-color: var(--vz-dark);
    border-top: 1px solid var(--vz-dark);
    border-left: 1px solid var(--vz-dark);
    */
}

/* 호버 시 상세 정보 표시 */
.interest-areas-list li:hover .i_bar {
    display: block !important; /* !important로 인라인 스타일 오버라이드 */
}

/* 상세 정보 p 태그 스타일 */
.interest-areas-list li .i_bar p {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--vz-text-muted); /* 상세 정보 텍스트 색상 */
}
.interest-areas-list li .i_bar p:first-of-type {
    font-weight: 600;
    color: var(--vz-white); /* 첫 줄은 조금 더 강조 */
}


/* '저장' 버튼 */
.save-interest-area-btn {
    /* Bootstrap btn-info 클래스를 사용하지만, 필요시 추가 스타일 적용 */
    padding: 5px 15px; /* 버튼 패딩 조정 */
    font-size: 0.9em;
    height: 30px; /* 원형 버튼과 높이 맞춤 */
}

/* data/radiationProbe */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    font-family: 'NanumSquare Neo OTF', sans-serif;
}   
.calendar-nav-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem; /* rounded-md */
    background-color: white;
    font-size: 1rem;
    cursor: pointer;
}   
.calendar-nav-btn:hover {
    background-color: #f9fafb; /* hover:bg-gray-50 */
}   
.calendar-btn-today {
    background-color: #6366f1; /* indigo-500 */
    color: white;
    border-color: #6366f1;
    font-weight: 500;
}   
.calendar-btn-today:hover {
    background-color: #4f46e5; /* hover:bg-indigo-600 */
}
.calendar-title-container {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* space-x-6 */
}
.calendar-title-nav {
    font-size: 1.5rem; /* text-2xl */
    font-weight: bold;
    color: #4b5563; /* gray-700 */
    cursor: pointer;
}
.calendar-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: bold;
    color: #1f2937; /* gray-900 */
}
.add-button {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
}









/* live/monitoring */
.live-header-title {
    margin-left:3%;
    top: 24.5px;
    left: 380px;
    display: flex;
    align-items: center;
    z-index: 10;

    color: white;
    font-family: 'NanumSquare Neo OTF';
    font-style: normal;
    font-weight: 800;
    font-size: 28px;
    line-height: 31px;
}

/* sidebar */
.sidebar-container {
  position: fixed;
  height: calc(100vh);
  display: flex;
  align-items: center;
  z-index: 200;
}
/* 방향별 위치 */
.sidebar-container.left {
    top: 81px;
    left: 0;
    flex-direction: row;

    flex-shrink: 0;
}
.sidebar-container.right {
  top: 81px;
  right: 0;
  flex-direction: row-reverse;
}
.sidebar {
  width: 0;
  overflow: hidden;
  background-color: #22222A;
  color: white;
  transition: width 0.3s ease;
  height: 100vh;
  padding-top: 40px;
}
.sidebar.open {
  width: 350px
}

.toggle-btn {
  position: absolute;
  top: 40%;
  transform: translate(-50%);
  width: 30px;
  height: 60px;
  background-color: #22222A;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 90;
  transition: all 0.3s ease; 
}
#toggle-left {
  left: 14.9px;
  border-radius: 0 6px 6px 0;
}
#toggle-right {
  right: -15px;
  border-radius: 25px; 
}
#tab_rad {
  right: 245px;
  border-radius: 6px 0 0 6px;
} 
.toggle-btn1 {
  position: absolute;
  top: 12%; 
  transform: translate(-50%);
  width: 30px;
  height: 80px;
  background-color: #405189;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 90;
  transition: all 0.3s ease; 
}
#tab_weather {
  right: 245px;
  border-radius: 6px 0 0 6px;
}
.toggle-btn2 {
  position: absolute;
  top: 0%; 
  transform: translate(-50%);
  width: 30px;
  height: 80px;
  background-color: #405189;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 90;
  transition: all 0.3s ease; 
}


#tab_plants {
  right: 245px;
  border-radius: 6px 0 0 6px;
}
.toggle-btn3 {
  position: absolute;
  top: 24%; 
  transform: translate(-50%);
  width: 30px;
  height: 80px;
  background-color: #405189;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 90;
  transition: all 0.3s ease; 
}

#tab_korad {
  right: 245px;
  border-radius: 6px 0 0 6px;
}
.toggle-btn4 {
  position: absolute;
  top: 36%; 
  transform: translate(-50%);
  width: 30px;
  height: 80px;
  background-color: #405189;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 90;
  transition: all 0.3s ease; 
}

#tab_location {
  right: 245px;
  border-radius: 6px 0 0 6px;
} 
.toggle-btn5 {
  position: absolute;
  top: 48%; 
  transform: translate(-50%);
  width: 30px;
  height: 80px;
  background-color: #405189;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 90;
  transition: all 0.3s ease; 
}



#main-content-wrapper {
  transition: margin-left 0.3s ease, margin-right 0.3s ease;
  margin-top: 62px;
  /*
  margin-left: 0px;
  margin-right: 0px;
  transition: margin-left 0.3s ease;
  transition: margin-right 0.3s ease;
  padding: 20px;
  */
}
#map-container {
    position: relative; /* ← absolute면 안 됨 */
    width: 100%;
    height: 100%;
    overflow: hidden;  /* 선택적 */
}

#map {
    width: 100%;
    height: 1500px;
    position: relative !important; /* 카카오가 덮는다면 강제적으로 relative 적용 */
}
/* 사이드바 열렸을 때 메인 콘텐츠를 밀어냄 */
#layout-wrapper.sidebar-left-open #main-content-wrapper {
  margin-left: 340px;
}
#layout-wrapper.sidebar-right-open #main-content-wrapper {
  margin-right: 340px;
}
#layout-wrapper.sidebar-left-open #main-content-wrapper-trend {
  margin-left: 340px;
}

/* sidebar 메뉴 style */
.sidebar-title {
    margin: 10px;
    padding: 10px 0;
    width: 105px;
    height: 23px;
    font-family: 'NanumSquare Neo OTF';
    font-style: normal;
    font-weight: 800;
    font-size: 21px;
    line-height: 23px;

    color: #FFFFFF;
}
.sidebar-header {
  margin: 10px;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0;
}

.sidebar-header.highlight {
  background-color: #ffd700;
  color: #333;
  padding: 8px;
}

.new-badge {
  font-size: 13px;
  float: right;
  color: #ccc;
}
/* searchbox */
.left-search-box {
  padding: 5px;
}
.left-btnSearch {
  text-align:end;
  padding-right:17px;
}
.right-search {
  padding-right:3px;
}
.right-search-box {
  --vz-gutter-x:1rem;
}
.right-btnSearch {
  text-align:center;
  --vz-btn-padding-x:0.6rem;
}

/* 사용자지정정보 */
.section-header,
.section-title {
  font-weight: bold;
  margin-bottom: 2px;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
}

.sidebar-badge {
  background-color: #9ccc65;
  color: black;
  padding: 2px 5px;
  border-radius: 10px;
  font-size: 12px;
  float: right;
}

.sidebar-badge.badge-alarm {
  background-color: #dc3545;
  color: white;
}

.sidebar-badge.badge-warning {
  background-color: #ffc107;
  color: black;
}

.sidebar-badge.badge-inactive {
  background-color: #6c757d;
  color: white;
}

.device-item {
  display: flex;
  align-items: center;
  margin: 7px 3px;
  border-radius: 6px;
}

.device-item .icon img {
  width: 24px;
  height: 24px;
}

.device-item .info {
  flex: 1;
  margin-left: 10px;
}

.device-item .title {
  font-weight: bold;
}

.device-item .value {
  font-size: 12px;
  color: #b5e0ff;
  text-align:right;
}

/* 디바이스 항목 스타일 업데이트 - 이미지에 맞게 */
.device-item {
  display: flex;
  align-items: center;
  margin: 5px 8px;
  padding: 8px 12px;
  background-color: #2a2d35;
  border-radius: 6px;
  border: 1px solid #3a3d45;
}

.device-item .device-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.device-item .device-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.device-item .device-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.device-item .device-name {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
  flex-shrink: 0;
  margin-right: -15px;
}

.device-item .device-value-container {
  background-color: #1a1d23;
  border-radius: 15px;
  padding: 4px 10px;
  display: inline-block;
  width: 120px;
  border: 1px solid #3a3d45;
  text-align: center;
  flex-shrink: 0;
}

.device-item .device-value {
  font-size: 11px;
  color: #b5e0ff;
  font-weight: 500;
  white-space: nowrap;
}

.device-item .device-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  flex-shrink: 0;
}

.device-item .action-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.device-item .action-icon:hover {
  opacity: 1;
}

.status-dot.green {
  width: 10px;
  height: 10px;
  background-color: #4caf50;
  border-radius: 50%;
}
.status-dot.gray {
  width: 10px;
  height: 10px;
  background-color: #aaa;
  border-radius: 50%;
}

/* 섹션 헤더 스타일 업데이트 - 이미지와 정확히 일치하도록 */
.section-header.text-white.p-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px !important;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: white !important;
  cursor: pointer;
  border-radius: 0 20px 20px 0;
  margin: 8px 12px 5px 0px;
  font-size: 13px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.section-content {
  background-color: transparent;
  max-height: none;
  overflow: visible;
  padding: 5px 0;
}





/* Tab Menu Styles */
.tab-menu {
    margin-top:10px;
    display: flex;
    justify-content: flex-start;
    /* padding: 10px; */ /* padding 대신 버튼 자체에 패딩 적용 */
    border-bottom: 1px solid #444; /* 어두운 배경에 맞게 조정 */
    background-color: #333d45;
    position: sticky; /* 스크롤 시 상단 고정 */
    top: 0;
    z-index: 10;
}


.tab-button {
    flex: 1; /* 너비를 균등하게 분배 */
    background-color: #444d55; /* 탭 버튼 배경색 */
    border: none; /* 테두리 없음 */
    border-bottom: 3px solid transparent; /* 비활성 탭 하단 선 */
    padding: 15px 0; /* 패딩 조정 */
    cursor: pointer;
    font-weight: bold;
    color: #ccc; /* 탭 텍스트 색상 */
    text-align: center;
    transition: all 0.2s ease;
}

.tab-button.active {
    background-color: #333d45; /* 활성 탭 배경색 */
    border-bottom-color: #ffde00; /* 활성 탭 하단 강조선 */
    color: #ffde00; /* 활성 탭 텍스트 색상 */
}

.tab-button-menu {
    right: 294px;
    flex: 1; /* 너비를 균등하게 분배 */
    background-color: rgb(91, 155, 213);
    border: none; /* 테두리 없음 */
    border-bottom: 3px solid transparent; /* 비활성 탭 하단 선 */
    cursor: pointer;
    font-weight: bold;
    color: white; /* 탭 텍스트 색상 */
    text-align: center;
    transition: all 0.2s ease;
} 
.tab-button-menu:hover{
    background-color:rgb(112, 173, 71);
}
.api_active{
    background-color: rgb(112, 173, 71);
}
.tab-button-menu.active {
    background-color: rgb(112, 173, 71); /* 활성 탭 배경색 */
    /*border-bottom-colo*r: #ffde00;  활성 탭 하단 강조선 */
    /*color: #ffde00;  활성 탭 텍스트 색상 */
} 

/* Tab Content Styles */
.tab-content-container {
    display: flex;
    /* 원하는 방향으로 정렬: row (가로), column (세로) */
    flex-direction: row; 
    /* 자식 요소들의 정렬 방식 조절 */
    justify-content: flex-start; /* 또는 center, space-between 등 */
    align-items: flex-start; /* 또는 center, stretch 등 */
}

.tab-content-mon {
    display: block;
    padding: 5px; /* 콘텐츠 내부 패딩 */
}
.tab-content-api {
    display: block;
    padding: 5px; /* 콘텐츠 내부 패딩 */
}

.tab-content-mon.active {
    display: block;
    color: black;
}
.tab-content-api.active {
    display: block;
    color: black;
}
.tab-content{
    /*
    display: none;
    */
    padding: 5px; /* 콘텐츠 내부 패딩 */
}

.tab-content.active {
    display: block;
}

/* --- 사용자 지정정보 탭 스타일 --- */
.custom-info-header {
    margin-bottom: 15px;
}

.custom-info-header h3 {
    color: #ffde00; /* 제목 색상 */
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.search-input-group {
    display: flex;
    margin-bottom: 20px;
    border: 1px solid #555;
    border-radius: 5px;
    overflow: hidden; /* input과 button의 둥근 모서리 처리 */
}

.search-input-group input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: none;
    background-color: #444d55;
    color: #f0f0f0;
    outline: none;
}

.search-input-group input[type="text"]::placeholder {
    color: #aaa;
}

.search-input-group .search-icon {
    background-color: #444d55;
    border: none;
    padding: 10px 12px;
    color: #f0f0f0;
    cursor: pointer;
    font-size: 1.1em;
}
.search-input-group .search-btn {
    background-color: #555;
    border: none;
    padding: 10px 15px;
    color: #f0f0f0;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}
.search-input-group .search-btn:hover {
    background-color: #666;
}

/* 아코디언 섹션 */
.collapsible-section {
    margin-bottom: 10px;
    background-color: #444d55; /* 섹션 배경색 */
    border-radius: 5px;
    overflow: hidden; /* content 숨김 처리 */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #4d5861; /* 헤더 배경색 */
    cursor: pointer;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #555; /* 구분선 */
    transition: background-color 0.2s;
}

.section-header:hover {
    background-color: #5a6570;
}

.section-header.active {
    /* 활성화 시 색상 변화 또는 다른 스타일 */
}

.toggle-arrow {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

/* 아코디언 콘텐츠 */
.section-content {
    background-color: #444d55;
    max-height: 0; /* 기본적으로 숨김 */
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* 애니메이션 */
    padding: 0 5px; /* 초기 패딩 0, 열릴 때 보임 */
}

.section-content.active {
    /* JavaScript에서 max-height를 조절하므로 여기에 active 클래스를 통한 높이 조절은 필요 없습니다. */
    /* 하지만 시각적 구분을 위해 다른 스타일을 줄 수는 있습니다. */
}

.location-list {
    list-style: none;
    padding: 0px 10px; /* 상하 여백 */
    margin: 0;
}

.location-list li {
    padding: 8px 0;
    border-bottom: 1px solid #555; /* 목록 항목 구분선 */
    color: #ddd;
    display: flex;
    align-items: center;
}

.location-list li:last-child {
    border-bottom: none;
}

.location-list li span:first-child {
    display: inline-block;
    width: 25px; /* 숫자 정렬을 위해 너비 고정 */
    text-align: center;
    font-weight: bold;
    color: #ffde00; /* 숫자 색상 */
    margin-right: 5px;
    padding-right: 10px;
}
.location-list li img{
    padding-right: 5px;
}

/* IERNET 탭 콘텐츠 내 스타일 */
.iernet-header {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.iernet-logo {
    width: 100%; /* 로고 크기 조정 */
    height: 50px;
}

.iernet-title {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
}

.iernet-update-info {
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.iernet-search-bar {
    display: flex;
    gap: 5px; /* 버튼 간격 */
    margin-bottom: 15px;
}

.iernet-search-bar input[type="text"] {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.iernet-search-bar button {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 4px;
}

.iernet-search-bar button:hover {
    background-color: #e0e0e0;
}

.iernet-data-table-container {
    max-height: calc(100vh - 500px); /* 화면 높이에 따라 테이블 스크롤 가능하게 */
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: white;
    text-align:center;
}

.iernet-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px
}

.iernet-data-table th, .iernet-data-table td {
    padding: 8px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

.iernet-data-table th {
    background-color: #4a5765;
    font-weight: bold;
}

.iernet-data-table tbody tr:hover {
    background-color: #80808070;
}

.status-normal {
    color: green; /* 정상 상태 표시용 색상 */
    font-size: 1.2em; /* 점 크기 조절 */
    vertical-align: middle;
    margin-right: 3px;
}

/* live/dose/trend 스타일 */
.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.trend-summary {
  font-size: 14px;
  margin-bottom: 16px;
}
.trend-chart-wrapper {
  border: 1px solid #5cb85c;
  padding: 10px;
  border-radius: 4px;
}
#radiationChart {
  width: 100% !important;
  height: 130px !important;
}

/* 검색 - 선량률 스타일 */
.input-group-text {
  border-radius: 5px !important;
  min-width: 20px;
  height: 37.5px;
  border:var(--vz-border-width) solid var(--vz-input-border-custom);
}
#btnDoserateSearch {
  height: 40px;
}

.card_search_data_row {
  min-height: 400px;
}
.map-wrapper.flex-grow-1 {
  border:1px solid var(--vz-border-color);
  border-radius: 0.25rem; /* 살짝 둥근 모서리 */
  min-height: 300px;
}

/* 테이블 스타일 */
.data_list table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0; /* Bootstrap 기본 테이블 마진 제거 */
}
.data_list th, .data_list td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.9rem;
}
.data_list thead th {
    background-color: #e9ecef; /* 헤더 배경색 */
    font-weight: bold;
    color: #495057;
}
.data_list tbody tr:nth-of-type(odd) {
    background-color: #fbfbfb; /* 홀수 행 배경색 */
}
.data_list tbody td {
    color: #343a40;
}
/* 첫 번째 컬럼 (분류) 왼쪽 정렬 */
.data_list tbody td:first-child {
    text-align: left;
    padding-left: 1.5rem; /* 여백 추가 */
}

/* 검색 - 방사선 탐사 스타일 */
.calendar-nav-btn {
    padding: .4em .65em;
}
.calendar-nav-icon {
    font-weight: bold; /* 버튼 기본 크기 */
    font-size: 1.5rem;  /* 아이콘만 크게! */
    line-height: 1; 
}
.calendar-btn-today {
    font-size: 16px;  /* 아이콘만 크게! */
    margin-left:  0.75rem;
}
.area-section.flex-grow-1 {
  border:1px solid var(--vz-border-color);
  border-radius: 0.25rem; /* 살짝 둥근 모서리 */
  min-height: auto;
}
.card-header-title-bordered {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem; /* 타이틀 아래 간격 */
    background-color: #ffffff; /* 필요시 배경색 */
}
.bordered-area {
    border: 1px solid var(--vz-border-color);
    border-radius: 0.25rem; /* 살짝 둥근 모서리 */
    min-height: 300px;
}

/* 분석 - 경로추적 trace 스타일 */
.collapse-overlay-content {
    position: absolute; /* 부모인 card-body를 기준으로 위치 */
    top: 50px; /* '측정장비 0대' 제목 아래부터 시작 (대략적인 값, 조정 필요) */
    left: 0; 
    width: 100%;
    background-color: white; /* 덮어씌워질 때의 배경색 (card-body와 동일하게 흰색) */
    z-index: 10; /* 다른 요소들(예: 지도) 위에 표시되도록 높은 z-index */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 선택 사항: 시각적인 구분을 위한 그림자 */
    /* Bootstrap의 .collapse 클래스가 height: 0; overflow: hidden;을 제어합니다. */
}   

.info-section {
    margin-bottom: 0; /* 기본 마진 제거 */
}   
#deviceListCollapse_scroll {
    max-height: 200px;
    overflow-y: auto;
}


/* 분석 - 핵종분석 nuclide 스타일 */
#nuclide_trendChart {
  width: 100% !important;
  height: 200px !important;
}
#nuclide_spectrumChart {
  width: 100% !important;
  height: 200px !important;
}
.analysis-tab-container {
    width: 100%;
    background-color: transparent!important;
    /*
    border: 1px solid #ccc;
    */
    border-radius: 5px;
    padding: 0;
}
.analysis-tab-menu {
    list-style: none;
    padding-left: 10px;
    margin: 0;
    display: flex;
    border-bottom: 1px solid #ccc;
    background-color: transparent!important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.analysis-tab-menu li {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background-color: #f9f9f9;
    margin-right: 2px;
    font-weight: normal;
    color: #333;
}
.analysis-tab-menu li.active {
    background-color: white;
    border-bottom: 1px solid white;
    font-weight: bold;
}

.tab-container {
    width: 100%;
    background-color: white;
    /*
    border: 1px solid #ccc;
    */
    border-radius: 5px;
    padding: 0;
}
.chart-tab-menu {
    list-style: none;
    padding-left: 10px;
    margin: 0;
    display: flex;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.chart-tab-menu li {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background-color: #f9f9f9;
    margin-right: 2px;
    font-weight: normal;
    color: #333;
}
.chart-tab-menu li.active {
    background-color: white;
    border-bottom: 1px solid white;
    font-weight: bold;
}
.tab-content .graph_box {
    display: none;
    padding: 10px;
    background-color: white;
}
.tab-content .graph_box.active {
    display: block;
}
.graph_box {
    background: white;
    border-top: none;
    padding: 10px;
}

/* 분석 - 방사선분포 distribution 스타일 */
.dist-form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.dist-custom-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.dist-custom-label {
    color: #6c757d;
    font-size: 14px;
    white-space: nowrap;
}
.dist-step-container {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 9999px;
    overflow: hidden;
    height: 38px;
    background-color: white;
}
.dist-step-value {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 14px;
}
.dist-step-controls {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #dee2e6;
}
.dist-step-controls button {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    width: 20px;
    height: 18px;
    line-height: 1;
}
.dist-step-controls button:hover {
    background-color: #f0f0f0;
}

/* 환경설정 - 지도관리 setting 스타일 */
.select-setting-map {
    width: 187px;
}
.setting-map-interest-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
}
.setting-map-interest-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
}
.setting-map-interest-table th,
.setting-map-interest-table td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 8px;
}
.setting-map-interest-table th {
    background-color: #f9fafb;
    color: #333;
    font-weight: 600;
}
.setting-map-interest-table input[type="text"] {
    width: 90%;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.setting-map-btn {
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    border: none;
}
.setting-map-btn.blue {
    background-color: #c8d9ec;
    color: #1a3c6f;
}
.setting-map-btn.navy {
    background-color: #3b486c;
    color: #ffffff;
}
.setting-map-btn.red {
    background-color: #d9534f;
    color: #fff;
}

/* 환경설정-기기관리-장비목록수정  setting 스타일 */
.setting-map-wrap {
    padding: 20px;
    font-family: sans-serif;
}
.setting-map-box {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.setting-map-panel {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: 500px;
}
.panel-title {
    font-weight: bold;
    margin-bottom: 10px;
}
.tree-area {
    flex: 1;
    border: 1px solid #eee;
    padding: 10px;
    overflow-y: auto;
    background: #f9f9f9;
}
.setting-btn-group {
    margin-top: 10px;
    display: flex;
    gap: 5px;
}
.setting-map-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.setting-map-arrow-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #aaa;
    border-radius: 50%;
    background: white;
    font-size: 11px;
    cursor: pointer;
    display: flex; /* 버튼 내부 텍스트를 Flex 아이템으로 만들어 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center;   /* 세로 중앙 정렬 */
    white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 강제 */
    overflow: hidden;    /* 텍스트가 버튼 영역을 넘어갈 경우 숨김 처리 */
    text-overflow: clip; /* 넘치는 텍스트를 클립 처리 (말줄임표 등 없음) */
}
.setting-map-arrow-btn:hover {
  background-color: #536373;
  color: white;
}
.btn-arrow {
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    width: 40px;
    height: 40px;
}
.setting-map-footer {
    text-align: center;
    margin-top: 20px;
}
.line-light-btn {
    border: 1px solid #ddd;
}
.selected {
    background-color: #d1ecf1 !important;
}
.setting-toggle-group {
    cursor: pointer;
    font-weight: bold;
}


/* insert content 스타일 */
.input-label-1 {
    width:60px;
}
.input-label-2 {
    width:73px;
}
.input-text-1 {
    width:150px;
}
.input-text-2 {
    width:70px;
}
.input-text-3 {
    width:600px;
}
.input-btn-1 {
    width:90px;
}








/* Handsontable 스타일 */
#camera_table_data .handsontable th ,
#table_data .handsontable th {
    background-color: #fff;
    height:30px;
}
#camera_table_data .htCore thead th,
#table_data .htCore thead th{    
    border-bottom: 2.0px solid #00127a; 
    font-weight: bold;
}
/* 호버 배경색 */
.handsontable .htCore td:hover {
    background-color: #e9ecef; 
}
.handsontable .htCore td {
    padding: 0.5rem;
    height: auto; /* 셀 높이 자동 조정 */
    background-color: #fff; /* 셀 배경색 */
    /* line-height: 1.2;  */
    text-align: center; /* 텍스트 가운데 정렬 */
    vertical-align: middle; /* 수직 가운데 정렬 */
}
.handsontable .htCore th {
    vertical-align: middle; /* 수직 가운데 정렬 */
}

/* handson 테이블 클릭 시 (handson 버전에 따라 차이 있음)*/
.highlight {
    /* font-weight: bold;  */
    color: #ef476f; /* 강조 색상 */
}
/* 연한 녹색 배경색 */
/* .highlight-row, .highlight-row td {
    background-color: #dff0d8 !important; 
} */
/* nav_alarrm */
#nav-alarm-data tbody tr {
  cursor: pointer;
}
.nav-alarm-menu {
  width: 720px;
}
#nav-alarm-table {
  overflow-y: auto; /* 가로 스크롤 활성화 */
  max-height: 51vh;
}

/* 모바일 환경 스타일 (미디어 쿼리 사용) */
@media (max-width: 767px) { /* 예시: 767px 이하를 모바일로 간주 */
  .nav-alarm-menu {
    width: 300px;
    max-height: 720px;
    overflow-x: auto; /* 가로 스크롤 활성화 */
  }
}


/* zoneData */
.btn-section{
    margin: 5%;
}
.data-zone-chartContainer {
    display: flex;
    flex-wrap: nowrap;
    gap: 10%;
    justify-content: center; /* 차트를 가운데 정렬 */
}
.data-zone-chartWrapper {
    flex: 1 1 30%;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}
.data-zone-title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
.data-zone-canvas {
    max-width: 100%;  
}
.data-zone-btn-section {
    margin: 1%; /* 카드 크기 조정 */
    display: flex;
    justify-content: space-between; /* 버튼들을 양쪽으로 정렬 */
    align-items: center; /* 버튼들을 세로로 가운데 정렬 */
}
.data-zone-btn {
    margin-left: auto; /* 카드 크기 조정 */
    background-color: gray;
    border: none;
}
.localCard{    
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 1%;
}
.localCard {    
    overflow-x: auto; /* 가로 스크롤 활성화 */
    white-space: nowrap; /* 테이블 내용이 줄바꿈되지 않도록 설정 */
}
.localCard h5{    
    margin-bottom: 0.5%;
}
.localCard div p{    
    margin-bottom: 0.3%;
}
.table-data-zone{    
    text-align: center;
    margin-bottom: 0;
    border: 0;
}
.table-data-zone thead{    
    font-weight: bold;
    border-color: #212529;
}
.table-data-zone thead tr th{    
    background-color: #f2f2f2;
    padding: 8px;
}
.zone-data-buttons {    
    margin-bottom: 1.1%;
}
#zone-data-table thead{    
    background-color: #f2f2f2;
}
#zone-data-table tbody{    
    vertical-align: middle; 
}
#modal-container .modal-content .summary .row{    
    margin-bottom: 1%;
}
.modal-table-container {    
    overflow-x: auto; /* 가로 스크롤 활성화 */
    white-space: nowrap; /* 테이블 내용이 줄바꿈되지 않도록 설정 */
}

/* management/map */
/* 기존 라디오 버튼 스타일을 체크박스에도 적용 */
.poi-modal-body .epz-options input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%; /* 원형 모양 유지 */
    background-color: #fff;
    cursor: pointer;
}
/* 체크된 상태의 스타일 (기존과 동일) */
.poi-modal-body .epz-options input[type="checkbox"]:checked {
    background-color: #007bff; /* 파란색 배경 */
    border-color: #fff;
}
/* 체크박스와 텍스트를 감싸는 div에 Flexbox 적용 */
.poi-modal-body .user-define-label {
    display: flex;
    align-items: center;
    gap: 5px; /* 체크박스와 텍스트 사이 간격 */
    color: #ccc;
    font-size: 0.9rem;
}
/* 체크박스 스타일 (기존 라디오 버튼 스타일 재활용) */
.poi-modal-body .user-define-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%; /* 사각형 모양 */
    background-color: transparent;
    cursor: pointer;
}
/* 체크박스가 선택된 상태의 스타일 */
.poi-modal-body .user-define-label input[type="checkbox"]:checked {
    background-color: #007bff;
    border-color: #fff;
}
.poi-modal {
    background-color: #22222A;
    color: #fff;
    border: 1px solid #22222A;
    width: 700px;
    flex-shrink: 0;
}
.fixed-poi-modal {
    background-color: #22222A;
    color: #fff;
    border: 1px solid #22222A;
    width: 820px;
    flex-shrink: 0;
}
.poi-modal-header {
    background-color: #fff;
    border-radius: 0px;
    color: #fff;
    margin: 18px 10px;
    width: 681px;
    flex-shrink: 0;
    padding: 8px 17px !important;
}
.fixed-poi-modal-header {
    background-color: #fff;
    border-radius: 0px;
    color: #fff;
    margin: 18px 10px;
    width: 800px;
    flex-shrink: 0;
    padding: 8px 17px !important;
}
.poi-modal-title {
    font-size: 1.2rem;
    font-weight: bold;
}
.poi-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.poi-modal-body {
    padding: 20px;
}
.fixed_modal_body {
    padding: 10px 50px;
}
.poi-modal-body .input-group-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}
.poi-modal-body .input-group-row label {
    color: #FFF;
    text-align: right;
    font-family: "NanumSquare Neo";
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin: 0px;
    flex-shrink: 0;        /* 공간이 부족해도 레이블 너비가 줄어들지 않도록 함 */
    width: 90px;           /* 레이블의 고정 너비 설정 *
    text-align: right;     /* 텍스트를 오른쪽으로 정렬 */
}
.poi-modal-body .input-group-row input[type="text"] {
    height: 30px;
    flex: 1;
    background-color: #fff;
    border: 1px solid #555;
    padding: 6px 10px;
    color: #22222A;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.poi-modal-body .input-group-row input[type="text"][disabled] {
    color: #4D4D4D;
}
.poi-modal-body .icon-cancel-btn {
    width: 23px; /* 이미지 크기에 맞춰 너비 조정 (예시) */
    height: 23px; /* 이미지 크기에 맞춰 높이 조정 (예시) */
    background-image: url('../../static/img/mon_icon_cancel.svg');
    background-size: cover; /* 이미지가 버튼 영역을 꽉 채우도록 */
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: center; /* 이미지를 중앙에 배치 */
    border: 1px solid #666; /* 기존 버튼의 테두리 유지 */
    background-color: transparent; /* 배경색을 투명하게 설정 */
    padding: 0; /* 내부 패딩 제거 */
    display: flex; /* 내부 i 태그가 있다면 정렬을 위해 */
    align-items: center; /* 내부 i 태그가 있다면 세로 중앙 정렬 */
    justify-content: center; /* 내부 i 태그가 있다면 가로 중앙 정렬 */
}
.poi-modal-body .input-group-row .icon-select-btn {
    background-color: #fff;
    border: 1px solid #666;
    width: 84px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mon_font_1 {
    color: #22222A;
    font-family: "NanumSquare Neo";
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_font_2 {
    color: #22222A;
    font-family: "NanumSquare Neo";
    font-size: 21px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_font_3 {
    color: #fff;
    font-family: "NanumSquare Neo";
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_font_3s {
    color: #fff;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_font_4 {
    color: #22222A;
    font-family: "NanumSquare Neo";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_font_5 {
    color: #22222A;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_font_6 {
    color: #CBCBCB;
    font-family: "NanumSquare Neo";
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_font_7 {
    color: #fff;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_font_white_20 {
    color: #fff;
    font-family: "NanumSquare Neo";
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_font_white_22 {
    color: #fff;
    font-family: "NanumSquare Neo";
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_modal_form_1 {
    color: #4D4D4D;
    font-family: "NanumSquare Neo";
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    height: 30px;
    border-radius: 0px;
}
.mon_modal_form_2 {
    color: #4D4D4D;
    font-family: "NanumSquare Neo";
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    height: 30px;
    border-radius: 0px;
    width: 71%;
}
.dose_title_label {
    justify-content: start !important;
    white-space: nowrap;
    padding: 10px 15px;
    border-radius: 5px;
    background: #333647;
}
.probe_val_table {
    margin: 0px -6px;
}
.probe_val_table_spacing {
    border-collapse: separate;
    border-spacing: 6px;
}
.probe_val_table th {
    background: #333647;
    color: #FFF;
    font-family: "NanumSquare Neo OTF";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.probe_val_table td {
    background: #ECECEC;
    color: #22222A;
    font-family: "NanumSquare Neo OTF";
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.probe_val_table th, .probe_val_table td {
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}
.probe_txt_table {
    margin: 0px -6px;
}
.probe_txt_table_spacing {
    border-collapse: separate;
    border-spacing: 6px;
}
.probe_txt_table th {
    background: #333647;
    color: #FFF;
    font-family: "NanumSquare Neo OTF";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}
.probe_txt_table td {
    background: #ECECEC;
    color: #22222A;
    font-family: "NanumSquare Neo OTF";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    border-radius: 5px;
    padding: 15px;
    text-align: start;
}
.probe_poi_table {
    margin: 0px;
}
.probe_poi_table_spacing {
    border-collapse: separate;
    border-spacing: 6px;
}
.probe_poi_table th {
    background: #333647;
    color: #FFF;
    font-family: "NanumSquare Neo OTF";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}
.probe_poi_table td {
    background: #ECECEC;
    color: #22222A;
    font-family: "NanumSquare Neo OTF";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    border-radius: 5px;
    padding: 5px;
    text-align: start;
}
.mon_input_group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}
.mon_input_group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 2%;
    width: 27%;
    color: #FFF;
    font-family: "NanumSquare Neo";
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    height: 30px;
    align-items: center;
    display: flex;
    border-radius: 0px;
    background-color: #597EFF;
    border: none;
    justify-content: center;
}
.input_unit_wrapper {
    position: relative;
}

.input_unit_wrapper .mon_modal_form_1 {
    padding-right: 3.5rem;    /* 단위가 들어갈 공간 확보 */
}

.input_unit {
    position: absolute;
    top: 50%;
    right: 1rem;              /* 입력창 오른쪽 여백 */
    transform: translateY(-50%);
    pointer-events: none;     /* 단위 텍스트 클릭 시 입력창에 포커스가 가도록 */
    color: #22222A;
    text-align: right;
    font-family: "NanumSquare Neo";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.poi-modal-body .input-group-row .unit {
    color: #fff;
    font-size: 0.9rem;
}
.poi-modal-body .input-group-row .effective_input {
    max-width: 155px;
}
.poi-modal-body .coords-row .coords-group {
    display: flex;
    flex: 1;
    justify-content: space-between;
}
.poi-modal-body .coords-group .coord-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.poi-modal-body .coords-group .coord-item input {
    width: 50px;
}
.poi-modal-body .poi-map-container {
    background-color: #444;
    border: 1px solid #555;
    height: 350px; /* 지도의 높이를 명시적으로 설정 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 1rem;
    overflow: hidden;
    margin: 30px 20px;
}
.poi-modal-body .poi-map-image {
    /* 실제 지도 이미지가 들어갈 영역 */
}
.poi-modal-footer {
    margin: 0 auto;
}
.mon_checkbox_wrapper {
    display: flex; /* 라벨과 체크박스를 가로로 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    color: #fff;
    cursor: pointer; /* 마우스 오버 시 포인터 변경 */
    width: fit-content; /* 내용에 맞춰 너비 조절 */
    position: relative;
}
.mon_checkbox_wrapper input[type="checkbox"] {
    display: none; /* 실제 체크박스를 숨김 */
}
.mon_checkbox_label {
    position: relative; /* ::before 가상 요소의 기준점 */
    padding-left: 25px; /* 체크박스 아이콘 공간 확보 */
    font-size: 16px;
    font-weight: bold;
    user-select: none; /* 텍스트 드래그 방지 */
    height: 30px;
    align-items: center;
    display: flex;
    margin-left: 0px;
    cursor: pointer; /* 마우스 오버 시 포인터 변경 */
}
.mon_checkbox_label::before {
    content: '';
    position: absolute; 
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 세로 중앙 정렬 */
    width: 17px; /* 체크박스 이미지 크기 */
    height: 17px; /* 체크박스 이미지 크기 */
    border: 2px solid #fff; /* 체크박스 테두리 */
    background-color: #fff; /* 체크박스 기본 배경색 (흰색) */
    border-radius: 3px; /* 모서리 살짝 둥글게 */
    box-sizing: border-box; /* 패딩, 보더 포함 크기 계산 */
}   
/* 체크박스가 선택되었을 때 ::before (체크 아이콘) */
.mon_checkbox_wrapper input[type="checkbox"]:checked + .mon_checkbox_label::before {
    background-color: #fff; /* 체크 시 배경색 (파란색) */
    border-color: #fff; /* 체크 시 테두리색 */
    content: '✔'; /* 체크 표시 */
    color: #597EFF; /* 체크 표시 색상 */
    font-size: 14px; /* 체크 표시 크기 */
    line-height: 15px; /* 체크 표시 세로 정렬 */ 
    text-align: center; /* 체크 표시 가로 정렬 */
}   
.mon_visibility {
    visibility: hidden;
}
.mon_add_btn {
    width: 84px;
    height: 30px;
    flex-shrink: 0;
    font-family: "NanumSquare Neo";
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    border-radius: 17.5px;
    display: flex;
    align-items: center;   /* 세로 중앙 */
    justify-content: center; /* 가로 중앙 */
}
.mon_btn_1 {
    width: 113px;
    height: 36px;
    flex-shrink: 0;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    border-radius: 17.5px;
    display: flex;
    align-items: center;   /* 세로 중앙 */
    justify-content: center; /* 가로 중앙 */
}
.mon_btn_hover:hover {
    color: #22222A;
}
.mon_h_1 {
    height: 36px;
}
.mon_h_42 {
    height: 42px;
}
.mon_btn_2 {
    width: 84px;
    height: 36px;
    flex-shrink: 0;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    border-radius: 17.5px;
    display: flex;
    align-items: center;   /* 세로 중앙 */
    justify-content: center; /* 가로 중앙 */
}
.mon_btn_3 {
    width: 84px;
    height: 36px;
    flex-shrink: 0;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    display: flex;
    align-items: center;   /* 세로 중앙 */
    justify-content: center; /* 가로 중앙 */
    border-radius: 17.5px;
    background-color: #22222A;
}
.mon_nav_tab0 {
    align-items: center;
    display: flex;
    padding-top: 0px;
    color: #000 !important;
    text-align: right !important;
    /* font-family: "NanumSquare Neo OTF" !important; */
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: normal !important;
}
.mon_col_header {
    background-color: #22222A !important; /* 원하는 색상 코드로 변경 */
    color: #FFF !important;
    text-align: center;
    /* font-family: "NanumSquare Neo"; */
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_row_header {
    background-color: #22222A !important; /* 원하는 색상 코드로 변경 */
    color: #FFF !important;
    text-align: center;
    font-family: "NanumSquare Neo";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_td {
    background-color: #ECECEC !important; /* 원하는 색상 코드로 변경 */
    color: #22222A !important;
    padding: 0 !important;
    height: 30px !important;
    text-align: center;
    font-family: "NanumSquare Neo";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_card_header {
    padding: 0;
    margin: 0;
    padding-top: 16px;
    border-bottom: none;
}
.mon_device_name {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #22222A;
    margin: 0px 16px;
    color: #FFF;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_account_name {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #22222A;
    margin: 0px 16px;
    color: #FFF;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_profile_item {
    display: flex;
    background-color: #22222A;
    border-radius: 20px;
    width: 125px;
    height: 42px;
    margin-right: 2%;
    color: #FFF;
    text-align: center;
    font-family: "NanumSquare Neo";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
/* mon_detail_table 테이블 레이아웃 설정 */
.mon_detail_table {
    table-layout: fixed;
    width: 100%;
}

/* 첫 번째 td (라벨) - 30% */
.mon_detail_table td:first-child {
    width: 30%;
    padding-right: 10px;
}

/* 두 번째 td (값) - 70% */
.mon_detail_table td:last-child {
    width: 70%;
}

/* td_1 스타일 */
.mon_detail_table td .td_1 {
    background-color: #22222A;
    border-radius: 20px;
    height: 28px;
    color: #FFF;
    text-align: center;
    font-family: "NanumSquare Neo";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 120px;
    max-width: 180px;
}

/* mon_val_1 스타일 */
.mon_detail_table td .mon_val_1 {
    width: 100%;
    padding-left: 10px;
}

/* mon_detail_table 내부의 mon_w_234 클래스 오버라이드 */
.mon_detail_table td.mon_w_234 {
    width: 70% !important;
}
.mon_badge_light_blue {
    color: #315FFF;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_badge_green {
    color: #38E33D;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_badge_red {
    color: #FF5161;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_badge_dark_blue {
    color: #6155F5;
    font-family: "NanumSquare Neo OTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.mon_center {
    display: flex;
    justify-content: center; /* 버튼을 가로축 중앙으로 정렬 */
    align-items: center; /* 버튼을 세로축 중앙으로 정렬 */
}
.mon_border_radius {
    border-radius: 20px;
}
.mon_end_set {
    display: flex;
    justify-content: end; /* 버튼을 가로축 중앙으로 정렬 */
    gap: 6px;
}
.local_input_pill {
    color: #000;

    display: inline-flex;
    align-items: center;
    overflow: hidden;
    font-family: "NanumSquare Neo OTF";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    gap: 5px;
}
.local_input_pill .label {
    display: flex;
    align-items: center;

    background: #22222A; /* 흰색 덮어쓰기 */
    color: #fff;
    border: 3px solid #fff;

    width: 121px;
    height: 25px;
    margin-right: -65px;
    border-radius: 17.5px;
    padding: 0px 14px 0px 18px;
    z-index: 1;
}
.local_input_pill input[type="input"] {
    color: #22222A;
    background: #fff;
    border: 3px solid #fff;

    width: 105px;
    height: 25px;
    position: relative;
    z-index: 2;
    text-align: end;
    padding-right: 7px;

    border-radius: 17.5px;
    font-family: "NanumSquare Neo";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.poi-modal-body .epz-row {
    margin-bottom: 20px;
}
.poi-modal-body .epz-row .epz-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: space-between;
    margin: 0px 25px 0px 3px;
}
.poi-modal-body .radio-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.poi-modal-body .epz-options input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
}
.poi-modal-body .epz-options input[type="radio"]:checked {
    background-color: #007bff; /* 파란색 배경 */
    border-color: #fff;
}
.poi-modal-body .epz-options .radio-item label {
    flex-grow: 0;
    width: auto;
    font-size: 0.9rem;
    color: #ccc;
    text-align: left;
}
/* 라디오 버튼 기본 스타일 제거 */
.mon_input_radio {
    appearance: none;             /* 브라우저 기본 UI 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;                  /* 바깥 원 크기 */
    height: 16px;
    border: 0px solid #ccc;       /* 회색 테두리 */
    border-radius: 50%;           /* 원형 */
    background-color: #fff;       /* 흰색 배경 */
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;            /* 라벨과 간격 */
    margin-top: 6px;
    transition: border-color 0.2s ease;
}
/* hover 시 테두리 강조 */
.mon_input_radio:hover {
    border-color: #4a6cf7;
}
/* 선택되었을 때 안쪽 파란 점 */
.mon_input_radio:checked {
    background-color: #fff;
    border-color: #405189;
}
.mon_input_radio:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;                  /* 안쪽 점 크기 */
    height: 10px;
    border-radius: 50%;
    background-color: #4a6cf7;    /* 파란색 */
}
/* 체크박스 큰 스타일 (라디오와 동일한 크기) */
.mon_input_checkbox {
    appearance: none;             /* 브라우저 기본 UI 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;                  /* 크기 설정 */
    height: 16px;
    border: 2px solid #ccc;       /* 회색 테두리 */
    border-radius: 3px;           /* 약간 둥근 모서리 */
    background-color: #fff;       /* 흰색 배경 */
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;            /* 라벨과 간격 */
    margin-top: 6px;
    transition: all 0.2s ease;
}
/* hover 시 테두리 강조 */
.mon_input_checkbox:hover {
    border-color: #4a6cf7;
}
/* 선택되었을 때 체크 표시 */
.mon_input_checkbox:checked {
    background-color: #405189;
    border-color: #405189;
}
.mon_input_checkbox:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}
/* large-label 스타일 추가 */
.large-label {
    font-size: 14px;
    font-weight: 400;
    margin-right: 10px;
    cursor: pointer;
}
.poi-modal-body .user-define-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 5px;
}
.poi-modal-body .user-define-row .define-group {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: end;
    padding: 0px 68px;
    width: 100%;
}
.poi-modal-body .user-define-row .define-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.poi-modal-body .user-define-row .define-item span {
    color: #FFF;
    font-family: "NanumSquare Neo";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.poi-modal-body .user-define-row .form-select {
    background-color: #444;
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
    width: 80px;
    padding: 6px 10px;
    appearance: none; /* 기본 화살표 제거 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
.poi-modal-body .user-input-item input[type="number"] {
    width: 90px;
    border-radius: 20px;
    height: 24px !important;
    font-size: 12px !important;
}
.poi-modal-body .example-text {
    margin-left: auto;
    margin-right: 25px;
    color: #FFF;
    font-family: "NanumSquare Neo";
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

/* doseComparison */
.comparison-card-x{    
    border: 1px solid #ccc;
    padding: 0px;
    margin-top: 1%;
    padding-bottom: 0px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.comparison-card-l{    
    border: 1px solid #ccc;
    padding: 0px;
    margin-top: 1%;
    margin-left: 1%;
    padding-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 99%;
}
.comparison-card-r{    
    border: 1px solid #ccc;
    padding: 0px;
    margin-top: 1%;
    margin-right: 1%;
    padding-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 99%;
}
@media screen and (max-width: 768px) {
    .comparison-card-l{
        width: 100%;
        margin-left: 0%;
    }
    .comparison-card-r{
        width: 100%;
        margin-right: 0%;
        /*
        margin-top: 1%;
        margin-left: 2%;
        */
    }
    .btn-25p {
      width: 25%;
    }
}
.button-container-1 {
    display: flex;
    justify-content: center; /* 버튼을 가로축 중앙으로 정렬 */
    align-items: center; /* 버튼을 세로축 중앙으로 정렬 */
    gap: 5%; /* 버튼 사이 간격 */           
    margin-bottom: 10px; /* 버튼과 제목(h5) 사이 간격 */
    background: pink;                           
    border-radius: 8px 8px 0 0;
}
.button-container-2 {
    display: flex;
    justify-content: center; /* 버튼을 가로축 중앙으로 정렬 */
    align-items: center; /* 버튼을 세로축 중앙으로 정렬 */
    gap: 5%; /* 버튼 사이 간격 */
    margin-bottom: 10px; /* 버튼과 제목(h5) 사이 간격 */
    background: #ccc;
    border-radius: 8px 8px 0 0;
}
.refresh-button {
  background: none; /* 배경색 제거 */
  border: none; /* 테두리 제거 */
  color: gray; /* 아이콘 색상 */
  font-size: 208%; /* 아이콘 크기 */
  cursor: pointer; /* 클릭 가능한 커서 */
  padding: 0; /* 내부 여백 제거 */
  margin: 0 5px; /* 버튼 간격 */
}
.refresh-button:hover {
  color: #405189;
}

/* 클릭(active) 상태 스타일 제거 */
.refresh-button:active {
  background-color: transparent; /* 클릭 시 배경 유지 */
  color: #808080; /* 텍스트 색상 유지 */
}
/* 포커스(focus) 상태 스타일 제거 */
.refresh-button:focus {
  outline: none; /* 기본 포커스 테두리 제거 */
  box-shadow: none; /* 추가적인 포커스 스타일 제거 */
}
.plus-button {
    font-size: 225%;
    background: none; /* 배경색 제거 */
    border: none; /* 테두리 제거 */
    color: gray; /* 아이콘 색상 */
    cursor: pointer; /* 클릭 가능한 커서 */
    padding: 0; /* 내부 여백 제거 */
    margin: 0 5px; /* 버튼 간격 */
}
.plus-button:hover {
    color: #405189;
} 
.plus-button:active {
  background-color: transparent; /* 클릭 시 배경 유지 */
  color: #808080; /* 텍스트 색상 유지 */
}



.comparison-header {
    display: flex;
    justify-content: space-between;
}
.comparison-content {               
    /*
    text-align: center;             
    */
    display: flex;
    flex-direction: column; /* 세로로 정렬 */
    align-items: center;
    margin: 1%;
    gap: 5px; /* 각 줄 간격 */`
}  
.comparison-card-row {
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    margin: 1%;
    width: 100%; /* row 전체 넓이 사용 */
    gap: 10px; /* 라벨과 값 간 간격 */
}

.comparison-label {
    text-align: left; /* 왼쪽 정렬 */
    font-size: 16px; /* 폰트 크기 */
    margin-left: 2%; 
    /*width: 36.8%;  라벨 영역 크기 조정 */
}

.comparison-value {
    flex: 1; /* 고정 크기 */
    font-size: 16px; /* 폰트 크기 */
    text-align: center; 
    margin-right: 7%
}
.comparison-data {
    flex: 1; /* 고정 크기 */
    font-size: 16px; /* 폰트 크기 */
    text-align: center; 
}
@media screen and (max-width: 768px) {
    .comparison-label {
        /*width: 28%;  모바일에서는 라벨 영역 크기 축소 
        margin-left: 5%; */
    }
}

.comparison-chart {
  margin-top: 1%;
}
.comparison-row {
  justify-content: center;
  display: flex;
  /*
  margin: 10px 0;
  */
  width: 100%; /* row 전체 넓이 사용 */
}        
.comparison-bar-container {
  display: flex;
  width: 90%;
}
.comparison-progress-label {                            
  width: 6%;                                            
  text-align: center;                               
  font-weight: bold;                                
}   
.progress-bar {
  width: 47%;
  height: 20px;
  background-color: #F4F4F4;
  font-weight: 600;
  font-size: .8rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border: 2px solid gray;
  position: relative;
}
.progress-bar .comparison-progress-left {
  width: 10%;
  height: 20px;
  padding: 0;
  text-align: center;
  background-color: #ECA9C9;
  color: #111;
  border-radius: 8px;

  position: absolute;
  right: 0;
}
.progress-bar .comparison-progress-right {
  width: 10%;
  height: 20px;
  padding: 0;
  text-align: center;
  background-color: lightgray;
  color: #111;
  border-radius: 8px;
  position: absolute;
}
.comparison-card-item {    
    border: 1px solid #ccc;
    padding: 0px;
    padding-top: 0.3%;
    padding-bottom: 0.3%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /*
    margin-left: 0.5%; 
    margin-right: 0.5%; 
    */
}
.data-modal-label {
    font-size: medium;
}

.data-modal-search-button {
    background-color: #405189; /* 기본 배경색 */
    color: white; /* 기본 글씨 색상 */
    font-weight: bold;
}
.data-modal-search-button:hover {
    background-color: #364574;
    color: white;
    font-weight: bold;
}
.data-modal-search-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.data-modal-add-button {
    background-color: #ffa500;
    color: white;
    font-weight: bold;
}
.data-modal-add-button:hover {
    background-color: #ff8c00;
    color: white;
    font-weight: bold;
}
.data-modal-add-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem #ffb84d;
}

.ri-add-circle-line:hover {
    color: white;
}


/* card */
.card-body-index{
    padding: 1.5rem;
}
.card-body-index.h180 {
    height: 180px;
}
.card-body-index.h200 {
    height: 200px;
}
.card-body-index.h250 {
    height: 270px;
}
.card-body-index.h300 {
    height: 300px;
}
.card-body-index.h410 {
    height: 420px;
}
.card-body-index.h400 {
    height: 470px;
}
.card-body-index.h500 {
    height: 500px;
}
.card-body-index.h600 {
    height: 630px;
}
.card-body-index.h760 {
    height: 757px;
}
.card-body-index.h850 {
    height: 850px;
}

/* handson table 조회 결과 */
.result_cnt {
    font-size: 16px;
    margin: 5px 0 7px 9px;
}

.text-info {
    margin: 10px 0 3px 0; /* 텍스트와 Handsontable 테이블 사이의 간격 조절 */
}

@media (max-width: 480px) { /* 더 작은 모바일 화면 (예: 480px 이하) */
    /* 비밀번호 수정 버튼 비율 조정*/
    #btnCheckPassword {
        width: 45% !important;  
    }

    /*출입 이력 여백 줄이기 */
    #acclog_div1 {
        padding: 0 !important;
    }
    #acclog_div2 {
        padding: 0 !important;
    }
    #acclog_div3 {
        margin: 0 !important;
    }    
}

/* START plan */
#plan_table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size:90%   
}
#plan_table th {
    color: black;
    padding: 5px;
    border: 1px solid #ffd54f;
}
#plan_table thead {
    background-color: #fff59d;
    border: 1px solid #ffd54f;
    text-align: center;
    font-size:90%   
}

#plan_table thead tr {
  border-bottom: 1px solid #ffd54f;
}

#plan_table thead tr:last-child {
  border-bottom: 1px solid #ffd54f;
}
#plan_table tbody tr {
  border-bottom: 1px solid #ffd54f;
}
#plan_table tbody td {
    padding: 5px;
  border: 1px solid #ffd54f;
}
/*
.select2-container--default .select2-results__option {
    background-color: white;
    color: black;          
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #e6f7ff;
    color: black;
}
*/
/* END plan */


/* 공지사항 등록 editor*/
#editor{
    height: 300px;
}

/* dashboard */
#edit_modal .tab-pane { min-height: 574px; }

.notic-content .table td.notice-date,
.notic-content .table td.local-date
{
    width: 30%; /* width 속성 적용됨 */
    text-align: right; /* justify-content 대신 text-align 사용 */
    font-size: 0.885rem;
    color: #7c8798;
    font-weight: 400; /* 가장 마지막에 정의된 값이 적용됨 */    
    white-space: nowrap; /* 줄바꿈 x */    
}

#notice-data .subject {
    white-space: nowrap;          /* 텍스트가 한 줄에 표시되도록 설정 */
    overflow: hidden;             /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis;      /* 잘린 텍스트에 '...' 표시 */
    max-width: 150px;             /* 최대 너비 설정 (반응형으로 원하는 너비 조절) */
}

#local-data .subject {
    white-space: nowrap;          /* 텍스트가 한 줄에 표시되도록 설정 */
    overflow: hidden;             /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis;      /* 잘린 텍스트에 '...' 표시 */
    max-width: 150px;             /* 최대 너비 설정 (반응형으로 원하는 너비 조절) */
}

#local-data .local {
    text-align: right;
}

.none-date {
    text-align: center;
}

@media screen and (max-width: 768px) { /* 모바일 등 작은 화면에서의 반응형 */
    #local-data .subject,
    #notice-data .subject {
        max-width: 100px;        /* 작은 화면에서 더 좁은 너비 */
    }
}

/* select2 trend */
/*
.select2-container .select2-selection--multiple {
	max-height: 10px !important;
}
.select2-search__field {
    width:70% !important;
}
*/
.data-modal-date {
  margin-right: 0%;
}
#from_to_date {
  font-size     : 1.1rem;
}
#view-detail .card-body td { padding-top:0.5rem; padding-bottom:0.5rem; }
#view-detail .card-body { min-height: 325px; }


.dropzone {
    height: 100px !important;
    border: 1px solid rgba(0, 0, 0, .8);
    border-radius: 5px;
    padding: 20px 20px;
}


/* 이미지 업로드  */
.avatar-xl {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.small-unit {
    font-size: 10px; /* 단위 크기 조정 */
    vertical-align: top; /* 단위 위치 조정 (상단 정렬) */
    opacity: 0.8; /* 단위를 약간 투명하게 */
}


/* plan 용 모바일 웹 뷰 */
/* 기본 스타일 (모바일 기준) */
#table_data .plan-title-badge {
    width: 10rem;
}

#table_data .plan-status-badge {
    width: 3rem;
}

#table_data .local-names {
    width: 10rem;
    color: grey !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#table_data .avatar-group img {
    width: 24px;
    height: 24px;
}

@media (min-width: 768px) {
    /* 웹뷰 스타일 */
    #table_data .plan-title-badge {
        width: 15rem; /* 더 넓은 배지 */
        font-size: 1.2rem;
    }

    #table_data .local-names {
        width: 15rem; /* 웹뷰에서 더 넓은 텍스트 영역 */
        font-size: 0.9rem;
    }

    #table_data .avatar-group img {
        width: 32px; /* 웹뷰에서 더 큰 아바타 */
        height: 32px;
    }
}

@media (max-width: 768px) {
    #divList .nav-tabs .nav-link i{
        writing-mode: vertical-rl;
        transform: rotate(0deg);
    }
}

/* Map control styles for live_monitoring */
.map-control-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: transparent;
    padding: 6px;
}

.map-btn {
    background-color: white;
    border: none;
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: background-color 0.2s;
}

.map-btn:hover {
    background-color: #eee;
}

.map-btn.active {
    background-color: #2e3a59;
    color: white;
    font-weight: bold;
}

.mon_map_controls {
    position: absolute;
    top: 10px;
    right: 60px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mon_map_row_group {
    display: flex;
    gap: 6px;
}

/* Modal form styles for fixedMonitoring */
.mon_modal_label {
    width: 35%;
    height: 31px;
    padding-right: 10px;
}

.mon_modal_input {
    width: 65%;
    border-radius: 0px;
}

.mon_modal_dose_row {
    margin-top: 15px;
}

.mon_modal_dose_row_bottom {
    margin-top: 8px;
}

.mon_input_with_unit {
    position: relative;
    display: flex;
    align-items: center;
    width: 65%;
}

.mon_input_with_unit .form-control {
    width: 100%;
    padding-right: 50px;
}

.mon_input_unit {
    position: absolute;
    right: 12px;
    color: #6c757d;
    font-size: 14px;
    pointer-events: none;
}

.mon_input_with_icon {
    position: relative;
    display: flex;
    align-items: center;
    width: 65%;
}

.mon_input_with_icon .form-control {
    width: 100%;
    /*
    padding-right: 35px;
    */
}

.mon_map_icon {
    position: absolute;
    right: -35px;
    width: 20px;
    height: 30px;
    background-image: url('../../static/img/mon_icon_mark.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Spectrum navigation styles */
.mon_spectrum_nav_row {
    margin-top: 10px;
    margin-bottom: 15px;
}

.mon_spectrum_nav_btn {
    background: transparent;
    border: none;
    color: #fff;
    padding: 5px;
    cursor: pointer;
    transition: opacity 0.2s;
    font-size: 20px;
    font-weight: bold;
}

.mon_spectrum_nav_btn:hover {
    opacity: 0.7;
}

.mon_spectrum_chart_container {
    position: relative;
    height: 215px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mon_spectrum_chart_wrapper {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 4px;
    position: relative;
    margin: 0 10px;
}

.mon_spectrum_large_nav {
    background: transparent;
    border: none;
    color: #fff;
    width: 40px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

.mon_spectrum_large_nav:hover {
    opacity: 0.7;
}

.mon_spectrum_loading {
    color: #6c757d;
    font-size: 16px;
}

.mon_image_placeholder {
    color: #6c757d;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Dose Comparison layout */
.mon_dose_comparison_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.mon_dose_comparison_wrapper .dose_bordered_container {
    flex: 1;
    min-width: 0;
}

@media (max-width: 991px) {
    .mon_dose_comparison_wrapper {
        flex-direction: column;
    }

    .mon_dose_comparison_wrapper .dose_bordered_container {
        width: 100%;
    }
}


.btn-container {
    display: flex; /* 플렉스 박스 활성화 */
    justify-content: center; /* 버튼들을 중앙 정렬 */
    align-items: center; /* 버튼들을 세로 방향으로 정렬 */
    flex-wrap: nowrap; /* 버튼들이 한 줄에 유지되도록 설정 */
    gap: 8px; /* 버튼 사이의 간격 */
}

/* Date Range Picker 스타일 */
.date-range-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 15px;
}

.date-range-container .radiation-search-input.date {
    width: 220px; /* datetime-local 입력을 위해 너비 증가 - 초까지 완전히 표시 */
}

/* 분기별/월별 선택 스타일 */
.date-range-container select {
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
    min-width: 100px;
    cursor: pointer;
    color: #333;
}

.date-range-container select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 빠른 선택 버튼들 */
.date-quick-select {
    display: flex;
    gap: 5px;
    margin-right: 15px;
}

.date-quick-btn {
    padding: 4px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    font-family: "NanumSquare Neo", sans-serif;
}

.date-quick-btn:hover {
    background: #f5f5f5;
    border-color: #999;
    color: #333;
}

.date-quick-btn.active {
    background: #597EFF;
    color: white;
    border-color: #597EFF;
}

/* 반응형 스타일 */
@media (max-width: 1200px) {
    .date-range-container {
        margin-bottom: 10px;
    }
    
    .date-quick-select {
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .radiation-search-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .date-range-container,
    .date-quick-select {
        width: 100%;
        margin-right: 0;
    }

    .date-range-container .radiation-search-input.date {
        width: 180px; /* 모바일에서도 datetime-local 초까지 표시하기 위해 너비 증가 */
    }

    /* 상세조건 영역 반응형 */
    .radiation-condition {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .radiation-condition .radiation-search-input.condition {
        flex: 1;
        min-width: 80px;
    }

    /* 조회 버튼 반응형 */
    .radiation-search-execute-btn {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}

#account {
    min-width: 150px; /* 최소 너비 설정 */
    width: 100%; /* 부모 요소의 너비를 100%로 설정하여 반응형 디자인을 지원 */
    padding-right: 20px; /* 오른쪽 패딩을 추가하여 드롭다운 화살표를 고려 */
    box-sizing: border-box; /* padding과 border를 포함하여 크기를 계산 */
}

#monitoring_map {
    overflow-x: auto; /* 가로 스크롤 활성화 */
    white-space: nowrap; /* 이미지가 한 줄로 나가게 설정 */
}

#monitoring_map object {
    width: auto; /* 이미지의 실제 크기를 유지 */
}

#yearlyStatsChart {
    height: 300px; /* 원하는 높이 */
    width: auto;   /* 필요 시 조정 */
}

/*아코디언 효과 스타일링)*/
.collapse {
    transition: height 0.35s ease;
}

.collapse.show {
    display: block;
}
table.api_table td {
  color: black!important;
}
.f12p{
    font-size: 12px;
}
/* RIGHT SIDEBAR 전용 스타일 - 다른 영역에 영향 없음 */

/* 오른쪽 사이드바 컨테이너 */
.sidebar-container.right .sidebar-right {
    background-color: #22222A;
}

/* 오른쪽 사이드바 내부의 테이블만 스타일 적용 */
.sidebar-right .sidebar-section .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    background-color: transparent;
}

/* 오른쪽 사이드바 테이블 헤더 */
.sidebar-right .sidebar-section .table thead th,
.sidebar-right .api_table thead th {
    background-color: #333647 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid #22222A;
}

/* 오른쪽 사이드바 테이블 바디 */
.sidebar-right .sidebar-section .table tbody td,
.sidebar-right .api_table tbody td {
    background-color: #FFFFFF !important;
    color: #22222A !important;
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
}

/* 오른쪽 사이드바 장비명/첫 번째 열 */
.sidebar-right .sidebar-section .table tbody td:first-child,
.sidebar-right .api_table tbody td:first-child {
    background-color: #333647 !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

/* 오른쪽 사이드바 정상 상태 배지 */
.sidebar-right .badge.bg-success-subtle {
    background-color: #009245 !important;
    color: #FFFFFF !important;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 오른쪽 사이드바 검색 버튼 */
.sidebar-right #btnSearch {
    background-color: #597EFF !important;
    color: #FFFFFF !important;
    border: none;
    font-weight: 600;
}

.sidebar-right #btnSearch:hover {
    background-color: #4669e0 !important;
}

/* 오른쪽 사이드바 자동측정지점 테이블 */
.sidebar-right #rad_dose_mon_ts_table thead th {
    background-color: #333647 !important;
    color: #FFFFFF !important;
    border: none;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.sidebar-right #rad_dose_mon_ts_table tbody td {
    background-color: #FFFFFF !important;
    color: #22222A !important;
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 8px;
    font-size: 13px;
    text-align: center;
}

.sidebar-right #rad_dose_mon_ts_table tbody td:first-child {
    background-color: #333647 !important;
    color: #FFFFFF !important;
    font-weight: 600;
    text-align: left;
    padding-left: 15px;
}

/* 오른쪽 사이드바 날씨 테이블 */
.sidebar-right #weathers_ts_table thead th,
.sidebar-right #weathers_ts_table2 thead th,
.sidebar-right #env_weather_mon_ts_table thead th,
.sidebar-right #env_weather_mon_ts_table2 thead th {
    background-color: #333647 !important;
    color: #FFFFFF !important;
    border: none;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 700;
}

.sidebar-right #weathers_ts_table tbody td,
.sidebar-right #weathers_ts_table2 tbody td,
.sidebar-right #env_weather_mon_ts_table tbody td,
.sidebar-right #env_weather_mon_ts_table2 tbody td {
    background-color: #FFFFFF !important;
    color: #22222A !important;
    border: none;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 600;
}

/* 오른쪽 사이드바 발전소 테이블 */
.sidebar-right #pwrs_ts_table thead th {
    background-color: #333647 !important;
    color: #FFFFFF !important;
    border: none;
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.sidebar-right #pwrs_ts_table tbody td {
    background-color: #FFFFFF !important;
    color: #22222A !important;
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 8px;
    font-size: 13px;
    text-align: center;
}

.sidebar-right #pwrs_ts_table tbody td:first-child {
    background-color: #333647 !important;
    color: #FFFFFF !important;
    font-weight: 600;
    text-align: left;
    padding-left: 15px;
}

/* 오른쪽 사이드바 온배수/폐수 테이블 */
.sidebar-right #inoutwaters_ts_table thead th,
.sidebar-right #wastewaters_ts_table thead th {
    background-color: #333647 !important;
    color: #FFFFFF !important;
    border: none;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.sidebar-right #inoutwaters_ts_table tbody td,
.sidebar-right #wastewaters_ts_table tbody td {
    background-color: #FFFFFF !important;
    color: #22222A !important;
    border: none;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.sidebar-right #inoutwaters_ts_table tbody td:first-child {
    background-color: #333647 !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

/* 오른쪽 사이드바 섹션 헤더 */
.sidebar-right .sidebar-section .section-header {
    background-color: #22222A !important;
    border-bottom: 1px solid #333647 !important;
    padding: 12px 15px;
}

.sidebar-right .sidebar-section .section-header .fw-bold {
    color: #FFFFFF !important;
}

.sidebar-right .sidebar-section .section-header .text-muted {
    color: #adb5bd !important;
}

/* 오른쪽 사이드바 탭 메뉴 */
.sidebar-right .tab-menu {
    background-color: #333647 !important;
}

.sidebar-right .tab-button {
    background-color: #f8f9fa;
    color: #22222A;
    border: none;
    font-weight: 600;
}

.sidebar-right .tab-button:hover {
    background-color: #e9ecef;
}

.sidebar-right .tab-button.active {
    background-color: #333647 !important;
    color: #FFFFFF !important;
}

/* 오른쪽 사이드바 토글 버튼 */
#toggle-right,
.sidebar-right .toggle-btn1,
.sidebar-right .toggle-btn2,
.sidebar-right .toggle-btn3,
.sidebar-right .toggle-btn4,
.sidebar-right .toggle-btn5 {
    background-color: #333647 !important;
    color: #FFFFFF !important;
}

#toggle-right:hover,
.sidebar-right .toggle-btn1:hover,
.sidebar-right .toggle-btn2:hover,
.sidebar-right .toggle-btn3:hover,
.sidebar-right .toggle-btn4:hover,
.sidebar-right .toggle-btn5:hover {
    background-color: #FFF !important;
    color: black!important;
}

/* 오른쪽 사이드바 스크롤바 */
.sidebar-right .section-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-right .section-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sidebar-right .section-content::-webkit-scrollbar-thumb {
    background: #333647;
    border-radius: 3px;
}

.sidebar-right .section-content::-webkit-scrollbar-thumb:hover {
    background: #4a5765;
}

/* 오른쪽 사이드바 토글 화살표 */
.sidebar-right .toggle-arrow {
    color: #FFFFFF !important;
}

/* 오른쪽 사이드바 호버 효과 */
.sidebar-right .sidebar-section .table tbody tr:hover td {
    background-color: #f8f9fa !important;
}

.sidebar-right .sidebar-section .table tbody tr:hover td:first-child {
    background-color: #4a5765 !important;
}

/* 오른쪽 사이드바 배경색 */
.sidebar-right {
    background-color: #22222A !important;
}

/* 한국원자력안전기술원 테이블 특별 처리 */
.sidebar-right .api_table tbody tr td:nth-child(3) {
    color: #22222A !important;
    font-weight: 600;
}

/* 상태 표시 원형 아이콘 */
.sidebar-right .badge.bg-success-subtle::before {
    content: '●';
    font-size: 10px;
    margin-right: 4px;
}

/* 차트 범례 스타일 */
.chart-legend-centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    gap: 15px;
}


.legend-label {
    white-space: nowrap;
}

/* 페이지네이션 스타일 */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    gap: 8px;
    font-size: 12px;
}

.pagination-btn {
    padding: 4px 8px;
    color: #007bff;
    text-decoration: none;
    border: none;
    background: none;
    font-size: 12px;
}

.pagination-btn:hover:not(.active) {
    background-color: #f8f9fa;
    text-decoration: underline;
}

.pagination-btn.active {
    color: #000;
    font-weight: bold;
    background-color: #e9ecef;
    border-radius: 3px;
}

.pagination-ellipsis {
    padding: 4px;
    color: #6c757d;
    font-size: 12px;
}

/* 커스텀 그리드 시스템 - 5.5/1/5.5 분할 */
.mon_col_5_5 {
    flex: 0 0 45.83%;
    max-width: 45.83%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.mon_col_1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* 태블릿 반응형 (768px ~ 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .mon_col_md_5_5 {
        flex: 0 0 45.83%;
        max-width: 45.83%;
    }

    .mon_col_md_1 {
        flex: 0 0 8.33%;
        max-width: 8.33%;
    }
}

/* 모바일 반응형 (767px 이하) */
@media (max-width: 767px) {
    .mon_col_5_5,
    .mon_col_1 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* 모바일에서 가운데 빈 공간 숨기기 */
    .mon_col_1 {
        display: none;
    }
}

/* fixedMonitoring 테이블 컨트롤 영역 */
.mon_table_controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    margin-bottom: 10px;
}

/* fixedMonitoring 반응형 개선 */
.mon_responsive_search_container {
    height: auto !important;
    min-height: 129px;
}

.mon_responsive_search_row {
    flex-wrap: wrap;
}

/* 기본 상태에서는 기존 스타일 유지 */
.mon_responsive_flex_container {
    /* 기본 상태에서는 추가 스타일 없음 - 기존 fixed-main-flex-container 스타일 유지 */
}

.mon_responsive_data_item_1 {
    /* 기본 상태에서는 추가 스타일 없음 - 기존 data_item_1 스타일 유지 */
}

.mon_responsive_data_item_2 {
    /* 기본 상태에서는 추가 스타일 없음 - 기존 data_item_2 스타일 유지 */
}

/* 태블릿 및 중간 화면 (1000px ~ 1400px) */
@media (max-width: 1400px) and (min-width: 1001px) {
    .mon_responsive_search_container {
        padding: 12px 15px;
    }

    .mon_responsive_search_row {
        gap: 5px;
    }

    .mon_responsive_search_row .radiation-search-input {
        width: auto;
        min-width: 120px;
        max-width: 180px;
    }

    .mon_responsive_search_row .date-range-container {
        flex-wrap: wrap;
        margin-bottom: 5px;
    }

    /* 장치명 그룹은 한 줄로 유지 */
    .mon_device_group {
        margin-top: 5px;
    }
}

/* 1200px 이하: 상세조건 영역 줄바꿈 */
@media (max-width: 1200px) {
    .radiation-condition {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }

    .radiation-search-execute-btn {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}

/* 화면이 좁아져서 공간이 부족할 때만 data_item_2가 아래로 */
@media (max-width: 1000px) {
    .mon_responsive_flex_container {
        flex-direction: column;
        height: auto !important;
        min-height: calc(100vh - 150px);
    }

    .mon_responsive_data_item_1 {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .mon_responsive_data_item_2 {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .mon_responsive_search_container {
        padding: 12px 15px;
    }

    .mon_responsive_search_row {
        gap: 5px;
    }

    .mon_responsive_search_row .radiation-search-input {
        width: auto;
        min-width: 100px;
        max-width: 150px;
    }

    /* 장치명 그룹이 한 묶음으로 다음 줄로 이동 */
    .mon_device_group {
        width: 100%;
        margin-top: 10px;
        justify-content: flex-start;
    }

    .mon_device_group .device-tag-input-container {
        flex: 1;
        max-width: calc(100% - 70px);
        min-width: 150px;
    }
}

/* 모바일 화면 (768px 이하) */
@media (max-width: 768px) {
    .mon_responsive_flex_container {
        flex-direction: column;
        padding: 10px;
        height: auto !important;
    }

    .mon_responsive_data_item_1,
    .mon_responsive_data_item_2 {
        width: 100%;
        max-width: 100%;
    }

    .mon_responsive_search_container {
        margin-bottom: 15px;
    }

    .mon_responsive_search_row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .mon_responsive_search_row .date-range-container {
        width: 100%;
        flex-direction: column;
        gap: 5px;
    }

    .mon_responsive_search_row .radiation-search-input {
        width: 100%;
        max-width: 100%;
    }

    .mon_responsive_search_row .radiation-search-label-s,
    .mon_responsive_search_row .radiation-search-label-l {
        margin-bottom: 5px;
    }

    /* 모바일에서 장치명 그룹 스타일 */
    .mon_device_group {
        width: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }

    .mon_device_group .device-tag-input-container {
        width: calc(100% - 70px);
        max-width: calc(100% - 70px);
        min-width: 200px;
    }

    .mon_device_group .radiation-search-btn {
        flex-shrink: 0;
    }
}
.map-btn-fixed {
    background-color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: background-color 0.2s;
    font-family: 'NanumSquare Neo', sans-serif;
}
.map-btn-fixed:hover {
    background-color: #eee;
}
.map-btn-fixed.active {
    background-color: #2e3a59;
    color: white;
    font-weight: bold;
}
.radiation-map-image {
    width: 100%;
    height: 100%;
}
/* 지도 컨테이너 높이 고정 */
.radiation-map-container {
    height: 420px !important;
    max-height: 600px !important;
}

/* 이메일 인증 페이지 스타일 */
.verification-info-section {
    margin-bottom: 30px;
    text-align: center;
}

.verification-avatar {
    margin-bottom: 20px;
}

.verification-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.verification-icon i {
    font-size: 24px;
    color: #FFFFFF;
}

.verification-message {
    margin-bottom: 20px;
}

.verification-user-info,
.verification-email-info {
    color: #FFFFFF;
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.verification-highlight {
    font-weight: 800;
    color: #FFF;
}

.verification-timer-section {
    margin-bottom: 20px;
}

.verification-timer {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.verification-timer #timer {
    color: #FFD700;
    font-weight: 800;
}

.verification-error-message {
    color: #FF6B6B;
    font-size: 14px;
    font-weight: 600;
}

.verification-code-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0;
}

.verification-code-input {
    flex: 1;
    max-width: 80px;
}

.verification-digit {
    width: 100%;
    height: 80px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.verification-digit:focus {
    border-color: #FFD700;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3);
    transform: scale(1.08);
}

.verification-digit:valid {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.2);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .verification-code-container {
        gap: 15px;
        max-width: 320px;
        padding: 15px 0;
    }

    .verification-code-input {
        max-width: 65px;
    }

    .verification-digit {
        height: 65px;
        font-size: 28px;
    }

    .verification-user-info,
    .verification-email-info {
        font-size: 14px;
    }

    .verification-timer {
        font-size: 16px;
    }
}
/* Management/Map 전용 스타일 */

/* 탭 버튼 영역 고정 (!important로 기존 position: relative 덮어쓰기) */
.setting-chart-container.radiation-chart-p0 {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
    background-color: #F5F5F5;
    padding-top: 5px;
    padding-bottom: 15px;
    margin-bottom: 0;
}

/* 스크롤 컨테이너 */
.map-sections-container {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* 섹션 스크롤 위치 조정 - 버튼 높이만큼 오프셋 */
.map-section {
    scroll-margin-top: 80px;
}

/* ===== Live Monitoring Styles Moved to live_monitoring.css ===== */
/* Map bottom bar, map options modal, and other live monitoring specific styles
   have been moved to /static/html/assets/css/live_monitoring.css */

/* ===== Organization Styles Moved to organization.css ===== */
/* Organization source selection styles have been moved to /static/html/assets/css/organization.css */

/* POI Marker Label Style */
.poi-marker-label {
    background-color: rgba(255, 255, 255, 0.8) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

/* ===== Device Map Tooltip Styles ===== */
/* 장비명 마우스 오버 시 Google Map Tooltip */

.device-map-tooltip {
    position: fixed;
    background: #ffffff;
    border: 2px solid #333333;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.device-map-tooltip::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    height: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 1;
}

.device-map-tooltip::after {
    content: '장비 위치';
    position: absolute;
    top: 5px;
    left: 10px;
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#device-map-tooltip-map {
    width: 100%;
    height: 100%;
    border-radius: 0 0 6px 6px;
}

/* 장비 드롭다운 아이템 호버 효과 강화 */
.device-dropdown-item {
    transition: all 0.2s ease;
    cursor: pointer;
}

.device-dropdown-item:hover {
    background-color: rgba(102, 126, 234, 0.1) !important;
    border-left: 3px solid #667eea;
    padding-left: calc(10px - 3px);
}