/* factory1_inoutbound_style.css — 1공장 전산 입출고 상세 내역 스타일
   ────────────────────────────────────────────────────────────────
   1공장 재고 종합(factory1_inventory_io_style.css)과 같은 카드/색상/타이포
   규격을 따릅니다. 조회 전용이라 입력/편집용 스타일이 없습니다.

   층 순서는 1층 입고 · 2층 출고 · 3층 확인 필요입니다.
   1·2층은 좌우 두 칸입니다 — 좌측이 상세 표, 우측이 품목별 롤 수 요약이고
   두 칸의 높이가 서로 맞습니다(align-items: stretch). 상세와 합계를 눈을
   위아래로 옮기지 않고 나란히 읽기 위해서입니다.
   ──────────────────────────────────────────────────────────────── */

/* ================================================
   [옵션 설정] 글로벌 CSS 변수
   ================================================ */
:root {
    /* [제목 좌측 여백 옵션] 패널 제목의 좌측 여백 */
    --panel-title-left-offset: 12px;

    /* [표 스크롤바 폭 옵션] */
    --iob-scrollbar-width: 8px;

    /* [행 높이 옵션] 데이터 행 / 헤더 높이
       표 높이(--iob-table-max-height)는 그대로 두고 행만 키웠으므로,
       한 화면에 보이는 줄 수가 한 줄쯤 줄어듭니다. */
    --iob-row-height: 40px;
    --iob-head-height: 38px;

    /* [표 높이 옵션] 표 하나가 화면에서 차지할 최대 높이.
       하루 스캔이 표당 50건 안팎이라 통째로 펼치면 페이지가 너무 길어집니다.
       여기서 가두고 헤더는 sticky 로 붙여 둡니다. PDF 저장 시 잘리는 것이
       싫어지면 이 값을 none 으로 바꾸면 됩니다. */
    --iob-table-max-height: 420px;

    /* [우측 요약 폭 옵션] 롤 수와 Kg 두 칸이 들어갑니다 */
    --iob-side-width: 300px;
}

.f1iob-wrapper {
    gap: 14px;
}

/* 층 외곽 프레임 — 다른 1공장 페이지의 floor-container 와 동일 규격 */
.f1iob-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;
}

/* ※ 최근 DB 갱신 시간(.f1iob-dbstamp)의 모양이 여기 있었습니다.
     2026-08-05, 입고 페이지도 같은 표시를 쓰게 되면서 규칙이 두 파일로
     갈라질 참이라 css/common/common_dbstamp.css 의 .mk-dbstamp 한 벌로
     모았습니다. HTML 이 그 클래스를 씁니다. */

/* 제목 옆 보조 설명 (기준일 · 층 설명) */
.panel-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
    margin-left: 10px;
    white-space: nowrap;
}

/* ========================================
   방향 스위처 (입고 ↔ 출고)
   지고 재고 · FT 재고 종합의 R/L · Kg 스위처와 같은 부품입니다. 같은 자리에
   같은 모양으로 두어, 처음 보는 사람도 "여기를 누르면 바뀐다"를 압니다.
   ======================================== */
.unit-switcher {
    position: relative;
    display: flex;
    background: #eef0f4;
    border-radius: 14px;
    padding: 2px;
    width: 92px;
    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-in  { transform: translateX(0); }
.selection-bg.mode-out { 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%;
    font-family: inherit;
}

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

/* 패널 헤더 우측 건수 */
.f1iob-count {
    font-size: 12.5px;
    font-weight: 700;
    color: #636366;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.f1iob-count.warn { color: #c9302c; }

/* 이미 지정을 끝낸 건수 — 앞의 '할 일' 숫자를 밀어내지 않게 옅게 붙입니다 */
.f1iob-count-sub {
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #8e8e93;
}

/* ========================================
   좌우 두 칸 — 좌측 상세 표 / 우측 품목별 롤 수

   align-items: stretch 라 우측 칸이 좌측 표 카드의 높이를 그대로 따라갑니다.
   표가 짧은 날은 둘 다 짧아지고, 행이 많아 표가 최대 높이에 걸리면 우측도
   같은 높이에서 멈추고 안에서 스크롤합니다.
   ======================================== */
.f1iob-split {
    display: flex;
    align-items: stretch;
    gap: 12px;
}
/* 좌측은 [전날 버튼][표 카드][다음날 버튼] 세 칸입니다.

   행이 적어 표가 짧은 날에도 우측 요약과 아래 끝을 맞춥니다. 카드를 세로로
   늘리고 그 안의 스크롤 영역이 남은 높이를 채우게 두면, 표는 위에 붙은 채
   카드만 커집니다. (stretch 만으로는 카드 안쪽이 내용 높이에 머물러 어긋납니다) */
.f1iob-split-main {
    flex: 1 1 auto;
    min-width: 0;          /* 표가 넘칠 때 우측 칸을 밀어내지 않도록 */
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.f1iob-split-main .inner-layout-card {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── 표 좌우 날짜 이동 버튼 ───────────────────────────────────────
   서브메뉴 이동 버튼(.gf3-subnav)과 같은 성격입니다 — 평소에는 흐릿하게
   있다가 마우스를 올리면 드러납니다. 다만 이쪽은 날짜라 매일 쓰는 기능이라
   기본 opacity 를 조금 더 올려 두었습니다.
   ──────────────────────────────────────────────────────────────── */
.f1iob-daynav {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
    color: #8e8e93;
    opacity: 0.3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.24s ease, background 0.24s ease,
                color 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.f1iob-daynav:hover,
.f1iob-daynav:focus-visible {
    opacity: 1;
    background: #f7f8fa;
    border-color: #e5e5ea;
    color: #007aff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    outline: none;
}
.f1iob-daynav .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.24s ease;
}
.f1iob-daynav:hover .material-symbols-outlined { transform: translateX(1px); }
#f1iobDayPrev:hover .material-symbols-outlined { transform: translateX(-1px); }

/* 오늘 이후로는 갈 수 없습니다 — 상단 헤더의 [다음]과 같은 규칙입니다.
   한쪽만 열려 있으면 데이터가 있을 수 없는 날짜로 넘어갑니다. */
.f1iob-daynav.disabled {
    opacity: 0.1;
    pointer-events: none;
}
.f1iob-split-side {
    flex: 0 0 var(--iob-side-width);
    display: flex;
    flex-direction: column;

    background: #f7f8fa;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    padding: 12px 14px;
}

/* 요약 칸 제목 — '요약' 대신 '6층 입고' 태그가 섭니다(render.js).
   아래 품목 줄이 어느 층 것인지를 제목이 말하게 하려는 것입니다. */
.f1iob-side-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #636366;
    letter-spacing: -0.2px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f2f2f7;
    flex-shrink: 0;
}
/* 제목 자리의 태그는 아래 '5층 입고' 줄보다 한 급 크게 세웁니다 —
   같은 크기면 둘이 같은 층위의 줄로 읽힙니다. */
.f1iob-side-title .f1iob-side-tag {
    font-size: 11px;
    padding: 3px 8px;
}

/* 품목 줄 목록 — 남는 높이를 채우고, 모자라면 이 안에서만 스크롤합니다 */
.f1iob-side-list {
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d1d6 transparent;
}
.f1iob-side-list::-webkit-scrollbar { width: 6px; }
.f1iob-side-list::-webkit-scrollbar-track { background: transparent; }
.f1iob-side-list::-webkit-scrollbar-thumb {
    background-color: #d1d1d6;
    border-radius: 6px;
}

/* 한 줄 = 이름 | 롤 수 | Kg. 세 칸의 세로줄이 맞아야 위아래로 훑을 수
   있으므로 폭을 고정합니다. */
.f1iob-side-row,
.f1iob-side-total,
.f1iob-side-tagrow {
    display: grid;
    grid-template-columns: 1fr 58px 84px;
    align-items: baseline;
    column-gap: 6px;
    padding: 7px 0;
}
/* 줄 사이 구분선. 덧말(.f1iob-side-note)이 끼어도 다음 줄에 선이 붙도록
   인접 선택자 대신 '첫 줄이 아니면'으로 겁니다. */
.f1iob-side-list > .f1iob-side-row:not(:first-child) { border-top: 1px solid #f7f7fa; }

/* 자리는 만들어 두고 여닫는 줄 — 미상(0롤인 날) · 층 태그(출고를 볼 때).
   위 display: grid 가 [hidden] 의 기본 display: none 을 이기므로, 여기서
   명시적으로 다시 감춰야 합니다. 줄을 지우지 않고 여닫는 이유는
   js/factory1_inoutbound_render.js 의 buildSide 머리말에 있습니다. */
.f1iob-side-row[hidden],
.f1iob-side-tagrow[hidden] { display: none; }

.f1iob-side-name {
    font-size: 11.5px;
    font-weight: 700;
    color: #636366;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 숫자 칸 — 단위(롤 · kg)는 숫자에 붙여 작게 답니다 */
.f1iob-side-roll,
.f1iob-side-kg {
    text-align: right;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 700;
    color: #8e8e93;
}
.f1iob-side-roll b,
.f1iob-side-kg b {
    font-size: 15px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    margin-right: 1px;
}

/* Kg 은 롤 수에서 곧바로 나오는 파생값이라 한 단계 여리게 둡니다 —
   눈이 먼저 가야 하는 건 롤 수입니다. */
.f1iob-side-kg b { font-size: 13px; font-weight: 700; color: #48484a; }

/* 그날 오가지 않은 품목 — 줄은 지키되 눈에 걸리지 않게.
   줄이 사라지면 "오늘 대한 D 가 안 들어왔다"가 보이지 않습니다. */
.f1iob-side-row.zero .f1iob-side-name,
.f1iob-side-row.zero .f1iob-side-roll,
.f1iob-side-row.zero .f1iob-side-kg { color: #c7c7cc; }
.f1iob-side-row.zero .f1iob-side-roll b,
.f1iob-side-row.zero .f1iob-side-kg b { color: #c7c7cc; font-weight: 700; }

/* 해석하지 못해 품목을 모르는 롤 — 합계에서 조용히 빠지면 안 됩니다 */
.f1iob-side-row.unknown { cursor: help; }
.f1iob-side-row.unknown .f1iob-side-name,
.f1iob-side-row.unknown .f1iob-side-roll { color: #c9302c; }
.f1iob-side-row.unknown .f1iob-side-roll b { color: #c9302c; }

/* 급지 재고에서 손댄 전산 출고 — 품목 줄 아래에 붙는 덧말.
   **위 숫자는 스캔 그대로입니다.** 이 줄은 "저기서 이렇게 고쳤다"는 사실과
   그 이유만 알려 줍니다. 관측 기록과 사람의 판단을 섞지 않기 위해서입니다. */
.f1iob-side-note {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 0 7px 8px;
    border-left: 2px solid #cfe2f8;
    margin: 0 0 0 2px;
}
.f1iob-side-note-head {
    font-size: 10.5px;
    font-weight: 700;
    color: #1c6ec4;
    letter-spacing: -0.2px;
}
.f1iob-side-note-memo {
    font-size: 10.5px;
    font-weight: 500;
    color: #6b6b70;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════════
   불러오는 중

   표와 요약을 지우지 않습니다. 예전에는 상세·확인 표를 '불러오는 중...'
   한 줄로 바꾸고 우측 요약은 아예 비웠는데, 그 사이 두 카드가 통째로
   무너졌다 다시 서기 때문에 화면 전체가 출렁였습니다. 자세한 배경은
   js/factory1_inoutbound_render.js 의 renderLoading 머리말에 있습니다.

   흐림은 날짜에 따라 바뀌는 값에만 겁니다 — 품목 이름 · 열 머리글 ·
   카드 제목 · 방향 스위처는 어느 날짜든 같아서 흐릴 이유가 없습니다.

   [상세·확인 표는 opacity, 요약은 color]
   두 표는 행 하나가 통째로 그날의 스캔 기록이고 머리글이 다른 상자
   (.f1iob-table-head)에 따로 서 있어서, 본문 상자를 통째로 덮어도
   고정 텍스트가 같이 흐려지지 않습니다.
   요약은 사정이 다릅니다. 품목 이름과 롤 수가 같은 줄에 나란히 있어서
   줄을 덮으면 이름까지 흐려집니다. 그래서 숫자 쪽만 글자색으로 옅게
   합니다 (재고실사 페이지와 같은 방식입니다).
   ════════════════════════════════════════════════════════════ */
.f1iob-table-scroll,
.f1iob-side-roll, .f1iob-side-kg,
.f1iob-side-roll b, .f1iob-side-kg b { transition: color 0.14s ease-out, opacity 0.14s ease-out; }

.f1iob-wrapper.is-loading .f1iob-table-scroll { opacity: 0.45; }

/* 누르는 것은 표 전체를 막습니다. '확인 필요' 표의 [지정] 버튼은 행 하나를
   지목해 저장하므로, 아직 안 온 날짜에서 누르면 화면에 남아 있는 이전
   날짜의 행을 건드리게 됩니다. */
.f1iob-wrapper.is-loading .f1iob-table-scroll,
.f1iob-wrapper.is-loading .f1iob-count { pointer-events: none; }

/* 줄마다 붙은 색(.zero · .unknown)보다 세게 잡습니다 — 그 색도 아직 이전
   날짜의 사실이라 같이 옅어지는 것이 맞습니다. */
.f1iob-wrapper.is-loading .f1iob-side-roll,
.f1iob-wrapper.is-loading .f1iob-side-kg,
.f1iob-wrapper.is-loading .f1iob-side-roll b,
.f1iob-wrapper.is-loading .f1iob-side-kg b,
.f1iob-wrapper.is-loading .f1iob-side-note,
.f1iob-wrapper.is-loading .f1iob-side-note-head,
.f1iob-wrapper.is-loading .f1iob-side-note-memo,
.f1iob-wrapper.is-loading .f1iob-count,
.f1iob-wrapper.is-loading .f1iob-count-sub { color: #c7c7cc !important; }

/* 5층 입고 줄 — 표에서 색이 칠해진 행이 몇 롤인지입니다.
   품목 목록과 성격이 다른 숫자(층별 집계)라 목록 밖에 따로 세웁니다.
   출고에는 5층이 없으므로 입고를 볼 때만 나옵니다. */
.f1iob-side-tagrow {
    flex-shrink: 0;
    border-top: 1px solid #f2f2f7;
}
.f1iob-side-tag {
    display: inline-block;      /* 요약 제목 자리(비 grid)에서도 여백이 서게 */
    justify-self: start;
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.2px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* 층 색 — 5층은 파랑, 6층은 초록입니다. 같은 계열로 두면 요약 제목(6층)과
   아래 5층 줄이 한눈에 갈리지 않습니다.
   5층 파랑은 상세 표의 B5 행 배경(.f1iob-row-tagged)과 같은 계열이라
   둘이 같은 것을 가리킨다는 게 보입니다. 6층은 표에 색이 없습니다. */
.f1iob-side-tag.f1iob-tag-b5 { color: #1c6ec4; background: #e8f1fb; }
.f1iob-side-tag.f1iob-tag-b6 { color: #1a7f5a; background: #e6f5ee; }

/* '5층 입고' 아래 품목별 내역 — 그 층으로 들어온 품목만 나열합니다.
   6층 목록처럼 전 품목 줄을 깔지 않습니다 (2026-08-18, 5층 대한A 분리).
   왼쪽 파란 선은 위 '5층 입고' 줄에 딸린 내역이라는 표시입니다
   (급지 덧말 .f1iob-side-note 와 같은 문법). */
.f1iob-side-flooritems {
    flex-shrink: 0;
    padding: 2px 0 4px 8px;
    border-left: 2px solid #cfe2f8;
    margin-left: 2px;
}
.f1iob-side-flooritems[hidden] { display: none; }
.f1iob-side-floorrow {
    display: grid;
    grid-template-columns: 1fr 58px 84px;
    align-items: baseline;
    column-gap: 6px;
    padding: 3px 0;
}
/* 미상 줄 — 6층 목록의 미상 줄과 같은 붉은색. 조용히 빠지면
   '5층 입고' 롤 수와 내역 합이 안 맞습니다. */
.f1iob-side-floorrow.unknown { cursor: help; }
.f1iob-side-floorrow.unknown .f1iob-side-name,
.f1iob-side-floorrow.unknown .f1iob-side-roll,
.f1iob-side-floorrow.unknown .f1iob-side-roll b { color: #c9302c; }

/* 합계 — 품목 줄의 합이 아니라 그날 스캔된 전체 롤 수입니다
   (품목을 모르는 '미상' 롤까지 포함) */
.f1iob-side-total {
    flex-shrink: 0;
    border-top: 1px solid #e5e5ea;
    margin-top: 2px;
}
.f1iob-side-total .f1iob-side-name { color: #1d1d1f; font-weight: 800; }
.f1iob-side-total .f1iob-side-roll b { font-size: 17px; }
.f1iob-side-total .f1iob-side-kg b { font-size: 14px; color: #1d1d1f; font-weight: 800; }

/* ========================================
   상세 표
   ======================================== */

/* 레이아웃 안의 레이아웃 (표 전용 카드) */
.inner-layout-card {
    background: #f7f8fa;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* ── 표 틀 ────────────────────────────────────────────────────────
   헤더와 본문을 표 둘로 나눠 놓았습니다. 한 표에 sticky 헤더를 얹으면
   세로 스크롤바가 헤더 옆까지 올라와, 스크롤바가 헤더 위에 얹혀 있는 것처럼
   보입니다. 본문만 스크롤 영역으로 두면 스크롤바도 본문 옆에서 시작합니다.

   가로 스크롤은 바깥 프레임이 맡습니다 — 여기서 함께 밀려야 헤더와 본문의
   열이 어긋나지 않습니다.
   ──────────────────────────────────────────────────────────────── */
.f1iob-table-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #c7c7cc transparent;
}
.f1iob-table-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* 열 폭 합(628px)에 스크롤바 자리를 더한 값보다 조금 넉넉하게.
       이보다 좁아지면 가로 스크롤로 넘어갑니다. */
    min-width: 620px;
}

/* 헤더 표 — 본문의 스크롤바 자리만큼 오른쪽을 비워 둬야 열이 맞습니다.
   padding 으로 8px 을 주지 않고 본문과 똑같이 스크롤 영역으로 만든 이유는,
   브라우저가 실제로 잡는 자리가 ::-webkit-scrollbar 에 적은 폭과 딱 같지
   않기 때문입니다(8px 로 적어도 9px 을 잡습니다). 같은 방식으로 자리를
   잡게 두면 그 차이가 저절로 맞습니다. 트랙은 투명이라 보이지 않습니다. */
.f1iob-table-head {
    flex: 0 0 auto;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.f1iob-table-head::-webkit-scrollbar { width: var(--iob-scrollbar-width); }
.f1iob-table-head::-webkit-scrollbar-track,
.f1iob-table-head::-webkit-scrollbar-thumb { background: transparent; }

/* 본문 스크롤 영역 — 헤더 높이를 뺀 만큼이 최대 높이입니다.
   (카드 전체 높이는 --iob-table-max-height 그대로) */
.f1iob-table-scroll {
    flex: 1 1 auto;
    max-height: calc(var(--iob-table-max-height) - var(--iob-head-height));
    overflow-y: auto;
    overflow-x: hidden;      /* 가로는 바깥 프레임이 맡습니다 */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c7c7cc transparent;
}
.f1iob-table-scroll::-webkit-scrollbar,
.f1iob-table-frame::-webkit-scrollbar {
    width: var(--iob-scrollbar-width);
    height: var(--iob-scrollbar-width);
}
.f1iob-table-scroll::-webkit-scrollbar-track,
.f1iob-table-frame::-webkit-scrollbar-track { background: transparent; }
.f1iob-table-scroll::-webkit-scrollbar-thumb,
.f1iob-table-frame::-webkit-scrollbar-thumb {
    background-color: #c7c7cc;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.f1iob-table-scroll::-webkit-scrollbar-thumb:hover,
.f1iob-table-frame::-webkit-scrollbar-thumb:hover { background-color: #a1a1a6; }

/* 최소 폭은 표가 아니라 .f1iob-table-inner 가 잡습니다. 여기에도 걸면
   헤더 표는 스크롤바 자리(padding-right)만큼 더 넓어져 프레임을 밀어냅니다. */
.f1iob-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #1d1d1f;
}

/* 열 너비 — 모든 열에 폭을 줍니다.
   전에는 RollNo 만 auto 라 남는 공간을 혼자 다 먹어 9자리 숫자 옆이 텅
   비었습니다. 이제는 남는 폭이 열들에 비례로 나뉘어, RollNo 도 제 몫만
   가져갑니다. */
.f1iob-col-origin { width: 106px; }
.f1iob-col-time   { width: 100px; }
.f1iob-col-vendor { width: 128px; }
.f1iob-col-grade  { width: 76px; }
.f1iob-col-roll   { width: 118px; }
.f1iob-col-weight { width: 88px; }
.f1iob-col-pcode  { width: 118px; }
.f1iob-col-fix    { width: 104px; }   /* '확인 필요' 표에만 있는 열입니다 */

/* ── 헤더 (단 헤더) ──
   스크롤 영역 밖의 별도 표라 sticky 가 필요 없습니다. */
.f1iob-table thead {
    background-color: #f7f8fa;
}

.f1iob-table thead th {
    height: var(--iob-head-height);
    padding: 0 8px;
    font-size: 13px;
    font-weight: 800;
    color: #1d1d1f;
    text-align: center;
    background-color: #f7f8fa;
    background-clip: padding-box;
    border-bottom: 1px solid #e5e5ea;
    letter-spacing: -0.2px;
}

/* ── 데이터 셀 ── */
.f1iob-table td {
    height: var(--iob-row-height);
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    vertical-align: middle;
    border-bottom: 1px solid #f2f2f7;
    background-color: #f7f8fa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f1iob-table tbody tr:last-child td { border-bottom: none; }

/* 시간 — 한국시간 벽시계 값을 그대로 자른 문자열입니다 (변환 금지) */
.f1iob-time {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    color: #636366;
}

/* 스캔 원본 그대로인 값(RollNo · 물류코드 · 제조사코드)은 등폭으로 둡니다.
   자리수가 어긋난 오독을 눈으로 잡아내려면 세로줄이 맞아야 합니다. */
.f1iob-code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: #48484a;
    text-align: center;
    letter-spacing: -0.2px;
}

.f1iob-center { text-align: center; }

.f1iob-num {
    text-align: right;
    padding-right: 14px !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 3층 '구분' 열 (입고 B5 / 입고 B6 / 출고 B6) */
.f1iob-origin {
    font-size: 11.5px;
    font-weight: 800;
    color: #636366;
}

/* 오독을 되살린 RollNo — 점선 밑줄만 두고 마우스를 올리면 원본이 보입니다.
   색이나 뱃지로 강하게 표시하면 표가 시끄러워지고, 아무 표시도 없으면
   보정이 틀렸을 때 알아챌 길이 사라집니다. */
.f1iob-fixed-cell {
    text-decoration: underline dotted #c7c7cc;
    text-underline-offset: 3px;
    cursor: help;
}

/* 값이 없는 셀 */
.f1iob-empty { color: #c7c7cc; font-weight: 400; }

/* 5층(B5)에서 들어온 행 — 표를 층별로 나누지 않기로 했으므로 어느 층
   것인지는 이 배경색과 우측 '5층 입고' 태그로만 드러납니다.
   태그와 같은 파란 계열이라 둘이 같은 것을 가리킨다는 게 보입니다. */
.f1iob-row-tagged td { background-color: #f3f8fe; }

.f1iob-table tbody tr:hover td { background-color: #fafafa; }
.f1iob-table tbody tr.f1iob-row-tagged:hover td { background-color: #e9f2fd; }

/* '확인 필요' — 사람이 봐야 하는 행이라 표 전체를 옅게 깔아 둡니다 */
.f1iob-review .f1iob-table td { background-color: #fffbfb; }
.f1iob-review .f1iob-table tbody tr:hover td { background-color: #fff4f3; }

/* 품목을 지정해 되살린 행 — '확인 필요' 표 안에서 처리가 끝난 줄입니다.
   빨간 계열 바탕(위)에서 초록 계열로 빼내 "이건 이제 손댈 것이 없다"를
   색으로만 말합니다. 표에서 빼지 않는 이유는 되돌릴 곳이 필요해서입니다. */
.f1iob-review .f1iob-table tbody tr.f1iob-row-fixed td { background-color: #f4fbf6; }
.f1iob-review .f1iob-table tbody tr.f1iob-row-fixed:hover td { background-color: #ecf8f0; }

/* ── 보정 열 ──
   [지정] 버튼과, 지정이 끝난 행의 품목 이름이 서는 자리입니다. */
.f1iob-fixcell { padding: 0 6px !important; }

.f1iob-fixbtn {
    width: 100%;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #d1d1d6;
    border-radius: 7px;
    background-color: #f7f8fa;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    color: #48484a;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.f1iob-fixbtn:hover { background-color: #f2f2f7; border-color: #b9b9be; color: #1d1d1f; }

/* 지정이 끝난 버튼 — 행 배경과 같은 초록 계열입니다 */
.f1iob-fixbtn.is-done {
    border-color: #a7dcb8;
    background-color: #eaf8ef;
    color: #1f7a45;
}
.f1iob-fixbtn.is-done:hover { background-color: #ddf2e5; border-color: #86cfa0; }

/* 권한이 없는 사람에게는 버튼 대신 글씨만 (readonly 로 들어온 경우) */
.f1iob-fixtag {
    font-size: 11.5px;
    font-weight: 800;
    color: #1f7a45;
}

/* ========================================
   보정 모달 — 행 하나에 품목을 지정합니다

   공지사항 모달(.f3i-nmodal-*)과 성격이 같지만 별도 클래스로 둡니다.
   공용 모달은 3공장 페이지들이 함께 쓰고 있어, 이 화면 사정으로 폭이나
   여백을 건드리면 저쪽이 같이 움직입니다.
   ======================================== */
.f1iob-fixmodal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.32);
    /* body 의 zoom:115% 밖에서 그려지도록 — 안 그러면 상자가 화면보다 커집니다 */
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.f1iob-fixmodal-overlay.is-open { display: flex; }

.f1iob-fixmodal-box {
    width: 100%;
    max-width: 460px;
    background-color: #f7f8fa;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.f1iob-fixmodal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f2f2f7;
}
.f1iob-fixmodal-title { font-size: 15px; font-weight: 800; color: #1d1d1f; }
.f1iob-fixmodal-close { font-size: 20px; color: #8e8e93; cursor: pointer; }
.f1iob-fixmodal-close:hover { color: #1d1d1f; }

.f1iob-fixmodal-body { padding: 16px 18px; }

/* 스캔 원본 — 판단 근거입니다. 여기 값과 아래 고른 품목이 짝이 맞는지를
   보고 누르게 되므로, 지우거나 줄이지 마세요. */
.f1iob-fixinfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: #f7f7fa;
    margin-bottom: 16px;
}
.f1iob-fixinfo-origin {
    font-size: 11px;
    font-weight: 800;
    color: #636366;
    padding: 2px 7px;
    border-radius: 5px;
    background-color: #f7f8fa;
    border: 1px solid #e5e5ea;
}
.f1iob-fixinfo-time {
    font-size: 12.5px;
    font-weight: 800;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
}
.f1iob-fixinfo-raw {
    flex: 1 1 100%;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #48484a;
    line-height: 1.6;
    word-break: break-all;
}

.f1iob-fixmodal-label {
    font-size: 12px;
    font-weight: 800;
    color: #636366;
    margin-bottom: 8px;
}
.f1iob-fixmodal-opt { font-weight: 600; color: #aeaeb2; }

/* 품목 버튼 — 네이티브 <select> 를 쓸 수 없어(zoom:115%) 여덟 개를 그대로
   늘어놓습니다. 순서는 ITEMS 그대로라 다른 화면의 열 순서와 같습니다. */
.f1iob-fixitems {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}
.f1iob-fixopt {
    height: 34px;
    padding: 0 4px;
    border: 1px solid #d1d1d6;
    border-radius: 9px;
    background-color: #f7f8fa;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    color: #48484a;
    letter-spacing: -0.3px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.f1iob-fixopt:hover { background-color: #f2f2f7; border-color: #b9b9be; }
.f1iob-fixopt.is-selected {
    background-color: #0071e3;
    border-color: #0071e3;
    color: #ffffff;
}

.f1iob-fixmemo {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d1d1d6;
    border-radius: 9px;
    background-color: #f7f8fa;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    box-sizing: border-box;
}
.f1iob-fixmemo:focus { outline: none; border-color: #0071e3; }
.f1iob-fixmemo::placeholder { color: #c7c7cc; font-weight: 500; }

/* 원본을 고치는 것이 아니라는 사실을 모달 안에 한 줄 남겨 둡니다 */
.f1iob-fixmodal-note {
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #8e8e93;
    line-height: 1.5;
}
.f1iob-fixmodal-error {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: #fdf0ef;
    font-size: 12px;
    font-weight: 700;
    color: #c9302c;
    line-height: 1.5;
}

.f1iob-fixmodal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #f2f2f7;
    background-color: #f1f3f6;
}
.f1iob-fixmodal-spacer { flex: 1 1 auto; }

.f1iob-fixmodal-btn {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    background-color: #f7f8fa;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    color: #48484a;
    cursor: pointer;
}
.f1iob-fixmodal-btn:hover { background-color: #f2f2f7; }
.f1iob-fixmodal-btn.primary {
    background-color: #0071e3;
    border-color: #0071e3;
    color: #ffffff;
}
.f1iob-fixmodal-btn.primary:hover { background-color: #0062c4; }
.f1iob-fixmodal-btn.ghost { border-color: transparent; background-color: transparent; color: #c9302c; }
.f1iob-fixmodal-btn.ghost:hover { background-color: #fdf0ef; }

/* 접힌 상태 — 제목 줄만 남깁니다.
   대부분의 날은 0건이라(전 기간 6건) 빈 표가 화면을 차지할 이유가 없습니다.
   건수는 접힌 채로도 제목 옆에 보이므로, 숫자가 붙은 날만 펼치면 됩니다. */
.f1iob-review.collapsed .inner-layout-card { display: none; }
.f1iob-review.collapsed .panel-header-grid { margin-bottom: 0; padding-bottom: 0; }

/* 펼치기 버튼 — 표 좌우 날짜 버튼과 같은 부품이고, 제목과 건수 사이를
   가로·세로로 그대로 다 채웁니다. 접혀 있을 때 이 줄 자체가 손잡이로 읽힙니다.

   기본 그리드는 `1fr auto 1fr` 이라 가운데 칸이 내용 폭에 머뭅니다. 이 패널만
   `auto 1fr auto` 로 바꿔, 제목과 건수가 각자 글자 폭만 쓰고 남는 폭을 전부
   가운데가 받게 했습니다. 위 입고/출고 헤더는 가운데 칸이 비어 있으므로
   건드리지 않습니다. */
.f1iob-review .panel-header-grid {
    grid-template-columns: auto 1fr auto;
    column-gap: 12px;
}
/* 세로도 같습니다 — 가운데만 늘려 헤더 줄 높이를 그대로 따라가게 합니다. */
.f1iob-review .header-center { align-items: stretch; }

.f1iob-expand {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    /* 제목 줄(약 22px)만 따라가면 안의 화살표(20px)에 여백이 거의 없어
       손잡이로 안 읽힙니다. 여기서 한 번 밀어 올리면 헤더 줄 전체가
       같이 그 높이가 되므로, 버튼은 여전히 줄을 꽉 채웁니다. */
    min-height: 28px;
    border-radius: 8px;
}

/* 데이터 로딩/비어있음 안내 행 */
.f1iob-placeholder td {
    height: 110px;
    text-align: center;
    color: #8e8e93;
    font-size: 12.5px;
    font-weight: 600;
    background-color: #f7f8fa !important;
}

/* 공통 유틸 (다른 1공장 페이지와 동일) */
.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; }
.text-muted { color: #8e8e93; }
.small { font-size: 12px; }
.m-0 { margin: 0; }
.mb-3 { margin-bottom: 14px; }

/* ── 반응형 ── */
/* 좁아지면 우측 요약을 표 아래로 내립니다. 옆에 붙여 두면 표가 최소 폭
   아래로 눌려 가로 스크롤이 먼저 생깁니다. */
@media (max-width: 1010px) {
    .f1iob-split { flex-direction: column; }
    .f1iob-split-side { flex: 0 0 auto; }
    .f1iob-side-list { overflow-y: visible; }
}

@media (max-width: 640px) {
    .f1iob-floor-container { padding: 14px; border-radius: 14px; }
    .panel-title { font-size: 16px; }
    .panel-subtitle { display: none; }

    .f1iob-side-roll b { font-size: 14px; }
    .f1iob-side-kg b { font-size: 12px; }

    .f1iob-table td { font-size: 11.5px; height: 34px; }
    .f1iob-table thead th { font-size: 11.5px; }
}