/* factory1_narasarang_style.css — 1공장 나라사랑(48.8g) 재고 대장 스타일
   ────────────────────────────────────────────────────────────────
   지고 재고 페이지(factory1_jigo_inventory_style.css)의 표 규격을 그대로
   따릅니다. 헤더 · 카드 · 입력칸 · 변경분 표시가 전부 같은 값입니다.

   다른 점은 셋입니다.
     · 줄이 연속된 날짜가 아니라 **일이 있었던 날**만 있습니다.
     · 열 폭을 균등 분할하지 않고 열마다 고정값을 줍니다. 잔량 6칸은 좁아도
       되고 kg 열은 다섯 자리가 들어가야 해서, 균등 분할하면 kg 쪽이 깨집니다.
     · 표가 하나가 아니라 넷입니다 (3공장 재고 종합과 같은 구성).
       ① 완롤  ② 잔량(입력)  ③ 재고kg  ④ 출고kg — 세는 단위와 값의 출처가
       덩어리마다 다릅니다. 네 패널의 헤더(44px × 2)와 행(44px) 높이가 같아야
       같은 날짜가 같은 높이에 섭니다. 한쪽만 건드리지 마세요.

   .f1ns-*
   ──────────────────────────────────────────────────────────────── */

:root {
    --panel-title-left-offset: 12px;

    /*
      [표 높이]
      계산식: 헤더 2줄(44px × 2 = 88px) + 행 높이 44px × 보고 싶은 줄 수
               8줄 → 88 + 44 × 8 = 440px
      (지고 재고 · 사용량 페이지의 --*-scroll-height 와 같은 계산입니다)
    */
    --f1ns-scroll-height: 440px;

    /* 열 폭은 패널 안에서의 **비율(%)** 입니다 — 아래 패널별 규칙에 있습니다.
       px 로 두면 패널이 좁아졌을 때 표가 패널보다 넓어져 오른쪽 열이 잘립니다
       (패널은 가로 스크롤을 받지 않습니다). 비율이면 같이 줄어듭니다. */
}

.f1ns-wrapper { gap: 14px; }

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

/* 지금 보고 있는 연도 — 헤더 날짜에서 옵니다.
   표가 '오늘부터 며칠'이 아니라 '이 해 전체'라는 걸 한눈에 알리는 표시입니다. */
.f1ns-year-label {
    font-size: 15px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}

/* [+ 이 날짜 추가] — 편집 모드에서만 열립니다 */
.f1ns-add-btn {
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    border: 1px solid #d1d1d6;
    background: #f7f8fa;
    font-size: 12px;
    font-weight: 700;
    color: #1d1d1f;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.f1ns-add-btn:hover:not(:disabled) { background: #f2f2f5; }

.f1ns-add-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

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

/* ================================================
   표 카드 — 네 덩어리를 가로로 늘어놓습니다

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

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

/* flex 값은 그 덩어리의 열 수에 비례합니다 — 화면이 넓어져도 덩어리끼리의
   가로 비율이 유지되어, 한 표만 헐렁해 보이는 일이 없습니다.
   min-width 는 숫자가 뭉개지기 시작하는 선입니다. 여기까지 좁아지면 그
   아래로는 바깥 상자가 가로 스크롤을 받습니다.
   (.f1ns-panel 의 뒤에 두세요 — 앞에 두면 min-width 가 덮입니다) */
.f1ns-panel-1 { flex: 1.2;  min-width: 250px; }   /* 날짜 · 입고 · 출고 · 지고 재고 */
.f1ns-panel-2 { flex: 2;    min-width: 420px; }   /* B5 주행지 잔량 + 합계 */
.f1ns-panel-3 { flex: 0.38; min-width: 88px;  }   /* 출고(kg) */
.f1ns-panel-4 { flex: 0.42; min-width: 96px;  }   /* 실재고(kg) */
/* 제목('실재고−ERP')이 들어갈 만큼만 두고 더 넓히지 않습니다 — 값 하나만
   내는 열입니다. */
.f1ns-panel-5 { flex: 0.34; min-width: 84px; }    /* 실재고−ERP */

/* 8줄까지 보이고 그 아래는 [전체 보기]로 폅니다.

   표 안의 세로 스크롤은 늘 잠겨 있습니다 — 휠·터치는 페이지 전체 스크롤로
   넘어갑니다. 예전에는 헤더의 ON/OFF 토글로 여닫았는데, 표 아래 [전체 보기]가
   생기면서 할 일이 겹쳐 토글을 없앴습니다.

   잠겨 있어도 render.js 가 scrollTop 을 직접 넣어 고른 줄로 맞춥니다 —
   잠금은 사람이 굴리는 것만 막습니다. 다섯 패널의 스크롤을 묶는 것도
   그대로입니다(factory1_narasarang_render.js). */
.f1ns-scroll-area {
    position: relative;
    height: var(--f1ns-scroll-height);
    overflow-y: hidden;
    overflow-x: hidden;
    cursor: default;
    scrollbar-width: none;
}

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

/* ================================================
   셀 커서 — 고른 칸 위에 떠 있는 흰 판

   패널마다 하나씩, .f1ns-scroll-area(position: relative) 안에 둡니다.
   표와 같이 굴러야 하므로 스크롤 영역 밖으로 빼면 안 됩니다.
   (지고 재고 · 입고 페이지의 .f1jg-cursor · .f1ip-cursor 와 같은 부품)
   ================================================ */
.f1ns-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;
}

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

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

/* 열 폭은 패널 안에서의 비율입니다. 한 패널의 col 합이 100% 입니다 —
   합이 100 을 넘으면 마지막 열이 잘리고, 모자라면 오른쪽에 흰 틈이 남습니다.
     ① 84 : 74 : 74 : 84   날짜가 '12/31(수)', 완롤은 두 자리
     ② 74 × 6 : 92         잔량은 다섯~여섯 자리, 합계는 한 자리 더 */
.f1ns-table col.f1ns-col-date  { width: 26.6%; }
.f1ns-table col.f1ns-col-roll  { width: 23.4%; }
.f1ns-table col.f1ns-col-jigo  { width: 26.6%; }
.f1ns-table col.f1ns-col-slot  { width: 13.8%; }
.f1ns-table col.f1ns-col-sum   { width: 17.2%; }
.f1ns-table col.f1ns-col-stock { width: 100%; }
.f1ns-table col.f1ns-col-out   { width: 100%; }
.f1ns-table col.f1ns-col-diff  { width: 100%; }

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

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

/* 2레벨 헤더는 없앴습니다. 단위(R/L · Kg)만 따로 적던 줄이라 같은 말을
   두 줄로 나눈 셈이었습니다. 단위는 제목에 붙였습니다 — 오른쪽 Kg 덩어리
   에만 적습니다(왼쪽은 전부 완롤이라 가릴 것이 없습니다). */

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

/* ─ 데이터 셀 ─ */
.f1ns-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;
}

/* ─ 날짜 열 (좌측 고정) ─ */
.f1ns-date-th {
    position: sticky;
    left: 0;
    background: #f7f8fa !important;
    z-index: 11;
    text-align: center;
    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;
}

.f1ns-table td.f1ns-date-td {
    position: sticky;
    left: 0;
    background: #f7f8fa;
    z-index: 5;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid #e0e0e0 !important;
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
}

/* ================================================
   계산 열 — 저장하지 않는 값입니다

   잔량 합계는 사람이 적은 칸 바로 옆이라, 같은 색으로 두면 "여기도 고칠 수
   있나" 싶어집니다. 옅은 회색으로 깔아 읽는 값이라는 걸 드러냅니다.

   출고(R/L)에는 색을 깔지 않습니다. 제 표(①) 안에서 입고·지고 재고와 나란히
   서 있는 값이라, 혼자 회색이면 성격이 다른 칸처럼 읽힙니다.
   ================================================ */
.f1ns-table td.f1ns-sum-td {
    background: #f1f3f6;
    font-weight: 700;
}

.f1ns-table td.f1ns-out-roll-td { font-weight: 700; }

.f1ns-table td.f1ns-stock-td {
    font-weight: 800;
    color: #0b4a80;
}

/* 맨 아랫줄의 실재고 = 지금 남아 있는 양. 여기만 칠합니다 — 모든 줄에 깔면
   지나간 날의 재고까지 같은 무게로 읽혀, 정작 오늘 숫자가 눈에 안 들어옵니다.
   기준행·커서행 배경보다 뒤에 두어 이 색이 이깁니다. */
.f1ns-table td.f1ns-stock-td.f1ns-stock-now {
    background: #dbeafe !important;
    color: #0b4a80;
}

/* ⑤ 실재고 − ERP재고 — 0 이 아닌 줄만 눈에 걸리게. 결재가 2~3일 밀리는 것이
   보통이라 0 이 아닌 것 자체는 정상이고, 얼마나 벌어졌는지가 이 열의 쓸모입니다. */
.f1ns-table td.f1ns-diff-td { font-weight: 700; color: #8e8e93; }
.f1ns-table td.f1ns-diff-td.f1ns-diff-off { color: #c9302c; font-weight: 800; }

/* ================================================
   줄 강조
   ================================================ */

/* 기준행 — 조회 연도 이전의 마지막 기록. 엑셀의 12월 31일 줄과 같은 자리로,
   재고가 어디서 이어져 왔는지 보여줍니다. 여기서는 고칠 수 없습니다. */
.f1ns-row-base td {
    background: #f0f0f4 !important;
    color: #55555d;
}

.f1ns-row-base .f1ns-date-td {
    background: #e4e4ea !important;
    color: #3a3a41;
}

/* 가장 최근 줄 — 이 표의 마지막 줄이고, '지금 남아 있는 양'이 서 있는
   자리입니다. 화면을 열면 (헤더 날짜에 해당하는 줄이 없는 한) 여기가 잡힙니다.
   지고 재고 페이지의 기준일 줄과 같은 하늘색을 씁니다 — 두 화면에서
   '푸른 줄 = 지금 기준이 되는 줄'이 같아야 합니다. */
.f1ns-row-latest td { background: #e8f4fd !important; }
.f1ns-row-latest .f1ns-date-td { background: #bbdefb !important; }

/* 고른 줄 — 칸을 누르면 다섯 패널의 같은 날짜 줄이 함께 칠해집니다.
   회색인 이유는, 푸른색을 '날짜 자체가 특별한 줄'(가장 최근 줄)에만
   쓰기 때문입니다. 둘이 겹치면 아래 두 줄의 섞인 색으로 갑니다.
   (.f1ns-row-cursor 는 스크롤을 맞추는 표시일 뿐 색이 없습니다 —
    색은 선택이 전부 맡습니다) */
.f1ns-selected-row td { background: #f4f4f8 !important; }
.f1ns-selected-row .f1ns-date-td { background: #ebebf0 !important; }
.f1ns-row-latest.f1ns-selected-row td { background: #daedf9 !important; }
.f1ns-row-latest.f1ns-selected-row .f1ns-date-td { background: #bbd8f0 !important; }

/* 저장하지 않은 변경이 있는 줄 */
.f1ns-row-dirty .f1ns-date-td {
    background: #fff3cd !important;
    color: #8a6d00 !important;
}

/* 고른 칸 — 글자만 세웁니다. 커서(흰 판)보다 위에 서므로 배경을 깔면
   커서가 그 뒤로 숨습니다. 색이 있는 계산 칸(잔량 합계 · 맨 아랫줄 실재고)
   은 고르는 동안만 배경을 비워 커서가 비쳐 보이게 합니다.
   겹침 순서(낮은 값이 아래) — 날짜칸 5 · 유리 커서 8 · 본문 강조 9 · thead 10 · 날짜 헤더 11
   본문 칸은 반드시 9 이하로 둡니다. 10 이면 thead 와 값이 같아 문서 순서상
   뒤에 오는 tbody 가 이기고, 스크롤할 때 칸이 헤더 위로 비쳐 보입니다. */
.f1ns-selected-cell {
    position: relative;
    z-index: 9;
    font-weight: 900 !important;
    color: #000000 !important;
}

.f1ns-table td.f1ns-sum-td.f1ns-selected-cell,
.f1ns-table td.f1ns-stock-td.f1ns-stock-now.f1ns-selected-cell { background: transparent !important; }

/* 고른 칸의 머리글 — 어느 열을 보고 있는지 위에서도 보이게 */
.f1ns-thead-lv1 th.f1ns-header-active {
    background-color: rgba(255, 160, 50, 0.18) !important;
    color: #c05a00 !important;
}

.f1ns-table tbody tr:not(.f1ns-selected-row):not(.f1ns-row-base):not(.f1ns-row-latest):hover td { background: #f7f7fa; }

/* 누를 수 있는 칸이라는 표시 ('줄이 없습니다' 문구 칸은 뺍니다) */
.f1ns-table tbody td:not(.f1ns-blank) { cursor: pointer; }

/* ─ 색상 ─ */
.f1ns-sat { color: #007aff !important; }
.f1ns-sun { color: #ff3b30 !important; }
.f1ns-empty { color: #c7c7cc; font-weight: 400; }

.f1ns-blank {
    padding: 40px 12px !important;
    color: #8e8e93;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
}

/* ================================================
   편집 모드 — 잔량 입력칸
   (지고 재고 · 입고 페이지와 같은 규격)

   input 을 absolute 로 띄워 레이아웃 흐름에서 빼냅니다. 그래야 편집 모드에
   들어가도 줄 높이가 1px 도 안 변합니다.
   ================================================ */
.f1ns-table td.f1ns-edit-cell {
    position: relative;
    padding: 0 !important;
}

.f1ns-input {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #1d1d1f;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

/* 편집 모드에서만 입력칸임을 드러냅니다. 보기 모드에서는 일반 셀과 똑같이
   보여야 합니다 — 늘 노랗게 깔면 "지금 고칠 수 있다"는 신호가 죽습니다.
   색은 급지 재고 페이지의 입력칸과 같은 값입니다(#fff9e6 / 포커스 #fff2cc).
   두 화면을 오가며 쓰는 사람에게 '노란 칸 = 지금 내가 적는 칸'이 같아야 합니다. */
.f1ns-wrapper.edit-mode .f1ns-input:not([readonly]) { background: #fff9e6; }
.f1ns-wrapper.edit-mode .f1ns-input:not([readonly]):focus { background: #fff2cc; }

/* 저장 전 변경분 — 편집 모드를 빠져나가도 남습니다 */
.f1ns-input.f1ns-dirty,
.f1ns-wrapper.edit-mode .f1ns-input:not([readonly]).f1ns-dirty {
    background: #fff3cd;
    font-weight: 800;
    color: #8a6d00;
}

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

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

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

/* 머리글은 펼쳐도 붙박이(sticky)를 유지합니다 — 한 해치를 내리다 보면
   어느 열이 어느 항목인지 알 수 없게 되기 때문입니다(사용량 페이지와
   같은 수정, 2026-08-10). 그러려면 머리글과 화면 사이의 '자르는 조상'
   (스크롤 창 · 패널 카드 · 패널 묶음)을 전부 풀어야 합니다 — 한 축이
   hidden/auto 면 붙박이가 화면이 아니라 거기에 묶여 조용히 죽습니다.

   단, 이 페이지의 패널 묶음(.f1ns-panels-outer)은 좁은 화면에서 실제로
   가로로 굴러가는 상자입니다(다섯 패널의 최소 폭 합이 약 930px).
   그래서 다섯 패널이 넉넉히 들어가는 1100px 이상에서만 풉니다 —
   그보다 좁으면 머리글은 예전처럼 페이지와 함께 흘러갑니다. */
@media (min-width: 1100px) {
    .f1ns-floor-container.is-expanded .f1ns-scroll-area {
        overflow: visible;
    }
    .f1ns-floor-container.is-expanded .f1ns-panel {
        overflow: visible;
    }
    .f1ns-floor-container.is-expanded .f1ns-panels-outer {
        overflow-x: visible;
    }
}

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

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

/* ── 폰: 표 위 제목 정리 (전자신문과 같은 수정, 2026-08-23) ──
   헤더가 [제목 1fr | 연도 auto | 버튼들 1fr] 그리드인데, 우측의
   [+ 이 날짜 추가] 버튼과 DB 갱신 시간이 폭을 가져가면 좌측 제목이
   눌려 줄이 꺾입니다. 폰에서는 두 줄로 쌓습니다:
     [나라사랑 48.8g   2026년]   ← 제목 · 연도
     [DB 갱신 시간 · + 이 날짜 추가]
   가운데 칸(연도)은 전자신문과 달리 실제 내용이 있어 접지 않고
   제목 옆으로 붙입니다. */
@media (max-width: 640px) {
    .panel-header-grid {
        grid-template-columns: auto 1fr;
        row-gap: 6px;
        margin-bottom: 10px;
    }
    .panel-header-grid .header-center {
        justify-content: flex-start;
        padding-left: 10px;
    }
    /* 버튼 줄은 둘째 줄 전체 폭 — 제목과 같은 왼쪽 선에 맞춥니다 */
    .panel-header-grid .header-right {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: var(--panel-title-left-offset);
    }
}

/* ================================================
   연도 이동 버튼 — 본문 좌우 여백에 세로로 세웁니다
   ────────────────────────────────────────────────
   모양은 서브메뉴 이동 버튼(common_subnav.css .gf3-subnav)을 그대로 쓰고,
   하는 일만 다릅니다 — 페이지 이동이 아니라 이 표의 해를 바꿉니다.
   전자신문의 월 이동 버튼과 같은 부품이고, 거기서는 달을 여기서는 해를
   옮깁니다.

   '숨은 기능'이 아니라는 점도 같습니다. 이 표는 해가 단위라 연도 이동이
   주된 조작이므로 평소에도 보이게 기본 투명도를 올립니다(0.12 → 0.42).

   common_subnav.css 가 이 파일보다 뒤에 실려서 .f1ns-yearnav 하나만으로는
   .gf3-subnav 를 못 이깁니다. 두 클래스를 겹쳐 씁니다.
   ================================================ */
.gf3-subnav.f1ns-yearnav {
    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.f1ns-yearnav:hover,
.gf3-subnav.f1ns-yearnav:focus-visible {
    opacity: 1;
    background: #f7f8fa;
    border-color: #e5e5ea;
    color: #007aff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    outline: none;
}

/* 대상 연도 — 화살표만 있으면 '다음 페이지'로 오해합니다.
   버튼 폭이 44px 이라 네 자리(2025)가 가로로 들어갑니다. 세로쓰기를 쓰면
   숫자가 하나씩 끊겨 읽기 어렵습니다. */
.f1ns-yearnav-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: inherit;
    white-space: nowrap;
}

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

/* ================================================
   좁은 화면
   ================================================ */
@media (max-width: 1200px) {
    .f1ns-panels-outer { gap: 8px; }
    .f1ns-panel-1 { min-width: 228px; }
    .f1ns-panel-2 { min-width: 390px; }
    .f1ns-table td { font-size: 12px; padding: 9px 2px; }
    .f1ns-input { font-size: 12px; }
    .f1ns-thead-lv1 th { font-size: 11.5px; }
}