/* factory1_usage_style.css — 1공장 사용량 페이지 스타일
   ────────────────────────────────────────────────────────────────
   입고 페이지(factory1_ipgo_style.css)의 표 규격을 그대로 따르되,
   별쇄 계획표(우측 패널)와 우측 카드가 없어 표가 화면 전체 폭을 씁니다.
   그만큼 열이 넓어져 3~5자리 숫자가 잘리지 않습니다.

   [1층] 용지별 사용량  .f1us-*
   [2층] 매체별 사용량  .f1us-* (같은 규격을 그대로 씁니다)
                        열 개수만 층 컨테이너에서 덮어씁니다.
   ──────────────────────────────────────────────────────────────── */

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

    /*
      [날짜 열 너비]
      좌측 고정(sticky) 날짜 열의 너비입니다.
      입고 페이지(72px)보다 넓게 잡았습니다. 표 전체 폭에 여유가 있어
      "7/26(일)" 이 한 줄에 편하게 들어갑니다.
    */
    --f1us-date-col-width: 84px;

    /*
      [표 높이]
      계산식: 헤더 2줄(44px × 2 = 88px) + 행 높이 44px × 보고 싶은 일수
               5일 → 88 + 44 ×  5 = 308px  ← 3공장 io 페이지와 동일
              11일 → 88 + 44 × 11 = 572px
              15일 → 88 + 44 × 15 = 748px

      2층(매체별 사용량)을 위아래로 쌓을 예정이라, 두 층이 한 화면에
      들어오도록 3공장 io 와 같은 5일치로 맞춰 두었습니다.
    */
    --f1us-scroll-height: 308px;

    /*
      [데이터 열 개수 — 기본값]
      실제 값은 아래 패널별 클래스에서 각자 덮어씁니다.
      열을 추가/삭제하면 HTML 의 colgroup span 과 패널 클래스의 값,
      그리고 constant.js 의 COLUMNS 를 함께 맞춰 주세요.

      1층  좌 1공장 12열  /  우 별관 2열
      2층  좌 1공장  6열  /  우 3공장 6열
    */
    --f1us-data-col-count: 12;
}

.f1us-wrapper {
    gap: 14px;
}

/* 층(레이아웃) 외곽 프레임 — 이 안에 개별 패널(레이아웃 안의 레이아웃)이 들어갑니다
   입고 페이지(.f1ip-floor-container)와 같은 규격입니다. */
.f1us-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;
}

/* ================================================
   유틸리티
   ================================================ */
.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; }

/* ================================================
   패널 / 스크롤 영역
   ================================================ */
.f1us-panels-outer {
    display: flex;
    gap: 16px;
    align-items: stretch;
    background: transparent;
    overflow: visible;
}

/* 개별 패널 = '레이아웃 안의 레이아웃' 박스.
   층 컨테이너(.f1us-floor-container) 안에 테두리를 가진 흰 카드로 떠 있습니다.
   입고 페이지(.f1ip-panel)와 같은 규격입니다. */
.f1us-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    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);
}

/* ── 패널별 폭과 열 개수 ───────────────────────────────────────
   flex-grow 를 열 개수로, flex-basis 를 날짜 열 너비로 줍니다.
   이렇게 하면 패널마다 날짜 열을 하나씩 갖고도 데이터 열의 폭이
   좌우 패널에서 똑같이 떨어집니다.
     좌 = 84px + 12칸분,  우 = 84px + 2칸분  →  한 칸의 폭이 동일
   (--f1us-data-col-count 는 상속되어 안쪽 col 요소까지 내려갑니다)
   ──────────────────────────────────────────────────────────── */
.f1us-panel-paper-main {
    flex: 12 1 var(--f1us-date-col-width);
    --f1us-data-col-count: 12;
}

.f1us-panel-paper-annex {
    flex: 2 1 var(--f1us-date-col-width);
    --f1us-data-col-count: 2;
}

.f1us-panel-media {
    flex: 6 1 var(--f1us-date-col-width);
    --f1us-data-col-count: 6;
}

.f1us-panel-media-f3 {
    flex: 7 1 var(--f1us-date-col-width);
    --f1us-data-col-count: 7;
}

/* 날짜 열이 없는 패널(우측). 날짜 열 너비를 0 으로 두면 위의 flex-basis 와
   col 너비 계산이 그대로 맞아떨어져, 좌우 패널의 데이터 칸 폭이 같아집니다.
   ※ 이 클래스는 위 폭 지정보다 뒤에 와야 합니다. */
.f1us-panel-nodate {
    --f1us-date-col-width: 0px;
}

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

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

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

/* ================================================
   글래스 커서 — 선택한 셀 위에 얹히는 반투명 판
   (입고 페이지 .f1ip-cursor 와 동일)
   ================================================ */
.f1us-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;
}

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

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

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

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

/* ─ 1레벨 헤더 행 ─ */
.f1us-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;
}

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

/* 하위 구분이 없어 두 행을 병합한 1레벨 헤더 (페이퍼 코리아) */
.f1us-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레벨 헤더 행 ─ */
.f1us-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;
}

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

/* 이름이 긴 매체(기독교타임즈)만 두 줄로 접습니다.
   3공장 io 페이지(.f3io-multiline-th)와 같은 처리입니다. */
.f1us-multiline-th {
    white-space: normal !important;
    line-height: 1.15;
    font-size: 10.5px;
    letter-spacing: -0.4px;
}

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

/* ─ 데이터 셀 ─
   입고(12px)보다 한 단계 키웠습니다. 사용량은 3~5자리라 숫자가
   길어지는데, 표가 화면 전체 폭을 쓰므로 여유가 있습니다. */
.f1us-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;
}

/* ─ 날짜 헤더 & 셀 (좌측 고정) ─ */
.f1us-date-th {
    position: sticky;
    left: 0;
    background: #f7f8fa !important;
    z-index: 21;
    text-align: center;
    min-width: var(--f1us-date-col-width) !important;
    width: var(--f1us-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;
}

.f1us-table td.f1us-date-td,
.f1us-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(--f1us-date-col-width) !important;
    width: var(--f1us-date-col-width) !important;
    box-sizing: border-box;
    cursor: pointer;
}

/* ================================================
   최신 실적일(어제) / 선택 행 강조

   입고 페이지는 '오늘' 행을 강조하지만 사용량은 다릅니다.
   급지 실적은 야간 배치가 '어제까지'만 가져오므로 오늘 행은 항상 비어
   있습니다. 그래서 강조 대상도, 표의 마지막 행도 어제로 둡니다.
   ================================================ */
.f1us-row-yesterday td { background: #e8f4fd !important; }
.f1us-row-yesterday .f1us-date-td { background: #bbdefb !important; }
.f1us-selected-row td { background: #f4f4f8 !important; }
.f1us-selected-row .f1us-date-td { background: #ebebf0 !important; }
.f1us-row-yesterday.f1us-selected-row td { background: #daedf9 !important; }
.f1us-row-yesterday.f1us-selected-row .f1us-date-td { background: #bbd8f0 !important; }

/* 활성화된 헤더 — 선택한 그룹(1레벨) + 선택한 열(2레벨) */
.f1us-thead-lv1 th.f1us-header-active,
.f1us-thead-lv2 th.f1us-header-active,
.f1us-group-th.f1us-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 가 이기고, 스크롤할 때 칸이 헤더 위로 비쳐 보입니다. */
.f1us-selected-cell {
    position: relative;
    z-index: 9;
    font-weight: 900 !important;
    color: #000000 !important;
}

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

/* 별관(3공장) 참조 열(.f1us-mirror-cell)은 별도 배경·글자색 없이 일반 셀과
   똑같이 보여 줍니다. 이 표는 전 열이 조회 전용이라 굳이 구분할 이유가
   없고, 색이 섞이면 오히려 읽기 불편합니다. 구분은 상단 '대한제지 별관'
   헤더로 충분합니다. (입고 페이지의 옛 .f1ip-mirror-cell 과 같은 처리였는데,
   그쪽 별관 열은 2026-08-17 부터 직접 입력하는 열이 됐습니다) */

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

/* 두 패널을 나란히 두기엔 좁은 화면 — 위아래로 쌓습니다.
   (옆으로 붙여 두면 각 패널이 날짜 열 하나씩을 갖는 만큼 더 좁아집니다) */
@media (max-width: 1100px) {
    .f1us-panels-outer { flex-direction: column; }
    .f1us-panel-paper-main,
    .f1us-panel-paper-annex,
    .f1us-panel-media { flex: 1 1 auto; }
}

@media (max-width: 900px) {
    .f1us-scroll-area { overflow-x: auto; }
    .f1us-panel-paper-main .f1us-table { min-width: 760px; }
    .f1us-panel-media .f1us-table { min-width: 520px; }
}

/* 태블릿(641~900px · 아이패드 세로 820px 등)만 바닥 폭을 700px 로 낮춥니다.
   지고 재고 페이지와 같은 이유입니다 — 아이패드 세로의 표 자리(736px)가
   바닥(760px)보다 24px 좁아 끝만 잘렸습니다. width:100% +
   table-layout:fixed 라 바닥만 낮추면 열이 고르게 줄며 딱 맞습니다. */
@media (min-width: 641px) and (max-width: 900px) {
    .f1us-panel-paper-main .f1us-table { min-width: 700px; }
}

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

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

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

/* ════════════════════════════════════════════════════════════════
   최근 1개월 보기 (2026-08-05 · 머리글 고정 2026-08-10)
   ────────────────────────────────────────────────────────────────
   버튼 모양은 공통(css/common/common_expand_btn.css 의 .mk-expand-btn)이고,
   여기서는 '무엇이 얼마나 펴지는지'만 정합니다 — 패널 안의 창을 풀어
   기준을 페이지 스크롤로 옮깁니다.
   층마다 따로 걸립니다(용지별 · 매체별) — 한쪽만 펴 두는 쪽이 편할 때가
   있고, 위아래를 맞춰 보려면 둘 다 펴면 됩니다.

   머리글은 펼쳐도 붙박이(sticky)를 유지합니다. 한 달치를 내리다 보면
   어느 열이 어느 제지사인지 알 수 없게 되기 때문입니다(2026-08-10 요청).
   이때 overflow 를 **양쪽 다** visible 로 풀어야 합니다 — 브라우저 규칙상
   한 축이 hidden 이면 다른 축의 visible 이 auto 로 바뀌어, 이 칸이 여전히
   '스크롤 상자'로 남습니다. 그러면 머리글이 페이지가 아니라 (이제 구르지
   않는) 이 상자에 붙어, 화면에서는 그냥 같이 떠내려갑니다. 2026-08-05 에
   머리글 붙박이를 뗐던 것도 이 현상 때문이었습니다.

   패널 카드(.f1us-panel)의 overflow: hidden 도 같은 이유로 풀어야 합니다
   (붙박이는 가장 가까운 '자르는 조상'까지만 올라갑니다). 그 hidden 은
   둥근 모서리(12px)에 표를 맞춰 자르던 것인데, 머리글 배경이 카드 배경과
   같은 색(#f7f8fa)이라 풀어도 모서리가 달라 보이지는 않습니다.

   ※ 좁은 화면(아래 900px 구간)은 표가 가로로 굴러야 해서 이 방식이
     통하지 않습니다 — 거기서는 가로 스크롤을 되살리고, 머리글은 예전처럼
     페이지와 함께 흘러갑니다. */
.f1us-floor-container.is-expanded .f1us-scroll-area,
.f1us-floor-container.is-expanded .f1us-scroll-area.locked {
    height: auto;
    overflow: visible;
}

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

@media (max-width: 900px) {
    .f1us-floor-container.is-expanded .f1us-scroll-area,
    .f1us-floor-container.is-expanded .f1us-scroll-area.locked {
        overflow-x: auto;
    }
}

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

/* 폰(≤640px)에서는 공통 하단 독(common_header.css 의 .mkm-dock, z 1500)이
   화면 아래에 떠 있어 붙박이 버튼이 그 뒤에 가려집니다. 붙박이를 풀어
   예전대로 표 아래에 둡니다. */
@media (max-width: 640px) {
    .f1us-floor-container.is-expanded .mk-expand-btn { position: static; }
}