/* factory1_silsa_report_style.css — 용지재고실사 내역(결재)
   ────────────────────────────────────────────────────────────────
   화면이 아니라 '문서'를 그립니다. 기존 수기 결재 문서의 지면을 따라
   흰 종이 카드(A4 가로 비율) 위에 얇은 실선 표 + 하단 서명으로
   구성합니다. PDF 저장은 이 카드(#f1srCard)만 찍으므로, 카드 밖은
   화면 편의 요소이고 카드 안은 전부 인쇄물입니다.
   ──────────────────────────────────────────────────────────────── */

/* ★ 이 페이지만 공통 레이아웃의 좌우폭 제한(1200px)을 풉니다.
   1200px 에서는 글자가 칸을 넘어 선과 겹칩니다(실측 18칸, 품목코드가
   152px 내용에 134px 칸). 폭을 넓히는 것만으로는 해결되지 않습니다 —
   글자가 폭에 비례하면 같이 커져 비율이 그대로이기 때문입니다.
   그래서 폭을 1528px 로 넓히고 글자는 px 로 고정했습니다(넘침 0칸).
   1528px 은 PDF 캡쳐가 A4 가로 비율에 수렴하는 폭이라, 화면이 곧
   인쇄물 미리보기가 됩니다.
   ※ 이 파일은 결재 서식 페이지에서만 불러오므로 다른 페이지는 그대로입니다. */
:root {
    --f1sr-page-width: 1528px;
}

/* ※ 공통 헤더(.gf3-wrapper)는 건드리지 않습니다 — 1200px 그대로.
   헤더는 18개 페이지가 공유하는 UI 라 이 페이지만 넓히면 페이지를 옮길
   때마다 메뉴·버튼 위치가 튑니다. 문서 폭 1528px 은 인쇄 규격에서 나온
   값이고 헤더가 그걸 따라야 할 이유가 없습니다.
   아래 규칙은 문서를 감싼 래퍼에만 겁니다(이 래퍼도 .gf3-wrapper 를
   함께 달고 있어서, 이 파일이 나중에 로드되는 것으로 덮어씁니다). */
.f1sr-wrapper {
    max-width: var(--f1sr-page-width);
    display: flex;
    /* 창이 좁으면 가로로 스크롤합니다. 결재 문서는 서식이 고정이라
       줄여서 무너뜨리는 것보다 밀어서 보는 편이 낫습니다.
       justify-content: center 를 두면 넘칠 때 왼쪽이 잘려 스크롤로도
       닿지 못합니다 — flex-start + margin auto 로 가운데 정렬합니다. */
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 40px;
}

/* 흰 종이 카드. 높이는 내용이 정합니다 — 이전에 A4 비율(aspect-ratio)로
   높이를 못 박았더니 내용이 그보다 길어진 날 서명 줄이 카드 밖으로 밀려나
   PDF 캡쳐에서 잘렸습니다(2026-07-30 실제 발생). common_pdf 는 캡쳐된
   크기 그대로 용지를 만들므로 높이를 강제할 이유가 없습니다.
   ※ 폭을 vw 로 잡지 않습니다 — body 에 zoom 이 걸린 화면에서는 vw 가
     실제 가용 폭과 어긋나 카드 오른쪽이 잘립니다. 부모 폭 기준이 안전합니다. */
/* 폭을 고정합니다. 글자를 px 로 굳혔기 때문에 폭이 변하면 칸과 글자의
   비율이 어긋나 다시 겹칩니다. 좁은 창에서는 부모가 가로 스크롤합니다.
   flex 자식이라 flex-shrink: 0 이 없으면 부모보다 넓게 줘도 도로 줄어듭니다.
   margin: 0 auto 는 넓은 창에서 가운데로 놓기 위한 것입니다. */
#f1srCard {
    background: #f7f8fa;
    width: var(--f1sr-page-width);
    max-width: none;
    flex-shrink: 0;
    margin: 0 auto;
    padding: 3.2% 3.5% 5%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    color: #111;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* ★ 글자는 px 로 고정합니다. 폭에 비례하는 단위(vw·cqw)를 쓰면 폭을
   넓힐 때 글자도 같이 커져 칸과의 비율이 그대로라, 겹침이 안 없어집니다
   (실측: 1200px 18칸 겹침 → 1528px 로 넓혀도 18칸, 오히려 악화).
   폭을 고정하고 글자도 고정하면 넘침 0칸이 되고, 창 크기를 바꿔도
   화면과 PDF 가 항상 같습니다.
   크기: 제목 31 · 작성일 19 · 표 18 · 결재자 명 19 */
.f1sr-title {
    text-align: center;
    font-size: 31px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 1.2% 0 2.4%;
}

/* 제목의 월 숫자에 붙는 위/아래 화살표.
   ★ 절대 위치여야 합니다 — PDF 캡쳐 때 display:none 으로 감추는데,
     흐름에 있는 요소면 감추는 순간 제목 글자가 밀립니다.
   평소에는 옅게, 제목에 마우스를 올리면 또렷해집니다. */
.f1sr-month-wrap {
    position: relative;
    display: inline-block;
}
.f1sr-month-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 1.6em;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: #c7c7cc;
    font-size: 0.4em;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0.45;
    transition: opacity 0.15s, color 0.15s;
}
.f1sr-title:hover .f1sr-month-btn { opacity: 1; }
.f1sr-month-btn:hover { color: #007AFF; }
.f1sr-month-up   { bottom: calc(100% + 2px); }
.f1sr-month-down { top: calc(100% + 2px); }

.f1sr-write-date {
    text-align: right;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 0.8%;
}

/* ── 표 — 결재 문서의 얇은 실선 스타일 ─────────────────────────── */
.f1sr-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 18px;
}

/* 결재 문서의 표는 행이 여유 있게 큽니다 — 도장·수기 메모가 들어갈 지면이라
   화면용 표처럼 조이지 않습니다. 잘리면 안 되는 칸(저장위치명·품목명·비고)은
   줄바꿈을 허용하고, 숫자 칸만 한 줄을 유지합니다. */
.f1sr-table th,
.f1sr-table td {
    border: 1px solid #555;
    padding: 0.75% 0.6%;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.f1sr-table thead th {
    background: #ececec;
    font-weight: 700;
    padding-top: 0.9%;
    padding-bottom: 0.9%;
}

.f1sr-col-loc   { width: 13.5%; }
.f1sr-col-code  { width: 11.5%; }
.f1sr-col-name  { width: 23.5%; }
.f1sr-col-num   { width: 9.25%; }
.f1sr-col-note  { width: 14.5%; }

/* 저장위치명 — "(사급)1공장 용지창고(전자신문)" 이 전부 보여야 합니다 */
.f1sr-table .f1sr-loc {
    white-space: normal;
    word-break: keep-all;
    line-height: 1.45;
}

/* 저장위치명과 품목코드 사이에는 세로선을 긋지 않습니다 — 머리글까지
   포함해 한 칸처럼 보이게 합니다(2026-07-31 요청).
   border-collapse 에서는 맞닿은 양쪽을 모두 지워야 선이 사라집니다. */
.f1sr-table td.f1sr-loc  { border-right: none; }
.f1sr-table td.f1sr-code { border-left: none; }
.f1sr-table thead th:first-child  { border-right: none; }
.f1sr-table thead th:nth-child(2) { border-left: none; }
.f1sr-table .f1sr-name {
    text-align: left;
    white-space: normal;
    word-break: keep-all;
}
.f1sr-table .f1sr-num  { text-align: right; }
.f1sr-table .f1sr-note {
    font-size: 0.92em;
    line-height: 1.5;
    white-space: normal;
    word-break: keep-all;
}

/* ── 불러오는 중 ────────────────────────────────────────────────
   표를 지우지 않고 날짜에 따라 바뀌는 칸(숫자 네 칸 · 비고)만 옅게 덮습니다.
   저장위치명 · 품목코드 · 품목명은 어느 날짜든 같아서 흐릴 이유가 없습니다.

   이 페이지는 결재 문서라 특히 중요합니다. 제목과 기준일은 곧바로 새 날짜로
   바뀌는데 그 아래 숫자가 아직 이전 날짜의 것이면 조용히 틀린 서식이 되고,
   그대로 PDF 로 저장될 수 있습니다.

   opacity 가 아니라 color 인 이유는 재고실사 페이지와 같습니다 — 칸에 걸린
   테두리까지 같이 옅어지면 표 선이 중간에서 끊긴 것처럼 보입니다.
   인쇄·PDF 캡쳐 때는 흐림이 남지 않습니다(조회가 끝난 뒤에 찍습니다). */
.f1sr-table td[data-f],
.f1sr-table td[data-note] { transition: color 0.14s ease-out; }

#f1srCard.is-loading .f1sr-table td[data-f],
#f1srCard.is-loading .f1sr-table td[data-note] { color: #c7c7cc; }

/* ── 하단 서명 — 결재 문서처럼 표 바로 아래 왼쪽에, 한 줄씩 띄워서 ──
   줄 간격은 글자 크기에 묶습니다(em). vw 로 잡았더니 넓은 모니터에서
   간격만 커져 원본보다 벌어졌습니다. 1.1em ≈ 빈 줄 하나입니다. */
.f1sr-signers {
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    row-gap: 1.1em;
    font-size: 19px;
    font-weight: 600;
}

.f1sr-signer .f1sr-seal {
    display: inline-block;
    margin-left: 10px;
    /* 날인 자리 — 글자 옆에 도장 지름만큼의 빈 공간을 확보합니다 */
    padding-right: 56px;
    color: #333;
}