/* ── AI 분석 버튼 ──────────────────────────── */
.ai-beta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(129,140,248,.4);
    transition: opacity .2s;
    text-decoration: none;
}
.ai-beta-btn:hover { opacity: .88; color: #fff; }
.ai-beta-btn .beta-tag {
    font-size: 11px;
    font-weight: 500;
    background: rgba(255,255,255,.22);
    border-radius: 6px;
    padding: 1px 8px;
    letter-spacing: .3px;
}

/* 여기까지 small*/
/* @media (max-width: 767px) {
} */
/* 991px 까지가 모바일 UI */
@media (max-width: 991px) {

    .mb-job-rq-detail-style {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .calendar-cd-mobile-height {
        height: 420px !important;
    }

    .size1cd-mobile-height {
        height: 150px !important;
    }

    .name-cd-mobile-height {
        height: 200px !important;
    }

    .dsbd-mobile-height {
        height: 300px !important;
    }

    .donut-cd-mobile-height {
        height: 400px !important;
    }

    .export-btn-mobile-mg {
        margin-right: 10px;
    }

    /* .tracker-detail-col-custom {
        overflow-y: auto !important;
    } */
    .padding-custom-mb {
        padding-bottom: 30px !important;
    }

    .mobile-yauto-row-custom {
        margin-top: 10px !important;
        padding-right: 70px !important;
        /* margin-left: -50px !important; */
    }

    .mobile-row-custom {
        overflow-y: auto;
        overflow-x: hidden;
        margin-left: -20px !important;
        margin-right: -20px !important;
    }

    .mobile-height-auto {
        height: auto !important;
    }

    .mobile-card-body-custom {
        height: auto !important;
        overflow: visible !important;
        padding-inline: 30px !important;
        margin-left: 30px !important;
        margin-right: -60px !important;
        /* overflow-y: auto;
        padding-top: 0;
        padding-left: 30px !important;
        overflow-x: hidden; */
    }

    .under-remocon-area-mb-mg {
        margin-top: 20px !important;
    }

    .map-ratio {
        aspect-ratio: 5/3 !important;
    }

    .mobile-td-wd {
        width: 10% !important;
    }

    .chart-mg-zr {
        margin-left: 10px !important;
    }

    .mb-wd-auto {
        width: auto !important;
    }

    .mobile-search-row-height {
        height: 20% !important;
    }

    .mobile-table-row-height {
        height: 80% !important;
    }

    .event-card-mobile-mg {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .stp-event-mg {
        margin-left: -30px !important;
        margin-right: -30px !important;
    }

    .basicRow-mobile-mg {
        margin-left: -20px !important;
        margin-right: -20px !important;
    }

    .stp-event-tab-width {
        width: 100% !important;
    }

    .y-auto-row-mg {

        margin-right: -25px !important;
    }

    .date-input-width {
        width: 300px;
    }

    .chart-area-mg {
        margin-left: -47px !important;
        margin-right: -47px !important;
    }

    .chart-area-scroll {
        width: 400px !important;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .cd-pd {
        padding-inline: 0 !important;
    }

    .mb-row {
        margin-left: -25px !important;
        margin-right: -27px !important;
    }

    .basic-row-mg {
        margin-top: -12px !important;
    }

    .id-row-margin {
        margin-top: -1px !important;
    }

    .map-card-row {
        margin-top: -15px !important;
    }

    .list-col-custom-for-list-page {
        height: 100vh;

        overflow-x: hidden !important;
        overflow-y: hidden !important;
        padding-inline: 2px;
        display: flex;
        flex-direction: column;
        border-bottom: 2px solid rgba(205, 205, 205, 0.2);
    }

    .detail-col-custom-for-list-page {
        height: 100vh;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .arrow-height {
        height: 15px;
    }

    .hr-custom {
        display: none;
    }

    /* 기존 클래스 커스텀 */
    .content-custom {
        background-color: var(--bg-color);
        padding: 12px !important;
        overflow-y: auto;
        overflow-x: auto;
    }

    .cardbody-custom {
        margin-top: -15px;
        margin-left: -3px !important;
        margin-right: -3px !important;
    }

    /*/ 기존 클래스 커스텀 */

    .page-comment-custom {
        color: var(--least-important-color) !important;
        font-weight: 500 !important;
        display: none;
    }

    .navbar-light {
        /* background-color: var(--mobile-menubar-color); */
        /* border-bottom: 2px solid rgba(205, 205, 205, 0.2); */
    }

    .map-height-mobile {
        height: 200px !important;
    }

    .wtable-height-custom {
        height: 250px !important;
    }

    .vertical-line {
        border-right: 0px solid rgba(0, 0, 0, 0.2) !important;
    }

    /* 카드 커스텀 */
    .mini-card-custom {
        border-bottom: 1px solid rgba(28, 27, 27, 0.2) !important;
        max-width: none !important;
        border: none;
        border-radius: 0;
        padding-bottom: 10px;
        background-color: #ffffff !important;
        box-shadow: none;
    }

    .main-card-custom {
        max-width: none !important;
        border: none;
        background-color: #ebebeb !important;
        box-shadow: none;
        border-radius: 10px !important;
    }

    /* .donut-card-custom {
        padding: 0 !important;
        padding-left: -10px !important;
        margin-left: -20px;
        margin-right: -20px;
    } */
    /* /카드 커스텀 */
}

.tracker-detail-col-custom {
    overflow-y: hidden !important;
}

.map-card-row {
    margin-top: -40px;
}

.arrow-height {
    height: 17px;
    margin-top: 5px !important;
}

.tab-col-custom {
    overflow-x: auto !important;
    /* 가로 스크롤 활성화 */
    overflow-y: hidden !important;
    /* 세로 스크롤 비활성화 (필요 시) */
    white-space: nowrap !important;
    /* 콘텐츠가 줄 바꿈되지 않고 한 줄로 이어지도록 설정 */
}

/* 기존 클래스 커스텀 */
.content {
    background-color: var(--bg-color);
    padding-inline: 20px;
    padding-top: 30px;
    overflow-y: auto;
    overflow-x: auto;
}

/*/ 기존 클래스 커스텀 */
.content-custom {
    background-color: var(--bg-color);
    padding-inline: 20px;
    padding-top: 15px;
    overflow-y: auto;
    overflow-x: auto;
}

.container-custom {
    padding: 0;
}

.cardbody-custom {
    margin-left: 10px;
    margin-right: 20px;
}

.wtable-height-custom {
    height: 420px !important;
}

.page-comment-custom {
    color: var(--least-important-color) !important;
    font-weight: 500 !important;
}

/*최종 탭 커스텀*/
/* 탭 전체 컨테이너 */
.custom-tab-group3 {
    background-color: #fff;
    /* 배경 흰색 */
    border: 1px solid #e9ecef;
    /* 아주 연한 테두리 */
    border-radius: 15px !important;
    /* 전체적으로 둥근 모서리 */
    padding: 5px;
    /* 내부 버튼과의 간격 */
    display: flex;
    align-items: center;

}

/* 기본 버튼 스타일 (미선택 상태) */
.custom-tab3 {
    color: #adb5bd !important;
    /* 연한 회색 글자 (uncheck) */
    background-color: transparent !important;
    /* 배경 투명 */
    border: none !important;
    /* 테두리 제거 */
    border-radius: 10px !important;
    font-weight: 600;
    transition: all 0.3s ease;
    flex: 1;
    /* 가로 너비 균등 분배 */
    text-align: center;
}

/* 선택된 상태 스타일 (Checked) */
.custom-tab-group3 .btn-check:checked+.custom-tab3 {
    background-color: #eef4ff !important;
    color: #4385f5 !important;
    font-weight: bold;

}

/* 호버 스타일 (선택되지 않은 버튼에 마우스 올렸을 때) */
.custom-tab3:hover {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
}

/* 부트스트랩 기본 파란 테두리(포커스) 제거 */
.btn-check:focus+.btn-primary,
.btn-primary:focus {
    box-shadow: none !important;
}

/* /최종 탭 커스텀 */

/* 카드 커스텀 */
.main-card-custom {
    max-width: none !important;
    border: none;
    background-color: #ffffff !important;
    box-shadow: none;
    border-radius: 5px;
    padding: 10px;
}

.mainB-card-custom {
    position: relative !important;
    /* 부모 요소에 상대 위치를 설정 */
    max-width: none !important;
    border: none !important;
    /* background-color: #EFF9FC!important; */
    background-color: var(--content-card-background-color) !important;
     /*변수로 변경 */
    /* background-color: #ffffff !important; */
    border-radius: 5px !important;
    padding: 15px !important;
    /* padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 0px; */
    box-shadow: 2px 2px 4px rgba(87, 81, 81, 0.3) !important;
}

.mainW-card-custom {
    max-width: none !important;
    border: none;
    background-color: #ffffff !important;
    box-shadow: none !important;
    border-radius: 5px;
    padding: 10px;
}

.mini-card-custom {
    max-width: none !important;
    border: none;
    background-color: #ffffff !important;
    box-shadow: none;
}

.sd-inner-card-custom {
    height: 100%;
    max-width: none !important;
    border: none;
    background-color: #ffffff !important;
    box-shadow: none;
    border-radius: 5px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 3px;
}

.sd-inner-custom {
    max-width: none !important;
    /* border: none; 대신 이미지와 같은 연한 테두리 추가 */
    border: 1px solid #f0f0f0 !important;
    background-color: #ffffff !important;
    /* 은은한 그림자 추가 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    /* 모서리를 20px로 크게 굴림 */
    border-radius: 20px !important;

    /* 여백 조정 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    /* 부모 컬럼 폭에 꽉 차게 설정 */

    /* 내부 내용이 라운드를 벗어나지 않도록 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sd-inner-card-header-custom {
    background-color: transparent;
    border: none;

    font-size: 18px !important;
    color: var(--title-font-color) !important;
    font-weight: bold;
}

/*/ 카드 커스텀 */

/* 목록 및 상태 페이지 스크롤 위한 커스텀 */
.content-custom-for-list-page {
    background-color: var(--bg-color);
    width: 100%;
    padding: 0;
    overflow-x: hidden;
}

.list-col-custom-for-list-page {
    background-color: #ffffff !important;
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding-inline: 2px;
    display: flex;
    flex-direction: column;
}

.list-col-custom-for-list {

    height: 100%;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding-inline: 2px;
    display: flex;
    flex-direction: column;
}

.detail-col-custom-for-list-page {
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background-color: #F8FAFC;
}

.list-row-custom-for-list-page {
    flex: 0 0 auto;
}

.list-row-rest-custom-for-list-page {
    flex: 1 1 auto;
    overflow: hidden;
}

.scroll-list-box {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    background-color: white !important;
}

.num-box {
    color: white;
    background-color: var(--button-color);
    border: none;
    border-radius: 15px;
    padding-inline: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.lightgray-background {
    background-color: var(--text-box-color) !important;
    border-radius: 10px;

    transition: background-color 0.2s ease;
    /* 부드러운 전환 효과 */
}

.list-tr-custom:hover .lightgray-background {
    background-color: var(--deeper-text-box-color) !important;
    /* 더 진한 색상으로 설정 */
}

.lightgray-background.highlighted {
    background-color: var(--deeper-text-box-color) !important;
    /* 더 진한 색상으로 설정 */
}

/* tr 요소가 hover 되었을 때의 스타일 */
.list-tr-custom {
    cursor: pointer;
    /* 마우스를 가져다 댔을 때 손가락 모양 활성화 */
    transition: background-color 0.2s ease;
    /* 배경색 변경에 부드러운 전환 효과 추가 */
}

.list-tr-custom td {
    border: none !important;
    border-bottom: 0 !important;

}

.list-tr-custom:hover {

    background-color: var(--row-hover-color) !important;
}

.list-tr-custom.tr-selected {
    background-color: var(--row-hover-color) !important;
}

/*/ 목록 및 상태 페이지 스크롤 위한 커스텀 */

/* tr요소 커스텀 */
.tr-custom {
    cursor: pointer;
    /* 마우스를 가져다 댔을 때 손가락 모양 활성화 */
    transition: background-color 0.2s ease;
    /* 배경색 변경에 부드러운 전환 효과 추가 */
}

/* tr 요소가 hover 되었을 때의 스타일 */
.tr-custom:hover {
    background-color: #f0f0f0 !important;
    /* 원하는 어두운 색상으로 변경 (여기서는 연한 회색 예시) */
}

.td-custom {
    background-color: transparent !important;
}

.td-custom.cctv-tr-selected {
    border-right: 3px solid rgb(228, 145, 67) !important;
    /* background-color: red !important; */
}

/* /tr요소 커스텀 */
.p-background {
    background-color: var(--text-box-color);
    border-radius: 10px;
    padding-inline: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.br-custom {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 80px;
}

/* 삼각형 오버레이 */
/* .triangle-button {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #626262;
    position: fixed; 
    z-index: 1000;
    top: 10%;
    left: 90%;
    transform: translate(-50%, -50%); 
} */

.up-down-btn {
    position: fixed;
    top: 10%;
    left: 85% !important;
    z-index: 1000;

    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover 시 더 진한 색상으로 변경 */
.triangle-button:hover {
    border-bottom-color: rgba(98, 98, 98, 1);
}

.date-input-width {
    width: 420px;
}

.yauto-custom {
    color: var(--font-color) !important;
    margin-right: 5px;
    margin-top: 20px;
}

.secondRow-hr-custom {
    margin-left: 5px;
    margin-right: 45px !important;
}

.monitoring-container-pd {
    padding: 0;
}

.nanum-bold_box {
    font-size: 14px !important;
    font-family: 'NanumSquare' !important;
}

.nanum-bold {
    font-family: 'NanumSquareBold' !important;
}

.nanum-event {
    font-size: 16px !important;
    font-family: 'NanumSquareRegular' !important;
}

.nanum-bold_ex {
    font-family: 'NanumSquareBold' !important;
}

.nanum-extra-bold {
    font-size: 18px !important;
    font-family: 'NanumSquareExtraBold' !important;
}

.nanum-extra-bold-h {
    font-family: 'NanumSquareExtraBold' !important;
}

.nanum-extra-bold-e {
    font-size: 17px !important;
    font-family: 'NanumSquareExtraBold' !important;
}


.nanum-extra-bold_e {
    font-size: 40px !important;
    color: #2E66D5;
    font-family: 'NanumSquareExtraBold' !important;
}

.nanum-extra-bold-occ {
    font-size: 60px !important;
    color: #2E66D5;
    font-family: 'NanumSquareExtraBold' !important;
}

.nanum-extra-bold_mo {
    font-size: 30px !important;
    font-family: 'NanumSquareExtraBold' !important;
}

.nanum-extra-bold-weather {
    font-size: 40px !important;
    font-family: 'NanumSquareExtraBold' !important;
}

.nanum-regular-occ {
    font-size: 15px !important;
    font-family: 'NanumSquareRegular' !important;
}

.nanum-regular-name {
    font-size: 17px !important;
    font-family: 'NanumSquareRegular' !important;
    color: #5A677B !important;
}

.nanum-regular-sub {
    font-size: 18px !important;
    color: #696767;
    font-family: 'NanumSquareRegular' !important;
    white-space: nowrap;
}

.nanum-regular-subsub {
    font-size: 16px !important;
    color: #696767;
    font-family: 'NanumSquareRegular' !important;
}

.nanum-regular-data {
    font-size: 16px !important;
    color: #696767;
    font-family: 'NanumSquareRegular' !important;
}

.nanum-regular-gas {
    font-size: 13px !important;
    color: #555454;
    font-family: 'NanumSquareRegular' !important;
}

.nanum-regular-event {
    font-size: 13px !important;
    color: #8694A9;
    font-family: 'NanumSquareRegular' !important;
}

.nanum-bold-occ {
    font-size: 18px !important;
    color: #555454;
    font-family: 'NanumSquareBold' !important;
}

.nanum-bold-occupancy {
    font-size: 16px !important;
    color: #555454;
    font-family: 'NanumSquareRegular' !important;
}

.nanum-bold-occTitle {
    font-size: 21px !important;

    font-family: 'NanumSquareExtraBold' !important;
}

.mobile-monitor-list {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(218, 218, 218, 0.8);
    /* 반투명 배경 */
    z-index: 1000;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 10px;
    /* 내부 여백 */
    box-shadow: 0 -4px 10px rgba(178, 178, 178, 0.5);
    /* 그림자 효과 */
}

.overlay-monitor-container {
    display: flex;
    gap: 10px;
}

.mobile-card-custom {
    flex: 0 0 auto;
    /* 가로로만 확장되도록 설정 */
    width: 250px;
    /* 카드 고정 너비 */
    height: 90px;
    /* 카드 고정 높이 */
    background: white;
    /* 카드 배경색 */
    border-radius: 8px;
    /* 카드 모서리 둥글게 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* 카드 그림자 */
    display: flex;
    align-items: center;
    /* 수직 가운데 정렬 */
}

.object-card-custom {
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    margin-bottom: 1rem;
}

.break-word-custom {
    word-break: break-word;
    white-space: normal;
}

.main-row {
    overflow: hidden;
}

/* 버튼 커스텀 최종 */
.checkbutton-custom {
    font-family: nanum-square, sans-serif !important;
    border-radius: 10px !important;
    border: none;
    background-color: var(--button-color);
    --bs-btn-color: #ffffff !important;
    /*버튼 안의 글짜 색상*/
    /* --bs-btn-bg: #326abc; */
    --bs-btn-border-color: var(--button-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--button-hover-color);
    --bs-btn-hover-border-color: var(--button-color);
    --bs-btn-focus-shadow-rgb: 88, 145, 226;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--button-color);
    --bs-btn-active-border-color: var(--button-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--button-disable-color);
    --bs-btn-disabled-border-color: var(--button-hover-color);
    /* background-image: linear-gradient(45deg, #326abc, #1e3e6e); */
}

.checkbutton-custom:hover {
    background-color: var(--button-hover-color);
    color: #ffffff;
}

.rvs-checkbutton-custom {
    border-radius: 10px !important;
    border: 2px solid var(--button-color);
    /* 테두리 색상 적용 */
    background-color: #ffffff;
    /* 배경 흰색 */
    color: var(--button-color);
    /* 글자색을 --button-color로 */

    --bs-btn-color: var(--button-color);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--button-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--button-hover-color);
    --bs-btn-hover-border-color: var(--button-hover-color);
    --bs-btn-focus-shadow-rgb: 88, 145, 226;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--button-color);
    --bs-btn-active-border-color: var(--button-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--button-disable-color);
    --bs-btn-disabled-border-color: var(--button-hover-color);
}

.rvs-checkbutton-custom:hover {
    background-color: var(--button-hover-color);
    color: #ffffff;
}

.modifybutton-custom {
    border-radius: 10px !important;
    border: none;
    background-color: var(--mbutton-color);
    --bs-btn-color: #ffffff;
    /*버튼 안의 글짜 색상*/
    /* --bs-btn-bg: #326abc; */
    --bs-btn-border-color: var(--mbutton-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mbutton-hover-color);
    --bs-btn-hover-border-color: var(--mbutton-color);
    --bs-btn-focus-shadow-rgb: 88, 145, 226;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mbutton-color);
    --bs-btn-active-border-color: var(--mbutton-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--button-disable-color);
    --bs-btn-disabled-border-color: var(--mbutton-hover-color);
    /* background-image: linear-gradient(45deg, #326abc, #1e3e6e); */
}

.modifybutton-custom:hover {
    background-color: var(--mbutton-hover-color);
    color: #ffffff;
}

.deletebutton-custom {
    border-radius: 10px !important;
    border: none;
    background-color: var(--dbutton-color);
    --bs-btn-color: #ffffff;
    /*버튼 안의 글짜 색상*/
    /* --bs-btn-bg: #326abc; */
    --bs-btn-border-color: var(--dbutton-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dbutton-hover-color);
    --bs-btn-hover-border-color: var(--dbutton-color);
    --bs-btn-focus-shadow-rgb: 88, 145, 226;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dbutton-color);
    --bs-btn-active-border-color: var(--dbutton-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--button-disable-color);
    --bs-btn-disabled-border-color: var(--dbutton-hover-color);
    /* background-image: linear-gradient(45deg, #326abc, #1e3e6e); */
}

.deletebutton-custom:hover {
    background-color: var(--dbutton-hover-color);
    color: #ffffff;
}

/* /버튼 커스텀 최종 */

.settingbox-custom {
    background-color: var(--text-box-color);
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 3px;
}

.pageBtn-custom {
    margin-top: 15px;
    border-radius: 10px !important;
    padding: 6px 12px;
}

.pageBtn-custom.selected {
    background: var(--point-color) !important;
    color: #ffffff !important;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* h5player */
.h5-play-wrap {
    position: relative;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 5 / 3;

    background-color: transparent;
}

.video_loading {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
}

.radio-img {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 2px solid transparent;
    /* 기본 테두리 */
    border-radius: 8px;
    transition: transform 0.2s, border-color 0.2s;
}

.map-img {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 2px solid transparent;
    /* 기본 테두리 */
    border-radius: 8px;
    transition: transform 0.2s, border-color 0.2s;
}

/* 리모컨 관련 커스텀 */
.cross-container {
    background-color: var(--remocon-bg-color);
}

.inner-cross-container {
    background-color: var(--remocon-btn-color);
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: 1fr auto 1fr;
    /* grid-template-columns: repeat(3, 1fr);   grid-template-rows: repeat(3, 1fr);  */
    position: relative;
}

.cross-item {
    position: relative;
    background-color: var(--remocon-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 위치별 스타일 */
.cross-item.LeftUp {
    grid-row: 1;
    grid-column: 1;
    border-bottom-right-radius: 8px !important;
    /* 오른쪽 아래 모서리 둥글게 */
}

.cross-item.Up {
    grid-row: 1;
    grid-column: 2;
}

.cross-item.RightUp {
    grid-row: 1;
    grid-column: 3;
    border-bottom-left-radius: 8px !important;
    /* 오른쪽 아래 모서리 둥글게 */
}

.cross-item.Left {
    grid-row: 2;
    grid-column: 1;
}

.cross-item.Right {
    grid-row: 2;
    grid-column: 3;
}

.cross-item.LeftDown {
    grid-row: 3;
    grid-column: 1;
    border-top-right-radius: 8px !important;
    /* 오른쪽 아래 모서리 둥글게 */
}

.cross-item.Down {
    grid-row: 3;
    grid-column: 2;
}

.cross-item.RightDown {
    grid-row: 3;
    grid-column: 3;
    border-top-left-radius: 8px !important;
    /* 오른쪽 아래 모서리 둥글게 */
}

/* 중앙 버튼 스타일 */
.cross-item.center {
    grid-row: 2;
    grid-column: 2;
    background-color: transparent;
    border: transparent;
    /* background-color: var(--remocon-btn-color) !important; */
    /* background-color:red; */
}

.circle-btn {
    display: block;
    width: 70% !important;
    aspect-ratio: 1;
    background-color: var(--remocon-btn-color);
    border: 2px solid var(--remocon-border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.circle-tri {}

/* 호버 시 효과 */
.circle-btn:hover {
    /* background-color: #aaa; */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    /* 그림자 강화 */
}

/* 클릭 시 효과 */
.circle-btn:active {
    transform: scale(0.95);
    /* 클릭 시 버튼 약간 축소 */
    /* background-color: #888; */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    /* 그림자 강화 */
}

/* 리모컨 가운데 버튼 */
.center-circle-btn {
    display: block;
    background-color: white;
    border: 2px solid var(--remocon-border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.center-circle-btn:hover {
    /* background-color: #faf8f8; */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* 그림자 강화 */
}

.center-circle-btn:active {
    transform: scale(0.95);
    /* 클릭 시 버튼 약간 축소 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* 그림자 강화 */
    /* background-color: #faf8f8; */
}

/* /리모컨 가운데 버튼 */
.cross-box {
    display: flex;
    background-color: var(--remocon-btn-color);
    /* background-color: red; */
    justify-content: center !important;
    align-items: center !important;
}

.cross-box.Up {
    width: 100%;
    height: 80%;
    position: absolute;
    bottom: 0;
    border-radius: 8px 8px 0 0 !important;
}

.cross-box.Left {
    height: 100%;
    width: 80%;
    position: absolute;
    right: 0;
    border-radius: 8px 0 0 8px !important;
}

.cross-box.Right {
    height: 100%;
    width: 80%;
    position: absolute;
    left: 0;
    border-radius: 0 8px 8px 0 !important;
}

.cross-box.Down {
    width: 100%;
    height: 80%;
    position: absolute;
    top: 0;
    border-radius: 0 0 8px 8px !important;
}

/* 기본 스타일 */

.tri-btn {
    background-color: transparent;
    border: transparent;
}

/* 위쪽 삼각형 */
.tri-btn.top {
    margin-bottom: 30px;
}

/* 아래쪽 삼각형 */
.tri-btn.bottom {
    margin-top: 30px;
}

/* 왼쪽 삼각형 */
.tri-btn.left {
    margin-right: 30px;
}

/* 오른쪽 삼각형 */
.tri-btn.right {
    margin-left: 30px;
}

.remocon-container {
    background-color: var(--remocon-bg-color);
    border: 2px solid var(--remocon-border-color);
    box-shadow: 0 7px 5px rgba(0, 0, 0, 0.2);
    overflow-y: hidden;
    border-radius: 30px;
    aspect-ratio: 1 / 2;
}

/* .tri-btn:hover {
    border-color: #888;
} */
.under-remocon-area {
    margin-left: 12px;
    margin-right: 12px;
}

.rac-btn {
    display: inline-block;
    /* 인라인 블록으로 설정 */
    width: 100%;
    height: auto;
    padding: 10px 20px;
    /* 내부 여백 설정 */
    background-color: var(--remocon-btn-color);
    /* 버튼 배경색 (파란색) */
    border: 2px solid var(--remocon-border-color);
    border-radius: 8px;
    /* 살짝 둥근 모서리 */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
    cursor: pointer;
    /* 클릭 가능한 포인터 */
    transition: all 0.3s ease;
    /* 부드러운 애니메이션 효과 */
}

/* 호버 시 효과 */
.rac-btn:hover {
    /* background-color: #0056b3; 배경색 어둡게 변경 */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    /* 그림자 강화 */
}

/* 클릭 시 효과 */
.rac-btn:active {
    /* background-color: #003f7f;  */
    transform: scale(0.98);
    /* 약간 축소 */
}

.option-btn {
    display: inline-block;
    /* 인라인 블록으로 설정 */
    /* width: 100%; */
    height: 100%;
    padding: 5px 5px;
    background-color: var(--remocon-btn-color);
    border: 2px solid var(--remocon-border-color);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 호버 시 효과 */
.option-btn:hover {
    /* background-color: #0056b3; 배경색 어둡게 변경 */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    /* 그림자 강화 */
}

/* 클릭 시 효과 */
.option-btn:active {
    /* background-color: #003f7f;  */
    transform: scale(0.98);
    /* 약간 축소 */
}

.map-ratio {
    aspect-ratio: 5/9;
}

.dsbd-card-custom {
    /* 카드 종류와 상관없이 항상 동일한 외곽 여백을 갖도록 표준화 (margin 6px = 위/아래/좌/우 모두 동일) */
    margin: 6px !important;
    /* width가 보통 100%(부모 컬럼 기준)라서 margin(6px*2=12px)만큼 폭을 줄여줘야 다음 컬럼을 침범하지 않음.
       이게 없으면 카드가 매번 12px씩 옆 컬럼을 덮어써서, 한 행 안에서 뒤로 갈수록 점점 우측으로 밀려 커지는 것처럼 보임. */
    width: calc(100% - 12px) !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    max-width: none !important;
    border: solid 1px #E7EAF1;
    background-color: #ffffff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0) !important;
    /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);  */
}

.dsbd-card-header-custom {
    border-radius: 10px;
    background-color: transparent;
    border: none;
    color: var(--important-font-color);
    font-family: 'NanumSquareBold';
}

.thead-dark-custom th {
    background-color: #EEF2F6;
    /* Bootstrap dark */
    color: var(--important-font-color);
}

/* 커스텀 파일 업로드 버튼 */
.custom-original-file-input {
    display: none;
}

.custom-file-upload {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background-color: #f5f5f5;
    border: solid 1px #dcd8d8;
    color: rgb(91, 86, 86);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.file-name-display {
    padding-left: 8px;
    display: flex;
    align-items: center;
    flex: 1;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #ffffff !important;
    height: 100% !important;
    border: 1px solid #dcd8d8;
    border-left: none;
}

.thin-horizon-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 transparent;
}

.thin-horizon-scrollbar::-webkit-scrollbar {
    height: 5px;
    /* 1px 대신 6px 권장 */
}

/* WebKit (Chrome/Edge/Safari) */
.thin-horizon-scrollbar::-webkit-scrollbar {
    height: 6px;
    /* 1px 대신 6px 권장 */
}

.thin-horizon-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.thin-horizon-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 9999px;
}

.file-upload-wrapper {
    width: 100% !important;
    /* height: 100%; */
    height: 35px;
    display: flex;
    align-items: center;
}

.file-pill {
    background-color: #f1eeee;
    border-radius: 999px;
    height: 80%;
}

/* /커스텀 파일 업로드 버튼 */

.select-disabled-custom:disabled {
    appearance: none;
    /* 최신 브라우저용 */
    -webkit-appearance: none;
    /* Safari, Chrome */
    -moz-appearance: none;
    /* Firefox */

    background-image: none !important;
    /* 화살표 이미지 제거 */
    background-color: #e9ecef;
    /* 비활성화된 느낌 유지 (선택사항) */
    color: #6c757d;
    /* 텍스트 색도 비활성 스타일로 */
}

.calendar-event {
    position: absolute;
    background: rgb(241, 124, 124, 0.7);
    width: 5px;
    height: 5px;
    border-radius: 150px;
    bottom: 5px;
    left: calc(50% - 2px);
    content: ' ';
    display: block;
}

.truncate-multiline {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: normal;
}

.map-marker-label {
    font-size: 15px;
    font-family: nanumSquareExtraBold;
    font-weight: 900 !important;
    color: #000000;
    white-space: nowrap;
    margin-top: -5px;

    /* 배경색 제거 */
    background-color: transparent;

    /* 1. 글자 테두리 (하얀색 외곽선) */
    /* 8개 방향으로 그림자를 주어 글자 모양을 따라가는 선명한 테두리를 만듭니다. */
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        0px 1px 0 #fff,
        0px -1px 0 #fff,
        -1px 0px 0 #fff,
        1px 0px 0 #fff;

    /* 2. 웹킷 전용 테두리 보정 (더욱 선명하게) */
    -webkit-text-stroke: 0.5px #ffffff;

    /* 가독성 최적화 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* 3. 하단 그림자 (선택 사항: 글자를 더 띄워 보이게 함) */
    /* filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5)); */

    /* 선택 불가 및 클릭 무시 */
    user-select: none;
    pointer-events: none;
}

.clickable-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clickable-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.clickable-card:active {
    transform: scale(0.99);
}

.no-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.option-group {
    display: flex;
    gap: 16px;
    margin: 20px 0;
}

.option-card {
    color: var(--least-important-color);
    flex: 1;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-family: system-ui;
    transition: all 0.2s ease-in-out;
}

.option-card:hover {
    /* border-color: #888; */
    background: #f9f9f9;
}

.option-card input {
    display: none;
    /* 기본 라디오 버튼 숨김 */
}

.option-card input:checked+span {
    font-family: 'NanumSquareExtraBold' !important;
    color: var(--point-color);
}

.option-card input:checked~.option-card {
    color: var(--point-color);
    border: 2px solid var(--point-color) !important;
}

.readonly-input {
    background-color: #f5f5f5;
    color: #999;
}

.disabled-btn {
    opacity: 0.2;
    pointer-events: none;
    cursor: not-allowed;
}

.deleted-user {
    color: #cec6c6;
    text-decoration: line-through;
}

.compLocation {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wct-page {
    page-break-after: always;
}

.stp-status-filter {
    align-items: center;
}

.stp-filter-btn {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    cursor: pointer;
    font-family: NanumSquareRegular;
}

.stp-filter-btn.active {
    background: #afacac;
    color: #fff;
}

.stp-filter-btn[data-status="none"] {
    color: #2563eb;
}

.stp-filter-btn[data-status="request"] {
    color: #ef4444;
}

.stp-filter-btn[data-status="result"] {
    color: #22c55e;
}

.stp-status-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'NanumSquare';
    font-weight: normal !important;
}

.status-none {
    color: #2563eb;
}

.status-request {
    color: #ef4444;
}

.status-result {
    color: #22c55e;
}

.table-scroll-wrap {
    max-height: 350px;
    overflow-y: auto;
    /* 세로 스크롤 담당 */
}

.x72,
.pdf-wrap {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* 메뉴 리스트 설정 */
.main-menu-list {
    display: flex;
    height: 70px;
    /* 네비바 높이와 일치시켜 밑줄 위치 계산 */
    align-items: center;
    gap: 20px !important;
    /* 메뉴 항목 간의 간격 */
}

.main-menu-list li {
    min-width: 0;
    flex-shrink: 1;
    font-size: clamp(10px, 0.8vw, 16px);
}

/* 메뉴 리스트 폰트 및 간격 */
.main-menu-list .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333 !important;
    font-weight: 600;
    height: 100%;
    padding: 0 5px;
    border: none !important;
}


/* 활성화된 메뉴 밑줄 색상 (파란색) */
.main-menu-list .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    /* 네비바 가장 바닥에 밀착 */
    left: 50%;
    /* 중앙 시작 */
    transform: translateX(-50%);
    /* 정확한 중앙 정렬 */

    width: 70%;
    /* [수정] 밑줄 길이를 60% 정도로 짧게 조절 */
    min-width: 30px;
    /* 최소 길이 설정 (글자가 짧을 때 대비) */

    height: 5px;
    /* 밑줄 두께 */
    background-color: #007bff;
    /* 활성화 색상 */
    border-radius: 2px 2px 0 0;
}

.main-menu-list .nav-item {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

/* 전체 바 높이 및 배경 */
.main-navbar-custom {
    height: 70px;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 0 2rem;
}

.high-bar {
    width: 100%;
}

/* 부모 컨테이너들의 자름 방지 */
.high-bar,
.main-navbar-custom,
.navbar-nav {
    overflow: visible !important;
}

/* 사용자 정보가 있는 구역을 항상 위로 */
.navbar-align {
    position: relative;
    z-index: 1050;
    /* 드롭다운 메뉴보다 높거나 같게 */
}

/* 이름 텍스트가 잘리지 않게 최소 너비 확보 및 줄바꿈 금지 */
#userNameText {
    white-space: nowrap;
    min-width: fit-content;
    padding-right: 5px;
    /* 여유 공간 */
}

/* 드롭다운 메뉴가 오른쪽 끝에서 튀어나가지 않게 정렬 */
.dropdown-menu-end {
    right: 0;
    left: auto;
}

/* 만약 중앙 메뉴가 너무 길어 사용자 정보를 덮으려 한다면 */
#mainMenuContainer {
    mask-image: linear-gradient(to right, black 95%, transparent 100%);
}

.solution-card {
    background: #fff;
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #EEF2F7;
    margin-bottom: 10px;
}

.solution-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.solution-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solution-writer {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
}

.solution-writer-label {
    color: #111827;
}

.solution-writer-name {
    font-family: nanum-square-regular, sans-serif;
    color: #2563EB;
    /* 파란 글씨 (근로자 11) */
    font-size: 16px;
}

.solution-title {
    font-family: nanum-square-regular, sans-serif;
    color: #4D5260;
    font-weight: 500;
    font-size: 18px;
    margin-right: 5px;
}

.solution-id {
    font-family: nanum-square-regular, sans-serif;
    color: #4D5260;
    font-size: 14px;
}


.solution-datetime {
    display: flex;
    font-family: nanum-square-regular, sans-serif;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #9CA3AF;
}

.solution-header-right .solution-arrow {
    font-size: 22px;
    color: #9CA3AF;
    line-height: 1;
}

/* pill row */
.solution-pill-row {
    margin-top: 5px;
    width: 100%;
    display: block;
}

.solution-pill-wrap {
    display: flex;
    align-items: center;
    gap: 10px;

    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    padding: 10px 12px;
    border-radius: 10px;

    width: 100%;
    box-sizing: border-box;
}

.solution-pill {
    background: #ffffff;
    color: #374151;
    font-weight: 800;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 5px;
}

.solution-pill-divider {
    width: 1px;
    height: 14px;
    background: #E5E7EB;
}

.solution-pill-text {
    font-size: 12px;
    color: #374151;
    font-weight: 700;
}

/* value box */
.solution-valuebox {
    margin: 8px;
    display: flex;
    gap: 10px;
    background: #fff;
    border: 1px solid #EEF2F7;
    border-radius: 10px;
    padding: 12px;
}

.solution-metric {
    flex: 1;
    text-align: center;
}

.solution-metric-label {
    font-family: nanum-square-regular, sans-serif;
    font-size: 14px;
    color: #9CA3AF;
    margin-bottom: 6px;
}

.solution-metric-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 900;
    color: #111827;
}

.solution-metric-ico {
    width: 25px;
    height: 25px;
    opacity: 0.9;
}

.solution-metric-value .unit {
    font-weight: 900;
    margin-left: 2px;
}

/* 상단 큰 파란 버튼 */
.report-primary-btn {
    background: #2d6cf6;
    border: 1px solid #2d6cf6;
    border-radius: 14px;
    padding: 12px 10px;
}

.report-primary-btn:hover {
    background: #2a63e6;
    border-color: #2a63e6;
}

.report-plus {
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    margin-right: 10px;
    line-height: 1;
}

.report-primary-text {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

/* 구분선 */
.report-divider {
    margin: 18px 0 8px 0;
    border: 0;
    height: 1px;
    background: #e9eef5;
}

/* 섹션 타이틀 */
.report-section-title {
    font-family: nanum-square-regular, sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #8694A9;
    /* 이미지처럼 회색 */
    margin-top: 6px;
}

/* 흰색 테두리 버튼(일일/월간/점검표) */
.report-outline-btn {
    background: #fff;
    border: 2px solid #2d6cf6;
    color: #2d6cf6;
    border-radius: 14px;
    padding: 12px 10px;

}

.report-outline-btn:hover {
    background: rgba(45, 108, 246, 0.06);
}



.list-row-custom-for-list-page {
    padding-left: 10px;
    /* 좌우 여백 */
    padding-right: 10px;

}


.report-primary-btn {

    width: 100%;

}


.list-row-custom-for-list-page .col-6 {

    padding-left: 8px;
    padding-right: 8px;

}

.list-row-custom-for-list-page .col-12 {

    padding-left: 8px;
    padding-right: 8px;

}

@media (max-width:768px) {

    .list-row-custom-for-list-page {

        max-width: 500px;
        padding-left: 16px;
        padding-right: 16px;

    }

}

/* 카드 컨테이너 */
.notice-table-card {
    background: #fff;
    height: 100%;
    border-radius: 15px;
    margin-left: 30px;
    margin-right: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

/* 스크롤 영역 */
.notice-table-scroll {
    flex: 1;
    overflow-y: auto;

}

/* 테이블 기본 */
table.notice-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.notice-table th,
.notice-table td {
    vertical-align: middle;
}

/* 헤더 */
table.notice-table thead th {
    background: #eef2f7;
    color: #5A677B;
    font-size: 14px;
    padding: 18px 20px;
    border-bottom: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.device-assign-table tbody td {
    padding: 10px 12px !important;
    height: 42px !important;
}

.device-assign-table input {
    height: 100% !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

table.notice-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* 바디 셀 */
table.notice-table tbody td {
    padding: 22px 20px;
    border-top: 1px solid #edf2f7;
    color: #0f172a;
    font-family: nanum-square-regular, sans-serif;
    font-size: 15px;
    vertical-align: middle;
    background: #fff;
}

/* 첫 컬럼 NO 느낌 */
table.notice-table tbody td:first-child {
    color: #94a3b8;
    font-weight: 500;
    text-align: center;
    width: 80px;
}

/* 제목 링크 */
table.notice-table tbody td a {
    color: #0f172a;
    text-decoration: none;
}

table.notice-table tbody td a:hover {
    text-decoration: underline;
}

/* 행 hover (이미지 느낌: 아주 은은하게) */
table.notice-table tbody tr:hover td {
    background: #fafcff;
}

.notice-wrap {
    height: 100%;
    margin-left: 17px;
    margin-right: 17px;
}

.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notice-title {
    font-weight: 700;
    font-size: 18px;
}

.notice-more {
    font-size: 14px;
    font-family: nanum-square-regular, sans-serif;
    color: #6b7280;
    text-decoration: none;
}

.notice-list {
    border-top: 1px solid #DEE2E6;
}

.notice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px;
    border-bottom: 1px solid #DEE2E6;
    cursor: pointer;
    transition: background 0.2s ease;
}

.notice-text-today {
    font-weight: 600;
    color: #111827;
}

.notice-row:hover {
    background: #f8fafc;
}

.notice-left {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.notice-text {
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notice-date {
    font-size: 14px;
    color: #999999;
    white-space: nowrap;
}

.notice-today-img {
    height: 23px;
}

.section-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 15px;
    color: #6b7280;
}

.device-table {
    background: #f9fafb;
    border-radius: 18px;
    padding: 15px;
}

.device-header,
.device-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 5px;
}

.device-header {
    font-weight: 700;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.device-row {
    font-weight: 600;
    color: #374151;
}

.device-id {
    color: #2563eb;
    font-weight: 700;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 특정 버튼 클래스(예: checkbutton-custom)에만 적용하고 싶을 때 */
.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.flatpickr-next-month,
.flatpickr-prev-month {
    font-size: 16px;
    font-weight: 600;
}

#data-table {
    width: 100%;
    /* height: 100%; */
    table-layout: fixed;
}

/* 기본 전환 부드럽게 */
.notice-actions .btn {
    transition: all 0.2s ease-in-out;
}

/* 회색 버튼 */
.notice-actions .btn-gray {
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #d5d5d5;
}

.notice-actions .btn-gray:hover {
    background-color: #cfcfcf;
    /* 진한 회색 */
    color: #111;
    border-color: #c0c0c0;
}

/* 파란 버튼 */
.notice-actions .btn-blue {
    background-color: #2f6df6;
    color: #fff;
    border: 1px solid #2f6df6;
}

.notice-actions .btn-blue:hover {
    background-color: #1f54c9;
    /* 더 진한 블루 */
    color: #fff;
    /* 흰색 유지 */
    border-color: #1f54c9;
}

/* 빨간 버튼 */
.notice-actions .btn-red {
    background-color: #ff4d4f;
    color: #fff;
    border: 1px solid #ff4d4f;
}

.notice-actions .btn-red:hover {
    background-color: #d9363e;
    /* 더 진한 레드 */
    color: #fff;
    /* 흰색 유지 */
    border-color: #d9363e;
}

.label-value-row {
    border-bottom: 1px solid #e5e7eb;
    padding: 4px 0;
}

.modal-backdrop {
    background-color: #000;
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* 전체 카드 안 테이블 */
.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

/* 헤더 */
.custom-table thead {
    position: sticky;
    top: 0;
    background: #eef1f5;
    z-index: 2;
}

#today-report-table thead th {
    background-color: #F8FAFC !important;
}

#today-report-table {
    width: 100% !important;
    margin: 0;
}

#today-report-table th,
#today-report-table td {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.custom-table th {
    text-align: center;
    padding: 12px 8px;
    font-weight: 600;
    color: #4b5563;
    border-bottom: 1px solid #e5e7eb;
}

/* 바디 */
.custom-table td {
    text-align: center;
    padding: 14px 8px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
}

/* hover 효과
.custom-table tbody tr:hover {
    background-color: #f8fafc;
} */

/* 체감 컬럼 강조 */
.custom-table td:last-child {
    color: #2563eb;
    font-weight: 600;
}

/* 첫번째 컬럼 (시간) */
.custom-table td:first-child {
    color: #6b7280;
    font-weight: 500;
}

/* 스크롤 영역 */
.table-responsive {
    /* max-height: 320px; 체감온도계 데이터리스트때문에 정해놓은거 같음*/
    overflow-y: auto;
    border-radius: 0 !important;

}

/* 스크롤바 (선택) */
.table-responsive::-webkit-scrollbar {
    width: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.dm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-icon-blue {
    background: #EEF4FB;
}

.dm-icon-red {
    background: #FCEBEB;
}

.dm-title {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 1.25rem;
    font-family: nanum-square, sans-serif;
}

.dm-label {
    font-size: 11px;
    color: #888;
    font-family: nanum-square, sans-serif;
}

.dm-val {
    font-size: 14px;
    font-family: nanum-square, sans-serif;
}

.dm-highlight {
    color: #BA7517;
}

.dm-arrow {
    color: #888;
    font-size: 18px;
    font-family: nanum-square, sans-serif;
}

.dm-note {
    font-size: 12px;
    color: #185FA5;
    margin: .25rem 0 0;
    text-align: center;
    font-family: nanum-square, sans-serif;
}

.dm-info-box {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.dm-save-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 3px 0;
}

.dm-changed {
    color: #185FA5;
    font-weight: 500;
}

.dm-unchanged {
    color: #aaa;
}

.dm-cancel {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
}

.dm-confirm {
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #5B91D8;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.device-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.device-modal-sheet {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 580px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.device-modal-search {
    padding: 16px 16px 0;
}

.device-modal-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f4f5f7;
    border-radius: 14px;
    padding: 11px 14px;
}

.device-modal-search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #333;
}

.device-modal-search-box input::placeholder {
    color: #aaa;
}


.device-modal-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px 16px;
}

.device-modal-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #5F95FE;
    margin: 14px 0 8px;
}

.device-modal-section-title.gray {
    color: #999;
    margin: 14px 0 8px;
}

.device-worker-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #f0f0f0;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.device-worker-card:hover {
    background: #f5f8ff;
    border-color: #ccd9f5;
}

.device-worker-card.selected {
    border: 2px solid #5F95FE;
    background: #f0f5ff;
}

.device-worker-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8eef8;
    color: #5F95FE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: nanum-square, sans-serif;
    font-weight: 600;
    flex-shrink: 0;
}

.device-worker-avatar.gray {
    background: #f2f2f2;
    color: #bbb;
}

.device-worker-name {
    flex: 1;
    font-size: 16px;
    color: #1a1a1a;
    font-family: nanum-square, sans-serif;
}

.device-worker-devno {
    font-size: 16px;
    font-weight: 500;
    color: #5F95FE;
    font-family: nanum-square, sans-serif;
}

.device-worker-devno.unassigned {
    font-size: 12px;
    color: #aaa;
    font-weight: 400;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 3px 10px;
}

.device-modal-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid #f0f0f0;
}

.device-modal-confirm-btn {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: none;
    background: #d0d5de;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.device-modal-confirm-btn.active {
    background: #5F95FE;
    cursor: pointer;
}


/* 드래그 중 다른 타입 셀 비활성화 */
.cell-drag-disabled {
    opacity: 0.2;
    pointer-events: none;
    filter: grayscale(1) brightness(0.5) contrast(0.8);
}

/* 드래그 중 같은 타입 셀 강조 */
.cell-drag-available {
    border: 2px dashed #2563EB !important;
    background: #F4F9FF !important;
    border-radius: 8px;
    color: #2F6BFF !important;
}

.device-input-like {
    /* 1. 박스 높이 및 정렬 설정 */
    display: flex !important;           /* flex 활성화 확인 */
    flex: 1 !important;
     height: 56px !important;      /* min-height → height */
    box-sizing: border-box;
    
    /* 2. 텍스트 정중앙 정렬 (핵심) */
    align-items: center !important;     /* 수직 중앙 */
    justify-content: center !important;  /* 수평 중앙 (시안과 일치) */
    
    /* 3. 텍스트 치우침 방지 */
    line-height: normal !important;      /* line-height: 1 보다 normal이 정렬에 유리함 */
    border: 1px solid #ced4da;
    border-radius: 8px;
    cursor: pointer;
    
    /* 4. 폰트 스타일 추가 (시안 느낌) */
    font-weight: 500;
    font-size: 1.1rem;
}

.device-assigned {
    background: #fff !important;
    color: #2F6BFF !important;
    font-weight: 400 !important;
    border: 1px solid #E7EAF1 !important;
}

.device-unassigned {
    background: #EEF2F6 !important;
    color: #8694A9 !important;
    font-weight: 400 !important;
    border: 1px solid #E7EAF1 !important;
}

.device-input-like:hover {
    background: #DEEDFF !important;
    border-color: #5C8FFF !important;
    color: #A3BDF7 !important;
    /* border: 2px solid #5C8FFF !important; */
    border-radius: 8px !important;
    /* cursor: pointer;
    opacity: 0.85; */
}

/* 드롭 가능 영역 호버 */
.drag-over {
    background: #5C8FFF !important;
    /* 진한 파란색 */
    border: 1px solid #2563EB !important;
    border-radius: 8px !important;
    z-index: 10;
}

.drag-over .device-input-like {
    background: transparent !important;
    color: #ffffff !important;
    /* 글자색 흰색 */
    border: none !important;
    font-weight: 600 !important;
}

/* 드래그 중 자기 자신 셀 */
.cell-drag-self {
    opacity: 0.5;
    border: 1px dashed #ccc !important;
    background: #f8f8f8 !important;
    border-radius: 8px;
}
.mini-scroll-indicator {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    width: 40px;           /* 크기 축소 */
    height: 40px;          /* 크기 축소 */
    background: rgba(47, 107, 255, 0.85); /* 브랜드 블루 + 투명도 */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;    /* 원형 디자인 */
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: none;  /* 드래그 방해 금지 */
    opacity: 0;            /* 평소엔 숨김 */
    transition: all 0.2s ease-in-out;
}

/* 상단 버튼 위치 */
#scroll-indicator-up {
    top: 60px; /* 상단 메뉴바 고려 */
    margin-top: -10px;
}

/* 하단 버튼 위치 */
#scroll-indicator-down {
    bottom: 30px;
    margin-bottom: -10px;
}

/* 활성화 상태 (드래그 시 해당 영역 진입 시) */
.mini-scroll-indicator.active {
    opacity: 1;
    transform: translateX(-50%) scale(1.1); /* 살짝 커지며 등장 */
    margin-top: 0;
    margin-bottom: 0;
}

/* 드래그 중 스크롤바 영역 스타일 최적화 */
body.is-dragging {
    scroll-behavior: auto !important;
}
/* ══════════════════════════════════════
   To Do 페이지 레이아웃
══════════════════════════════════════ */
.todo-page {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ══════════════════════════════════════
   헤더
══════════════════════════════════════ */
.todo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.todo-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.todo-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main, #222);
    margin: 0;
}
.todo-date-display {
    font-size: 13px;
    color: var(--text-muted, #888);
    font-weight: 500;
}
.todo-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 날짜 네비 */
.todo-date-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-light, #f5f6fa);
    border-radius: 8px;
    padding: 6px 12px;
}
.date-nav-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted, #888);
    line-height: 1;
    padding: 0 2px;
}
.date-nav-btn:hover { color: var(--point-color, #3A87AD); }
.date-nav-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main, #222);
    white-space: nowrap;
    min-width: 150px;
    text-align: center;
}

/* 추가 버튼 */
.btn-add-todo {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--point-color, #3A87AD);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-add-todo:hover { background: var(--point-color-dark, #2e6f93); }

/* ══════════════════════════════════════
   통계 바
══════════════════════════════════════ */
.todo-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-light, #f5f6fa);
    border-radius: 12px;
    padding: 14px 20px;
}
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main, #222);
    line-height: 1;
}
.stat-num.done   { color: #16a34a; }
.stat-num.remain { color: var(--point-color, #3A87AD); }
.stat-label {
    font-size: 11px;
    color: var(--text-muted, #888);
    font-weight: 500;
}
.stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border-color, #e0e0e0);
}
.stat-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    margin-left: 8px;
}
.stat-progress-bar {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 99px;
    overflow: hidden;
}
.stat-progress-fill {
    height: 100%;
    background: #16a34a;
    border-radius: 99px;
    transition: width 0.4s ease;
}
.stat-progress-pct {
    font-size: 12px;
    font-weight: 700;
    color: #16a34a;
    min-width: 36px;
    text-align: right;
}

/* ══════════════════════════════════════
   필터 탭
══════════════════════════════════════ */
.todo-filter-tabs {
    display: flex;
    gap: 6px;
}
.filter-tab {
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid var(--border-color, #e0e0e0);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: all 0.15s;
}
.filter-tab.active {
    background: var(--point-color, #3A87AD);
    border-color: var(--point-color, #3A87AD);
    color: #fff;
}
.filter-tab:hover:not(.active) {
    border-color: var(--point-color, #3A87AD);
    color: var(--point-color, #3A87AD);
}

/* ══════════════════════════════════════
   리스트
══════════════════════════════════════ */
.todo-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.todo-empty {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    gap: 12px;
    color: #ccc;
}
.todo-empty p {
    font-size: 14px;
    color: #bbb;
    margin: 0;
}

/* 아이템 */
.todo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
    transition: background 0.12s;
    border-radius: 8px;
}
.todo-item:hover { background: var(--bg-light, #f9f9fb); }
.todo-item.done .todo-item-title {
    text-decoration: line-through;
    color: var(--text-muted, #aaa);
}

/* 체크 버튼 */
.todo-check-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color, #ccc);
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.todo-check-btn:hover { border-color: #16a34a; }
.todo-check-btn.checked {
    background: #16a34a;
    border-color: #16a34a;
}

/* 아이템 컨텐츠 */
.todo-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.todo-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main, #222);
}
.todo-item-date {
    font-size: 12px;
    color: var(--text-muted, #aaa);
}

/* 삭제 버튼 */
.todo-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #ccc;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.todo-item:hover .todo-delete-btn { opacity: 1; }
.todo-delete-btn:hover { color: #ef4444; }

/* ══════════════════════════════════════
   모달
══════════════════════════════════════ */
.todo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.todo-modal-overlay.open { display: flex; }

.todo-modal {
    background: #fff;
    border-radius: 16px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    overflow: hidden;
}
.todo-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
}
.todo-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main, #222);
}
.todo-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #888);
    display: flex;
    align-items: center;
}
.todo-modal-close:hover { color: var(--text-main, #222); }

.todo-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.todo-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.todo-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main, #444);
}
.todo-form-label .required { color: #ef4444; }
.todo-form-input {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-main, #222);
    outline: none;
    transition: border 0.15s;
}
.todo-form-input:focus { border-color: var(--point-color, #3A87AD); }
.todo-form-input.input-error { border-color: #ef4444; }

.todo-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border-color, #f0f0f0);
}
.btn-todo-cancel {
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e0e0e0);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #888);
    cursor: pointer;
}
.btn-todo-save {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    background: var(--point-color, #3A87AD);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-todo-save:hover { background: var(--point-color-dark, #2e6f93); }

/* ══════════════════════════════════════
   토스트
══════════════════════════════════════ */
.todo-toast-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── 모든 fc-event 기본 스타일 초기화 ── */
.fc .fc-daygrid-event {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
}

/* ── allDay 이벤트 (배경색 pill) ── */
.fc-event-allday {
    width: 100%;
    padding: 3px 8px;
    border-radius: 4px;
    overflow: hidden;
}
.fc-event-allday-title {
    font-size: 13px;        /* 11 → 13 */
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
/* ── 오늘 날짜 숫자 동그라미 ── */
.fc .fc-day-today .fc-daygrid-day-number {
    background: var(--point-color) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 4px !important;
    line-height: 1 !important;      /* ← 추가 */
    font-size: 13px !important;
}

/* ── 일반 날짜 숫자 ── */
.fc .fc-daygrid-day-number {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    text-decoration: none !important;
    padding: 5px 7px !important;
    line-height: 1 !important;      /* ← 추가 */
}

/* ── 날짜 상단 영역 높이 고정 ── */
.fc .fc-daygrid-day-top {
    min-height: 32px !important;
    align-items: center !important;
}
/* ── timed 이벤트 (동그라미 + 텍스트) ── */
.fc-event-timed {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 2px 4px;
    overflow: hidden;
    background: transparent !important;
}
.fc-event-timed-dot {
    width: 8px;             /* 7 → 8 */
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fc-event-timed-time {
    font-size: 12px;        /* 10 → 12 */
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.fc-event-timed-title {
    font-size: 13px;        /* 11 → 13 */
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ── 기본 dot 숨기기 ── */
.fc-daygrid-event-dot {
    display: none !important;
}

/* ── +N more 링크 ── */
.fc .fc-daygrid-more-link {
    font-size: 13px !important;     /* 11 → 13 */
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    padding: 1px 4px !important;
    display: block !important;
}
.fc .fc-daygrid-more-link:hover {
    color: var(--point-color) !important;
    background: var(--point-color-light) !important;
    border-radius: 4px !important;
}

/* ── 요일 헤더 ── */
.fc .fc-col-header-cell-cushion {
    font-size: 14px !important;     /* 12 → 13 */
}

/* ── 날짜 숫자 ── */
.fc .fc-daygrid-day-number {
    font-size: 13px !important;     /* 12 → 13 */
}

/* ── 셀 고정 높이 ── */
.fc .fc-daygrid-day {
    height: 90px !important;
    max-height: 90px !important;
    overflow: visible !important; 
}
.fc .fc-daygrid-day-frame {
    height: 90px !important;
    max-height: 90px !important;
       overflow: visible !important; 
}
.fc .fc-daygrid-day-events {
   overflow: visible !important;  
}

/* ── 팝오버 스타일 ── */
.fc .fc-popover {
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}
.fc .fc-popover-header {
    background: var(--bg-light) !important;
    border-radius: 10px 10px 0 0 !important;
    font-size: 13px !important;     /* 12 → 13 */
    font-weight: 700 !important;
    color: var(--text-main) !important;
}
.fc .fc-popover-body {
    font-size: 13px !important;     /* 11 → 13 */
}

.fc-list-event-graphic,
.fc-list-event-dot, .fc-more-popover-misc {
    display: none !important;
}
.today-ev-text{
    font-size: 13px !important;

      font-family: nanum-square, sans-serif;
}
.today-ev-time{
    font-size: 12px !important;
    color: var(--text-muted) !important;
  font-family: nanum-square, sans-serif;
}
.fc-list-event-time,.fc-timegrid-slot-label-cushion,.fc-timegrid-axis-cushion{
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════
   서브바 반응형 — 파일 맨 끝 (cascade 우선 보장)
═══════════════════════════════════════════════ */

/* 구조: 컨테이너 full-width */
.sub-menu .navbar-inner-custom {
    width: 100%;
}

/* ul: 100% 너비 + 줄바꿈 허용 */
.sub-menu .nav.nav-underline {
    width: 100%;
    flex-wrap: wrap;
}

/* 열린 상태에서 overflow: hidden 해제 → 2번째 줄 보이게 */
.sub-menu:not(.close) {
    overflow: visible !important;
    max-height: none !important;
}

/* 1400px 이하: padding 축소로 1줄 유지 시도 */
@media (max-width: 1399px) {
    .nanum-regular-sub {
        font-size: 15px !important;
    }
    .sub-nav {
        padding-inline: 8px !important;
    }
}

/* 1200px 이하: 더 축소 */
@media (max-width: 1199px) {
    .nanum-regular-sub {
        font-size: 13px !important;
    }
    .sub-nav {
        padding-inline: 5px !important;
    }
}