/* factory1_jigo_inventory_style.css — 1공장 지고 재고 페이지 스타일
   ────────────────────────────────────────────────────────────────
   사용량 페이지(factory1_usage_style.css)의 표 규격을 그대로 따릅니다.
   두 페이지를 나란히 놓고 같은 자리에서 같은 품목을 읽기 위해서입니다.

   다른 점은 둘입니다.
     · 층(B5 / B6)이 위아래로 쌓입니다. 좌우 패널이 아닙니다.
       두 표 모두 날짜 열을 갖습니다. 세로로 떨어져 있어 아래 표에 날짜가
       없으면 읽을 수가 없습니다. (좌우로 붙은 사용량 페이지는 우측 패널의
       날짜 열을 뺐지만 여기는 사정이 다릅니다)
     · 조회 전용이 아니라 입력 화면이라, 입고 페이지(factory1_ipgo_style.css)의
       입력칸 · 변경분 표시 · 잠긴 행 스타일을 함께 가져왔습니다.

   .f1jg-*
   ──────────────────────────────────────────────────────────────── */

/* ================================================
   [옵션 설정] CSS 변수
   ================================================ */
:root {
    --panel-title-left-offset: 12px;

    /*
      [날짜 열 너비]
      사용량 페이지와 동일합니다. "7/26(일)" 이 한 줄에 편하게 들어갑니다.
    */
    --f1jg-date-col-width: 84px;

    /*
      [표 높이]
      계산식: 헤더 2줄(44px × 2 = 88px) + 행 높이 44px × 보고 싶은 일수
               5일 → 88 + 44 × 5 = 308px
               7일 → 88 + 44 × 7 = 396px

      두 층이 한 화면에 들어와야 위아래 비교가 되므로 5일치로 맞췄습니다.
      (사용량 페이지가 두 층을 쌓으면서 택한 값과 같습니다)
    */
    --f1jg-scroll-height: 308px;

    /*
      [데이터 열 개수]
      열을 추가/삭제하면 HTML 의 colgroup span 과 이 값,
      그리고 constant.js 의 COLUMNS 를 함께 맞춰 주세요.
    */
    --f1jg-data-col-count: 12;
}

.f1jg-wrapper {
    gap: 14px;
}

/* 층(레이아웃) 외곽 프레임 — 이 안에 표 카드가 들어갑니다
   사용량 · 입고 페이지의 층 컨테이너와 같은 규격입니다. */
.f1jg-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);
    gap: 8px;
}

.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;
}

/* 층 제목 옆의 작은 설명 — 'B5' 만으로는 어느 층인지 모르는 사람을 위해서입니다 */
.panel-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
    letter-spacing: -0.2px;
}

/* ================================================
   표 위 컨트롤 — 단위 스위처
   위쪽 표(B5) 헤더 우측에 둡니다.

   ※ B5 전용이 아니라 B5 · B6 에 동시에 걸립니다 — 단위가 두 표에서 같아야
     위아래 비교가 됩니다. 그래서 B6 헤더에는 같은 것을 두지 않았습니다.

   ※ 여기 같이 있던 '스크롤 ON/OFF' 토글은 2026-08-04 에 없앴습니다.
     층마다 표 아래에 붙은 '최근 1개월 보기' 버튼이 그 일을 대신합니다
     (버튼 모양은 css/common/common_expand_btn.css 의 .mk-expand-btn).
     2026-08-05 에 마지막 세 페이지까지 옮기면서 그 토글은 사이트에서
     완전히 사라졌고, css/common/common_scroll_toggle.css 도 지웠습니다.
   ================================================ */
/* ── R/L · Kg 단위 스위처 (factory1_ft_io 페이지와 동일 디자인) ── */
.unit-switcher {
    position: relative;
    display: flex;
    background: #eef0f4;
    border-radius: 14px;
    padding: 2px;
    width: 84px;
    height: 24px;
    align-items: center;
    border: 1px solid #d1d1d6;
    overflow: hidden;
    cursor: pointer;
}

.selection-bg {
    position: absolute;
    top: 2px; left: 2px;
    width: calc(50% - 2px); height: calc(100% - 4px);
    background-color: #000000;
    border-radius: 12px;
    transition: transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    will-change: transform;
    z-index: 1;
}

.selection-bg.mode-roll { transform: translateX(0); }
.selection-bg.mode-kg { transform: translateX(100%); }

.unit-btn {
    position: relative; z-index: 2; flex: 1; border: none;
    background: transparent !important; font-size: 11px;
    font-weight: 700; color: #55555d; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s ease; outline: none;
    height: 100%;
}

.unit-btn.active { color: #ffffff !important; }

/* 수정 모드에서는 잠급니다 — 입력은 언제나 롤이기 때문입니다.
   Kg 화면에 숫자를 치면 그게 롤로 저장되어 조용히 틀린 값이 들어갑니다. */
.unit-switcher.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ================================================
   유틸리티
   ================================================ */
.d-flex { display: flex; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.gap-2 { gap: 8px; }
.text-center { text-align: center; }
.mb-3 { margin-bottom: 14px; }

/* ================================================
   표 카드 / 스크롤 영역
   ================================================ */
/* 표 카드 = '레이아웃 안의 레이아웃' 박스.
   층 컨테이너 안에 테두리를 가진 흰 카드로 떠 있습니다. */
.f1jg-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);
}

.f1jg-scroll-area {
    position: relative;
    height: var(--f1jg-scroll-height);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.f1jg-scroll-area::-webkit-scrollbar { display: none; }

/* 잠금 시에는 내부 스크롤만 막고, 휠/터치는 페이지 전체 스크롤로 넘깁니다 */
.f1jg-scroll-area.locked {
    overflow-y: hidden;
    cursor: default;
}

/* ================================================
   글래스 커서 — 선택한 셀 위에 얹히는 반투명 판
   (입고 · 사용량 페이지와 동일)
   ================================================ */
.f1jg-cursor {
    position: absolute;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.35);
    /* 바깥 그림자는 뺐습니다 — 고른 칸 주변이 단차 진 것처럼 허옇게
       보였습니다 (2026-08-10, 유리 커서를 쓰는 6개 페이지 공통 수정) */
    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;
}

.f1jg-cursor.active { opacity: 1; }

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

/* 열 너비 — 날짜는 고정, 품목 열은 남은 폭을 균등 분할 */
.f1jg-table col.f1jg-col-date { width: var(--f1jg-date-col-width); }
.f1jg-table col.f1jg-col-data { width: calc((100% - var(--f1jg-date-col-width)) / var(--f1jg-data-col-count)); }

.f1jg-table thead {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f7f8fa;
    /* HW 가속으로 스크롤 시 잔상 방지 — 폰에서 표를 가로로 밀면 붙박이
       머리글·날짜 열이 매 프레임 다시 그려지며 깜빡였습니다. FT 입출고
       페이지(comp-table)와 같은 보정입니다. (2026-08-21) */
    transform: translateZ(0);
}

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

.f1jg-group-th {
    font-size: 12.5px;
    font-weight: 800;
    color: #1d1d1f;
    padding: 8px 2px 5px;
    background: #f7f8fa;
    letter-spacing: -0.3px;
}

/* 하위 구분이 없어 두 행을 병합한 1레벨 헤더 (페이퍼 코리아) */
.f1jg-single-th {
    vertical-align: middle;
    white-space: normal !important;
    line-height: 1.2;
    font-size: 11.5px;
    letter-spacing: -0.4px;
    padding: 4px 2px !important;
}

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

.f1jg-leaf-th {
    font-size: 11.5px;
    font-weight: 700;
    color: #636366 !important;
    text-align: center;
    letter-spacing: -0.3px;
}

/* ─ 그룹 구분선 ─ */
.f1jg-sep {
    border-left: 1px solid #e0e0e0 !important;
}

/* ─ 데이터 셀 ─ */
.f1jg-table td {
    padding: 9px 4px;
    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;
    font-variant-numeric: tabular-nums;
}

/* ─ 날짜 헤더 & 셀 (좌측 고정) ─ */
.f1jg-date-th {
    position: sticky;
    left: 0;
    background: #f7f8fa !important;
    z-index: 21;
    text-align: center;
    min-width: var(--f1jg-date-col-width) !important;
    width: var(--f1jg-date-col-width) !important;
    border-right: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    font-size: 12.5px;
    font-weight: 800;
    color: #1d1d1f;
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
    transform: translateZ(0); /* HW 가속으로 스크롤 시 잔상 방지 (위 thead 참고) */
}

.f1jg-table td.f1jg-date-td,
.f1jg-date-td {
    position: sticky;
    left: 0;
    background: #f7f8fa;
    z-index: 12;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid #e0e0e0 !important;
    font-size: 12px;
    font-weight: 700;
    min-width: var(--f1jg-date-col-width) !important;
    width: var(--f1jg-date-col-width) !important;
    box-sizing: border-box;
    cursor: pointer;
    transform: translateZ(0); /* HW 가속으로 스크롤 시 잔상 방지 (위 thead 참고) */
}

/* ================================================
   기준일 / 미실사 / 선택 행 강조

   기준일은 '어제'입니다. 재고는 아침에 세지만 그 숫자는 어제 작업이 끝난 뒤
   남은 롤이라 어제 자로 잡아야 합니다. 오늘 자로 적으면 오늘 입고와 섞여
   출고 계산이 하루씩 밀립니다.
   오늘 줄은 아직 세지 않은 줄이라 맨 아래에 옅게 깔아 구분합니다.
   ================================================ */
/* 기준일(어제) — 오늘 아침에 세어 적을 줄입니다. 화면을 열면 여기가 잡힙니다. */
.f1jg-row-base td { background: #e8f4fd !important; }
.f1jg-row-base .f1jg-date-td { background: #bbdefb !important; }

/* 아직 세지 않은 줄(오늘) — 맨 아래에 옅게 깔립니다 */
.f1jg-row-future td { background: #f2f4f7 !important; }
.f1jg-row-future .f1jg-date-td { color: #8e8e93; }

.f1jg-selected-row td { background: #f4f4f8 !important; }
.f1jg-selected-row .f1jg-date-td { background: #ebebf0 !important; }
.f1jg-row-base.f1jg-selected-row td { background: #daedf9 !important; }
.f1jg-row-base.f1jg-selected-row .f1jg-date-td { background: #bbd8f0 !important; }

/* 활성화된 헤더 — 선택한 그룹(1레벨) + 선택한 열(2레벨) */
.f1jg-thead-lv1 th.f1jg-header-active,
.f1jg-thead-lv2 th.f1jg-header-active,
.f1jg-group-th.f1jg-header-active {
    background-color: rgba(255, 160, 50, 0.18) !important;
    color: #c05a00 !important;
}

/* 겹침 순서(낮은 값이 아래)
     유리 커서 8 · 본문 강조 9 · 날짜칸 12 · thead 20 · 날짜 헤더 21

   [2026-08-06] 날짜칸이 5 였습니다. 좁은 화면(아래 @media)에서는 표가 가로로
   굴러가는데, 그때 밀려 온 본문 강조(9)와 유리 커서(8)가 붙박이 날짜 열
   **위로** 비쳐 나왔습니다. 왼쪽 붙박이는 본문보다 위, 머리글보다는 아래여야
   합니다 — 그래야 세로로 굴릴 때 날짜가 머리글 뒤로 들어갑니다.

   본문 칸(선택 강조 등)은 반드시 thead 보다 낮게 둡니다. 값이 같으면 문서
   순서상 뒤에 오는 tbody 가 이기고, 스크롤할 때 칸이 헤더 위로 비쳐 보입니다. */
.f1jg-selected-cell {
    position: relative;
    z-index: 9;
    font-weight: 900 !important;
    color: #000000 !important;
}

/* ─ 색상 / 호버 ─ */
.f1jg-sat { color: #007aff !important; }
.f1jg-sun { color: #ff3b30 !important; }

/* 값이 없는 칸과 0 인 칸 — 둘 다 '–' 로 그립니다 */
.f1jg-empty { color: #c7c7cc; font-weight: 400; }

.f1jg-table tbody tr:not(.f1jg-selected-row):hover td { background: #f7f7fa; }
.f1jg-data-cell { cursor: pointer; }

/* 승계 칸 — 그날 직접 센 값이 아니라 직전 입력값을 이어받은 칸입니다.
   48.8g(나라사랑 전용 용지)처럼 한 달에 한 번만 값이 바뀌는 열이 여기 해당합니다.
   숫자를 지우지 않고 흐리게만 두는 이유는, 값 자체는 맞는 값이기 때문입니다.
   "지금 저 층에 저만큼 있다"는 사실은 사실이고, 다만 오늘 센 건 아닙니다. */
.f1jg-carried {
    color: #a1a1a8 !important;
    font-weight: 500 !important;
    font-style: italic;
}

/* F.T 3종(.f1jg-mirror-cell)은 별도 배경 없이 일반 셀과 똑같이 보여 줍니다.
   수정 모드에서 입력칸(연노랑 배경)이 생기지 않는 것만으로 읽기 전용이라는
   게 구분됩니다. (입고 페이지의 별관 열도 예전에 같은 처리였는데, 그 열은
   2026-08-17 부터 입고 페이지에서 직접 입력합니다) */

/* ================================================
   편집 모드 — 입력칸 / 변경분 / 잠긴 행
   (입고 페이지 factory1_ipgo_style.css 와 같은 규격)
   ================================================ */

/* 입력칸이 들어간 셀
   input 을 absolute 로 띄워 레이아웃 흐름에서 완전히 빼냅니다.
   그래야 편집 모드에 들어가도 행 높이(44px)가 1px도 변하지 않아
   두 층의 줄이 어긋나지 않습니다. */
.f1jg-table td.f1jg-edit-cell {
    position: relative;
    padding: 0 !important;
    background: #fffdf7;
}

.f1jg-input {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #1d1d1f;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.f1jg-input::-webkit-outer-spin-button,
.f1jg-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 승계 칸의 입력 — 이어받은 숫자를 값이 아니라 안내로 띄웁니다.
   값으로 넣어 두면 손대지 않은 날까지 '오늘 실제로 센 값'으로 저장됩니다. */
.f1jg-input-carried::placeholder {
    color: #c3c3ca;
    font-style: italic;
    font-weight: 500;
}

/* 원본과 달라진 셀 — 저장 전까지 유지되며, 되돌리면 자동으로 해제됩니다 */
.f1jg-input.f1jg-dirty {
    background: #fff3cd;
    font-weight: 800;
    color: #8a6d00;
}

/* 편집 모드를 빠져나가도 미저장 변경분은 계속 표시 */
.f1jg-table td.f1jg-dirty-cell {
    background: #fff3cd !important;
    font-weight: 800 !important;
    color: #8a6d00 !important;
}

/* 예상 재고 (factory1_jigo_predict.js) — 아직 세지 않은 B6 칸에 뜨는
   "어제 실사 + 입고 − 출고" 참고 숫자입니다. 저장되지 않는 값이라
   실사값(검정)·승계(회색)·변경분(노랑 배경)과 한눈에 갈리는 주황으로 둡니다. */
.f1jg-pred {
    color: #c2410c;
    font-weight: 600;
    font-style: italic;
    cursor: help;
}

/* 그날 해석 안 된 출고 스캔(미상)이 있어 예상이 어긋나 있을 수 있는 칸 —
   점선 밑줄로 표시하고, 몇 롤이 빠졌는지는 툴팁이 말합니다 */
.f1jg-pred-warn {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* 수정 모드의 예상 — 빈 입력칸의 자리표시자로만 띄웁니다. 쳐 넣기 전까지는
   값이 아니므로 그대로 저장을 눌러도 아무것도 저장되지 않습니다.
   승계 안내(회색 .f1jg-input-carried)와 구분되는 주황입니다. */
.f1jg-input-pred::placeholder {
    color: #d97706;
    font-style: italic;
    font-weight: 500;
    opacity: 1;
}

/* 수정 구간 밖 — 편집 모드에서만 잠긴 것으로 표시 */
.f1jg-wrapper.edit-mode .f1jg-row-locked td.f1jg-data-cell {
    background: #f2f2f5 !important;
    color: #b0b0b8 !important;
    cursor: not-allowed;
}

/* ================================================
   좁은 화면
   ================================================ */
@media (max-width: 1200px) {
    :root { --f1jg-date-col-width: 72px; }
    .f1jg-table td { font-size: 12px; padding: 9px 2px; }
    .f1jg-input { font-size: 12px; }
    .f1jg-thead-lv1 th, .f1jg-group-th { font-size: 11.5px; }
    .f1jg-thead-lv2 th, .f1jg-leaf-th { font-size: 10.5px; }
}

/* 12열이 다 들어가기엔 좁은 화면 — 표 안에서 가로로 스크롤합니다.
   열을 접거나 숨기지 않습니다. 두 층의 열이 어긋나면 위아래 비교라는
   이 레이아웃의 목적 자체가 사라지기 때문입니다. */
@media (max-width: 900px) {
    .f1jg-scroll-area { overflow-x: auto; }
    .f1jg-table { min-width: 760px; }
}

/* 태블릿(641~900px · 아이패드 세로 820px 등)만 바닥 폭을 700px 로 낮춥니다.
   아이패드 세로의 실제 표 자리(736px)가 위 바닥(760px)보다 24px 좁아,
   그 폭 때문에 다 들어갈 표가 끝만 잘려 가로로 굴러갔습니다. 표가
   width:100% + table-layout:fixed 라 바닥만 낮추면 열이 고르게 2px 씩
   줄며 화면에 딱 맞습니다. 폰(640px 이하)은 아래 블록이 표 폭을 760px
   로 못박고 있으므로 건드리지 않습니다. */
@media (min-width: 641px) and (max-width: 900px) {
    .f1jg-table { min-width: 700px; }
}

/* ================================================
   출고 요약 — B6 헤더 우측 버튼 + 팝업
   (재고실사 페이지의 전자신문 대조 버튼·팝업과 같은 규격.
    내용은 factory1_jigo_outbound.js 가 채웁니다)
   ================================================ */

/* ※ B6 헤더 우측 [출고 요약] 버튼의 모양(.f1jg-out-btn)이 여기
     있었습니다. 2026-08-05, 같은 값의 규칙이 세 파일에 흩어져 있던 것을
     css/common/common_pill_btn.css 의 .mk-pill-btn 한 벌로 모았습니다. */

/* ── 팝업 (2026-08-04: 화면을 덮는 모달 → 떠 있는 판) ──
   예전에는 공지 모달(.f3i-nmodal-*) 껍데기라 배경을 덮었고, 열어 둔 채로는
   표에 숫자를 못 넣었으며 바깥을 누르면 닫혔습니다. 어제 나간 롤을 보면서
   오늘 숫자를 넣는 자리라 둘이 같이 있어야 합니다.

   그래서 FT 일지의 롤 무게 계산 팝업(.f1rc-ft-pop)과 같은 규격입니다 —
   머리띠를 잡아 끌어다 두고, 닫는 문은 X 하나. 폭도 그 팝업(232px)에
   맞춰 컴팩트하게 줄였습니다(예전 420px). 품목 8줄 + 합계가 들어갑니다. */
.f1jg-opop {
    position: fixed;
    z-index: 1550;              /* 폰 하단 독(1500)보다 위, 공지 모달(2000)보다 아래 */
    width: 268px;
    background: #f7f8fa;
    border: 1px solid #d1d1d6;
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    user-select: none;          /* 길게 눌러 끌 때 글자가 선택되면 안 됩니다 */
    -webkit-user-select: none;
}
.f1jg-opop.is-dragging {
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.26);
    cursor: grabbing;
}

/* 머리띠 — 잡는 즉시 끌리는 손잡이 */
.f1jg-opop-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 7px;
    border-bottom: 1px solid #f0f0f3;
    cursor: grab;
    touch-action: none;         /* 폰에서 끌 때 화면이 같이 밀리면 안 됩니다 */
    border-radius: 14px 14px 0 0;
    background: #f1f3f6;
}
.f1jg-opop.is-dragging .f1jg-opop-head { cursor: grabbing; }

.f1jg-opop-grip { font-size: 16px; color: #c7c7cc; }
.f1jg-opop-title {
    flex: 1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #1d1d1f;
}
.f1jg-opop-close {
    font-size: 17px;
    color: #8e8e93;
    cursor: pointer;
    border-radius: 6px;
}
.f1jg-opop-close:hover { color: #1d1d1f; background: #e5e5ea; }

.f1jg-opop-body {
    padding: 10px 12px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #1d1d1f;
    user-select: text;          /* 숫자는 골라 복사할 수 있어야 합니다 */
    -webkit-user-select: text;
}

/* 어느 층 · 어느 날 것인지 — 열면 어제부터이고 화살표로 옮길 수 있으므로
   날짜를 머리에서 크게 밝힙니다.
   (align-items 가 baseline 이 아니라 center 인 이유 — 화살표 버튼이 들어오면서
    글자 밑선에 맞추면 동그란 버튼이 위로 떠 보입니다. 2026-08-07) */
.f1jg-ohead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-bottom: 7px;
    border-bottom: 1px solid #f0f0f3;
}
.f1jg-ohead-tag {
    font-size: 10.5px; font-weight: 800; color: #ffffff;
    background: #c05a00; border-radius: 999px; padding: 2px 8px;
}
.f1jg-ohead-date {
    font-size: 13px; font-weight: 800; letter-spacing: -0.3px;
    /* 날짜 길이는 요일까지 붙어도 일정하지만, 폭을 잡아 두지 않으면 한 자리
       차이에도 화살표가 좌우로 흔들립니다 — 연타할 때 눈에 거슬립니다. */
    min-width: 132px;
    text-align: center;
}

/* 날짜 좌우 화살표 — 공통 헤더의 날짜 네비게이션(.gf3-nav-group /
   .gf3-icon-btn, css/common/common_header.css)과 같은 문법을 팝업 크기에
   맞춰 줄인 것입니다. 아이콘도 그쪽과 같은 chevron_left / chevron_right 라
   글꼴에 새로 들일 것이 없습니다.
   (FT 재고 종합의 .f1ftio-nav-group 도 같은 방식으로 줄여 쓰고 있습니다) */
.f1jg-onav {
    display: flex;
    align-items: center;
    background: #eceff4;
    border-radius: 999px;
    padding: 2px;
}
.f1jg-onav-btn {
    background: #ffffff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: background-color 0.15s;
    flex: none;
}
.f1jg-onav-btn:hover { background: #f2f2f5; }
.f1jg-onav-btn span { font-size: 15px; }

/* 오늘에 닿으면 오른쪽이 잠깁니다. 사라지지 않고 흐려지기만 하는 이유 —
   버튼이 없어지면 날짜 글자가 옆으로 밀려 자리가 흔들립니다. */
.f1jg-onav-btn:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}
.f1jg-onav-btn:disabled:hover { background: #ffffff; }

/* 품목 줄 — "대한1576 · 18롤 · 25,272kg".
   0롤인 품목도 줄을 지킵니다. 줄이 사라지면 "어제 안 나갔다"가 안 보입니다. */
.f1jg-olist { margin-top: 6px; }

.f1jg-orow {
    display: grid;
    grid-template-columns: 1fr 46px 68px;
    align-items: baseline;
    column-gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid #f5f5f7;
}
.f1jg-orow-name { font-size: 11.5px; font-weight: 700; color: #636366; }
.f1jg-orow-roll {
    text-align: right;
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.f1jg-orow-roll b { font-size: 13px; font-weight: 800; margin-right: 1px; }
.f1jg-orow-kg {
    text-align: right;
    font-size: 11px; font-weight: 600; color: #8e8e93;
    font-variant-numeric: tabular-nums;
}
.f1jg-orow-kg b { font-weight: 700; color: #636366; margin-right: 1px; }
.f1jg-orow-kg.is-empty { color: #c7c7cc; }

/* 0롤인 줄은 흐리게 — 줄은 지키되 눈은 나간 품목으로 가야 합니다 */
.f1jg-orow.is-zero .f1jg-orow-name,
.f1jg-orow.is-zero .f1jg-orow-roll,
.f1jg-orow.is-zero .f1jg-orow-roll b { color: #c7c7cc; font-weight: 500; }

/* 해석 못 한 롤 — 품목을 몰라 어느 줄에도 못 들어간 몫입니다 */
.f1jg-orow.is-unknown .f1jg-orow-name,
.f1jg-orow.is-unknown .f1jg-orow-roll { color: #c05a00; }

.f1jg-ototal {
    display: grid;
    grid-template-columns: 1fr 46px 68px;
    align-items: baseline;
    column-gap: 6px;
    padding: 7px 0 1px;
    border-top: 2px solid #e5e5ea;
    margin-top: -1px;
}
.f1jg-ototal .f1jg-orow-name { color: #1d1d1f; }

/* 조회 실패 · 스캔 없음 안내 */
.f1jg-oempty {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f7f7fa;
    border-radius: 10px;
    font-size: 12px;
    color: #636366;
}
.f1jg-oempty strong { display: block; color: #1d1d1f; margin-bottom: 4px; }

.f1jg-ofoot { margin-top: 10px; display: flex; justify-content: flex-end; }
.f1jg-ofoot-link {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11.5px; font-weight: 700; color: #0b62c4; text-decoration: none;
}
.f1jg-ofoot-link:hover { text-decoration: underline; }
.f1jg-ofoot-link .material-symbols-outlined { font-size: 15px; }

/* ── 대한 월별 재고 팝업 속 (2026-08-12) ────────────────────────
   껍데기(.f1jg-opop)는 출고 요약과 같은 것을 그대로 쓰고, 여기는
   안에 들어가는 것들만 둡니다 — 대조 줄 · 월 줄 · 추가 칸 · 저장. */

/* 대조 줄 — 팝업 맨 위, "기준일 08/11 (화) ✓ 장부와 일치" 한 줄.
   장부와 갈라지는 순간 이 줄이 붉게 바뀝니다. 이 팝업은 표에 아무것도
   쓰지 않으므로, 갈라짐을 잡는 장치는 이 줄 하나뿐입니다 — 그래서
   접거나 숨기지 않고 항상 첫 줄입니다. */
.f1jg-mon-status {
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
}
.f1jg-mon-status b { font-weight: 800; margin-left: 6px; }
.f1jg-mon-status.is-ok   { background: #e9f6ec; color: #1e7a34; }
.f1jg-mon-status.is-diff { background: #fdecea; color: #c0392b; }
.f1jg-mon-status.is-none { background: #f2f2f5; color: #636366; }

/* 월 줄 — "2026년 1월 · [10]롤 · X".
   열 폭을 고정하고 grid 자체를 가운데로 모읍니다(justify-content) —
   1fr 로 폈을 때는 월은 왼쪽 끝, 수량은 오른쪽 끝이라 줄이 휑했습니다.
   폭이 고정이라 여러 줄의 수량 칸이 세로로 반듯하게 맞습니다. */
.f1jg-mon-row,
.f1jg-mon-total {
    display: grid;
    grid-template-columns: 84px 76px 22px;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f7;
}
.f1jg-mon-ym {
    font-size: 11.5px; font-weight: 700; color: #636366;
    text-align: right;          /* 수량 쪽으로 붙입니다 */
}
.f1jg-mon-qty {
    text-align: right;
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.f1jg-mon-qty b { font-size: 13px; font-weight: 800; margin-right: 1px; }

.f1jg-mon-input {
    width: 44px;
    padding: 3px 4px;
    margin-right: 3px;
    border: 1px solid #d1d1d6;
    border-radius: 6px;
    font-size: 12px; font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.f1jg-mon-input:focus { outline: none; border-color: #0b62c4; }

/* ※ 스핀 화살표를 숨기던 규칙이 여기 있었습니다. 2026-08-12, 입력칸을
     type="number" → type="text"(숫자만 걸러 받음)로 바꾸면서 화살표 자체가
     없어져 지웠습니다 — 화살표·↑↓ 키·휠에 값이 굴러가는 것을 막기 위한
     변경입니다 (factory1_jigo_monthly.js 의 입력칸 주석 참고). */

.f1jg-mon-del {
    background: none; border: none; padding: 0;
    color: #c7c7cc; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
.f1jg-mon-del:hover { color: #c0392b; background: #f2f2f5; }
.f1jg-mon-del .material-symbols-outlined { font-size: 15px; }

/* ── 보기/수정 모드 (2026-08-12) ──
   두 모드의 화면 구조는 같고 상태만 다릅니다 — 부품을 넣었다 뺐다 하면
   모드를 오갈 때 화면이 움직입니다(주인 피드백). 수정 모드 여부는
   몸통(.f1jg-opop-body)의 f1jg-mon-editing 클래스가 들고 있습니다. */

/* 보기 모드 — 삭제 X 는 자리만 지킨 채 숨습니다(visibility).
   display 로 빼면 22px 열이 비어 보여도 grid 는 그대로라 안 움직이지만,
   visibility 가 의도를 그대로 말해 줍니다. */
.f1jg-opop-body:not(.f1jg-mon-editing) .f1jg-mon-del { visibility: hidden; }

/* 보기 모드의 수량 칸 — readonly. 테두리와 바탕을 지워 글자처럼 보이되
   칸의 크기는 그대로라 수정 모드로 바뀌어도 숫자가 제자리에 있습니다.
   pointer-events 를 끊어 눌러도 커서·키보드가 뜨지 않습니다. */
.f1jg-mon-input[readonly] {
    border-color: transparent;
    background: transparent;
    pointer-events: none;
}

.f1jg-mon-total {
    border-bottom: none;
    border-top: 2px solid #e5e5ea;
    margin-top: -1px;
    padding-top: 6px;
}
.f1jg-mon-total .f1jg-mon-ym { color: #1d1d1f; }

.f1jg-mon-empty {
    margin: 10px 0 4px;
    padding: 10px 12px;
    background: #f7f7fa;
    border-radius: 10px;
    font-size: 11.5px;
    color: #636366;
}

/* 조작 줄 — 대조 줄 바로 아래. 화살표(출고 요약의 .f1jg-onav 재사용)로
   월을 옮기고 [추가], 우측 끝에 [저장]. 달력 입력(type="month")이었다가
   바꿨습니다 (2026-08-12) — 빈 칸으로 시작해 매번 골라야 했는데,
   기본값이 이번 달이고 화살표 몇 번이면 되는 쪽이 훨씬 빠릅니다. */
.f1jg-mon-add {
    display: flex;
    align-items: center;
    justify-content: center;   /* 세 부품(월 이동 · 추가 · 저장)을 같은 간격으로 가운데에 */
    gap: 8px;
    margin-top: 8px;
}
.f1jg-mon-add-ym {
    min-width: 82px;
    text-align: center;
    font-size: 12px; font-weight: 800;
    letter-spacing: -0.2px;
    /* 폭을 잡아 두지 않으면 '12월'↔'1월' 사이에서 화살표가 흔들립니다 —
       출고 요약의 날짜(.f1jg-ohead-date)와 같은 처리입니다 */
}
.f1jg-mon-add-btn {
    flex: none;
    padding: 4px 10px;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    background: #ffffff;
    font-size: 11.5px; font-weight: 700; color: #1d1d1f;
    cursor: pointer;
}
.f1jg-mon-add-btn:hover { background: #f2f2f5; }

/* 마지막 수정일 — 제목 줄(머리띠) 우측 끝, X 바로 앞. 제목(flex: 1)이
   밀어 줘서 따로 정렬이 필요 없습니다. */
.f1jg-mon-updated {
    flex: none;
    font-size: 10px; font-weight: 600; color: #8e8e93;
    margin-right: 2px;
}

/* 월별 목록 — 조작 줄 아래 */
#f1jgMonList { margin-top: 4px; }

.f1jg-mon-save-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 8px;
    background: #0b62c4;
    color: #ffffff;
    font-size: 11.5px; font-weight: 800;
    cursor: pointer;
}
.f1jg-mon-save-btn:hover { background: #0a56ad; }
.f1jg-mon-save-btn:disabled { opacity: 0.5; cursor: default; }

/* ── 불러오는 중 ────────────────────────────────────────────────
   날짜를 옮기는 동안 표의 값만 옅게 덮습니다. 표를 지우지는 않습니다 —
   이 표는 값이 올 때까지 옛 행을 그대로 두고 한 번에 갈아 끼우므로
   깜빡임은 없었지만, 그 사이 헤더 날짜만 새것이고 숫자는 이전 날짜의
   것이라 조용히 틀린 화면이 됩니다.

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

.f1jg-wrapper.is-loading .f1jg-scroll-area tbody td,
.f1jg-panels-outer.is-loading .f1jg-scroll-area tbody td { color: #c7c7cc !important; }

/* ════════════════════════════════════════════════════════════════
   최근 1개월 보기 (2026-08-04)
   ────────────────────────────────────────────────────────────────
   층(B5 · B6)마다 표 아래에 버튼 하나. 누르면 표 안의 작은 창(308px,
   5일치)을 풀어 불러온 날짜를 통째로 폅니다.

   예전에는 B5 헤더 오른쪽에 '스크롤 ON/OFF' 스위치가 있었고, 켜면 두 표가
   같이 굴러가며 끝에 닿을 때마다 15일씩 더 불러왔습니다. 그 창은
     · 페이지 스크롤과 싸우고
     · 스위치를 켜기 전에는 아래 날짜가 있는지조차 보이지 않았습니다.
   펼침 하나로 바꾸면 둘 다 없어집니다. 한 달보다 과거는 헤더 날짜를
   옮기면 그 날짜 기준으로 다시 불러옵니다.

   스크롤과 달리 펼침은 층마다 따로 겁니다 — B5 만 펴 놓고 B6 는 접어 두는
   쪽이 편할 때가 있고, 위아래를 맞춰 보려면 둘 다 펴면 됩니다.
   (3공장 재고 종합 · 1공장 나라사랑과 같은 부품입니다)
   ════════════════════════════════════════════════════════════════ */
/* ※ 펼침 버튼의 모양(.f1jg-expand)이 여기 있었습니다. 2026-08-05, 페이지마다
     복사되던 같은 규칙을 css/common/common_expand_btn.css 의 .mk-expand-btn
     한 벌로 모았습니다. 아래 .is-expanded 규칙만 이 파일에 남습니다. */

/* 높이 제한을 풉니다. 잠금(.locked)도 같이 풀어야 합니다 — 그 규칙이
   overflow-y: hidden 을 들고 있습니다.

   머리글은 펼쳐도 붙박이(sticky)를 유지합니다 — 한 달치를 내리다 보면
   어느 열이 어느 창고인지 알 수 없게 되기 때문입니다(사용량 페이지와
   같은 수정, 2026-08-10). 그러려면 머리글과 화면 사이의 '자르는 조상'을
   전부 풀어야 합니다 — 스크롤 창(한 축 hidden 이면 다른 축 visible 이
   auto 로 승격돼 여전히 스크롤 상자로 남음)과 표 카드(둥근 모서리
   자르기)입니다. 2026-08-05 에 붙박이를 뗐던 것("머리글이 떠 버립니다")은
   이 조상들을 안 풀어 붙박이가 조용히 죽어 있던 현상입니다. */
.f1jg-floor-container.is-expanded .f1jg-scroll-area,
.f1jg-floor-container.is-expanded .f1jg-scroll-area.locked {
    height: auto;
    overflow: visible;
}

.f1jg-floor-container.is-expanded .f1jg-panel {
    overflow: visible;
}

/* 태블릿 폭(641~900px)은 표가 창 안에서 가로로 굴러야 해서 이 방식이
   통하지 않습니다 — 가로 스크롤을 되살리면 창이 다시 스크롤 상자가 되어,
   머리글은 예전처럼 페이지와 함께 흘러갑니다. (재선언이 여기 있는 이유:
   900px 규칙이 이 블록보다 앞에 있어 위 규칙이 이겨 버립니다.
   날짜 열의 좌측 고정은 가로 스크롤용이라 그대로 둡니다)
   ※ 폰(≤640px)은 아래 블록이 따로 다룹니다 — 2026-08-21 부터 페이지
     자체를 가로로 굴려 머리글 붙박이를 살립니다. */
@media (min-width: 641px) and (max-width: 900px) {
    .f1jg-floor-container.is-expanded .f1jg-scroll-area,
    .f1jg-floor-container.is-expanded .f1jg-scroll-area.locked {
        overflow-x: auto;
    }
}

/* ── 폰(≤640px)에서 펼친 층 — 가로 스크롤을 창이 아니라 '페이지'에 맡깁니다
   (2026-08-21). 창이 overflow-x: auto 를 들고 있으면 그 창이 스크롤 상자가
   되어 붙박이 머리글이 화면이 아니라 창에 붙습니다 — 한 달치를 내리면
   머리글이 같이 흘러가 버렸습니다. 창을 완전히 풀어(위 is-expanded 기본
   규칙의 overflow: visible 그대로) 표가 화면 밖으로 비어져 나가게 두면
   페이지 자체가 좌우로 굴러가고, 그때는 PC 와 똑같이
     · 열 머리글(thead)이 화면 위에 붙어 층마다 따라오고
     · 날짜 열이 화면 왼쪽에 붙고
     · [접기] 버튼이 화면 아래(하단 독 위)에 떠 따라옵니다.
   덤으로, 두 층을 다 펴면 페이지 가로 스크롤을 같이 타므로 두 표의 열이
   항상 위아래로 나란합니다 — 창마다 따로 굴러 어긋나던 것이 없어집니다. */
@media (max-width: 640px) {
    /* 카드가 표(760px+)를 끝까지 감싸도록 층 상자를 내용 폭으로 키웁니다.
       안 키우면 카드(f1jg-panel)는 화면 폭에 머물고, 카드 밖으로 나간
       칸들이 페이지 배경 위에 뜬 것처럼 보입니다. */
    .f1jg-floor-container.is-expanded {
        width: max-content;
        min-width: 100%;
    }
    /* 표 폭을 min-width(위 900px 블록의 760px)와 같은 값으로 못박습니다.
       max-content 상자 안에서 width: 100% 테이블은 폭 계산이 순환해
       1,000,000px 로 퇴화합니다 — 크로미움 실측으로 확인한 값입니다. */
    .f1jg-floor-container.is-expanded .f1jg-table { width: 760px; }
    /* 층 제목 줄(B5 · 단위 스위처 · 팝업 버튼)은 화면 폭으로 남기고 왼쪽에
       붙입니다 — 상자를 키운 채 두면 우측 정렬인 스위처가 표 끝(화면 밖)
       까지 밀려갑니다. 20px = body 좌우 padding 10px × 2 (common_header.css
       의 640px 블록). */
    .f1jg-floor-container.is-expanded .panel-header-grid {
        width: calc(100vw - 20px);
        position: sticky;
        left: 10px;
    }
    /* 날짜 열은 화면 왼쪽 끝(0)이 아니라 카드 시작선(body padding 10px)에
       붙입니다. 접힘 상태(창 안 스크롤)의 left: 0 은 창 기준이라 그대로
       두고, 펼친 층만 화면 기준으로 바꿉니다. */
    .f1jg-floor-container.is-expanded .f1jg-date-th,
    .f1jg-floor-container.is-expanded .f1jg-date-td { left: 10px; }
}

/* 펼친 동안의 [접기] 버튼 — 화면 아래 끝(12px 위)에 붙어 스크롤을
   따라다니다, 맨 아래에 닿으면 제자리(표 아래)에 내려앉습니다.
   접으려고 한 달치를 끝까지 내려갈 필요가 없습니다
   (입고 페이지와 같은 부품, 2026-08-12). B5·B6 두 층의 버튼에 같이
   걸립니다 — 펼친 층의 버튼만 붙박이가 됩니다.
   z-index 22 는 이 페이지 표 붙박이의 최고값(날짜 헤더 21) 바로 위 —
   떠 있는 동안 버튼이 표의 붙박이 날짜 열 위로 지나가기 때문입니다. */
.f1jg-floor-container.is-expanded .mk-expand-btn {
    position: sticky;
    bottom: 12px;
    z-index: 22;
}

/* 폰(≤640px)에서는 공통 하단 독(common_header.css 의 .mkm-dock, z 1500)이
   화면 아래에 떠 있어, bottom: 12px 로는 버튼이 독 뒤에 가려집니다.
   예전에는 붙박이를 풀어(position: static) 표 아래에 뒀는데, 그러면
   접으려고 한 달치를 끝까지 내려가야 했습니다. 독 '위'에 띄웁니다
   (2026-08-21).
     세로 122px = 독 밑 여백 10 + 독 높이 102(42px 두 줄 + 틈 4 + 패딩
     12 + 테두리 2) + 버튼과 독 사이 10. 독 규칙과 body padding-bottom
     (114px) 계산에 맞춘 값입니다.
     가로: 층 상자가 표 폭으로 넓어졌으므로(위 페이지 가로 스크롤 블록)
     버튼은 화면 폭으로 줄이고 왼쪽(left: 10px)에 붙여, 표를 좌우로
     굴려도 화면 안에 남습니다. */
@media (max-width: 640px) {
    .f1jg-floor-container.is-expanded .mk-expand-btn {
        position: sticky;
        left: 10px;
        bottom: calc(122px + env(safe-area-inset-bottom));
        width: calc(100vw - 20px);
    }
}