/* static/css/factory3_io_style.css */

/* ================================================
   [옵션 설정] 글로벌 CSS 변수
   ================================================ */
:root {
    /* 
      [제목 좌측 여백 옵션]
      '입출고 대장', '실재고 및 ERP 대조' 제목의 좌측 여백을 조절합니다.
      추후 원하는 간격으로 px 값을 변경해 사용하세요. (예: 4px, 12px, 20px 등)
    */
    --panel-title-left-offset: 12px;
}

/* ================================================
   전체 래퍼
   ================================================ */
.f3io-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
}

/* (구 .f3io-header/.f3io-date-controls 등 자체 헤더 CSS 는 gf3-* 공통
   헤더로 대체된 뒤 참조하는 HTML 이 없어 제거했습니다 — 2026-08-01) */

/* 모바일 전용 새로고침(동기화) 버튼 — '입출고 대장' 제목 오른쪽.
   기본은 숨김, 640px 이하 + 마스터 권한(JS 가 .f3io-msync-on 부여)에서만 표시 */
.f3io-mobile-sync-btn {
    display: none;
    background: #f2f2f7;
    border: none;
    border-radius: 8px;
    padding: 4px 8px;
    margin-left: 8px;
    color: #1d1d1f;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.f3io-mobile-sync-btn .material-symbols-outlined { font-size: 18px; display: block; }
.f3io-mobile-sync-btn:active { background: #e5e5ea; }

/* ================================================
   3패널 바깥 컨테이너
   ================================================ */
.f3io-panels-outer {
    display: flex;
    gap: 16px; 
    align-items: stretch;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* 개별 패널 (독립된 박스) */
.f3io-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: #f7f8fa;
    border: 1px solid #e5e5ea; 
    border-radius: 12px;       
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

/* 패널 3.5 : 5 : 1.5 비율 적용 */
.f3io-panel-left  { flex: 3.5; }
.f3io-panel-mid   { flex: 5; }
.f3io-panel-right { flex: 1.5; }

/* ================================================
   스크롤 영역
   ================================================ */
.f3io-scroll-area {
    position: relative;
    height: 308px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.f3io-scroll-area::-webkit-scrollbar { display: none; }

/* ================================================
   글래스 커서
   ================================================ */
.f3io-cursor {
    position: absolute;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.35);
    /* 바깥 그림자는 뺐습니다 — 고른 칸 주변이 단차 진 것처럼 허옇게
       보였습니다 (2026-08-17, 1공장 유리 커서 페이지들과 같은 수정) */
    box-shadow: inset 0 0 8px rgba(255,255,255,0.5);
    border-radius: 6px;
    z-index: 8;
    opacity: 0;
    transition:
        top 0.12s cubic-bezier(0.23, 1, 0.32, 1),
        left 0.12s cubic-bezier(0.23, 1, 0.32, 1),
        width 0.10s ease-out,
        height 0.10s ease-out,
        opacity 0.10s ease-out;
}
.f3io-cursor.active { opacity: 1; }

/* ================================================
   테이블
   ================================================ */
.f3io-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.f3io-table th {
    width: auto;
}

.f3io-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f7f8fa;
}

/* ─ 1레벨 헤더 행 ─ */
.f3io-thead-lv1 th {
    padding: 10px 4px 6px;
    font-size: 13px;
    font-weight: 800;
    color: #1d1d1f;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    background: #f7f8fa;
    white-space: nowrap;
    height: 44px; 
    box-sizing: border-box;
}

.f3io-top-group-th {
    background: #f7f8fa !important; 
    color: #1d1d1f !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    letter-spacing: -0.2px;
    height: 44px !important; 
    box-sizing: border-box;
}

/* ─ 2레벨 헤더 행 ─ */
.f3io-thead-lv2 th {
    padding: 7px 2px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #636366;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    background: #f7f8fa;
    white-space: nowrap;
    height: 44px; 
    box-sizing: border-box;
}

/* ─ 다중 줄바꿈용 특수 헤더 클래스 ─ */
.f3io-multiline-th {
    white-space: normal !important;
    font-size: 11px !important;
    line-height: 1.2;
    padding: 4px 2px !important;
}

/* ─ 데이터 셀 ─ */
.f3io-table td {
    padding: 9px 3px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
    color: #1d1d1f;
    transition: background 0.12s;
    height: 44px; 
    box-sizing: border-box;
}

/* ─ 날짜 헤더 & 셀 (너비 확장 130px) ─ */
.f3io-date-th {
    position: sticky;
    left: 0;
    background: #f7f8fa !important;
    z-index: 11;
    text-align: center;
    min-width: 80px !important;
    width: 80px !important;
    border-right: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    font-size: 13px;
    font-weight: 800;
    color: #1d1d1f;
    box-sizing: border-box;
    white-space: nowrap;
}

.f3io-date-th[rowspan] {
    vertical-align: middle;
}

.f3io-date-td {
    position: sticky;
    left: 0;
    background: #f7f8fa;
    z-index: 5;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid #e0e0e0 !important;
    font-size: 12px;
    font-weight: 700;
    min-width: 80px !important;
    width: 80px !important;
    box-sizing: border-box;
    cursor: pointer;
}

.f3io-responsive-date {
    display: none;
}

/* ─ 그룹 헤더 ─ */
.f3io-group-th {
    font-size: 12px;
    font-weight: 800;
    color: #1d1d1f;
    padding: 10px 4px 6px;
    background: #f7f8fa;
}

.f3io-sep {
    border-left: 1px solid #e0e0e0 !important;
}

/* ─ 합계열 기본 강조 ─ */
.f3io-sum-col, td.f3io-sum-col {
    font-weight: 800 !important;
    color: #007aff !important; 
    background: rgba(0, 122, 255, 0.04) !important; 
}

/* ─ 오늘/선택 행 ─ */
.f3io-row-today td { background: #e8f4fd !important; }
.f3io-row-today .f3io-date-td { background: #bbdefb !important; }
.f3io-selected-row td { background: #f4f4f8 !important; }
.f3io-selected-row .f3io-date-td { background: #ebebf0 !important; }
.f3io-row-today.f3io-selected-row td { background: #daedf9 !important; }
.f3io-row-today.f3io-selected-row .f3io-date-td { background: #bbd8f0 !important; }

/* ─ 데이터 불일치 경고 (매체합계 != 용지합계) ─ */
td.f3io-sum-col.f3io-sum-mismatch {
    background: rgba(255, 59, 48, 0.12) !important;
    color: #ff3b30 !important; 
}

/* 활성화된 헤더 */
.f3io-thead-lv1 th.f3io-header-active,
.f3io-thead-lv2 th.f3io-header-active,
.f3io-top-group-th.f3io-header-active {
    background-color: rgba(255, 160, 50, 0.18) !important;
    color: #c05a00 !important;
}

/* 겹침 순서(낮은 값이 아래) — 날짜칸 5 · 유리 커서 8 · 본문 강조 9 · thead 10 · 날짜 헤더 11
   본문 칸은 반드시 9 이하로 둡니다. 10 이면 thead 와 값이 같아 문서 순서상
   뒤에 오는 tbody 가 이기고, 스크롤할 때 칸이 헤더 위로 비쳐 보입니다. */
.f3io-selected-cell {
    position: relative;
    z-index: 9;
    font-weight: 900 !important;
    color: #000 !important;
}

/* ─ 색상/호버 ─ */
.f3io-sat { color: #007aff !important; }
.f3io-sun { color: #ff3b30 !important; }
.f3io-empty { color: #c7c7cc; font-weight: 400; }
.f3io-negative { color: #ff3b30; }
.f3io-table tbody tr:not(.f3io-selected-row):hover td { background: #f7f7fa; }
.f3io-data-cell { cursor: pointer; }

/* ================================================
   반응형
   ================================================ */
/* ※ 여기 있던 1100px 이하 '패널 세로 쌓기' 규칙은 제거했습니다 (2026-08-06).
     그 폭은 이제 아래 1219px 고정창 블록이 통째로 받습니다 — 쌓기 규칙을
     남겨 두면 전 항목이 뒤에서 덮이는 죽은 코드가 됩니다. */

/* ※ 여기 있던 편집 가능 셀·인라인 입력칸(.f3io-editable-cell ·
     .f3io-in-input · .edit-mode …) 규칙은 2026-08-17 에 걷어냈습니다.
     입고 입력이 1공장 입고 페이지로 옮겨 가면서 이 페이지의 수정모드가
     통째로 사라져 붙을 자리가 없어졌기 때문입니다. */

/* =================================================
   메모 기능 (우측 상단 빨간색 삼각형)
   ================================================= */
/* z-index 를 준 셀은 자체 쌓임 맥락이 되어, 안쪽 삼각형이 아무리 높은 값을
   가져도 셀 밖(= thead 위)으로 튀어나오지 못합니다. 9 는 유리 커서(8) 위,
   thead(10) 아래입니다. */
.f3io-has-memo {
    position: relative;
    z-index: 9;
    background-color: rgba(255, 59, 48, 0.05) !important;
}

.f3io-has-memo::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-top: 8px solid #ff3b30;
    border-left: 8px solid transparent;
    z-index: 1;
}

/* =================================================================
   모바일(좁은 스마트폰) 반응형
   ================================================================= */
@media (max-width: 640px) {
    body {
        zoom: 100%;
        padding: 10px;
    }

    .gf3-wrapper {
        gap: 10px;
        padding: 8px 0;
    }

    .gf3-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .gf3-title-wrap {
        justify-content: center;
        margin-left: 0;
    }

    .gf3-main-title {
        font-size: 16px;
    }

    /* ☰(.gf3-hamburger)의 좁은 화면 크기 조절은 2026-08-23 에 지웠습니다
       — 3선 자체를 뺐습니다 (common_header.css 의 제목 알약 블록 참고) */

    .gf3-dropdown {
        left: 50%;
        transform: translateX(-50%);
        width: min(260px, calc(100vw - 40px));
    }
    .gf3-submenu {
        left: auto;
        right: -100%;
        margin-left: 0;
    }

    .gf3-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .gf3-nav-group {
        order: 1;
        flex: 1 1 100%;
        justify-content: center;
    }

    .gf3-cal-wrap {
        margin: 0 8px;
    }

    .gf3-date-text {
        font-size: 15px;
        min-width: 120px;
    }

    .gf3-action-btn {
        order: 2;
        flex: 1 1 auto;
        justify-content: center;
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .flatpickr-calendar {
        margin-left: 0 !important;
        left: 50% !important;
        transform: translateX(-50%);
    }

    .f3io-panels-outer {
        gap: 10px;
    }

    /* (2026-08 정리) 여기 있던 .f3io-scroll-area 높이 360px 와 날짜 열
       min-width 62px 규칙을 걷어냈습니다 — 뒤의 1219px 블록이 height:auto
       !important 와 display:none !important 로 항상 덮어써 닿을 수 없는
       규칙이었습니다. */

    .f3io-table td {
        font-size: 12px;
        padding: 7px 2px;
        height: 38px;
    }

    .f3io-thead-lv1 th,
    .f3io-thead-lv2 th,
    .f3io-top-group-th,
    .f3io-group-th {
        font-size: 11px;
        height: 38px !important;
    }

    .f3io-multiline-th {
        font-size: 10px !important;
    }
}

@media (max-width: 400px) {
    .gf3-action-btn {
        padding: 8px;
    }

    #gf3IoExcelBtn {
        font-size: 0;
    }
    #gf3IoExcelBtn span {
        font-size: 16px !important;
        margin-right: 0 !important;
    }

    .gf3-date-text {
        min-width: 100px;
        font-size: 14px;
    }

    .f3io-date-th,
    .f3io-date-td {
        min-width: 54px !important;
        width: 54px !important;
    }
}

/* ================================================
   2층식 레이아웃 & 토글 스위치 공통 스타일
   ================================================ */
.f3io-floor-container {
    background: #f7f8fa;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    border: 1px solid #dcdce4;
    margin-bottom: 0;
}

/* 패널 헤더 그리드 */
.panel-header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

.panel-header-grid .header-left,
.panel-header-grid .header-center,
.panel-header-grid .header-right {
    display: flex;
    align-items: center;
    height: 100%;
}

/* 좌측 영역에 설정한 여백 옵션 변수 적용 */
.panel-header-grid .header-left {
    justify-content: flex-start;
    padding-left: var(--panel-title-left-offset);
}

.panel-header-grid .header-center {
    justify-content: center;
}

.panel-header-grid .header-right {
    justify-content: flex-end;
    gap: 8px;
}

/* 제목 텍스트 스타일 */
.panel-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000 !important;
    letter-spacing: -0.3px;
    margin: 0;
}

.f3io-scroll-area.locked, .f3ct-scroll-area.locked {
    touch-action: none;
    overflow-y: hidden !important;
}

/* ================================================
   실재고 및 ERP 대조 (2층) 스타일 정의
   ================================================ */
.f3ct-panels-outer {
    display: flex;
    gap: 12px; 
    align-items: stretch;
    background: transparent;
    overflow-x: auto; 
    padding-bottom: 10px;
    width: 100%;
}

.f3ct-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f7f8fa;
    border: 1px solid #e5e5ea; 
    border-radius: 12px;       
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

/* 1번 패널 */
.f3ct-panel-1 { flex: 1.3; min-width: 240px; }

/* 2번 패널 */
.f3ct-panel-2 { flex: 0.9; min-width: 160px; }

/* 3, 4번 패널 */
.f3ct-panel-3 { flex: 1.05; min-width: 160px; }
.f3ct-panel-4 { flex: 1.05; min-width: 160px; }

/* 5번 패널 */
.f3ct-panel-5 { flex: 0.8; min-width: 140px; }

/* 6번 패널 */
.f3ct-panel-6 { flex: 0.33; min-width: 80px; }

.f3ct-scroll-area {
    position: relative;
    height: 294px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.f3ct-scroll-area::-webkit-scrollbar { display: none; }

.f3ct-cursor {
    position: absolute;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.3);
    /* 바깥 그림자는 뺐습니다 — 고른 칸 주변이 단차 진 것처럼 허옇게
       보였습니다 (2026-08-17, 1공장 유리 커서 페이지들과 같은 수정) */
    box-shadow: inset 0 0 4px rgba(255,255,255,0.4);
    border-radius: 6px;
    z-index: 5;
    opacity: 0;
    transition:
        top 0.12s cubic-bezier(0.23, 1, 0.32, 1),
        left 0.12s cubic-bezier(0.23, 1, 0.32, 1),
        width 0.10s ease-out,
        height 0.10s ease-out,
        opacity 0.10s ease-out;
}
.f3ct-cursor.active { opacity: 1; }

.f3ct-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.f3ct-table thead {
    position: sticky;
    top: 0;
    z-index: 100;
}

.f3ct-thead-lv1 th {
    position: sticky;
    top: 0; 
    z-index: 100;
    background: #f7f8fa;
    padding: 10px 2px 4px;
    font-size: 13px; font-weight: 800; color: #1d1d1f; text-align: center;
    border-bottom: 1px solid #e5e5ea; height: 38px; white-space: nowrap;
}

.f3ct-thead-lv2 th {
    position: sticky;
    top: 38px; 
    z-index: 100;
    background: #f7f8fa;
    padding: 6px 2px 8px;
    font-size: 11px; font-weight: 700; color: #636366; text-align: center;
    border-bottom: 1px solid #e5e5ea; height: 36px; white-space: nowrap;
}

.f3ct-date-th {
    position: sticky;
    top: 0; left: 0;
    z-index: 105 !important; 
    background: #f7f8fa !important;
    border-right: 1px solid #e5e5ea !important;
    border-bottom: 1px solid #e5e5ea !important;
    width: 82px; min-width: 82px; max-width: 82px;
}

.f3ct-date-td {
    position: sticky; left: 0; z-index: 90;
    background: #f7f8fa;
    text-align: center; width: 82px; min-width: 82px; max-width: 82px;
    border-right: 1px solid #e5e5ea !important; border-bottom: 1px solid #f2f2f7;
    font-size: 12px; font-weight: 600; padding: 9px 3px; white-space: nowrap;
    height: 44px; box-sizing: border-box;
}

.f3ct-data-cell {
    padding: 9px 2px; font-size: 12.5px; font-weight: 600;
    text-align: center; border-bottom: 1px solid #f2f2f7; color: #1d1d1f;
    height: 44px; box-sizing: border-box; cursor: pointer; transition: background 0.1s;
}

.f3ct-sum-th { color: #007aff !important; }
.f3ct-sum-col { font-weight: 800 !important; color: #007aff !important; background: rgba(0, 122, 255, 0.02) !important; }

.f3ct-empty { color: #c7c7cc; font-weight: 400; }
.f3ct-negative { color: #ff3b30; font-weight: 700; }

.f3ct-row-today td { background: #f2f9ff !important; }
.f3ct-row-today .f3ct-date-td { background: #e1f0ff !important; }
.f3ct-selected-row td { background: #eceff4 !important; }
.f3ct-selected-row .f3ct-date-td { background: #e5e5ea !important; }
.f3ct-row-today.f3ct-selected-row td { background: #eaf5ff !important; }
.f3ct-row-today.f3ct-selected-row .f3ct-date-td { background: #d0e7ff !important; }

.f3ct-thead-lv1 th.f3ct-header-active,
.f3ct-thead-lv2 th.f3ct-header-active,
.f3ct-group-th.f3ct-header-active {
    background-color: #ffe8cc !important; 
    color: #d35400 !important;
}

.f3ct-sat { color: #007aff !important; }
.f3ct-sun { color: #ff3b30 !important; }
.f3ct-selected-cell { font-weight: 900 !important; color: #000000 !important; position: relative; z-index: 10; }
.f3ct-table tbody tr:hover td { background: #fafafa; }

.style-disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    pointer-events: none !important; 
    box-shadow: none !important;
}

/* ※ 2층의 1100px 이하 쌓기 규칙도 같은 이유로 제거 (2026-08-06) —
     아래 1219px 고정창 블록이 대신합니다. */

/* PDF 저장 버튼 · 공지사항 롤링 티커 · 상세/편집 모달 스타일은
   css/common_header.css 로 이전되었습니다 (1공장과 공유). */

/* ════════════════════════════════════════════════════════════════
   재고종합 모바일 재구성 (2026-08-01) — 640px 이하
   "날짜 고정 + 가로 스와이프" (스프레드시트 고정창 방식)
   ────────────────────────────────────────────────────────────────
   기존 모바일은 1·2층의 패널을 전부 세로로 쌓고 각 패널을 화면 폭에
   우겨넣어, 매체별 사용량(8열)의 글자가 겹치고 같은 날짜를 비교하려면
   위아래로 한참 오가야 했습니다. 이제 각 층을 하나의 고정창으로:
     · 층 전체가 세로+가로를 함께 스크롤하는 하나의 창(62vh)
     · 날짜 열은 왼쪽에, 열 제목은 위에 고정 (엑셀 틀고정과 동일)
     · 열 폭은 자연 폭 — 우겨넣지 않으니 글자 겹침이 사라짐
   sticky 가 층 창에 붙으려면 스크롤 조상이 그 창 하나여야 하므로,
   중간 세로 스크롤 상자(.f3io/.f3ct-scroll-area)를 무력화합니다.
   이 블록은 1100px 스택 규칙(위쪽)보다 뒤에 있어 우선합니다.

   [2026-08-06 아이패드 확장] 경계를 640 → 1219px 로 넓혔습니다.
   641~1100px(아이패드 세로 등)은 패널을 세로로 쌓는 옛 규칙이 받았는데,
   패널마다 제 창(308px) 안에서 따로 굴러 같은 날짜를 위아래로 오가며
   맞춰 봐야 했고, 1101~1219px(아이패드 가로)은 데스크톱 3패널을 그 폭에
   우겨넣었습니다. 이제 폰과 같은 고정창이 받습니다 — 아이패드 폭이면
   층의 자연 폭 대부분이 한 화면에 들어와 스와이프도 거의 없습니다.
   폰과 다른 점(하루 필터 일수 · 글자 크기 · 하단 독 유무)은
   factory3_io_mobile.js 와 아래 640px 블록이 따로 맡습니다. */
@media (max-width: 1219px) {
    /* ── 층 = 하나의 스크롤 창 ──
       모바일은 3일치만 보이므로(JS 필터) 높이는 내용만큼만 —
       세로는 페이지 스크롤에 맡기고 가로 스와이프만 창이 맡습니다. */
    .f3io-panels-outer,
    .f3ct-panels-outer {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        height: auto;
        padding-bottom: 0;
        /* 바깥 틀 — 열 제목·날짜 레일까지 감싸는 최외곽선입니다. 틀을
           패널(카드)에 두면 머리글이 틀 밖에 떠 보여서, 1공장 재고실사
           모바일과 같은 방식으로 스크롤 창 자체에 그립니다. 창의 테두리는
           내용과 함께 흐르지 않아 사방을 항상 감쌉니다 (2026-08-13). */
        border: 1px solid #e5e5ea;
        border-radius: 12px;
        background: #f7f8fa;
        /* 가로 스크롤이 끝에 닿은 뒤 더 끌면 레일·머리글까지 통째로
           딸려 갔다 튕겨 돌아오는 iOS 고무줄 반동을 끕니다 (2026-08-13) */
        overscroll-behavior-x: none;
    }

    /* 과거 DB 잠금(.locked)의 touch-action:none 이 모바일에서는
       표를 터치하는 순간 모든 방향의 스크롤을 죽입니다(2026-08-01
       실기기 확인). 모바일 창 스크롤엔 잠금 개념이 없으므로 해제. */
    .f3io-scroll-area.locked, .f3ct-scroll-area.locked {
        touch-action: auto !important;
    }

    /* 패널: 별개 카드가 아니라 한 판의 구획 — 이어붙입니다.
       폭 배분은 데스크톱과 같은 비율(.f3io-panel-left 3.5 : mid 5 : right 1.5,
       2층은 .f3ct-panel-1~6)에 그대로 맡기고, 여기서는 min-width 만
       '자연 폭'(max-content)으로 바꿔 둡니다. 그러면 한 줄로 두 가지가
       동시에 지켜집니다.
         · 층이 화면보다 넓으면 → 전부 자연 폭에서 멈춤 = 가로 스와이프
           (열을 우겨넣지 않는다는 이 블록의 목적 그대로)
         · 층이 화면보다 좁으면 → 남는 폭을 비율대로 나눠 채움

       [2026-08-13] 예전에는 flex:none + width:auto 라 남는 폭이 있어도
       표가 자연 폭에서 멈췄습니다. 창이 930~1219px(최대화하지 않은 노트북
       창·아이패드 가로)이면 표 오른쪽에 빈칸이 남아, 카드만 넓고 표는
       왼쪽에 몰린 모양이 됐습니다 — 1219px 에서 1층 289px · 2층 231px.
       min-width:0 도 같이 걷습니다. 그 값은 2층 패널의 px min-width
       (240/160/140px 등 — 데스크톱용)를 좁은 화면에서 무력화하려던
       것인데, max-content 가 그 자리를 대신하면서 같은 일을 합니다. */
    .f3io-panel, .f3ct-panel {
        min-width: max-content;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        background: transparent;
    }
    .f3io-panel + .f3io-panel .f3io-table,
    .f3ct-panel + .f3ct-panel .f3ct-table { border-left: 2px solid #e5e5ea; }

    /* 중간 세로 스크롤 상자 무력화 (locked 상태 포함) */
    .f3io-scroll-area, .f3io-scroll-area.locked,
    .f3ct-scroll-area, .f3ct-scroll-area.locked {
        height: auto !important;
        overflow: visible !important;
    }

    /* 표는 제 패널을 꽉 채웁니다. 패널이 자연 폭 아래로는 줄지 않으므로
       (위 min-width:max-content) 100% 라 해도 열이 우겨넣어지는 일은
       없습니다 — 남는 폭이 있을 때만 열이 함께 넓어집니다. */
    .f3io-table, .f3ct-table {
        table-layout: auto;
        width: 100%;
    }
    .f3io-leaf-th, .f3io-table td { min-width: 52px; }
    .f3ct-leaf-th, .f3ct-data-cell { min-width: 52px; }
    .f3io-multiline-th { font-size: 11px !important; }

    /* 원본 날짜 열은 전부 숨깁니다. 표 안의 날짜 열은 sticky 여도
       자기 표(패널) 밖으로 나갈 수 없어, 다른 패널까지 스크롤하면
       밀려납니다. 대신 factory3_io_mobile.js 가 층 창의 맨 앞에
       전폭 sticky '날짜 레일'(.f3iom-rail)을 세웁니다. */
    .f3io-panel-left .f3io-date-th,
    .f3io-panel-left .f3io-date-td,
    .f3ct-date-th,
    .f3ct-date-td { display: none !important; }
    .f3io-responsive-date { display: none !important; }

    /* ── 날짜 레일 ── */
    .f3iom-rail {
        position: sticky; left: 0; z-index: 200;
        flex: none;
        width: 64px;
        background: #f7f8fa;
        border-right: 2px solid #e5e5ea;
        align-self: flex-start;
    }
    .f3iom-rail-head {
        position: sticky; top: 0; z-index: 210;
        background: #f7f8fa;
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 800; color: #1d1d1f;
        border-bottom: 1px solid #e0e0e0;
        box-sizing: border-box;
    }
    .f3iom-rail-cell {
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 600; color: #1d1d1f;
        border-bottom: 1px solid #f2f2f7;
        box-sizing: border-box;
        background: #f7f8fa;
        white-space: nowrap;
    }
    .f3iom-rail-cell.f3iom-sat { color: #007aff; }
    .f3iom-rail-cell.f3iom-sun { color: #ff3b30; }
    .f3iom-rail-cell.f3iom-today { background: #e1f0ff; }
    .f3iom-rail-cell.f3iom-selected { background: #e5e5ea; }

    /* 가로로 밀려 있는 동안만 레일 오른쪽에 그림자 — "레일 밑으로 열이
       지나가고 있다"는 신호입니다. 제자리(스크롤 0)에서는 그림자가 없어야
       표가 레일부터 시작한다는 것이 그대로 보입니다. 클래스는
       factory3_io_mobile.js 가 창의 scrollLeft 를 보고 켜고 끕니다. */
    .f3iom-rail { transition: box-shadow 0.15s ease-out; }
    .f3iom-scrolled > .f3iom-rail {
        box-shadow: 6px 0 10px -4px rgba(0, 0, 0, 0.16);
    }

    /* ※ 여기 있던 `.panel-header-grid .header-right { display: none }` 은
         걷어냈습니다 (2026-08-06). 그 자리에 있던 '스크롤 ON/OFF' 토글은
         진작 없어졌고, 지금 그 칸에 있는 것은 2층의 DB 갱신 시각 알약
         (#f3ctDbStamp) 입니다 — "ERP 쪽 숫자가 언제까지 들어온 것인가"는
         화면이 좁다고 덜 중요해지지 않습니다. 폭이 모자라면 아래처럼
         아랫줄로 접습니다.

         제목줄: 그리드(1fr auto 1fr) → 줄바꿈 되는 한 줄.
         가운데 칸은 비어 있으므로 접습니다. */
    .panel-header-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .panel-header-grid .header-center { display: none; }
    .panel-header-grid .header-left { flex: 1 1 auto; min-width: 0; }
    .panel-header-grid .header-right {
        flex: 0 1 auto;
        margin-left: auto;
        justify-content: flex-end;
    }

    /* ── '최근 1달 보기'를 편 동안 ──
       며칠 필터만 걷으면(모바일의 펼침 — factory3_io_mobile.js) 한 달치가
       페이지를 길게 늘여, 열 제목은 위로 사라지고 [접기]는 바닥까지
       내려가야 나왔습니다. 펴는 동안만 층 창에 세로 스크롤을 주면
         · 열 제목과 날짜 레일이 창의 위·왼쪽에 붙어 따라오고
           (sticky 는 이미 걸려 있습니다 — 세로 스크롤 조상이 층 창이
            되면서 그제야 일합니다)
         · [접기] 버튼은 창 바로 아래라 늘 화면에 남습니다 (2026-08-13).
       접힌 상태(3일/7일)는 창보다 내용이 작아 이 규칙이 있어도 아무
       일도 하지 않지만, 페이지 스크롤과 헷갈리지 않게 편 동안만 겁니다. */
    .f3io-floor-container.is-expanded .f3io-panels-outer,
    .f3io-floor-container.is-expanded .f3ct-panels-outer {
        overflow-y: auto;
        max-height: 62vh;
        /* 세로도 창 안 스크롤이 되므로 위·아래 끝의 고무줄 반동을 같이 끕니다 */
        overscroll-behavior: none;
    }

    /* 편 동안의 [접기] 버튼 — 창 아래 제자리에만 두면 폰의 하단 독 뒤에
       깔려 보이지 않습니다 (2026-08-13 사용자 제보). 데스크톱(1220px~
       블록)과 같은 붙박이로 화면 아래에 붙어 따라다니게 하고, 폰에서는
       하단 독(날짜 줄) 바로 위로 띄웁니다 — 그 값은 아래 640px 블록이
       덮어씁니다. z 220 은 창의 최고값(날짜 레일 머리 210) 위 — 떠 있는
       동안 버튼이 층 창 위로 지나가기 때문입니다. */
    .f3io-floor-container.is-expanded .mk-expand-btn {
        position: sticky;
        bottom: 12px;
        z-index: 220;
    }
}

/* ── 폰(640px 이하) 전용 잔여분 ──
   위 고정창 블록이 1219px 까지 넓어지면서, 폰에서만 맞는 규칙은 여기
   남습니다. 태블릿(641~1219px)은 데스크톱 공통 헤더가 그대로 있으므로
   제목 옆 동기화 버튼이 필요 없습니다(헤더의 sync 버튼이 삽니다). */
@media (max-width: 640px) {
    /* 모바일 새로고침(동기화) 버튼 — 마스터 권한이면 제목 옆에 표시 */
    .f3io-mobile-sync-btn.f3io-msync-on { display: inline-flex; }

    /* ── 1층 제목줄이 한 줄에 들어가도록 조금씩 줄입니다 (2026-08-13) ──
       '최근 DB 갱신 시간' 알약이 2층에서 여기로 오면서, 마스터로 보면
       제목줄이 이만큼을 요구하게 됐습니다.
         왼쪽 여백 12 + 제목 86 + 버튼 여백 8 + 동기화 버튼 34
         + 사이 간격 6 + 알약 159 = 305px
       아이폰(375px)은 쓸 수 있는 폭이 314px 라 들어가지만, 갤럭시(360px)는
       299px 뿐이라 6px 이 모자라 알약이 아랫줄로 밀려 났습니다. 문구와
       자리는 다른 페이지와 맞춘 값이라 건드리지 않고, 대신 여백만 14px
       걷어 291px 로 맞춥니다(갤럭시에서 8px 여유).

       마스터가 아니면 동기화 버튼이 없어 원래도 넉넉합니다 — 이 규칙은
       그때도 해가 없습니다(알약이 조금 좁아질 뿐).

       ※ 320px(아이폰 SE 1세대급)은 쓸 수 있는 폭이 259px 라 여기까지
         줄여도 두 줄입니다. 그 폭이면 이 표 자체가 가로로 밀어 보는
         크기라 더 쫓지 않았습니다. */
    .f3io-mobile-sync-btn { margin-left: 4px; padding: 4px 6px; }
    .panel-header-grid .mk-dbstamp { padding: 3px 6px; }

    /* 편 동안의 [접기] — 폰은 화면 아래에 하단 독(날짜 줄 + 버튼 줄,
       common_header.css 의 .mkm-dock: 아래 10px + 높이 약 100px)이 떠
       있으므로, 그 바로 위에 붙어 따라다닙니다 (2026-08-13) */
    .f3io-floor-container.is-expanded .mk-expand-btn {
        bottom: calc(120px + env(safe-area-inset-bottom));
    }
}

/* ── 태블릿(641~1219px) 전용 ──
   PC 용 115% 확대(common_header.css)를 풀어 자연 폭 표가 한 화면에 더
   들어오게 합니다. 폰(640px 이하)은 공통 헤더 CSS 가 이미 풀어 둡니다. */
@media (min-width: 641px) and (max-width: 1219px) {
    body { zoom: 100%; }
}

/* ── 불러오는 중 ────────────────────────────────────────────────
   표를 지우지 않습니다. 예전에는 세 표를 '불러오는 중...' 한 줄로 바꿨는데,
   그 사이 카드 높이가 무너졌다 다시 서면서 화면 전체가 출렁였습니다.
   자리는 그대로 두고 값만 옅게 덮으면 아무것도 움직이지 않습니다.

   열 머리글은 같은 표 안에 있으므로 tbody 의 칸만 골라 덮습니다.
   opacity 가 아니라 color 인 이유는 재고실사 페이지와 같습니다 — 칸에 걸린
   테두리까지 옅어지면 표 선이 중간에서 끊긴 것처럼 보입니다. */
.f3io-scroll-area tbody td,
.f3ct-scroll-area tbody td { transition: color 0.14s ease-out; }

.f3io-wrapper.is-loading .f3io-scroll-area tbody td,
.f3io-wrapper.is-loading .f3ct-scroll-area tbody td { color: #c7c7cc !important; }

/* ════════════════════════════════════════════════════════════════
   최근 1달 보기 (2026-08-04)
   ────────────────────────────────────────────────────────────────
   층마다 패널 아래에 버튼 하나. 누르면 패널 안의 작은 창(1층 308px ·
   2층 294px)을 풀어 불러온 날짜를 통째로 폅니다.

   예전에는 제목줄 오른쪽에 '스크롤 ON/OFF' 스위치가 있었고, 켜면 패널
   안에서 굴리며 맨 위에 닿을 때마다 과거를 더 불러왔습니다. 그 창은
     · 페이지 스크롤과 싸우고(모바일에서 touch-action:none 로 잠가야 했음)
     · 스위치를 켜기 전에는 아래 날짜가 있는지조차 보이지 않았습니다.
   펼침 하나로 바꾸면 둘 다 없어집니다. 한 달보다 과거는 헤더 날짜를
   옮기면 그 날짜 기준으로 다시 불러옵니다.

   생김새는 1공장 나라사랑·전자신문의 '전체 보기' 버튼과 같습니다.
   (지금은 3공장만 씁니다 — 나머지 페이지도 옮기게 되면 공통으로 승격)
   ════════════════════════════════════════════════════════════════ */
/* ※ 펼침 버튼의 모양(.f3io-expand)이 여기 있었습니다. 2026-08-05, 페이지마다
     복사되던 같은 규칙을 css/common/common_expand_btn.css 의 .mk-expand-btn
     한 벌로 모았습니다. 아래 .is-expanded 규칙(무엇이 얼마나 펴지는지)만
     이 파일에 남습니다. */

/* ── 아래 펼침 규칙은 데스크톱(1220px~) 것입니다 ──
   1219px 이하(폰·태블릿)에서는 층 전체가 이미 하나의 창이라(위 고정창
   블록에서 .f3io-scroll-area 를 height:auto 로 풀어 둡니다) 창을 또 풀
   것이 없습니다. 폰·태블릿의 펼침은 '며칠 필터 해제'(factory3_io_mobile.js)
   + 편 동안 층 창에 세로 스크롤을 주는 규칙(위 1219px 블록 끝, 2026-08-13)
   입니다. 그래서 아래 규칙은 1220px 이상에만 겁니다. */
@media (min-width: 1220px) {
    /* 머리글은 펼쳐도 붙박이(sticky)를 유지합니다 — 한 달치를 내리다
       보면 어느 열이 어느 항목인지 알 수 없게 되기 때문입니다(1공장
       사용량 페이지와 같은 수정, 2026-08-10). 그러려면 머리글과 화면
       사이의 '자르는 조상'을 전부 풀어야 합니다 — 스크롤 창(한 축이
       hidden 이면 다른 축 visible 이 auto 로 승격돼 여전히 스크롤
       상자로 남음 · .locked 의 hidden 이 !important 라 여기도
       !important), 패널 카드(둥근 모서리 자르기), 2층의 패널 묶음
       (.f3ct-panels-outer 의 가로 스크롤)입니다. 예전에 붙박이를 뗐던
       것("머리글이 떠 버립니다")은 이 조상들을 안 풀어 붙박이가 조용히
       죽어 있던 현상입니다. 1220px 미만은 층 전체가 하나의 창이라
       원래부터 이 블록 밖입니다(위 설명 참고). */
    .f3io-floor-container.is-expanded .f3io-scroll-area,
    .f3io-floor-container.is-expanded .f3ct-scroll-area {
        height: auto;
        overflow-x: visible;
        overflow-y: visible !important;
    }

    .f3io-floor-container.is-expanded .f3io-panel,
    .f3io-floor-container.is-expanded .f3ct-panel {
        overflow: visible;
    }

    .f3io-floor-container.is-expanded .f3ct-panels-outer {
        overflow-x: visible;
    }

    /* 펼친 동안의 [접기] 버튼 — 화면 아래 끝(12px 위)에 붙어 스크롤을
       따라다니다, 맨 아래에 닿으면 제자리(표 아래)에 내려앉습니다.
       접으려고 한 달치를 끝까지 내려갈 필요가 없습니다
       (1공장 입고 페이지와 같은 부품, 2026-08-12). 1층·2층 두 버튼에
       같이 걸립니다 — 펼친 층의 버튼만 붙박이가 됩니다.
       z-index 110 은 표 붙박이의 최고값(2층 날짜 헤더 105) 바로 위 —
       떠 있는 동안 버튼이 표의 붙박이 날짜 열 위로 지나가기 때문입니다.
       1220px 미만(폰·태블릿)은 z 값 체계가 달라(날짜 레일 200·210) 위
       1219px 블록 끝에 같은 붙박이를 따로 겁니다 — 폰은 하단 독 위로
       띄우는 값을 640px 블록이 덮어씁니다 (2026-08-13). */
    .f3io-floor-container.is-expanded .mk-expand-btn {
        position: sticky;
        bottom: 12px;
        z-index: 110;
    }
}