/* common_erp_contrast.css — ERP 대조 팝업 공통 스타일 (erpct-*)
   ────────────────────────────────────────────────────────────────
   입고 · 용지별 사용량 · 재고실사 페이지의 [ERP 대조] 버튼과 팝업이
   같은 클래스를 씁니다. 표 규격(행 44px · 날짜 열 고정 · 연붉은 불일치)은
   입고 대장(f1ip-table)과 같은 값입니다.

   팝업 껍데기(오버레이 · 상자 · 헤더)는 공지 모달(.f3i-nmodal-*,
   common_header.css)을 그대로 쓰고, 여기는 그 안쪽만 정합니다.

   표 자체(thead 포함)는 common_erp_contrast.js 가 만들어 꽂습니다 —
   페이지 HTML 에는 빈 껍데기만 둡니다. */

/* ── 헤더 버튼 / 백업 시각 ── */
/* ※ DB 갱신 시각 표시(.erpct-backup)의 모양이 여기 있었습니다. 2026-08-05,
     입출고 상세와 같은 회색 알약으로 통일하면서 css/common/common_dbstamp.css
     의 .mk-dbstamp 로 옮겼습니다. 이 파일에는 "좁아지면 숨김"만 남습니다
     (파일 아래 @media 참고) — 그 페이지들의 span 은 두 클래스를 함께 답니다. */

/* ※ [ERP 대조] 버튼의 모양(.erpct-btn)이 여기 있었습니다. 2026-08-05,
     같은 값의 규칙이 세 파일에 흩어져 있던 것을 css/common/common_pill_btn.css
     의 .mk-pill-btn 한 벌로 모았습니다. 버튼을 여는 쪽(HTML)이 그 클래스를
     쓰고, 이 파일은 팝업 안쪽만 맡습니다. */

/* ── 팝업 상자 ── */
.erpct-box {
    max-width: 1250px;
    height: 82vh;
    max-height: 88vh;
}

/* 컴팩트 팝업 — 최근 며칠만 보면 되는 대조용(재고실사 · 입고).
   높이를 표 7줄(헤더 88 + 44×7 = 396px)에 맞추고 폭도 줄입니다.
   더 과거는 창 안에서 굴려 보거나, 표 아래 [최근 1개월 보기]로 폅니다.
   ※ 2026-08-05: 5줄(308px) → 7줄(396px). 한 주가 한눈에 들어오도록. */
.erpct-box-compact {
    max-width: 1100px;
    height: auto;
    max-height: 88vh;
}
.erpct-box-compact .erpct-scroll {
    flex: none;
    height: 396px;
}

/* ── 표 아래 [최근 1개월 보기] ──
   평소 2주만 조회하고, 이 버튼으로 2주를 더 붙입니다(= 한 달).
   생김새는 재고 표들의 펼침 버튼(.f1jg-expand · .f3io-expand)과 같습니다.
   (동작은 js/common/common_erp_contrast.js 의 initPopup) */
.erpct-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    /* 좌우 여백은 바깥(.erpct-body)이 가지므로 여기서는 폭만 채웁니다 */
    width: 100%;
    height: 30px;
    margin: 8px 0 0;

    border: 1px solid #e5e5ea;
    border-radius: 10px;
    background: #f1f3f6;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #48484a;
    letter-spacing: -0.2px;
    cursor: pointer;
    outline: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.erpct-more:hover { background: #e8f4fd; border-color: #cfe2f8; color: #007aff; }
.erpct-more:focus-visible {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
/* 조회하는 동안에는 두 번 눌리지 않게 */
.erpct-more:disabled { opacity: 0.5; cursor: default; }

.erpct-more-icon {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.erpct-more.is-expanded .erpct-more-icon { transform: rotate(180deg); }

.erpct-range {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
    margin-left: 8px;
}

/* 좌우 여백은 스크롤 창이 아니라 **그 바깥**이 가집니다.
   ────────────────────────────────────────────────────────────────
   스크롤 창(.erpct-scroll)에 padding-left 를 주면, 붙박이 날짜 열은
   그 여백 안쪽(=16px 지점)에 서는데 밀려 오는 숫자 칸들은 여백 위까지
   흘러옵니다. 그래서 가로로 굴릴 때 날짜 열 **왼쪽**에 16px 짜리 띠가
   생기고, 거기로 지나가는 숫자가 잘린 채 비쳐 보였습니다(2026-08-06).
   창의 안쪽 여백을 0 으로 두면 날짜 열이 창의 왼쪽 끝에 딱 붙어
   그 띠 자체가 없어집니다. */
.erpct-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 0 16px;
}

.erpct-scroll {
    flex: 1;
    overflow: auto;
}

.erpct-msg {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #8e8e93;
}

/* ── 표 ──
   열 수가 페이지마다 달라서 JS 가 table 에 --erpct-cols 를 심습니다. */
.erpct-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    --erpct-date-w: 72px;
}
.erpct-table col.erpct-col-date { width: var(--erpct-date-w); }
.erpct-table col.erpct-col-data {
    width: calc((100% - var(--erpct-date-w)) / var(--erpct-cols, 12));
}

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

.erpct-thead-lv1 th,
.erpct-thead-lv2 th {
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    background: #f7f8fa;
    white-space: nowrap;
    height: 44px;
    box-sizing: border-box;
}
.erpct-thead-lv1 th {
    padding: 8px 2px 5px;
    font-size: 11.5px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}
.erpct-thead-lv2 th {
    padding: 6px 1px 7px;
    font-size: 10.5px;
    font-weight: 700;
    color: #636366;
    letter-spacing: -0.3px;
}

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

.erpct-sep { border-left: 1px solid #e0e0e0 !important; }

.erpct-table td {
    padding: 9px 1px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
    color: #1d1d1f;
    height: 44px;
    box-sizing: border-box;
    cursor: default;
}

/* 날짜 열 — 좌측 고정 */
.erpct-date-th,
.erpct-table td.erpct-date {
    position: sticky;
    left: 0;
    background: #f7f8fa;
    z-index: 5;
    border-right: 1px solid #e0e0e0 !important;
    font-weight: 700;
    white-space: nowrap;
}
.erpct-date-th { z-index: 11; font-size: 12px; font-weight: 800; }
.erpct-table td.erpct-date { font-size: 11.5px; }

.erpct-sat { color: #007aff !important; }
.erpct-sun { color: #ff3b30 !important; }
.erpct-empty { color: #c7c7cc; font-weight: 400; }

/* 오늘 행 */
.erpct-row-today td { background: #e8f4fd !important; }
.erpct-row-today td.erpct-date { background: #bbdefb !important; }

/* 일치(차이 0) — 처리 완료 */
.erpct-zero { color: #34c759; font-weight: 700; }

/* 불일치 — 연한 붉은 배경 + 검은 글씨.
   오늘 행 강조보다 우선하도록 선택자를 td 까지 붙입니다. */
.erpct-table td.erpct-diff {
    background: #fdecec !important;
    color: #000000 !important;
    font-weight: 700;
}

/* ── 하단 범례 ── */
.erpct-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 20px;
    border-top: 1px solid #e5e5ea;
    background: #f1f3f6;
    font-size: 11.5px;
    font-weight: 600;
    color: #636366;
}

.erpct-chip {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #fdecec;
    border: 1px solid #f0c4c4;
}

.erpct-footer-sep { color: #c7c7cc; }

/* 부분 조회 실패 안내 (예: 별관만 실패) */
.erpct-note { color: #b8291f; }

/* 좁은 화면 — 헤더가 비좁으면 백업 시각 글씨는 숨깁니다 */
@media (max-width: 640px) {
    .erpct-backup { display: none; }
}