/* factory1_ft_io_style.css — 1공장 FT 재고 종합 스타일 정의
   (3공장 재고 종합 페이지 factory3_io.css 와 동일한 레이아웃/색상 규격을 따릅니다) */

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

    /*
      [하단 카드 스크롤바 폭 옵션]
      '입고 현황', '월별 출고 현황' 데이터 영역 스크롤바의 폭입니다.
      헤더 테이블의 우측 여백도 이 값으로 함께 맞춰지므로 열 정렬이 유지됩니다.
    */
    --io-scrollbar-width: 8px;
}

.f1ftio-wrapper {
    gap: 14px;
}

/* 2층: 하단 2단 카드 좌우 배치 그리드 */
.f1ftio-bottom-grid {
    display: flex;
    gap: 14px;
    align-items: stretch;
}

.f1ftio-bottom-grid .side-card {
    flex: 1;
    min-width: 0;
}

/* 대조표 불러오는 중 — 날짜를 옮기는 동안 숫자와 날짜 칸만 옅게.
   이 표는 값이 올 때까지 옛 행을 그대로 두고 한 번에 갈아 끼우므로 원래
   깜빡이지는 않았습니다. 다만 그 사이 헤더 날짜만 새것이고 표는 이전
   날짜의 숫자라, 조용히 틀린 화면이 됩니다. 열 머리글은 같은 표 안에
   있으므로 td 만 골라 덮습니다. */
.comp-data-cell, .comp-date-td { transition: color 0.14s ease-out; }

.comp-panels-outer.is-loading tbody td.comp-data-cell,
.comp-panels-outer.is-loading tbody td.comp-date-td { color: #c7c7cc !important; }

/* ════════════════════════════════════════════════════════════
   불러오는 중 — 입고 현황 · 월별 출고 현황

   표를 지우지 않습니다. 예전에는 월별 출고가 '불러오는 중...' 한 줄로
   바뀌었는데, 그 사이 카드 높이가 무너졌다 다시 서기 때문에 옆 카드까지
   같이 출렁였습니다. 자리는 그대로 두고 옅게 덮으면 아무것도 움직이지
   않습니다. 자세한 배경은 js/factory1_ft_io_render.js 의 loadInbound 앞
   머리말에 있습니다.

   덮는 것은 표 본문뿐입니다. 열 머리글은 다른 상자(.io-table-head)에 따로
   서 있어 그대로 남고, 연도 글자도 흐리지 않습니다 — 방금 누른 그 연도가
   곧 "무엇을 불러오는 중인가" 라서, 또렷해야 아래 표가 아직 옛것임이
   드러납니다.

   연도 버튼은 막지 않습니다. 늦게 온 응답은 세대 번호로 걸러내므로
   연타해도 글자와 표가 어긋나지 않습니다 (render.js 참고).
   ════════════════════════════════════════════════════════════ */
.side-card .table-scroll-wrapper { transition: opacity 0.14s ease-out; }

.side-card.is-loading .table-scroll-wrapper {
    opacity: 0.45;
    pointer-events: none;
}

/* 층(레이아웃) 외곽 프레임 — 이 안에 개별 패널(레이아웃 안의 레이아웃)이 들어갑니다 */
.f1ftio-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;
}

/* 레이아웃 안의 레이아웃 (내부 카드 프레임 — 3공장 패널과 동일 규격) */
.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);
}

.d-flex { display: flex; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.fw-bold { font-weight: 700; }
.text-dark { color: #000000 !important; }
.text-muted { color: #8e8e93; }
.text-center { text-align: center; }
.small { font-size: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.m-0 { margin: 0; }
.me-1 { margin-right: 4px; }

/* 미니 네비게이션 — 공통 헤더의 날짜 네비게이션(.gf3-nav-group / .gf3-icon-btn)과
   동일한 디자인(알약형 배경 + 흰색 원형 버튼)을 카드 헤더 크기에 맞춰 축소 적용 */
.f1ftio-nav-group {
    display: flex;
    align-items: center;
    background: #eceff4;
    border-radius: 20px;
    padding: 3px;
}

/* 년도(또는 월) 텍스트 — 공통 헤더의 .gf3-date-text 규격 축소판 */
.f1ftio-year-text {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    min-width: 56px;
    margin: 0 8px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-nav-mini {
    background: #f7f8fa;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.1s;
}
.btn-nav-mini:hover { transform: scale(1.05); }
.btn-nav-mini:disabled {
    opacity: 0.3;
    pointer-events: none;
}
.btn-nav-mini .material-symbols-outlined {
    font-size: 16px !important;
    display: block;
    line-height: 1;
}

/* R/L Kg 단위 스위처 */
.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; }

/* 하단 컴팩트 테이블 */
.custom-compact-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    color: #1d1d1f;
}
.custom-compact-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7f8fa !important;
    color: #1d1d1f !important;
    font-size: 12px;
    font-weight: 800 !important;
    border-bottom: 1px solid #e5e5ea !important;
    padding: 8px 4px !important;
    height: 38px;
    box-sizing: border-box;
}
.custom-compact-table td {
    border: none !important;
    border-bottom: 1px solid #f2f2f7 !important;
    padding: 8px 4px !important;
    color: #1d1d1f !important;
    font-size: 12.5px;
    font-weight: 600;
    height: 44px;
    box-sizing: border-box;
}
.custom-compact-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ────────────────────────────────────────────────────────────
   하단 카드: 헤더 테이블 / 데이터 테이블 분리 구조
   스크롤바가 헤더 영역을 침범하지 않도록 thead 를 스크롤 영역 밖으로 빼고,
   두 테이블의 열 너비를 colgroup + table-layout:fixed 로 고정합니다.
   ──────────────────────────────────────────────────────────── */
.io-split-table { table-layout: fixed; }
.io-split-table .io-col-date { width: 34%; }
.io-split-table col:not(.io-col-date) { width: 22%; }

/* 값 뒤에 붙는 단위 (월별 출고 현황의 Kg)
   글꼴·크기·색은 숫자와 동일하게 두고 간격만 띄웁니다. */
.io-unit {
    margin-left: 3px;
}

/* 헤더 테이블 — 데이터 영역과 동일한 스크롤바 폭을 '투명하게' 점유시켜
   브라우저 종류에 상관없이 열 위치가 1px 오차 없이 맞도록 합니다. */
.io-table-head {
    background: #f7f8fa;
    border-bottom: 1px solid #e5e5ea;   /* 구분선은 카드 전체 폭으로 그림 */
    overflow-y: scroll;                 /* gutter 확보 전용 — 내용은 넘치지 않음 */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.io-table-head::-webkit-scrollbar { width: var(--io-scrollbar-width); }
.io-table-head::-webkit-scrollbar-thumb,
.io-table-head::-webkit-scrollbar-track { background: transparent; }
.io-table-head .custom-compact-table th {
    border-bottom: none !important;
}

/* 데이터 테이블(스크롤 영역) — 스크롤바가 항상 같은 폭을 점유하도록 gutter 고정 */
.io-table-body {
    max-height: 180px;
    min-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

/* 스크롤바 디자인 (Apple 계열 회색 — 카드 톤에 맞춘 얇은 형태) */
.io-table-body { scrollbar-width: thin; scrollbar-color: #c7c7cc transparent; }
.io-table-body::-webkit-scrollbar {
    width: var(--io-scrollbar-width);
}
.io-table-body::-webkit-scrollbar-track {
    background: transparent;
}
.io-table-body::-webkit-scrollbar-thumb {
    background-color: #c7c7cc;
    border-radius: 8px;
    border: 2px solid transparent;   /* 실제 thumb 폭을 4px로 얇게 보이도록 */
    background-clip: padding-box;
}
.io-table-body::-webkit-scrollbar-thumb:hover {
    background-color: #a1a1a6;
}

/* ========================================
   1층 4단 대조 테이블 (헤더 틈새 및 스크롤 잔상 완전 방지)
   ======================================== */
.comp-panels-outer {
    display: flex;
    gap: 12px;
    align-items: stretch;
    background: transparent;
}

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

.comp-panel:nth-child(1) { flex: 1.3; }
.comp-panel:nth-child(2) { flex: 1.4; }
.comp-panel:nth-child(3) { flex: 1.4; }
.comp-panel:nth-child(4) { flex: 1.3; }

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

/* 스크롤 잠금 시 시각적 반응 및 마우스 커서 제어 */
/* 내부 스크롤만 막고, 휠/터치는 페이지 전체 스크롤로 넘어가도록 둔다 */
.comp-scroll-area.locked {
    touch-action: pan-y;
    overflow-y: hidden !important;
}

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

/* 테이블 간격 및 Sticky 레이어 보정 */
.comp-table-split {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed;
}

.comp-table-split thead {
    position: sticky;
    top: 0;
    z-index: 30 !important;
    background-color: #f7f8fa;
    transform: translateZ(0); /* HW 가속으로 스크롤 시 잔상 방지 */
}

/* 1레벨/2레벨 헤더 틈새 및 투명 렌더링 방지 */
.comp-thead-lv1 th {
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: 13px;
    font-weight: 800;
    color: #1d1d1f !important;
    text-align: center;
    border-bottom: 1px solid #e5e5ea;
    background-color: #f7f8fa !important;
    background-clip: padding-box;
}

.comp-group-th {
    background-color: #f7f8fa !important;
    color: #1d1d1f !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px;
    background-clip: padding-box;
}

.comp-thead-lv2 th {
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: 11px;
    font-weight: 700;
    color: #636366 !important;
    text-align: center;
    border-bottom: 1px solid #e5e5ea;
    background-color: #f7f8fa !important;
    background-clip: padding-box;
}

/* 데이터 셀 높이 통일 */
.comp-table-split td {
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #f2f2f7;
    color: #1d1d1f;
    vertical-align: middle;
}

.comp-date-th {
    position: sticky;
    left: 0;
    top: 0;
    background-color: #f7f8fa !important;
    z-index: 35 !important;
    text-align: center;
    width: 82px;
    min-width: 82px;
    max-width: 82px;
    height: 74px !important;
    line-height: 74px !important;
    border-right: 1px solid #e5e5ea !important;
    border-bottom: 1px solid #e5e5ea !important;
    font-size: 13px;
    font-weight: 800;
    color: #1d1d1f !important;
    vertical-align: middle;
    background-clip: padding-box;
    transform: translateZ(0);
}

.comp-date-td {
    position: sticky;
    left: 0;
    background-color: #f7f8fa;
    z-index: 5;
    text-align: center;
    border-right: 1px solid #e5e5ea !important;
    font-size: 12px;
    font-weight: 600;
    width: 82px;
    min-width: 82px;
    max-width: 82px;
    white-space: nowrap;
    color: #1d1d1f;
}

/* 강조 상태 */
.comp-row-today td { background-color: #f2f9ff !important; }
.comp-row-today .comp-date-td { background-color: #e1f0ff !important; }
.comp-selected-row td { background-color: #eceff4 !important; }
.comp-selected-row .comp-date-td { background-color: #e5e5ea !important; }
.comp-row-today.comp-selected-row td { background-color: #eaf5ff !important; }
.comp-row-today.comp-selected-row .comp-date-td { background-color: #d0e7ff !important; }

/* 1레벨-2레벨 헤더 활성화 시 경계선 틈 제거 및 배경 보정 */
.comp-thead-lv1 th.comp-header-active,
.comp-thead-lv2 th.comp-header-active,
.comp-group-th.comp-header-active,
.comp-leaf-th.comp-header-active {
    background-color: #ffe8cc !important;
    color: #d35400 !important;
    border-bottom-color: #ffd8b3 !important;
}

.comp-selected-cell {
    position: relative;
    z-index: 6;
    font-weight: 900 !important;
    color: #000000 !important;
}

.comp-table-split tbody tr:not(.comp-selected-row):hover td { background-color: #fafafa; }
.comp-data-cell { cursor: pointer; }

/* 차이값 색상 */
.comp-diff-positive { color: #34c759 !important; font-weight: 700; }
.comp-diff-negative { color: #ff3b30 !important; font-weight: 700; }
.comp-sat { color: #007aff !important; }
.comp-sun { color: #ff3b30 !important; }
.comp-empty { color: #c7c7cc; font-weight: 400; }

.comp-leaf-th {
    font-size: 11px;
    font-weight: 700;
    color: #636366 !important;
    text-align: center;
}

@media (max-width: 900px) {
    .comp-panels-outer { flex-direction: column; }
    .comp-panel { flex: none !important; width: 100%; }
    .comp-scroll-area { height: 360px; }
    .f1ftio-bottom-grid { flex-direction: column; }
}

/* 모바일: 3공장 재고 종합 페이지와 동일한 축소 규격 */
@media (max-width: 640px) {
    .f1ftio-floor-container { padding: 14px; border-radius: 14px; }
    .panel-title { font-size: 16px; }

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

    .comp-date-th,
    .comp-date-td {
        width: 62px;
        min-width: 62px;
        max-width: 62px;
        font-size: 11px;
    }

    .comp-table-split td {
        font-size: 12px;
        height: 38px !important;
        line-height: 38px !important;
    }

    .comp-thead-lv1 th,
    .comp-group-th,
    .comp-thead-lv2 th,
    .comp-leaf-th {
        font-size: 11px !important;
    }
}
/* ════════════════════════════════════════════════════════════════
   최근 1개월 보기 (2026-08-05 · 머리글 고정 2026-08-10)
   ────────────────────────────────────────────────────────────────
   버튼 모양은 공통(css/common/common_expand_btn.css 의 .mk-expand-btn)이고,
   여기서는 '무엇이 얼마나 펴지는지'만 정합니다 — 패널 안의 창(294px)을
   풀어 기준을 페이지 스크롤로 옮깁니다.
   (예전 '스크롤 ON/OFF' 스위치를 대신하는 부품입니다)

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

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

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

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