/* =========================================================
   BAMP Mobile Responsive Patch
   - 적용 위치: /stylesheets/ys/mobile.css
   - 로드 위치: views/header/sideBar.ejs에서 기존 CSS보다 마지막
   - 목적: PC 대시보드 화면은 유지하고, 모바일에서 세로 스택형으로 전환
========================================================= */

#ultra_popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
    pointer-events: none;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ultra_popup::before {
    content: "DEMO PAGE";
    font-size: 200px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 5px;
}

@media screen and (max-width: 768px) {
    /* =====================================================
       1. Global Reset
    ===================================================== */
    html,
    body {
        width: 100%;
        height: auto;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        display: block;
        background: linear-gradient(45deg, #191e21, #25282f);
        padding: 20px;
    }

    body > *:not(.daterangepicker) {
        height: auto;
        min-height: 0;
        padding: 0;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    img,
    svg,
    canvas {
        max-width: 100%;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        font-family: inherit;
    }

    *:not(footer *) {
        font-size: 13px;
    }

    .flex_row,
    .flex_start_row,
    .flex_between_row {
        flex-wrap: wrap;
    }

    .flex_col {
        min-width: 0;
    }

    /* =====================================================
       2. Sidebar
       - 좌측 고정 메뉴를 모바일 상단 가로 메뉴로 전환
    ===================================================== */
    aside {
        width: 100%;
        /* height: 600px !important; */
        position: relative;
        padding: 12px;
        display: flex;
        flex-direction: column;
        background: none;
        /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); */
        z-index: 20;
    }

    aside #mainLogo {
        display: block;
        width: 300px;
        height: auto;
        margin: 0 auto 30px;
    }

    aside ul {
        width: 100%;
        height: 90px;
        margin: 0;
        padding: 0 0 4px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        gap: 8px;
        overflow-x: auto;
        list-style: none;
        scrollbar-width: thin;
    }

    aside ul::-webkit-scrollbar {
        height: 4px;
    }

    aside ul::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.28);
        border-radius: 999px;
    }

    aside li {
        flex: 0 0 auto;
        width: auto;
        min-width: auto;
        height: 38px;
        margin: 0;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 10px;
        color: #c9d0dc;
        background: rgba(255, 255, 255, 0.06);
        white-space: nowrap;
        cursor: pointer;
    }

    aside li.on,
    aside li.nowPage {
        color: #ffffff;
        background: rgba(126, 134, 155, 0.35);
        box-shadow: inset 0 -3px 0 #92d051;
    }

    aside li img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    aside .permit_box {
        width: 100%;
        margin: 12px 0 0;
        height: auto;
        min-height: 44px;
        position: relative !important;
        bottom: auto !important;
    }

    aside .permit_btn {
        width: 100%;
        min-height: 42px;
        padding: 8px 12px;
        border-radius: 10px;
        justify-content: center;
    }

    aside #myNowData {
        width: 100%;
        height: auto;
        min-height: 54px;
        margin-top: 10px;
        padding: 8px 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.18);
        position: relative !important;
        bottom: auto !important;
    }

    aside #header_date,
    aside #header_time {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        font-size: 12px !important;
        color: #dce3ec;
    }

    aside #header_time {
        font-size: 18px !important;
        font-weight: 800;
    }

    /* 데이터 공유 팝업 */
    .pd_box {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: 80px !important;
        width: auto !important;
        height: auto !important;
        max-height: calc(100vh - 100px);
        padding: 14px !important;
        overflow-y: auto;
        z-index: 200;
    }

    .pd_box > .flex_row {
        flex-direction: column;
        gap: 12px;
    }

    .img_box,
    .document_box {
        width: 100% !important;
        min-width: 0 !important;
    }

    .permit_box1,
    .permit_box4 {
        width: 100%;
    }

    .permit_box2 {
        font-size: 14px;
        line-height: 1.55;
        word-break: keep-all;
    }

    .permit_detail_textarea {
        width: 100%;
        min-height: 120px;
    }

    /* =====================================================
       3. Main / Header / Footer
    ===================================================== */
    main {
        width: 100%;
        height: auto;
        min-height: 100vh;
        overflow: visible;
        padding: 12px;
        background: linear-gradient(45deg, #191e21, #25282f);
    }

    main > * {
        width: 100%;
    }

    main > header {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 62px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 10px;
        padding: 0 0 12px;
    }

    main > header > div {
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 30px 0;
    }

    main > header > div:empty {
        display: none;
    }

    main > header .eefe {
        display: none;
    }

    #subLogo {
        display: none;
    }

    main > header #name {
        margin: 0;
        color: #ffffff;
        font-size: 14px;
        line-height: 1.4;
        word-break: keep-all;
    }

    main > header #logout {
        display: inline-flex;
        height: 32px;
        margin: 8px 0 0;
        padding: 0 14px;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: #3d414d;
        color: #ffffff;
        font-size: 12px;
    }

    main > footer {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 16px;
        padding: 12px 0;
        left: auto;
        bottom: auto;
        font-size: 11px;
        text-align: center;
    }

    /* =====================================================
       4. Content Common
    ===================================================== */
    main .content,
    .content {
        width: 100%;
        height: auto;
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 12px;
        overflow: visible;
    }

    main .content > article,
    main .content > section,
    .content > article,
    .content > section {
        width: 100% !important;
        height: auto !important;
        min-height: 180px;
        margin: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0 !important;
        overflow: visible;
    }

    article:not(.bc):not(.nl) {
        border-radius: 12px;
    }

    article > header,
    article.bc > *:nth-child(1),
    .pHead {
        min-height: 42px;
        height: auto;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        font-size: 15px;
        word-break: keep-all;
    }

    main .content > article > header {
        width: 100% !important;
        height: 100% !important;
    }

    article.bc > *:not(.wide):nth-child(1),
    article.bc > *:not(.wide):nth-child(2),
    article.bc > *:nth-child(2) {
        width: 100%;
        height: auto;
    }

    article.bc > *:nth-child(2) {
        min-height: 160px;
        padding: 12px;
    }

    .blackInfo {
        width: 100% !important;
        height: auto !important;
        min-height: 220px;
        overflow: visible !important;
        border-radius: 12px;
    }

    .comp {
        min-width: 0;
    }

    /* =====================================================
       5. Monitoring Page
    ===================================================== */
    .checkBoxCon,
    .checkBoxCon1 {
        width: 100%;
        height: auto !important;
        min-height: 140px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    .checkBoxCon > div,
    .checkBoxCon1 > div,
    .checkBoxCon > .control,
    .checkBoxCon1 > .control {
        width: auto;
        min-width: 90px;
        height: auto;
        min-height: 80px;
        margin: 0 !important;
    }

    .checkBoxCon1 > .control {
        top: auto !important;
        bottom: 30px !important;
    }

    .checkBoxCon1 > div {
        display: none;
    }

    .powerImg,
    .sensorImg,
    .simulImg {
        width: 120px !important;
        height: auto !important;
    }

    .prodHead {
        position: relative !important;
        width: 100% !important;
        max-width: 320px;
        min-height: 120px;
        transform: none !important;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

    .prodHead:before {
        left: 0 !important;
    }

    .prodHead > p {
        font-size: 20px !important;
    }

    .prodHead > .prod_title {
        grid-column: span 2;
    }

    .prodHead > .realVal {
        font-size: 18px !important;
    }

    .prodVal,
    .prodValueCon {
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
    }

    .tNhCon {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tNhCon > article.bc {
        width: 100% !important;
        height: auto !important;
        min-height: 160px;
    }

    #is_cctv_con {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #is_cctv_con > article {
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
    }

    #simul_img_small {
        width: 54px !important;
        height: auto !important;
    }

    #namdo1ProdWating,
    #fault_table_con,
    .scrollCon,
    .scrollCon2,
    .scrollCon3 {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    .npw_row,
    .ftHead,
    .ftRow {
        min-width: 620px;
    }

    #namdo1ProdProgress,
    #namdo1TotalProdInfo,
    article#namdo2WideArticle {
        width: 100% !important;
        height: auto !important;
        min-height: 220px;
    }

    #namdo1ProdProgressTrack {
        /* transform: scale(0.8); */
        transform-origin: left top;
        min-width: 520px;
    }

    #namdo1ProdProgressTrack > .item {
    }

    #powerRulerCon {
        overflow-x: auto;
    }

    #powerRulerCon > section {
        min-width: 380px;
    }

    /* =====================================================
       6. MFG Page
    ===================================================== */
    .content > article:first-child > div,
    .content > article:first-child {
        min-height: 280px;
    }

    .simul_title {
        font-size: 16px !important;
        padding: 12px;
    }

    .simul_box,
    .simul_box_1 {
        width: 100% !important;
        min-height: 80px;
    }

    .simul_box img {
        height: 56px !important;
        width: auto !important;
    }

    .item:not(#namdo1ProdProgressItem1):not(#namdo1ProdProgressItem2) {
        width: 100% !important;
        min-height: 50px;
        transform: scale(0.72);
        transform-origin: center;
    }
    /* 
    .item:not(#namdo1ProdProgressItem2) {
        width: 100% !important;
        min-height: 50px;
        transform: scale(0.72);
        transform-origin: center;
    } */

    .flex_column {
        width: 100%;
    }

    main .content > article#factStatus1 {
        width: 100% !important;
        height: auto !important;
        min-height: 220px;
    }

    #factStatus {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #factStatus > div {
        width: 100% !important;
        min-height: 34px;
        font-size: 13px;
    }

    #sensorAndProdData {
        width: 100% !important;
        height: auto !important;
    }

    #sensorAndProdData > section {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #sensorAndProdData > section > article {
        width: 100% !important;
        min-height: 180px;
    }

    article.nl {
        width: 100% !important;
        height: auto !important;
        min-height: 240px;
    }

    article.nl > header {
        min-height: 42px;
        font-size: 15px;
    }

    article.nl > canvas {
        width: 100% !important;
        height: 220px !important;
    }

    article.nl > .blackInfo {
        min-height: 200px;
        overflow-x: auto !important;
    }

    .blackRow {
        min-width: 560px;
    }

    .mfg_material_information_header {
        width: 100% !important;
        height: auto !important;
        min-height: 42px;
        padding: 10px;
    }

    .mi_scroll {
        width: 100% !important;
        height: auto !important;
        max-height: 220px;
        overflow-y: auto !important;
    }

    .mi_row,
    .mi_row_b1 {
        min-width: 520px;
    }

    /* =====================================================
       7. Production Page
    ===================================================== */
    main > .content {
        overflow: visible;
    }

    main > .content > article.empty,
    .content > article.empty {
        min-height: 180px;
    }

    .wRow {
        min-width: 560px;
    }

    article.bc > .wide:nth-child(2) {
        overflow-x: auto !important;
        max-height: 280px;
    }

    #prod_aiBox {
        width: 100% !important;
        height: auto !important;
        min-height: 220px;
    }

    .ai_title {
        font-size: 16px !important;
    }

    .ai_content {
        height: auto !important;
        min-height: 160px;
    }

    #prodChart,
    #workerChart,
    #faultRateChart,
    #pChart,
    #fChart {
        width: 100% !important;
        height: 240px !important;
    }

    /* =====================================================
       8. Quality Page
    ===================================================== */
    .qualityContainer,
    .qualityCon,
    .qualityChartCon,
    .visionCon,
    .visionMainCon,
    .visionSubCon {
        width: 100% !important;
        height: auto !important;
        min-height: 220px;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .visionImg,
    .visionImgCon {
        width: 100% !important;
        height: auto !important;
        min-height: 220px;
        object-fit: contain;
    }

    .qualityTableCon,
    .visionTableCon {
        width: 100% !important;
        overflow-x: auto !important;
    }

    .qualityTableCon table,
    .visionTableCon table {
        min-width: 620px;
    }

    .qualityChartCon canvas,
    .qualityCon canvas,
    .visionCon canvas {
        width: 100% !important;
        height: 240px !important;
    }

    /* =====================================================
       9. ERP / Finance / Report Pages
    ===================================================== */
    .erp_left_article,
    .erp_right_article,
    .content > article.erp_left_article,
    .content > article.erp_right_article {
        width: 100% !important;
        height: auto !important;
        min-height: 280px;
    }

    .erp_button_section,
    .erp_page_section,
    .erp_top_button_box,
    .erp_bottom_button_wrapper,
    .erp_bottom_button_box {
        width: 100% !important;
        height: auto !important;
        min-height: 60px;
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }

    .erp_top_button,
    .erp_bottom_button,
    .erp_bottom_button2,
    .erp_bottom_button_title {
        width: 100% !important;
        min-height: 40px;
        height: auto !important;
    }

    .content > article > section,
    .content > article > section > section {
        width: 100% !important;
        height: auto !important;
        min-height: 160px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    section.inputContainer,
    .itemListCon,
    #report_control_menu,
    #report_output_menu {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    #report_control_menu > article,
    #report_output_menu > article,
    main .content > section > article {
        width: 100% !important;
        height: auto !important;
        min-height: 160px;
    }

    #month_and_period_radio_container label {
        width: 100% !important;
        height: auto !important;
        min-height: 42px;
        justify-content: flex-start;
    }

    #report_control_menu > article > section,
    #report_control_menu > #search_cond_input_container > section {
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    #period_select_con,
    #month_select_con,
    #season_select_con {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    #period_select_con > input,
    #search_period_select_container c-select,
    #search_period_select_container .year_box,
    #search_period_select_container .month_box {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
    }

    #report_output_container {
        width: 100% !important;
        height: auto !important;
        max-height: 520px;
        overflow: auto !important;
    }

    .roc_row {
        min-width: 720px;
    }

    /* =====================================================
       10. Data List Page
    ===================================================== */
    .data_list_box {
        width: 100% !important;
        height: auto !important;
        min-height: 420px;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .data_list_box > div,
    .scrollCon,
    .scrollCon2,
    .scrollCon3 {
        width: 100% !important;
        height: auto !important;
        max-height: 320px;
        overflow: auto !important;
    }

    .history_table {
        min-width: 560px;
    }

    /* =====================================================
       11. Popup Common
    ===================================================== */
    .popupBg,
    .popup_bg,
    .top_popup_bg,
    .aim_popup_bg {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        padding: 12px;
        overflow-y: auto;
        align-items: flex-start !important;
        justify-content: center !important;
        z-index: 300;
    }

    .popupBg > article,
    .popup_window,
    .top_popup_window,
    .aim_popup {
        width: 100% !important;
        max-width: 560px;
        height: auto !important;
        min-height: 240px;
        margin: 24px auto !important;
        border-radius: 12px;
    }

    .pContent,
    .popup_content,
    .top_popup_content_box,
    .top_popup_content,
    .aim_popup_body {
        width: 100% !important;
        height: auto !important;
        min-height: 160px;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
        padding: 12px;
    }

    .pBtnCon,
    .popup_foot,
    .popup-foot {
        width: 100%;
        height: auto !important;
        min-height: 48px;
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .pBtnCon button,
    .popup_cancel,
    .top_popup_cancel,
    .submit,
    .closeBtn {
        min-width: 96px;
        height: 38px;
        font-size: 13px;
    }

    .aim_popup_header {
        height: auto !important;
        min-height: 50px;
        padding: 10px 12px;
    }

    .aim_popup_header_title {
        font-size: 18px;
    }

    .aim_popup_body_inputWrapper,
    .aim_popup_body_submitWrapper {
        width: 100% !important;
        height: auto !important;
    }

    .aim_popup_body input,
    .popup_input,
    .popup_textarea {
        width: 100% !important;
    }

    /* =====================================================
       12. Tables / Custom Select / Charts
    ===================================================== */
    table {
        min-width: 560px;
    }

    .table,
    .tableCon,
    .table_wrapper,
    .scrollTest,
    .grid_table,
    .chart_box,
    .graph_box {
        width: 100% !important;
        overflow-x: auto !important;
    }

    c-select {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
    }

    c-select .selBox,
    c-select .selList {
        width: 100% !important;
    }

    c-select .selList {
        max-height: 220px;
        overflow-y: auto;
        z-index: 50;
    }

    canvas {
        max-width: 100%;
    }

    /* =====================================================
       13. Demo Watermark
    ===================================================== */
    #ultra_popup {
        position: fixed !important;
        pointer-events: none;
    }

    #ultra_popup::before {
        font-size: clamp(42px, 14vw, 120px) !important;
        line-height: 1.1;
        text-align: center;
        letter-spacing: 2px !important;
    }
}

/* =========================================================
   Small Mobile Patch
========================================================= */
@media screen and (max-width: 480px) {
    *:not(footer *) {
        font-size: 12px;
    }

    aside {
        padding: 10px;
    }

    aside #mainLogo {
        width: 98px;
    }

    aside li {
        height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }

    aside li img {
        width: 16px;
        height: 16px;
    }

    aside #myNowData {
        grid-template-columns: 1fr;
    }

    aside #header_time {
        font-size: 17px !important;
    }

    main {
        padding: 10px;
    }

    main > header #name {
        font-size: 13px;
    }

    main .content,
    .content {
        gap: 10px;
    }

    main .content > article,
    main .content > section,
    .content > article,
    .content > section {
        min-height: 160px;
    }

    article > header,
    article.bc > *:nth-child(1),
    .pHead {
        min-height: 38px;
        padding: 9px 10px;
        font-size: 14px;
    }

    .checkBoxCon,
    .checkBoxCon1 {
        padding: 10px;
        min-height: 120px;
    }

    .checkBoxCon > div,
    .checkBoxCon1 > div,
    .checkBoxCon > .control,
    .checkBoxCon1 > .control {
        width: 100%;
        min-height: 70px;
    }

    .powerImg,
    .sensorImg,
    .simulImg {
        width: 50px !important;
    }

    #is_cctv_con {
        grid-template-columns: 1fr;
    }

    .prodHead {
        max-width: 100%;
        min-height: 110px;
    }

    .simul_box img {
        height: 48px !important;
    }

    .item {
        min-height: 44px;
        transform: scale(0.62);
    }

    article.nl > canvas,
    #prodChart,
    #workerChart,
    #faultRateChart,
    #pChart,
    #fChart,
    .qualityChartCon canvas,
    .qualityCon canvas,
    .visionCon canvas {
        height: 210px !important;
    }

    .blackRow,
    .mi_row,
    .mi_row_b1,
    .wRow,
    .npw_row,
    .ftHead,
    .ftRow,
    .roc_row {
        min-width: 520px;
    }

    .history_table,
    table {
        min-width: 520px;
    }

    .popupBg > article,
    .popup_window,
    .top_popup_window,
    .aim_popup {
        margin: 10px auto !important;
        max-width: 100%;
    }

    .pBtnCon button,
    .popup_cancel,
    .top_popup_cancel,
    .submit,
    .closeBtn {
        width: 100%;
        min-width: 0;
    }

    #ultra_popup::before {
        font-size: clamp(44px, 15vw, 120px);
        text-align: center;
        letter-spacing: 2px;
    }
}