/* factory1_jeonja_style.css — 1공장 전자신문 (용지재고대장) 페이지 스타일
   ────────────────────────────────────────────────────────────────
   나라사랑 페이지(factory1_narasarang_style.css)의 '패널 나누기'를 그대로
   따릅니다. 덩어리마다 흰 카드를 따로 세우고 사이를 띄우는 방식입니다.
   한 표 안에서 선이나 배경으로 나누는 것보다 경계가 분명하고, 무엇보다
   같은 사이트의 다른 화면과 읽는 법이 같아집니다.

     ① 날짜 · 면수   그날이 어떤 날인가
     ② 입고(kg)      들어온 것
     ③ 출고(kg)      나간 것
     ④ 재고(kg)      이어지는 값

   색으로는 아무것도 구분하지 않습니다. 배경색을 덩어리마다 깔아 봤더니
   행 상태(기준일 · 휴간 · 미수신)와 색이 겹쳐서, 그날 줄이 어떤 상태인지가
   가려졌습니다. 지금 화면에서 색이 붙는 자리는 행 상태와 요일뿐입니다.

   ── 입고 안에서 1576 / 788 / 합계 가르기 ─────────────────────────
   원장은 입고에 R/L(롤 수)과 수량(kg)을 열 두 개로 따로 적어 다섯 칸입니다.
   여기서는 kg 아래 작은 글씨로 롤 수를 붙여 한 칸에 담았습니다. 그러면
     · 입고가 세 칸(1576 · 788 · 합계)이 되어 출고와 열 구성이 똑같아지고
     · 같은 자리에서 1576끼리 · 788끼리 위아래로 바로 읽힙니다
     · 규격을 가르는 데 선 하나(.f1jn-sep)면 충분해집니다
   숫자 칸은 모두 '큰 줄 + 작은 줄' 두 줄짜리 상자입니다. 작은 줄이 없는
   칸도 빈 줄을 그대로 두어, 네 패널의 숫자가 전부 같은 높이에 옵니다.

   .f1jn-*
   ──────────────────────────────────────────────────────────────── */

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

    /*
      [머리글 높이]
      2단(44px × 2). 패널 ①은 아랫줄이 비어 있어 CSS 로 높이를 맞춥니다.
    */
    --f1jn-head-height: 88px;

    /*
      [표 높이]
      머리글(88px)과 소계(44px)가 위아래에 붙어 있어 그 둘도 높이를 먹습니다.
      계산식: 88 + 44 + 44 × 보이는 일수
                8일 → 88 + 44 + 44 ×  8 = 484px   ← 지금
               11일 → 88 + 44 + 44 × 11 = 616px

      한 달치가 31행 + 전월재고 + 소계라 한 화면에 다 넣을 수는 없습니다.
      8일치면 한 주(작업일 5일 + 휴무 2일)가 통째로 들어오고 한 줄이 더
      보입니다. 소계는 스크롤과 무관하게 항상 바닥에 있으므로, 이 값을
      줄여서 달라지는 것은 '한 번에 보이는 일수'뿐입니다.
    */
    --f1jn-scroll-height: 484px;

    /* [날짜 패널 폭] 날짜 84 + 면수 62 + 테두리 */
    --f1jn-meta-width: 152px;
}

.f1jn-wrapper {
    gap: 14px;
}

/* 외곽 프레임 — 나라사랑 · 지고 재고의 층 컨테이너와 같은 규격 */
.f1jn-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);
    gap: 8px;
}

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

.panel-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
    letter-spacing: -0.2px;
}

/* 우측 상단의 저장위치 표시 — 이 원장이 어느 창고를 보는 것인지 */
.f1jn-note {
    font-size: 11.5px;
    font-weight: 600;
    color: #8e8e93;
    letter-spacing: -0.2px;
    background: #f4f4f8;
    border: 1px solid #e5e5ea;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

/* ================================================
   계산식 버튼 · 설명 모달 — master 계정에만 보입니다
   ────────────────────────────────────────────────
   버튼은 옆의 저장위치 알약(.f1jn-note)과 같은 크기 문법으로 두되,
   누를 수 있는 것임은 테두리 색과 글자 색으로만 구분합니다.
   (호버에서 커지거나 움직이지 않습니다 — 사무 화면 원칙)
   ================================================ */
.f1jn-formula-btn {
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    color: #007aff;
    letter-spacing: -0.2px;
    background: #ffffff;
    border: 1px solid #c7d8f0;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
    cursor: pointer;
}

.f1jn-formula-btn:hover { background: #f0f6ff; }

/* 모달 — 공지 모달(.f3i-nmodal-*)과 같은 문법의 축소판입니다.
   공지 모달 클래스를 그대로 빌리면 공지 열기/닫기 스크립트와 얽히므로
   이름을 따로 씁니다. */
.f1jn-fmodal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.f1jn-fmodal-overlay.is-open { display: flex; }

.f1jn-fmodal-box {
    background: #ffffff;
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.f1jn-fmodal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e5ea;
}

.f1jn-fmodal-title {
    font-size: 15px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}

.f1jn-fmodal-close {
    cursor: pointer;
    color: #8e8e93;
    font-size: 22px;
}

.f1jn-fmodal-close:hover { color: #1d1d1f; }

.f1jn-fmodal-body {
    overflow-y: auto;
    padding: 16px 18px 18px;
}

.f1jn-fm-section { margin-bottom: 16px; }
.f1jn-fm-section:last-child { margin-bottom: 0; }

/* 머리표의 ①~④ 는 계산이 이어지는 순서입니다 — 면수 분배 → 입고 → 출고 → 재고.
   화면 패널 번호(① 날짜·면수 ② 입고 ③ 출고 ④ 재고)와는 다릅니다. */
.f1jn-fm-head {
    font-size: 12.5px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    margin-bottom: 6px;
}

.f1jn-fm-formula {
    font-size: 13px;
    font-weight: 700;
    color: #0a3d78;
    background: #f4f8fd;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.f1jn-fm-formula small {
    font-weight: 600;
    color: #6b7a8d;
}

.f1jn-fm-section p {
    font-size: 12.5px;
    font-weight: 500;
    color: #48484a;
    line-height: 1.65;
    letter-spacing: -0.2px;
    margin: 0;
}

/* ================================================
   유틸리티
   ================================================ */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.text-center { text-align: center; }
.mb-3 { margin-bottom: 14px; }

/* ================================================
   패널 (덩어리) — 나라사랑과 같은 규격
   화면이 좁으면 가로 스크롤은 바깥 상자가 받습니다. 패널마다 따로
   굴리면 네 표의 가로 위치가 어긋나므로 패널 안쪽은 가로를 잠급니다.
   ================================================ */
.f1jn-panels-outer {
    display: flex;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
}

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

/* ① 날짜 · 면수는 글자 폭이 정해져 있어 고정입니다. 늘려 봐야 빈칸만
   넓어집니다. ②③ 은 열 수가 같아 폭도 같게 두어, 입고와 출고의 1576 이
   화면에서 같은 너비로 마주 봅니다. */
.f1jn-panel-1 { flex: 0 0 var(--f1jn-meta-width); }
.f1jn-panel-2 { flex: 1.5; min-width: 250px; }   /* 입고 1576 · 788 · 합계 */
.f1jn-panel-3 { flex: 1.5; min-width: 250px; }   /* 출고 1576 · 788 · 합계 */
.f1jn-panel-4 { flex: 0.5; min-width: 96px; }    /* 재고 */

/* 표 안의 세로 스크롤은 늘 잠겨 있습니다. 휠·터치는 페이지 전체 스크롤로
   넘어갑니다.

   예전에는 헤더의 ON/OFF 토글로 여닫았는데, 소계 아래 [전체 보기]가 생기면서
   할 일이 겹쳐 토글을 없앴습니다. 접힌 상태는 고른 날 앞뒤를 보여 주고(날짜는
   상단에서 옮깁니다), 달 전체를 보려면 폅니다.

   잠겨 있어도 render.js 가 scrollTop 을 직접 넣어 선택한 줄로 맞춥니다 —
   잠금은 사람이 굴리는 것만 막습니다. */
.f1jn-scroll-area {
    position: relative;
    height: var(--f1jn-scroll-height);
    overflow-y: hidden;
    overflow-x: hidden;
    cursor: default;
    scrollbar-width: none;
}

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

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

/* 열 폭은 패널 안에서의 비율입니다. 한 패널의 col 합이 100% 입니다. */
.f1jn-table col.f1jn-col-date  { width: 57%; }
.f1jn-table col.f1jn-col-myeon { width: 43%; }
.f1jn-table col.f1jn-col-spec  { width: 34%; }
.f1jn-table col.f1jn-col-sum   { width: 32%; }
.f1jn-table col.f1jn-col-stock { width: 100%; }

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

/* ─ 1레벨 머리글 — 패널 이름 ─ */
.f1jn-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;
    letter-spacing: -0.3px;
}

.f1jn-thead-lv1 th small {
    font-size: 10px;
    font-weight: 600;
    color: #a1a1a8;
    letter-spacing: 0;
}

/* ─ 2레벨 머리글 — 롤 규격 ─ */
.f1jn-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;
    letter-spacing: -0.3px;
}

/* 합계는 옆 칸들의 결과입니다. 색을 쓰지 않고 글자 무게로만 구분합니다. */
.f1jn-sum-th { color: #1d1d1f; font-weight: 800; }

/* 패널 ① 은 2레벨 줄이 비어 있어 그대로 두면 머리글이 44px 로 주저앉고
   옆 패널과 줄이 어긋납니다. 병합 칸에 전체 높이를 직접 줍니다. */
.f1jn-panel-1 .f1jn-thead-lv1 th[rowspan="2"] {
    height: var(--f1jn-head-height);
    vertical-align: middle;
}

/* ─ 열 구분선 — 패널 안에서 규격이 바뀌는 자리 ─ */
.f1jn-sep { border-left: 1px solid #e0e0e0 !important; }

/* ─ 데이터 셀 ─ */
.f1jn-table td {
    position: relative;   /* R/L 부기를 얹기 위한 기준 */
    padding: 5px 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;
    vertical-align: middle;
}

/* 값은 흐름에 남은 유일한 요소라 언제나 칸 정중앙에 옵니다.
   R/L 부기(.f1jn-sub-v)는 흐름에서 빼내 값 아래에 얹습니다.

   부기를 흐름에 두고 빈 줄로 자리만 잡아 봤더니, R/L 이 없는 칸까지
   값이 6px 씩 위로 밀려 표 전체가 윗정렬처럼 보였습니다. 얹는 방식이면
   네 패널의 값이 전부 같은 높이에 오면서 가운데 정렬도 유지됩니다. */
.f1jn-v {
    display: block;
    line-height: 1.15;
}

.f1jn-sub-v {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: 8px;      /* 값 아랫줄 바로 밑 (값 높이의 절반 + 여유) */
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #a1a1a8;
    letter-spacing: -0.2px;
    text-align: center;
    pointer-events: none;
}

/* ─ 날짜 (패널 ①) ─ */
.f1jn-date-th {
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #1d1d1f;
    white-space: nowrap;
}

.f1jn-table td.f1jn-date-td {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.f1jn-table td.f1jn-myeon-td {
    font-size: 12.5px;
    font-weight: 700;
    color: #48484a;
}

/* 합계 · 재고는 옆 칸들의 결과라 조금 무겁게 둡니다 */
.f1jn-table td.f1jn-sum-td,
.f1jn-table td.f1jn-stock-td { font-weight: 800; }

/* ─ 요일 색 (지고 재고와 동일) ─ */
.f1jn-sat .f1jn-v { color: #007aff; }
.f1jn-sun .f1jn-v { color: #ff3b30; }

/* 값이 없는 칸 — 0 이 아니라 '움직임이 없었다'는 뜻입니다.
   원장이 '-' 로 적는 자리라 그대로 따릅니다. */
.f1jn-empty { color: #c7c7cc; font-weight: 400; }

/* ================================================
   특수 행
   ================================================ */

/* 전월재고 — 원장 첫 줄. 입출고 없이 재고만 있습니다 */
.f1jn-row-carry td {
    background: #f7f7fa !important;
    font-weight: 700;
    border-bottom: 1px solid #d1d1d6;
}

.f1jn-row-carry .f1jn-date-td { color: #48484a; }

/* 휴간 · 미작업일 — 출고가 없는 날. 줄 전체를 옅게 깔아
   작업일 줄만 눈에 들어오게 합니다 */
.f1jn-row-off td { background: #fcfcfd !important; }

/* 원장이 아직 여기까지 오지 않은 날 (.f1jn-row-pending) 에는 색을 쓰지
   않습니다. 그 줄은 값이 전부 '–' 라 이미 비어 보이고, 거기에 배경색까지
   깔면 달의 뒷부분이 통째로 다른 색 덩어리가 되어 정작 봐야 할 휴간일
   (.f1jn-row-off)과 구분이 안 됩니다. 클래스는 남겨 둡니다 — 상태 자체는
   사실이고, 나중에 다시 표시할 일이 생기면 여기만 채우면 됩니다. */

/* 오늘 — 달력상의 오늘입니다. 푸른색.
   날짜 자체가 특별한 줄이라 어디를 보고 있든 자리가 고정돼 있습니다. */
.f1jn-row-today td { background: #e8f4fd !important; }
.f1jn-panel-1 .f1jn-row-today td { background: #bbdefb !important; }

/* 선택 행 — 상단 날짜 네비게이션이 가리키는 줄. 회색.
   커서라 움직이는 줄이고, 다른 페이지의 선택 행과 같은 색입니다.

   ※ 오늘 규칙보다 뒤에 두어 둘이 같은 줄일 때 회색이 이깁니다.
     헤더 기본값이 '어제'라 평소에는 두 줄이 따로 놉니다. [오늘] 을
     눌러 겹쳤을 때는 지금 커서가 어디인지가 먼저 보여야 합니다. */
.f1jn-row-selected td { background: #f4f4f8 !important; }
.f1jn-panel-1 .f1jn-row-selected td { background: #ebebf0 !important; }

/* 마우스를 올린 줄 — 네 패널에 동시에 걸립니다(render.js).
   표가 넷으로 갈라져 있어 이게 없으면 오른쪽 패널에서 왼쪽 날짜를
   되짚어 갈 방법이 없습니다. */
.f1jn-table tbody tr.f1jn-row-hover:not(.f1jn-row-selected):not(.f1jn-row-today) td {
    background: #f7f7fa !important;
}

/* ================================================
   소계 (tfoot) — 바닥 고정
   ================================================ */
.f1jn-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 9;
}

.f1jn-table tfoot td {
    background: #f0f0f5;
    font-weight: 800;
    font-size: 13px;
    color: #000000;
    border-top: 1.5px solid #c7c7cc;
    border-bottom: none;
}

/* ================================================
   전체 보기 — 표 안의 스크롤을 풀고 그 달을 통째로 폅니다

   소계 바로 아래에 표와 같은 폭으로 눕힙니다. 표의 일부처럼 보여야
   "이 표를 펴는 버튼"으로 읽히므로, 패널과 같은 테두리·모서리를 씁니다.
   ================================================ */
/* ※ 펼침 버튼의 모양(.f1jn-expand)이 여기 있었습니다. 2026-08-05, 페이지마다
     복사되던 같은 규칙을 css/common/common_expand_btn.css 의 .mk-expand-btn
     한 벌로 모았습니다. 아래 .is-expanded 규칙만 이 파일에 남습니다. */

/* 높이 제한을 풉니다 */
.f1jn-floor-container.is-expanded .f1jn-scroll-area {
    height: auto;
    overflow-y: visible;
}

/* 소계(tfoot)의 붙박이만 풉니다 — 페이지 스크롤 기준이 되면 소계가
   화면 바닥에 계속 따라다니기 때문입니다.

   머리글(thead)은 펼쳐도 붙박이(sticky)를 유지합니다 — 한 달치를
   내리다 보면 어느 열이 어느 항목인지 알 수 없게 되기 때문입니다
   (사용량 페이지와 같은 수정, 2026-08-10). 그러려면 머리글과 화면
   사이의 '자르는 조상'(스크롤 창 · 패널 카드 · 패널 묶음)을 전부
   풀어야 합니다 — 한 축이 hidden/auto 면 붙박이가 화면이 아니라
   거기에 묶여 조용히 죽습니다. 패널 묶음(.f1jn-panels-outer)은 좁은
   화면에서 실제로 가로로 굴러가는 상자라, 네 패널이 넉넉히 들어가는
   1100px 이상에서만 풉니다(나라사랑 페이지와 같은 절충) — 그보다
   좁으면 머리글은 예전처럼 페이지와 함께 흘러갑니다. */
.f1jn-floor-container.is-expanded .f1jn-table tfoot {
    position: static;
}

@media (min-width: 1100px) {
    .f1jn-floor-container.is-expanded .f1jn-scroll-area {
        overflow: visible;
    }
    .f1jn-floor-container.is-expanded .f1jn-panel {
        overflow: visible;
    }
    .f1jn-floor-container.is-expanded .f1jn-panels-outer {
        overflow-x: visible;
    }
}

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

/* 폰(≤640px)에서는 공통 하단 독(common_header.css 의 .mkm-dock, z 1500)이
   화면 아래에 떠 있습니다. 예전에는 버튼이 독 뒤에 가려진다고 붙박이를
   풀어 표 아래에 뒀는데, 그러면 접으려고 한 달치를 끝까지 내려야 했습니다.
   독 높이만큼 위로 올려 독 바로 위에 떠 있게 합니다 (2026-08-23).
   120px = 독 높이(약 102px) + 독의 바닥 여백(10px) + 틈(8px).
   독 높이를 바꾸면 body 의 padding-bottom(현재 114px)과 함께 여기도
   맞춰야 합니다. */
@media (max-width: 640px) {
    .f1jn-floor-container.is-expanded .mk-expand-btn {
        bottom: calc(120px + env(safe-area-inset-bottom));
    }
}

/* ================================================
   월 이동 버튼 — 본문 좌우 여백에 세로로 세웁니다
   ────────────────────────────────────────────────
   모양은 서브메뉴 이동 버튼(common_subnav.css .gf3-subnav)을 그대로
   씁니다. 다른 점은 '숨은 기능'이 아니라는 것입니다. 이 표는 달이 단위라
   월 이동이 주된 조작이므로 평소에도 보이게 기본 투명도를 올립니다.
   (서브메뉴 버튼은 0.12 → 여기는 0.42)

   common_subnav.css 가 이 파일보다 뒤에 실려서 .f1jn-monthnav 하나만으로는
   .gf3-subnav 를 못 이깁니다. 두 클래스를 겹쳐 씁니다.
   ================================================ */
.gf3-subnav.f1jn-monthnav {
    flex-direction: column;
    gap: 5px;
    opacity: 0.42;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid transparent;
    padding: 0;
    font-family: inherit;
}

.gf3-subnav.f1jn-monthnav:hover,
.gf3-subnav.f1jn-monthnav:focus-visible {
    opacity: 1;
    background: #f7f8fa;
    border-color: #e5e5ea;
    color: #007aff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    outline: none;
}

/* 대상 월 — 화살표만 있으면 '다음 페이지'로 오해합니다.
   달만 적습니다. 연도는 표 위 제목에 이미 있습니다.

   세로쓰기(writing-mode)를 쓰면 '6' 이 옆으로 누워 버립니다. 버튼 폭이
   44px 이라 '12월' 까지 가로로 다 들어가므로 그냥 가로로 씁니다. */
.f1jn-monthnav-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: inherit;
    white-space: nowrap;
}

/* 오늘이 든 달보다 뒤로는 갈 수 없습니다 — 원장이 없는 구간입니다 */
.gf3-subnav.f1jn-monthnav.is-disabled {
    opacity: 0.08;
    pointer-events: none;
}

/* ================================================
   좁은 화면
   ================================================ */
@media (max-width: 1200px) {
    :root { --f1jn-meta-width: 132px; }
    .f1jn-panels-outer { gap: 8px; }
    .f1jn-panel-2, .f1jn-panel-3 { min-width: 230px; }
    .f1jn-table td { font-size: 12px; padding: 5px 2px; }
    .f1jn-thead-lv1 th { font-size: 11.5px; }
    .f1jn-thead-lv2 th { font-size: 10.5px; }
}

/* ── 폰: 표 위 제목 정리 (2026-08-23) ──
   헤더가 [제목 1fr | 가운데 auto | 알약 1fr] 그리드인데, 우측의 창고
   알약(.f1jn-note)이 줄바꿈 금지(nowrap)라 폰 폭에서는 우측이 폭을 다
   가져가고, 좌측 제목이 한 글자 폭까지 눌려 세로로 흘러내렸습니다
   ('전자신문용지재고대장'이 세로 한 줄씩). 폰에서는 그리드를 한 칸으로
   접어 [제목 줄] 아래 [계산식 · 알약 줄] 두 줄로 쌓습니다. */
@media (max-width: 640px) {
    .panel-header-grid {
        grid-template-columns: 1fr;
        row-gap: 6px;
        margin-bottom: 10px;
    }
    /* 가운데 칸은 이 페이지에서 늘 비어 있는 자리라 폰에서는 접습니다 */
    .panel-header-grid .header-center { display: none; }
    /* 알약 줄은 제목과 같은 왼쪽 선에 맞춥니다 */
    .panel-header-grid .header-right {
        justify-content: flex-start;
        padding-left: var(--panel-title-left-offset);
    }
}