/* factory1_inventory_io_style.css — 1공장 재고 종합 스타일 정의
   ────────────────────────────────────────────────────────────────
   1공장 FT 재고 종합(factory1_ft_io_style.css)과 동일한 카드/색상/타이포
   규격을 그대로 따릅니다. 이 페이지는 여러 테이블의 데이터를 한 화면에
   모아 "보여주기만" 하는 조회 전용 화면이라, 입력/편집용 스타일은 없습니다.

   엑셀 원본의 굵은 실선 격자는 그대로 옮기지 않고, 다른 페이지들과 같은
   Apple 톤(얇은 구분선 + 그룹 경계선만 강조) 으로 재구성했습니다.
   ──────────────────────────────────────────────────────────────── */

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

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

    /* [행 높이 옵션] 데이터 행 / 1레벨 헤더 / 2레벨 헤더 높이.
       1920×1080 전체화면에서 표 전체가 스크롤 없이 들어가도록 잡은 값입니다.
       여기를 키우면 화면 스크롤과 표 안 스크롤이 같이 생깁니다. */
    --inv-row-height: 35px;
    --inv-head-lv1-height: 32px;
    --inv-head-lv2-height: 28px;

    /* [카드 간격 옵션] 저장위치 카드 사이 · 머리글과 첫 카드 사이 */
    --inv-card-gap: 6px;

    /* [표 최소 폭 옵션] 품목명이 뭉개지지 않는 폭. 머리글·본문·바깥 프레임이
       모두 이 값을 써야 열이 어긋나지 않습니다 — 한 곳만 고치면 안 됩니다. */
    --inv-min-width: 1140px;

    /* [표 높이 옵션] 표가 화면에서 차지할 최대 높이.
       여기서 가둬야 머리글이 붙어 있을 자리(스크롤 영역)가 생깁니다.

       빼는 값은 표 위아래에 늘 붙어 있는 것들(공통 헤더 · 기준일 줄 · 바깥
       여백)의 높이 합입니다. 실측 199px 에 여유 20px 을 얹은 값입니다.
       이보다 작게 잡으면 표가 화면 밖으로 밀려 화면 스크롤이 생기고, 크게
       잡으면 표 안 스크롤이 먼저 생깁니다. 둘 다 생기면 스크롤이 두 겹이 되어
       가장 피곤합니다. 1920×1080 에서는 표 전체(619px)가 들어가 어느 쪽도
       생기지 않습니다.
       PDF 저장 때는 .f1inv-capturing 이 이 제한을 잠깐 풀어 전체를 그립니다. */
    --inv-table-max-height: calc(100vh - 220px);

    /* [강조색 옵션] 지고 재고 · 입고 페이지의 셀 선택과 같은 동작 규격입니다.
       자취는 회색, 머리글은 주황, 고른 칸에는 유리 커서가 얹힙니다.
       색의 진하기만 이 페이지가 한 단계 위입니다 (2026-08-10) — 열이 11개라
       예전 값(자취 #f4f4f8 · 고른 칸 #ebebf0)으로는 자취가 눈에 안 띄었고,
       자취와 고른 칸의 차이도 안 보였습니다. 지금은 자취 < 고른 칸 순서로
       진해져 셋(주황 머리글 · 회색 자취 · 진한 고른 칸)이 한눈에 갈립니다. */
    --inv-hl-trail: #eaeaf2;
    --inv-hl-cell: #d8d8e2;
    --inv-hl-head-bg: rgba(255, 160, 50, 0.18);
    --inv-hl-head-fg: #c05a00;
}

.f1inv-wrapper {
    gap: 14px;
}

/* 층(레이아웃) 외곽 프레임 — factory1_ft_io 의 .f1ftio-floor-container 와 동일 규격 */
.f1inv-floor-container {
    background: #f7f8fa;
    border-radius: 16px;
    padding: 12px 18px 14px;
    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: 2px;
    margin-bottom: 8px;
}

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

/* 기준일 — 패널 제목을 없앤 뒤로 헤더 좌측에 혼자 섭니다.
   앞에 제목이 없으므로 왼쪽 여백(margin-left)은 두지 않습니다. */
.panel-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    margin-left: 0;
    white-space: nowrap;
}

/* ========================================
   재고 확인 상태 (확인 / 보류 / 미확인)
   ----------------------------------------
   '미확인'이 기본값이고 DB에는 행이 없습니다. 확인·보류를 고른 날만 행이
   생기고, 미확인으로 되돌리면 행을 지웁니다.
   ======================================== */
.f1inv-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* 버튼 왼쪽 자리 — '확인'은 고정 문구, 보류·미확인은 메모.
   메모가 길어도 헤더 줄이 밀리지 않도록 폭을 제한하고 말줄임합니다
   (전체 내용은 title 툴팁으로 남습니다). */
.f1inv-status-msg {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    color: #636366;
}
.f1inv-status-msg.is-done {
    color: #248a3d;
    font-weight: 700;
}
/* 폭이 모자랄 때 줄어드는 것은 이 입력칸입니다.
   수정 모드에서는 헤더 오른쪽에 [ERP 대조][전자신문 대조] + 메모칸 +
   상태 버튼 3개가 한 줄에 들어가는데, 폭이 빠듯하면 flex 가 모두를
   조금씩 줄여 상태 버튼 글자가 두 줄로 접혔습니다. 줄어들 것을 한
   곳으로 정해 두면(=메모칸) 나머지는 원래 크기를 지킵니다. */
.f1inv-status-memo {
    flex: 0 1 240px;
    min-width: 110px;
    width: 240px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid #d1d1d6;
    border-radius: 12px;
    background: #f7f8fa;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: #1d1d1f;
    outline: none;
    transition: border-color 0.18s ease;
}
.f1inv-status-memo:focus { border-color: #8e8e93; }
.f1inv-status-memo::placeholder { color: #c7c7cc; font-weight: 500; }
.f1inv-status-group {
    display: inline-flex;
    align-items: center;
    background: #eef0f4;
    border: 1px solid #d1d1d6;
    border-radius: 14px;
    padding: 2px;
    gap: 2px;
    flex: none;   /* 폭이 모자라도 줄어들지 않습니다 (위 메모칸이 줄어듭니다) */
}
.f1inv-status-btn {
    border: none;
    background: transparent;
    border-radius: 12px;
    padding: 0 12px;
    height: 22px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: #55555d;
    letter-spacing: -0.2px;
    cursor: default;
    outline: none;
    white-space: nowrap;   /* 높이가 22px 로 고정돼 있어 접히면 글자가 잘립니다 */
    transition: background-color 0.18s ease, color 0.18s ease;
}
/* 고른 값만 색이 찹니다 — 세 색을 다 칠하면 무엇이 선택인지 사라집니다 */
.f1inv-status-btn.active { color: #ffffff; }
.f1inv-status-btn.active[data-status="confirmed"] { background-color: #34c759; }
.f1inv-status-btn.active[data-status="hold"]      { background-color: #ff9f0a; }
.f1inv-status-btn.active[data-status="unchecked"] { background-color: #8e8e93; }

/* 읽기 모드의 상태 칩 — 지금 상태 하나만 보여 줍니다.
   수정 모드의 '고른 값'(꽉 찬 색)과 달리 옅은 배경 + 색 글씨로 둡니다.
   매일 대부분 '미확인'이라 꽉 찬 색으로 두면 헤더가 무거워지고, 옅은
   칩이면 이 페이지의 다른 버튼(전자신문·ERP 대조)과도 톤이 맞습니다.
   보는 것만 가능하다는 신호이기도 합니다. */
/* 크기(26px · 반경 13px · 테두리 1px)는 옆의 [ERP 대조][전자신문 대조]
   (공통 알약 버튼 — css/common/common_pill_btn.css 의 .mk-pill-btn)와 같게
   맞춥니다 — 한 줄에 나란히 서므로 높이와 모서리가 어긋나면 그것부터
   눈에 띕니다. 그 값을 바꾸면 이 칩도 같이 보셔야 합니다.
   테두리 색만 상태를 따라가고, '미확인'은 옆 버튼과 같은 중립색입니다. */
.f1inv-status-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border: 1px solid #d1d1d6;
    border-radius: 13px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.f1inv-status-chip[data-status="confirmed"] { background: #e8f8ec; border-color: #a7dfb6; color: #248a3d; }
.f1inv-status-chip[data-status="hold"]      { background: #fff4e5; border-color: #f2d19b; color: #b26a00; }
.f1inv-status-chip[data-status="unchecked"] { background: #f2f2f7; border-color: #d1d1d6; color: #636366; }

/* 수정 모드에서만 누를 수 있습니다 */
.f1inv-status.is-editable .f1inv-status-btn { cursor: pointer; }
.f1inv-status.is-editable .f1inv-status-btn:not(.active):hover {
    background-color: #e2e4ea;
    color: #1d1d1f;
}

/* 레이아웃 안의 레이아웃 (내부 카드 프레임) */
.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);
}

/* 저장위치별 카드를 세로로 쌓습니다. 표 머리글은 첫 카드에만 있고 나머지
   카드는 같은 colgroup 을 쓰므로 열이 그대로 이어집니다. */
.f1inv-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--inv-card-gap);
    min-width: var(--inv-min-width);
    position: relative;   /* 유리 커서(.f1inv-cursor)의 기준 상자 */
}
.f1inv-placeholder-box {
    padding: 28px 0;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #8e8e93;
}

/* ── 불러오는 중 ────────────────────────────────────────────────────────
   표를 지우지 않습니다. 예전에는 날짜를 옮길 때마다 머리글과 본문을 지우고
   '불러오는 중...' 한 줄로 바꿨는데, 그 사이 카드 높이가 0 으로 무너졌다
   다시 서면서 화면 전체가 출렁였습니다(페이지가 새로 뜬 것처럼 보입니다).
   자세한 배경은 js/factory1_inventory_io_render.js 의 '표' 머리말에 있습니다.

   [흐림은 모르는 것에만 겁니다]
   흐림이 뜻하는 것은 "이 값은 지금 화면의 날짜 것이 아닐 수 있다" 입니다.
   저장위치 · 품목코드 · 품목명 · 머리글은 어느 날짜든 같은 값이라 불확실할
   것이 없습니다. 그것까지 덮으면 매번 화면 절반이 깜빡여서 신호가 뭉개지고,
   눈도 곧 그 깜빡임을 무시하게 됩니다. 그래서 날짜마다 실제로 바뀌는 숫자
   칸(td[data-f])에만 겁니다.

   [왜 opacity 가 아니라 color 인가]
   .f1inv-table td 는 border-bottom(#f2f2f7)으로 행을 나눕니다. 숫자 칸에만
   opacity 를 걸면 그 구분선까지 같이 옅어져서, 행 구분선이 왼쪽 세 칸은
   진하고 숫자 칸부터 연해집니다 — 상태 표시가 아니라 렌더링이 깨진 것처럼
   보입니다. 글자색만 바꾸면 테두리·배경은 그대로 있습니다.

   [누르는 것은 표 전체를 막습니다]
   흐림과 달리 조작은 값이 안 온 동안 표 어디든 의미가 없습니다. 확인 상태도
   같이 막습니다 — 아직 안 온 날짜의 상태를 누르면 다음 응답이 그 위를
   덮어써서, 누른 것이 조용히 없던 일이 됩니다. (그쪽은 날짜별로 저장되는
   값이라 흐림도 같이 겁니다) */
.f1inv-table td[data-f] { transition: color 0.14s ease-out; }
.f1inv-status { transition: opacity 0.14s ease-out; }

.f1inv-wrapper.is-loading .f1inv-table-scroll,
.f1inv-wrapper.is-loading .f1inv-status { pointer-events: none; }

.f1inv-wrapper.is-loading .f1inv-status { opacity: 0.45; }

/* !important 인 이유 — 차이 셀의 초록·빨강(.f1inv-diff-*)이 이미 !important
   라서 특이도만으로는 이기지 못합니다. 부호의 방향도 아직 이전 날짜의
   것이라 같이 옅어지는 것이 맞습니다.
   값이 없는 칸(.f1inv-empty)은 원래 이 색이라 그대로 있습니다 — 없던 값이
   더 불확실해질 것은 없습니다. */
.f1inv-wrapper.is-loading .f1inv-table td[data-f] { color: #c7c7cc !important; }

/* 표 스크롤 영역 — 가로는 좁은 화면에서, 세로는 화면 높이를 넘길 때만
   스크롤합니다. 머리글은 이 영역 안에서 붙어 있으므로 세로 제한이 없으면
   붙을 자리도 없습니다(스크롤이 없으면 sticky 는 아무 일도 하지 않습니다).
   PDF 는 이 제한을 잠깐 풀고 찍으므로 잘리지 않습니다 (.f1inv-capturing). */
.f1inv-table-scroll {
    overflow: auto;
    max-height: var(--inv-table-max-height);
    /* 스크롤이 끝에 닿은 뒤 더 끌면 내용 전체가 고정 머리글·기둥까지
       통째로 딸려 갔다가 튕겨 돌아오는 iOS 고무줄 반동을 끕니다 —
       표가 덜렁거리는 느낌의 주범이었습니다 (2026-08-13 사용자 제보).
       표 끝에서 페이지(바깥) 스크롤로 이어지는 것도 같이 막힙니다. */
    overscroll-behavior: none;
    scrollbar-width: thin;
    scrollbar-color: #c7c7cc transparent;
}

/* 표 머리글 — 카드 위에 따로 서서, 본문이 아래로 지나가도 자리를 지킵니다.
   1·2레벨을 한 덩어리로 묶어 두 줄이 같이 멈춥니다.
   본문 카드들과 같은 colgroup·같은 폭을 쓰고 세로 스크롤바도 같은 프레임
   안에서 생기므로 열이 어긋나지 않습니다. */
.f1inv-head-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    min-width: var(--inv-min-width);
    background: #f7f8fa;    /* 카드 사이 틈으로 지나가는 행이 비쳐 보이지 않도록 */
    padding-bottom: var(--inv-card-gap);
}
.f1inv-head-sticky:empty { display: none; }

/* 머리글 아래 구분선은 카드 테두리가 대신합니다 */
.f1inv-head-card .f1inv-thead-lv2 th { border-bottom: none; }
.f1inv-table-scroll::-webkit-scrollbar {
    width: var(--inv-scrollbar-width);
    height: var(--inv-scrollbar-width);
}
.f1inv-table-scroll::-webkit-scrollbar-track { background: transparent; }
.f1inv-table-scroll::-webkit-scrollbar-thumb {
    background-color: #c7c7cc;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.f1inv-table-scroll::-webkit-scrollbar-thumb:hover { background-color: #a1a1a6; }

/* ========================================
   재고 종합 표
   ======================================== */
.f1inv-table {
    width: 100%;
    /* 품목명이 뭉개지지 않는 최소 폭 — 이보다 좁아지면 가로 스크롤로 전환됩니다 */
    min-width: var(--inv-min-width);
    table-layout: fixed;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #1d1d1f;
}

/* 열 너비 — 품목명 열만 남은 공간을 모두 차지합니다 */
.f1inv-col-loc  { width: 140px; }
.f1inv-col-code { width: 120px; }
.f1inv-col-erp  { width: 88px; }
.f1inv-col-io   { width: 78px; }
.f1inv-col-real { width: 76px; }
.f1inv-col-sum  { width: 86px; }
.f1inv-col-diff { width: 98px; }

/* ── 헤더 ──
   고정은 바깥의 .f1inv-head-sticky 가 맡습니다. thead 자체에 sticky 를 걸면
   그 표(첫 카드) 안에서만 붙어 있어, 아래 카드로 넘어가는 순간 사라집니다. */
.f1inv-table thead {
    background-color: #f7f8fa;
}

.f1inv-thead-lv1 th {
    height: var(--inv-head-lv1-height);
    padding: 0 6px;
    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;
}

.f1inv-thead-lv2 th {
    height: var(--inv-head-lv2-height);
    padding: 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #636366;
    text-align: center;
    background-color: #f7f8fa;
    background-clip: padding-box;
    border-bottom: 1px solid #e5e5ea;
}

/* 두 행을 병합한 헤더는 위/아래 구분선 사이에서 가운데 정렬 */
.f1inv-table th[rowspan="2"] {
    vertical-align: middle;
}

/* 그룹 경계선 — 엑셀의 굵은 세로선을 대신하는 얇은 구분선 */
.f1inv-sep { border-left: 1px solid #dcdce4 !important; }

/* ── 데이터 셀 ── */
.f1inv-table td {
    height: var(--inv-row-height);
    padding: 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1d1d1f;
    vertical-align: middle;
    border-bottom: 1px solid #f2f2f7;
    background-color: #f7f8fa;
}

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

/* 저장위치 셀 (여러 품목 행을 병합) */
.f1inv-loc-td {
    text-align: center;
    border-right: 1px solid #e5e5ea !important;
    padding: 8px 10px;
}
.f1inv-loc-name {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    line-height: 1.35;
}
.f1inv-loc-code {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #8e8e93;
    letter-spacing: 0.4px;
}

/* 저장위치 그룹은 이제 카드로 나뉘어 있어 구분선이 필요 없습니다 */

/* 품목 코드 / 품목명 */
.f1inv-item-code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #636366;
    text-align: center;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.f1inv-item-name {
    text-align: left;
    padding-left: 12px !important;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 숫자 셀 — 자릿수가 흔들리지 않도록 tabular-nums 적용 */
.f1inv-num {
    text-align: right;
    padding-right: 12px !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 합계 열 강조 */
.f1inv-sum {
    font-weight: 800;
    background-color: #f2f4f7 !important;
}

/* 차이 열 색상 */
.f1inv-diff-positive { color: #34c759 !important; font-weight: 800; }
.f1inv-diff-negative { color: #ff3b30 !important; font-weight: 800; }
.f1inv-diff-zero { color: #8e8e93 !important; font-weight: 700; }
.f1inv-virtual { color: #8e8e93 !important; font-style: italic; font-weight: 600; }

/* 값이 아직 없는 셀 — 0 이 아니라 '그날 실사 입력이 없었다'는 뜻입니다 */
.f1inv-empty { color: #c7c7cc; font-weight: 400; }

/* DB가 아니라 constant.js 에 박아 둔 고정값 (나투라 등).
   숫자만 보면 DB 값과 구분되지 않아 왜 안 변하는지 알 수 없으므로 표시합니다. */
.f1inv-fixed {
    color: #8e8e93;
    text-decoration: underline dotted #c7c7cc;
    text-underline-offset: 3px;
    cursor: help;
}

/* 행 hover */
.f1inv-table tbody tr:hover td { background-color: #fafafa; }
.f1inv-table tbody tr:hover .f1inv-sum { background-color: #f7f7fa !important; }

/* ========================================
   셀 선택
   ----------------------------------------
   지고 재고 · 입고 페이지와 같은 규격입니다 — 칸을 누르면 유리 커서가 얹히고
   머리글(1·2레벨)이 주황으로 켜집니다. 다른 점은 자취뿐입니다. 저 페이지들은
   행을 통째로 칠하지만 여기는 왼쪽(같은 행)과 위쪽(같은 열) 두 갈래만
   칠합니다. 열이 11개라 행·열을 다 칠하면 화면 절반이 물들어 정작 고른 칸이
   묻힙니다. 숫자를 확인할 때 눈이 가는 곳도 왼쪽 끝의 품목명과 위쪽 끝의
   열 이름 둘뿐입니다.

   왼쪽 자취는 데이터 칸부터입니다 — 행 머리글 세 칸(저장위치·품목코드·
   품목명)은 자취 대신 아래의 주황(td.f1inv-hl-head)으로 켜집니다.

   합계 열과 hover 색이 !important 라 여기도 같은 무게로 덮습니다.
   ======================================== */
.f1inv-wrapper .inner-layout-card .f1inv-table tbody td.f1inv-hl-row,
.f1inv-wrapper .inner-layout-card .f1inv-table tbody td.f1inv-hl-col {
    background-color: var(--inv-hl-trail) !important;
}
.f1inv-wrapper .inner-layout-card .f1inv-table tbody td.f1inv-hl-cell {
    background-color: var(--inv-hl-cell) !important;
    position: relative;
    z-index: 10;          /* 유리 커서(z-index 8) 위에 글자가 남도록 */
    font-weight: 900;
}
.f1inv-wrapper .inner-layout-card .f1inv-table thead th.f1inv-hl-head {
    background-color: var(--inv-hl-head-bg) !important;
    color: var(--inv-hl-head-fg);
}

/* 행 머리글 — 왼쪽 세 칸(저장위치·품목코드·품목명)은 위쪽 열 이름과 같은
   역할이라(데이터를 왼쪽에서 분류해 둔 것), 칸을 고르면 열 머리글과 같은
   주황으로 켜집니다 (2026-08-10). 눌러도 골라지지 않습니다 — render.js 의
   bindCellSelect 가 막습니다. 저장위치 칸 안의 글자는 span 에 제 색이
   박혀 있어 따로 덮습니다. */
.f1inv-wrapper .inner-layout-card .f1inv-table tbody td.f1inv-hl-head {
    background-color: var(--inv-hl-head-bg) !important;
    color: var(--inv-hl-head-fg);
}
.f1inv-wrapper .inner-layout-card .f1inv-table tbody td.f1inv-hl-head .f1inv-loc-name,
.f1inv-wrapper .inner-layout-card .f1inv-table tbody td.f1inv-hl-head .f1inv-loc-code {
    color: var(--inv-hl-head-fg);
}

/* 유리 커서 — 고른 칸 위에 얹히는 반투명 판 (지고 재고 · 입고와 동일 규격).
   칸에서 칸으로 미끄러져 이동해서 방향키로 옮길 때 어디로 갔는지 눈이 따라갑니다. */
.f1inv-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;
}
.f1inv-cursor.active { opacity: 1; }

/* 누를 수 있는 곳임을 커서로 알립니다 (다른 페이지의 .f1jg-data-cell 과 동일) */
.f1inv-table tbody td { cursor: pointer; }

/* PDF 캡쳐 중에만 — 세로 제한과 고정 머리글을 잠깐 풀어 전체를 펼칩니다.
   (html2canvas 는 스크롤 영역을 잘라 찍고, sticky 요소는 엉뚱한 자리에 그립니다) */
.f1inv-capturing .f1inv-table-scroll {
    max-height: none;
    overflow: visible;
}
.f1inv-capturing .f1inv-head-sticky { position: static; }
/* 카드 모드의 열 이름 줄·저장위치 띠·왼쪽 기둥도 같은 이유로 풉니다 */
.f1inv-capturing .f1invm-head,
.f1inv-capturing .f1invm-sect,
.f1inv-capturing .f1invm-sect-in,
.f1inv-capturing .f1invm-corner,
.f1inv-capturing.f1inv-mobile .f1inv-item-name { position: static; }

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

/* ========================================
   전자신문 대장 대조

   열을 늘리지 않고, 이미 세로 병합된 저장위치 칸(.f1inv-loc-td)에 배지
   한 줄을 얹습니다. 그 칸은 이름·코드가 쌓인 구조라 세 번째 줄이 자연스럽게
   들어가고, 사급 블록은 2행 높이라 행 높이도 변하지 않습니다.
   자세한 배경은 js/factory1_inventory_io_ledger.js 머리말에 있습니다.
   ======================================== */
/* 배지가 들어가는 칸만 이름·코드 줄간격을 조입니다. 그러지 않으면 세
   번째 줄이 칸의 여유(약 17px)를 넘겨 이 블록만 행이 40 → 50px 로 커집니다.
   열은 colgroup 을 공유해 안 어긋나지만, 다른 카드와 행 높이가 달라집니다.
   조이는 범위를 이 칸으로 묶어 두어 다른 저장위치는 그대로입니다. */
.f1inv-loc-td.has-ledger .f1inv-loc-name { line-height: 1.12; }
.f1inv-loc-td.has-ledger .f1inv-loc-code { margin-top: 2px; }
.f1inv-loc-td.has-ledger .f1inv-ledger-badge { margin-top: 3px; }

.f1inv-ledger-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    padding: 1px 8px 1px 6px;
    border-radius: 999px;
    border: 1px solid #d1d1d6;
    background: #f4f4f8;
    color: #48484a;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.5;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    max-width: 100%;
}

.f1inv-ledger-badge:hover {
    background: #f7f8fa;
    border-color: #a1a1a8;
    color: #1d1d1f;
}

.f1inv-ledger-badge .material-symbols-outlined {
    font-size: 12px;
    line-height: 1;
    color: #8e8e93;
}

.f1inv-ledger-badge-main { font-variant-numeric: tabular-nums; }

/* 몇 일 자 대장인지 — 원장은 주 단위로 오므로 이게 없으면 어느 날 숫자인지
   알 수 없습니다. 0 이나 직전 값을 몰래 끌어오지 않는 대신 날짜를 밝힙니다. */
.f1inv-ledger-badge-sub {
    font-size: 10px;
    font-weight: 600;
    color: #8e8e93;
}

/* 화면 기준일 대장이 그대로 있는 상태 */
.f1inv-ledger-badge.is-ready {
    border-color: #b9d8f2;
    background: #eaf4fd;
    color: #0b62c4;
}
.f1inv-ledger-badge.is-ready .material-symbols-outlined,
.f1inv-ledger-badge.is-ready .f1inv-ledger-badge-sub { color: #4a8fd0; }

/* 대장은 있으나 기준일보다 이전 것 (주차 마감 전) — 점선으로 '덜 온 값' 표시 */
.f1inv-ledger-badge.is-stale {
    border-style: dashed;
    border-color: #c7c7cc;
    background: #f1f3f6;
}

/* 아무 자료도 없는 상태 (DB 미연동) */
.f1inv-ledger-badge.is-empty {
    border-style: dashed;
    border-color: #d1d1d6;
    background: transparent;
    color: #8e8e93;
    font-weight: 600;
}

/* ※ 헤더 우측 [ERP 대조] · [전자신문 대조] 두 버튼의 모양
     (.f1inv-ledger-btn)이 여기 있었습니다. 2026-08-05, 같은 값의 규칙이
     세 파일에 흩어져 있던 것을 css/common/common_pill_btn.css 의
     .mk-pill-btn 한 벌로 모았습니다. 두 버튼은 이제 그 클래스를 씁니다.
     (배지만 두면 처음 쓰는 사람이 못 찾아서 둔 버튼들입니다) */

/* ── 대조 팝업 ──────────────────────────────────────────────
   껍데기는 공지 모달(.f3i-nmodal-*)을 그대로 씁니다. 공지처럼 긴 글을
   담는 창이 아니라 높이만 내용에 맞게 줄입니다. */
.f1inv-lmodal-box {
    max-width: 520px !important;
    height: auto !important;
    max-height: 86vh !important;
}

.f1inv-lmodal .f3i-nmodal-body {
    padding: 16px 18px 18px;
    height: auto;
    font-size: 13px;
    line-height: 1.5;
    color: #1d1d1f;
}

/* 어느 창고 · 어느 날 기준인지 */
.f1inv-lhead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f3;
}
.f1inv-lhead-loc { font-size: 13px; font-weight: 800; letter-spacing: -0.3px; }
.f1inv-lhead-code {
    font-size: 10.5px; font-weight: 700; color: #8e8e93;
    background: #f4f4f8; border-radius: 999px; padding: 2px 7px;
}
.f1inv-lhead-date { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #8e8e93; }

/* 세 값 */
.f1inv-lgroup { margin-top: 12px; }

.f1inv-lrow {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: baseline;
    column-gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #f5f5f7;
}
.f1inv-lrow-label { font-size: 12px; font-weight: 700; color: #636366; }
.f1inv-lrow-value {
    font-size: 15px; font-weight: 800; letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums; text-align: right;
}
.f1inv-lrow-value em { font-size: 10.5px; font-weight: 600; color: #a1a1a8; font-style: normal; }
.f1inv-lrow-note {
    grid-column: 2; font-size: 10.5px; font-weight: 600; color: #a1a1a8;
    text-align: right; letter-spacing: -0.2px;
}
.f1inv-lrow.is-primary .f1inv-lrow-value { color: #0b62c4; font-size: 17px; }

/* 미정산 손지 누계 — 이름이 곧 설명입니다. '차이'로 적으면 매일 오류로 읽힙니다. */
.f1inv-lgap {
    margin-top: 14px;
    padding: 11px 13px;
    background: #fbf8f2;
    border: 1px solid #efe4d2;
    border-radius: 10px;
}
.f1inv-lgap-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.f1inv-lgap-label { font-size: 12px; font-weight: 800; color: #8a5a00; }
.f1inv-lgap-value {
    font-size: 16px; font-weight: 800; color: #8a5a00;
    font-variant-numeric: tabular-nums; letter-spacing: -0.3px;
}
.f1inv-lgap-value em { font-size: 10.5px; font-weight: 600; font-style: normal; opacity: 0.7; }
/* (설명 문단 .f1inv-lgap-why 는 2026-08-11 팝업 문안 정리로 없어졌습니다) */

/* 최근 작업일 흐름 */
.f1inv-lweek { margin-top: 14px; }
.f1inv-lweek-title { font-size: 11.5px; font-weight: 800; color: #636366; margin-bottom: 6px; }
.f1inv-lweek table { width: 100%; border-collapse: separate; border-spacing: 0; }
.f1inv-lweek th {
    font-size: 10.5px; font-weight: 700; color: #8e8e93; text-align: right;
    padding: 4px 6px; border-bottom: 1px solid #e5e5ea;
}
.f1inv-lweek th:first-child, .f1inv-lweek td:first-child { text-align: left; }
.f1inv-lweek td {
    font-size: 12px; font-weight: 600; text-align: right;
    padding: 5px 6px; border-bottom: 1px solid #f5f5f7;
    font-variant-numeric: tabular-nums;
}
.f1inv-lweek tr.is-last td { font-weight: 800; background: #f7fbff; }
/* (증면 표기 td i 와 안내 문단 .f1inv-lnote 는 2026-08-11 팝업 문안 정리로 없어졌습니다) */

.f1inv-lempty {
    margin-top: 12px; padding: 14px;
    background: #f1f3f6; border: 1px dashed #d1d1d6; border-radius: 10px;
    font-size: 12px; font-weight: 600; color: #636366; line-height: 1.6;
}
.f1inv-lempty strong { display: block; color: #1d1d1f; margin-bottom: 4px; }

.f1inv-lnotice {
    margin-top: 12px; padding: 9px 12px;
    background: #f4f8fd; border: 1px solid #dbe8f6; border-radius: 9px;
    font-size: 11.5px; font-weight: 600; color: #3a6ea5; line-height: 1.55;
}

.f1inv-lfoot { margin-top: 16px; display: flex; justify-content: flex-end; }
.f1inv-lfoot-link {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12px; font-weight: 700; color: #007aff; text-decoration: none;
}
.f1inv-lfoot-link:hover { text-decoration: underline; }
.f1inv-lfoot-link .material-symbols-outlined { font-size: 15px; }

/* 공통 유틸 (다른 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; }

/* ════════════════════════════════════════════════════════════════
   반응형 (2026-08-06 재구성)
   ────────────────────────────────────────────────────────────────
   3공장 재고종합의 모바일 구조를 이 표에 맞게 옮겼습니다. 구간은 넷:

     ~640px        폰 세로. 카드 모드 + 하단 독(공통 헤더) + 작은 글자
     641~1024px    아이패드 세로(768·810·834) · 폰 가로. 카드 모드 그대로,
                   글자는 데스크톱 크기 — 이 폭이면 표 전체가 거의 다
                   들어와 가로 스와이프가 거의 없습니다
     1025~1219px   아이패드 가로(1080·1180·1194). 열을 조금씩 줄인
                   데스크톱 한 장짜리 표 (11열이 가로 스크롤 없이 들어감)
     1220px~       기존 데스크톱 그대로

   카드 모드란: 저장위치·품목코드 열을 숨기고 품목명이 왼쪽에 sticky 로
   붙어, 숫자 열들만 가로로 스와이프하는 방식입니다(엑셀 틀고정).
   factory1_inventory_io_mobile.js 가 아래 두 가지를 만들어 꽂고
   .f1inv-mobile 클래스를 붙입니다 — JS 가 없으면 이 블록 대부분이 잠들어
   있어(셀렉터가 .f1inv-mobile 필요) 데스크톱 표 + 가로 스크롤로 안전하게
   남습니다.

     · 열 이름 줄(.f1invm-head)  — 스크롤 창에 **하나만**. 맨 위에 붙습니다.
     · 저장위치 띠(.f1invm-sect) — 카드마다 하나. 열 이름 줄 바로 아래에
                                   붙어, 지금 보고 있는 창고를 알려 줍니다.

   [2026-08-06 재구성] 그 전에는 카드마다 '저장위치(코너) + 열 이름' 한 줄을
   통째로 꽂았습니다. 두 가지가 문제였습니다.
     ① 같은 열 이름 아홉 개가 카드 수만큼 되풀이돼 화면이 시끄러웠습니다.
     ② 코너와 열 이름 칸의 z-index 가 15 로 같아, 가로로 밀면 열 이름이
        붙박이 코너 **위로** 겹쳐 그려졌습니다(문서 순서상 뒤가 이김).
   열 이름은 어차피 모든 카드가 같으니 창에 하나만 두고, 카드마다 다른
   저장위치만 띠로 남겼습니다. 곧 엑셀 틀고정과 같은 모양입니다.

   [겹침 순서] 낮은 값이 아래입니다. 가로로 밀 때 붙박이(왼쪽 기둥)가
   본문 위에 있어야 숫자가 기둥을 뚫고 비쳐 보이지 않습니다.
     유리 커서 8 · 선택 칸 10 · 왼쪽 기둥(품목명) 20 ·
     저장위치 띠 30 · 열 이름 줄 40 · 그 코너 41
   ════════════════════════════════════════════════════════════════ */

/* PC 용 115% 확대(common_header.css)는 1219px 이하에서 풉니다.
   좁은 화면에서는 확대분만큼 열이 밀려나 스와이프만 늘어납니다.
   (640px 이하는 공통 CSS 도 풀지만, 중간 구간은 여기서만 풉니다) */
@media (max-width: 1219px) {
    body { zoom: 100%; }
}

/* ── 아이패드 가로 (1025~1219px): 컴팩트 한 장짜리 표 ──
   데스크톱과 같은 구조에서 열 폭·글자만 줄여 11열을 가로 스크롤 없이
   넣습니다. 카드 모드보다 정보 밀도가 높아, 이 폭이 되면 한 장이 낫습니다. */
@media (min-width: 1025px) and (max-width: 1219px) {
    :root { --inv-min-width: 990px; }

    .f1inv-col-loc  { width: 120px; }
    .f1inv-col-code { width: 106px; }
    .f1inv-col-erp  { width: 80px; }
    .f1inv-col-io   { width: 70px; }
    .f1inv-col-real { width: 68px; }
    .f1inv-col-sum  { width: 78px; }
    .f1inv-col-diff { width: 88px; }

    .f1inv-table td { font-size: 12px; }
    .f1inv-item-name { font-size: 12px; }
    .f1inv-thead-lv1 th { font-size: 12.5px; }
    .f1inv-thead-lv2 th { font-size: 11px; }
}

/* ── 카드 모드 (1024px 이하 — 아이패드 세로 · 폰) ── */
@media (max-width: 1024px) {
    /* 열 폭은 여기 한 곳에서만 정합니다 — 본문 칸과 열 이름 줄이 서로 다른
       표라서, 두 곳에 숫자를 적어 두면 한쪽만 고쳤을 때 열이 어긋납니다.
       (그래도 어긋나지 않도록 mobile.js 가 실제 폭을 재어 한 번 더 맞춥니다) */
    :root {
        --f1invm-rail-w: 144px;   /* 왼쪽 기둥 = 품목명 */
        --f1invm-cell-w: 64px;    /* 숫자 열 */
        --f1invm-diff-w: 76px;    /* 실재고-ERP (부호 + 자릿수가 길어 조금 넓게) */
        --f1invm-head-h: 30px;    /* 열 이름 줄 높이 — 저장위치 띠가 붙을 자리.
                                     실제 값은 mobile.js 가 재어 덮어씁니다 */
    }

    .f1inv-floor-container { padding: 12px; border-radius: 14px; }
    .panel-title { font-size: 16px; }
    .f1inv-legend { display: none; }

    /* 공용 2단 머리글과 저장위치·품목코드 열을 숨깁니다. 저장위치는
       카드 머리글의 코너로, 열 이름은 카드마다 꽂는 한 줄 머리글로
       옮겨 갑니다 (factory1_inventory_io_mobile.js). */
    .f1inv-mobile .f1inv-head-sticky { display: none; }
    .f1inv-mobile .f1inv-loc-td,
    .f1inv-mobile .f1inv-item-code { display: none !important; }

    /* 표: 자연 폭. 열 수가 11 → 9 로 줄어 colgroup 폭 지정이 열과
       어긋나므로 전부 풀고, 폭은 아래 셀 쪽 값으로만 정합니다 —
       모든 카드가 같은 값을 쓰므로 카드끼리 열이 (내용이 넘치지 않는
       한) 같은 자리에 섭니다. */
    .f1inv-mobile .f1inv-table {
        table-layout: auto;
        width: max-content;
        min-width: 0;
    }
    .f1inv-mobile .f1inv-table col { width: auto !important; }

    .f1inv-mobile .f1inv-blocks {
        width: max-content;
        min-width: 100%;
        gap: 10px;
    }
    .f1inv-mobile .f1inv-head-sticky,
    .f1inv-mobile .f1inv-table-scroll { min-width: 0; }

    /* ── 바깥 테두리 = 스크롤 창 ──
       테두리를 카드마다 두면 열 이름 줄(머리글)은 틀 밖에 떠 있고, 카드의
       둥근 모서리 틈으로 스크롤되는 내용이 삐죽 비쳐 보였습니다 (2026-08-13
       사용자 제보). 그래서 틀을 머리글까지 감싸는 스크롤 창 하나로 옮기고,
       안쪽 카드는 테두리 없이 띠(.f1invm-sect)와 사이 간격으로만 나눕니다.
       스크롤 창의 테두리는 내용과 함께 흐르지 않고 보이는 자리에 그대로
       있으므로, 엑셀 틀고정처럼 바깥 틀이 사방을 항상 감쌉니다. */
    .f1inv-mobile .f1inv-table-scroll {
        border: 1px solid #e5e5ea;
        border-radius: 12px;
        background: #f7f8fa;
    }

    /* 카드: sticky(머리글·품목명)가 스크롤 프레임에 붙으려면 중간에
       overflow: hidden 이 없어야 합니다. 표가 카드보다 넓어질 일은
       없고(카드가 표 폭을 따라갑니다).
       테두리·둥근 모서리·그림자는 위의 바깥 틀로 옮겼으므로 걷습니다 —
       남겨 두면 틀 가장자리에서 두 줄로 겹쳐 보입니다. */
    .f1inv-mobile .inner-layout-card {
        overflow: visible;
        width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* iOS 사파리는 스크롤 상자 안의 sticky 를 스크롤과 다른 박자로 그려서,
       머리글·왼쪽 기둥이 밀렸다가 제자리로 돌아오는 덜렁거림이 보입니다.
       미리 제 그림층(레이어)으로 떼어 두면 스크롤과 같은 박자로 붙어
       다닙니다 (2026-08-13 사용자 제보). */
    .f1inv-mobile .f1inv-item-name,
    .f1invm-head,
    .f1invm-corner,
    .f1invm-sect,
    .f1invm-sect-in {
        will-change: transform;
    }

    /* ── 품목명 = 왼쪽 고정 기둥 ──
       이름 뒤쪽(1576롤/788롤)이 서로를 가르는 정보라 말줄임 대신 두 줄
       접기로 전부 보여 줍니다. 행 높이는 자동으로 늘어납니다.

       z-index 20 — 유리 커서(8)와 선택 칸(10)보다 위입니다. 5 였을 때는
       가로로 밀면 고른 칸의 회색 배경과 유리 판이 기둥 위로 비쳐 나왔습니다.
       (품목명은 행 머리글이라 칸으로 골라지지 않고, 데이터 칸을 고르면
        이 기둥이 머리글 주황으로 켜집니다 — 배경 규칙이 !important 라
        기둥 위에서도 보입니다) */
    .f1inv-mobile .f1inv-item-name {
        position: sticky;
        left: 0;
        z-index: 20;
        width: var(--f1invm-rail-w);
        min-width: var(--f1invm-rail-w);
        max-width: var(--f1invm-rail-w);
        background: #f7f8fa;
        border-right: 1px solid #e0e0e0 !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
        font-size: 12px;
        text-align: center;    /* 좁은 기둥이라 가운데가 읽기 편합니다 (2026-08-13) */
        padding: 6px 8px 6px 10px !important;
    }

    /* 숫자 열 — 모든 카드가 같은 폭을 쓰게 하는 기준값.
       제일 좁은 아이패드(768 세로)에서 카드 전체가 가로 스와이프 없이
       들어가도록 맞춘 값입니다. */
    .f1inv-mobile td[data-f] {
        width: var(--f1invm-cell-w);
        min-width: var(--f1invm-cell-w);
    }
    .f1inv-mobile td[data-f="diff"] {
        width: var(--f1invm-diff-w);
        min-width: var(--f1invm-diff-w);
    }
    .f1inv-mobile .f1inv-table td { font-size: 12px; }

    /* ════════════════════════════════════════════════════════
       열 이름 줄 — 스크롤 창에 하나 (JS 가 꽂습니다)
       ════════════════════════════════════════════════════════ */
    .f1invm-head {
        position: sticky;
        top: 0;
        z-index: 40;
        width: max-content;
        min-width: 100%;
        background: #f7f8fa;
    }

    .f1invm-headtable {
        table-layout: auto;
        width: max-content;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .f1invm-headtable th {
        background: #f7f8fa;
        border-bottom: 1px solid #e0e0e0;
        font-size: 10.5px;
        font-weight: 700;
        color: #636366;
        text-align: center;
        padding: 6px 4px;
        line-height: 1.25;
        white-space: nowrap;
        box-sizing: border-box;
        width: var(--f1invm-cell-w);
        min-width: var(--f1invm-cell-w);
    }
    .f1invm-headtable th:last-child {
        width: var(--f1invm-diff-w);
        min-width: var(--f1invm-diff-w);
    }

    /* 코너 — 위·왼쪽 둘 다 고정. 왼쪽 기둥(품목명)과 같은 폭이라 두 칸이
       한 줄기로 이어집니다. z-index 는 줄 안의 다른 칸보다 위여야 합니다
       (같으면 문서 순서상 뒤에 오는 열 이름들이 코너를 덮습니다). */
    .f1invm-corner {
        position: sticky;
        left: 0;
        z-index: 41;
        text-align: center !important;    /* 기둥의 품목명과 같이 가운데 (2026-08-13) */
        border-right: 1px solid #e0e0e0;
        width: var(--f1invm-rail-w) !important;
        min-width: var(--f1invm-rail-w) !important;
        max-width: var(--f1invm-rail-w) !important;
        padding: 6px 8px 6px 10px !important;
        font-size: 11px;
        font-weight: 800;
        color: #1d1d1f;
        vertical-align: middle;
    }

    /* 고른 열은 데스크톱 머리글과 같은 주황으로 켜집니다 */
    .f1invm-headtable th.f1inv-hl-head {
        background-color: var(--inv-hl-head-bg) !important;
        color: var(--inv-hl-head-fg);
    }

    /* 고른 행의 품목명 — 주황(--inv-hl-head-bg)이 반투명이라 그대로 두면
       기둥의 불투명 바탕(#f7f8fa)을 밀어내고 기둥이 비쳐, 가로로 밀 때
       뒤로 지나가는 숫자 칸이 품목명 글자 뒤에 겹쳐 보였습니다 (2026-08-13).
       기둥 바탕 위에 같은 주황을 한 겹 얹어 불투명하게 되돌립니다. */
    .f1inv-mobile .inner-layout-card .f1inv-table tbody td.f1inv-item-name.f1inv-hl-head {
        background: linear-gradient(var(--inv-hl-head-bg), var(--inv-hl-head-bg)) #f7f8fa !important;
    }

    /* ════════════════════════════════════════════════════════
       저장위치 띠 — 카드마다 하나 (JS 가 꽂습니다)

       열 이름 줄 바로 아래에 붙어, 카드가 흘러가는 동안 "지금 어느 창고를
       보고 있나"를 알려 줍니다. 다음 카드의 띠가 오면 밀어냅니다.
       띠 안의 글자(.f1invm-sect-in)는 따로 왼쪽에 붙습니다 — 그러지 않으면
       가로로 밀었을 때 창고 이름이 화면 밖으로 나가 버립니다.
       ════════════════════════════════════════════════════════ */
    .f1invm-sect {
        position: sticky;
        top: var(--f1invm-head-h);
        z-index: 30;
        background: #eef0f4;
        border-bottom: 1px solid #e0e0e0;
        /* 둥근 모서리를 걷었습니다 — 카드가 틀을 잃으면서(위 바깥 틀 참고)
           띠만 둥글면 귀퉁이 틈으로 지나가는 행이 삐죽 보입니다 (2026-08-13) */
        border-radius: 0;
    }

    .f1invm-sect-in {
        position: sticky;
        left: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 7px;
        width: max-content;
        max-width: 100%;
        padding: 5px 12px;
        box-sizing: border-box;
    }

    .f1invm-sect-name {
        font-size: 12px;
        font-weight: 800;
        color: #1d1d1f;
        letter-spacing: -0.3px;
        line-height: 1.25;
    }
    .f1invm-sect-code {
        font-size: 10px;
        font-weight: 700;
        color: #8e8e93;
        letter-spacing: 0.3px;
    }
    .f1invm-sect .f1inv-ledger-badge { margin-top: 0; }
}

/* ── 폰 (640px 이하): 카드 모드 + 작은 글자 ──
   공통 헤더 CSS 가 데스크톱 헤더를 숨기고 하단 독으로 갈아 끼웁니다.
   날짜·수정·저장은 독이 맡고, 이 페이지 몫은 표를 좁은 폭에 맞추는
   것뿐입니다. */
@media (max-width: 640px) {
    .panel-subtitle { display: none; }   /* 기준일은 하단 독의 날짜가 대신합니다 */

    /* 제목줄: 그리드 → 줄바꿈 되는 한 줄. 대조 버튼·확인 상태가
       폭이 모자라면 아랫줄로 접힙니다. */
    .panel-header-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }
    .panel-header-grid .header-left { padding-left: 2px; }
    .panel-header-grid .header-center { display: none; }
    .panel-header-grid .header-right {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }
    .f1inv-status-memo { flex: 1 1 120px; width: auto; }
    .f1inv-status-msg { max-width: 100%; }

    /* 하단 독(약 114px)과 상단 제목줄을 뺀 높이만 표 프레임에 줍니다.
       dvh 는 주소창이 접히는 모바일 사파리에서 실제 보이는 높이입니다. */
    :root { --inv-table-max-height: calc(100vh - 195px); }
    @supports (height: 100dvh) {
        :root { --inv-table-max-height: calc(100dvh - 195px); }
    }

    /* 폭이 좁은 만큼 기둥·숫자 열을 한 단계씩 줄입니다.
       (열 폭은 변수 한 곳만 바꾸면 본문·열 이름 줄이 같이 따라옵니다) */
    :root {
        --f1invm-rail-w: 118px;
        --f1invm-cell-w: 62px;
        --f1invm-diff-w: 72px;
    }
    .f1inv-mobile .f1inv-item-name,
    .f1invm-corner { font-size: 11.5px; }
    .f1invm-sect-name { font-size: 11.5px; }
    .f1inv-mobile .f1inv-table td { font-size: 11.5px; height: 34px; }
    .f1inv-loc-name { font-size: 12px; }
}


/* ================================================================
   매경전자 사용량 입력 (보정) 모달 스타일
   ================================================================ */
.f1inv-vmodal-box {
    max-width: 480px;
    width: 90%;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.f1inv-vmodal-body {
    padding: 20px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 80vh;
    overflow-y: auto;
}

.f1inv-vmodal-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #f0f7ff;
    border: 1px solid #cce3fd;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #0055b3;
}

.f1inv-vmodal-info-icon {
    font-size: 18px;
    color: #0071e3;
    flex-shrink: 0;
    margin-top: 1px;
}

.f1inv-vmodal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.f1inv-vmodal-label {
    font-size: 12px;
    font-weight: 700;
    color: #48484a;
}

.f1inv-vmodal-sublabel {
    font-size: 11.5px;
    font-weight: 600;
    color: #636366;
    margin-bottom: 4px;
    display: block;
}

.f1inv-vmodal-item-card {
    background: #f9f9fb;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.f1inv-vmodal-item-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #1d1d1f;
}

.f1inv-vmodal-item-spec {
    font-size: 11px;
    font-weight: 600;
    color: #8e8e93;
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e5e5ea;
}

.f1inv-vmodal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.f1inv-vmodal-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.f1inv-vmodal-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    box-sizing: border-box;
}

.f1inv-vmodal-input:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.f1inv-vmodal-input-wrap .f1inv-vmodal-input {
    padding-right: 32px;
    text-align: right;
}

.f1inv-vmodal-unit {
    position: absolute;
    right: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #8e8e93;
    pointer-events: none;
}

.f1inv-vmodal-status {
    font-size: 11.5px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f2f2f7;
    color: #3a3a3c;
    line-height: 1.4;
}

.f1inv-vmodal-footer {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    border-top: 1px solid #f2f2f7;
    background: #fafafa;
}

.f1inv-vmodal-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
}

.f1inv-vmodal-save {
    background: #0071e3;
    color: #ffffff;
}

.f1inv-vmodal-save:hover { background: #0077ed; }
.f1inv-vmodal-save:active { background: #0062c4; }

.f1inv-vmodal-cancel {
    background: #e5e5ea;
    color: #1d1d1f;
}

.f1inv-vmodal-cancel:hover { background: #d1d1d6; }

.f1inv-vmodal-delete {
    background: #ffe5e5;
    color: #d70015;
    border: 1px solid #ffb3b3;
}

.f1inv-vmodal-delete:hover {
    background: #ffd1d1;
}

.f1inv-vmodal-btn .material-symbols-outlined {
    font-size: 16px;
}