/* common_header.css — 1공장 · 3공장 공통 헤더 스타일
   ────────────────────────────────────────────────────────────────
   이 파일은 아래 두 파일에서 그대로 가져와 하나로 합친 것입니다.
     1) css/factory3.css                — 헤더/드롭다운/버튼/기본 테이블 셸
     2) css/factory3_ilji.css (일부)     — 공지 롤링 티커 + 공지 상세 모달
   factory3_io.css 안에도 2)와 완전히 동일한 블록이 통째로 중복되어 있었는데,
   (셀렉터만 .f3i-wrapper → .gf3-wrapper 로 바뀐 정도) 여기서는 두 셀렉터를
   모두 받아주도록 합쳐서 한 곳에서만 관리되게 만들었습니다.

   1공장 페이지는 이 파일 하나만 링크하면 3공장과 동일한 헤더 디자인/
   드롭다운/공지 티커/모달을 그대로 사용할 수 있습니다.
   ──────────────────────────────────────────────────────────────── */

/* 기본 문서 초기화 및 배경설정
   ※ 2026-08-02 색 조정: 순백(#fff) 표면이 눈이 부시다는 현장 의견으로
   흰색 계열을 한 단계씩 낮췄습니다. 포털(portal.css)과 같은 결입니다.
     페이지 배경  #f5f5f7 → #eef1f6 (포털과 통일)
     카드·표 등   #fff    → #f7f8fa
     보조 회색    #fafafc → #f1f3f6 · #fbfbfd → #f2f4f7 · #f5f5f7 → #eceff4 */
body {
    margin: 0;
    padding: 20px;
    background-color: #eef1f6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    zoom: 115%;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* PC에서 너무 넓게 퍼지지 않도록 max-width 지정 및 중앙 정렬 */
.gf3-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 헤더 영역 */
.gf3-header { display: flex; justify-content: space-between; align-items: center; background: #f7f8fa; padding: 12px 20px; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); z-index: 100; position: relative; flex-wrap: wrap; gap: 12px; }
.gf3-main-title { font-size: 20px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.5px; }

.gf3-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: 8px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.gf3-title-wrap:hover {
    background-color: #eceff4;
}
.gf3-hamburger {
    font-size: 24px;
    color: #1d1d1f;
}

/* ── 공장 전환 스위치 (2026-08-04) ───────────────────────────────
   제목 바로 오른쪽에 붙는 두 칸짜리 알약입니다. 지금 있는 공장이 흰 칸
   으로 도드라지고, 옆 칸을 누르면 그 공장으로 넘어갑니다.
   (예전에는 메뉴 맨 아랫줄 '3공장으로 이동' 이었습니다)

   마크업은 common_header.js 의 MKFactorySwitch 가 만들어 넣습니다 —
   HTML 에는 없습니다. 제목 묶음의 형제로 들어가므로 메뉴 클릭과 서로
   간섭하지 않습니다. 날짜 컨트롤 묶음(.gf3-nav-group)과 같은 톤을 씁니다.
   ──────────────────────────────────────────────────────────────── */
.gf3-fswitch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 3px;
    background: #eceff4;
    border: 1px solid #e5e5ea;
    border-radius: 20px;

    /* 제목 바로 옆에 붙여 둡니다.

       헤더는 justify-content: space-between 입니다. 공지 티커가 있는
       페이지는 티커가 flex:1 로 남는 폭을 다 먹어 스위치가 저절로 제목에
       붙지만, 티커가 없는 페이지(설비 안내)에서는 남는 폭이 제목·스위치·
       컨트롤 사이에 고르게 나뉘어 스위치가 헤더 한가운데로 밀려났습니다.
       auto 여백은 그 남는 폭을 전부 이쪽(오른쪽)으로 몰아주므로 어느
       페이지에서나 제목 옆자리를 지킵니다. 티커가 있는 페이지에서는
       남는 폭 자체가 0 이라 아무 일도 하지 않습니다. */
    margin-right: auto;
}
.gf3-fswitch a {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #86868b;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.gf3-fswitch a:hover {
    background: #e2e6ec;
    color: #1d1d1f;
}
/* 지금 공장 — href 가 없어 눌러도 아무 일이 없습니다(제자리) */
.gf3-fswitch a.active,
.gf3-fswitch a.active:hover {
    background: #fff;
    color: #007AFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
    cursor: default;
}

.gf3-dropdown {
    position: absolute;
    top: 45px;
    left: 0;
    background: #f7f8fa;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    /* 글자에 비해 헐렁해서 한 단계 좁혔습니다 (260px → 220px, 2026-08-06).
       가장 긴 최상단 항목이 '재고 종합' 다섯 자라 220px 도 넉넉합니다. */
    width: 220px;
    flex-direction: column;
    overflow: visible;
    z-index: 1000;
    border: 1px solid #e5e5ea;

    /* 열림 연출 (2026-08-06)
       display:none ↔ flex 로 켜고 끄면 트랜지션이 아예 실행되지 않아
       메뉴가 딱 나타났습니다. 그래서 display 는 항상 flex 로 두고,
       닫힘은 opacity/visibility/pointer-events 로 완전히 무력화합니다.
       (모바일 flatpickr 달력에서 이미 쓰는 것과 같은 문법입니다)
       transform-origin 을 왼쪽 위로 두어 햄버거 자리에서 펼쳐집니다. */
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.97);
    transform-origin: 20px top;
    transition: opacity 0.18s ease,
                transform 0.26s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s linear 0.26s;   /* 접힌 뒤에 숨김 */
}
.gf3-dropdown.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.2s ease,
                transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.gf3-dropdown a {
    padding: 14px 20px;
    text-decoration: none;
    color: #515154;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid #f2f2f7;
    transition: all 0.2s;
}
.gf3-dropdown a:last-child {
    border-bottom: none;
}
.gf3-dropdown a:hover {
    background: #eceff4;
    color: #1d1d1f;
}
.gf3-dropdown a.active {
    color: #007AFF;
    background: #e8f4fd;
}

/* ── 설비 메뉴 (flyout 서브메뉴) ── */
.gf3-dropdown-item {
    position: relative;
    display: block;
    border-bottom: 1px solid #f2f2f7;
}
.gf3-dropdown-item:last-child {
    border-bottom: none;
}
/* 항목과 하위 메뉴 사이 6px 틈을 메우는 투명한 '다리'.
   여기를 지나는 동안에도 :hover 가 끊기지 않습니다.
   ※ 평소에는 항목 높이만큼만 둡니다 — 더 크게 두면 이름에서 한참 아래로
     떨어진 빈 자리에 마우스를 올려도 하위 메뉴가 열려 이상합니다. */
.gf3-dropdown-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 14px;
    height: 100%;
    background: transparent;
}
/* 열려 있는 동안에만 하위 메뉴 높이만큼 늘립니다 (--gf3-bridge-h 는
   common_ui.js 가 하위 메뉴를 실제로 재서 넣습니다). 이러면 이름에서
   하위 메뉴 아래쪽 줄로 대각선으로 가도 다리 위를 지나갑니다.
   폭 22px 는 6px 틈 + 하위 메뉴 왼쪽 16px 겹침입니다. 겹치는 부분은
   z-index 가 높은 하위 메뉴가 위에 있어 클릭을 가리지 않습니다. */
.gf3-dropdown-item.gf3-submenu-open::after {
    width: 22px;
    height: var(--gf3-bridge-h, 100%);
    min-height: 100%;
}
.gf3-dropdown-item > .gf3-dropdown-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    text-decoration: none;
    color: #515154;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.gf3-dropdown-item > .gf3-dropdown-label:hover,
.gf3-dropdown-item:hover > .gf3-dropdown-label,
.gf3-dropdown-item.gf3-submenu-open > .gf3-dropdown-label {
    background: #eceff4;
    color: #1d1d1f;
}
.gf3-dropdown-item > .gf3-dropdown-label .gf3-submenu-arrow {
    font-size: 16px;
    color: #8e8e93;
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s;
}
/* 하위 메뉴가 나오는 동안 화살표도 같이 따라 나갑니다 */
.gf3-dropdown-item:hover > .gf3-dropdown-label .gf3-submenu-arrow,
.gf3-dropdown-item.gf3-submenu-open > .gf3-dropdown-label .gf3-submenu-arrow {
    transform: translateX(3px);
    color: #007AFF;
}
.gf3-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    background: #f7f8fa;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    /* 200px → 190px. 여기서 더 줄이면 가장 긴 '용지별,매체별 사용량'이
       한 줄에 안 들어갑니다. */
    width: 190px;
    flex-direction: column;
    overflow: hidden;
    z-index: 1100;
    border: 1px solid #e5e5ea;
    margin-left: 6px;

    /* 위 .gf3-dropdown 과 같은 이유로 display 는 늘 flex 입니다.
       이쪽은 왼쪽(부모 항목)에서 오른쪽으로 밀려 나옵니다.
       덤: common_ui.js 가 submenu.offsetHeight 를 재서 '다리' 높이를
       넣는데, display:none 이면 0 이 나왔습니다 — 이제 항상 잽니다. */
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px) scale(0.98);
    transform-origin: left top;
    transition: opacity 0.16s ease,
                transform 0.24s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s linear 0.24s;
}
/* :hover = 즉시 열림, .gf3-submenu-open = common_ui.js 가 붙잡아 두는
   300ms 닫힘 지연. 둘 중 하나만 참이어도 떠 있습니다. */
.gf3-dropdown-item:hover > .gf3-submenu,
.gf3-dropdown-item.gf3-submenu-open > .gf3-submenu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.18s ease,
                transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.gf3-submenu a {
    padding: 13px 18px;
    text-decoration: none;
    color: #515154;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #f2f2f7;
    transition: all 0.2s;
    display: block;
}
.gf3-submenu a:last-child {
    border-bottom: none;
}
.gf3-submenu a:hover {
    background: #eceff4;
    color: #1d1d1f;
}
.gf3-submenu a.active {
    color: #007AFF;
    background: #e8f4fd;
}

.gf3-controls { display: flex; align-items: center; gap: 8px; }
.gf3-nav-group { display: flex; align-items: center; background: #eceff4; border-radius: 20px; padding: 4px; }
.gf3-icon-btn { background: #f7f8fa; border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer; transition: background-color 0.15s; }
.gf3-icon-btn:hover { background: #ececf0; }
.gf3-icon-btn span { font-size: 18px; }
.gf3-cal-wrap { position: relative; margin: 0 12px; }
.gf3-date-text { font-size: 18px; font-weight: 700; color: #1d1d1f; min-width: 140px; text-align: center; display: inline-block; cursor: pointer; }

.gf3-action-btn { display: flex; align-items: center; border: none; padding: 6px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.today-btn { background: #e8f4fd; color: #007AFF; }
.today-btn:hover { background: #d0e7fa; }
.edit-btn { background: #f2f2f7; color: #1d1d1f; }
.edit-btn:not(:disabled):hover { background: #e5e5ea; }
.save-btn { background: #007AFF; color: #fff; }
.save-btn:not(:disabled):hover { opacity: 0.85; }
.edit-btn:disabled, .save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.excel-btn { background: #217346; color: #fff; }
.excel-btn:hover { background: #1e6b40; opacity: 0.9; }
.excel-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* PDF 저장 버튼 (factory3_ilji.css에서 이전) */
.f3i-pdf-btn { background: #b8291f; color: #fff; }
.f3i-pdf-btn:not(:disabled):hover { background: #8f1f17; }
.f3i-pdf-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* 메인 레이아웃 */
.gf3-layout { display: flex; align-items: flex-start; gap: 16px; width: 100%; }

.gf3-main-table-box {
    flex: 1 1 0;
    min-width: 0;
    background: #f7f8fa;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border: 1px solid #e5e5ea;
}

.gf3-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gf3-th, .gf3-td { border: 1px solid #d2d2d7; height: 38px; vertical-align: middle; padding: 0; }
.gf3-th { background: #eceff4; font-size: 13px; font-weight: 600; color: #1d1d1f; text-align: center; }
.row-title { background: #f1f3f6; color: #1d1d1f; }
.calc-row { color: #1d1d1f; }

.border-outer { border: 2px solid #8e8e93 !important; }
.border-right-thick { border-right: 2px solid #8e8e93 !important; }
.border-top-thick th, .border-top-thick td { border-top: 2px solid #8e8e93 !important; }
.border-bottom-thick th, .border-bottom-thick td { border-bottom: 2px solid #8e8e93 !important; }

.special-cell { border-top: none !important; border-bottom: none !important; border-left: none !important; background: #f7f8fa; }
.special-cell.bottom-border { border-bottom: 1px solid #d2d2d7 !important; }
.special-label { text-align: right; padding-right: 8px; font-size: 13px; font-weight: 600; color: #1d1d1f; background: transparent; border-right: none !important; }

.gf3-input { width: 100%; height: 100%; border: none; outline: none; background: transparent; text-align: center; padding: 0 8px; font-size: 14px; color: #1d1d1f; box-sizing: border-box; }
.gf3-input::-webkit-outer-spin-button, .gf3-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fw-bold { font-weight: bold; }

.gf3-td.readonly { background: #f2f4f7; }
.gf3-td.editable { background: #f7f8fa; transition: background-color 0.3s; }
.gf3-wrapper.edit-mode .gf3-td.editable { background-color: #fff9e6 !important; }
.gf3-wrapper.edit-mode .gf3-td.editable .gf3-input:focus { background-color: #fff2cc !important; }

.gf3-side-panel { width: 180px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.gf3-box { background: #f7f8fa; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); border: 1px solid #e5e5ea; }
.gf3-box-header { font-size: 14px; font-weight: 700; color: #1d1d1f; text-align: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f2f2f7; }

.mini-table { min-width: 0 !important; width: 100%; }
.mini-table th { font-size: 12px; height: 30px; }
.mini-table td { height: 34px; }

@media (max-width: 1050px) {
    .gf3-layout { flex-direction: column; }
    .gf3-side-panel { width: 100%; flex-direction: row; gap: 10px; }
    .gf3-box { flex: 1; }
    .gf3-notice-ticker, .f3i-notice-ticker { margin: 8px 0; width: 100%; order: 3; }
}

.flatpickr-calendar { margin-top: 5px; margin-left: -120px; }

/* ────────────────────────────────────────────────────────────────
   공지사항 롤링 티커 + 상세/편집 모달
   (factory3_ilji.css와 factory3_io.css에 토씨 하나 안 틀리고 두 번
   중복되어 있던 블록을 여기 한 곳으로 모으고, .f3i-wrapper /
   .gf3-wrapper 두 래퍼 모두에서 동작하도록 셀렉터만 합쳤습니다)
   ──────────────────────────────────────────────────────────────── */
.f3i-notice-ticker {
    flex: 1;
    margin: 0 24px;
    height: 32px;
    overflow: hidden;
    position: relative;
    background: #eceff4;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid #e5e5ea;
    transition: background-color 0.2s;
}
.f3i-notice-ticker:hover {
    background: #e8f4fd;
}
.f3i-ticker-wrapper {
    width: 100%;
    position: relative;
    height: 100%;
}
.f3i-ticker-item {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #007AFF;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.f3i-ticker-item.active {
    opacity: 1;
    transform: translateY(0);
}

.f3i-nmodal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}
.f3i-nmodal-overlay.show { display: flex; }
.f3i-nmodal-box {
    background: #f7f8fa;
    width: 95%;
    max-width: 850px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 75vh;
    max-height: 85vh;
    animation: f3iModalUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes f3iModalUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.f3i-nmodal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f2f2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f1f3f6;
}
.f3i-nmodal-title { font-size: 16px; font-weight: 700; color: #1d1d1f; }
.f3i-nmodal-close { font-size: 22px; color: #8e8e93; cursor: pointer; transition: color 0.2s; user-select: none; }
.f3i-nmodal-close:hover { color: #1d1d1f; }
.f3i-nmodal-back-btn {
    display: flex; align-items: center; gap: 4px;
    background: #e8f4fd; color: #007AFF; border: none;
    padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
}
/* overscroll-behavior: contain — 공지 목록을 끝까지 내린 뒤에도 계속 굴리면
   그 스크롤이 뒤 화면으로 흘러갑니다(스크롤 체이닝). 여기서 끊습니다.
   (2026-08-13, 배경 스크롤 잠금과 한 벌 — js/common/common_ui.js) */
.f3i-nmodal-body { padding: 20px; overflow-y: auto; overscroll-behavior: contain; font-size: 14px; line-height: 1.6; color: #333; height: 100%; }

.f3i-nlist-item {
    padding: 12px 14px;
    border-bottom: 1px solid #f2f2f7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: #3a3a3c;
    transition: background 0.2s;
}
.f3i-nlist-item:hover { background: #eceff4; color: #007AFF; }
.f3i-nlist-item .arrow { color: #c7c7cc; font-size: 18px; }

.f3i-ndetail-content { width: 100%; min-height: 120px; }
.f3i-ndetail-content img { max-width: 100%; height: auto; border-radius: 8px; margin-top: 10px; display: block; }
.f3i-ndetail-content a { color: #007AFF; text-decoration: underline; }

/* 마스터 모드 편집 대상 하이라이트 — f3i-wrapper(3공장 일지) / gf3-wrapper(그 외 모든 페이지) 둘 다 지원 */
.f3i-wrapper.master-mode-active .f3i-nedit-target,
.gf3-wrapper.master-mode-active .f3i-nedit-target {
    border: 2px dashed #ff9500 !important;
    background: #fffcf0;
    padding: 8px;
    border-radius: 6px;
    outline: none;
}
.f3i-nmodal-footer-info {
    background: #fff3cd; color: #856404; font-size: 11px;
    padding: 8px 20px; font-weight: 600; text-align: center; border-top: 1px solid #ffeeba;
}

.f3i-nedit-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #f2f2f7;
}
.f3i-nbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.f3i-nbtn-primary { background: #007AFF; color: #fff; }
.f3i-nbtn-primary:hover { background: #0056b3; }
.f3i-nbtn-secondary { background: #f2f2f7; color: #1d1d1f; }
.f3i-nbtn-secondary:hover { background: #e5e5ea; }

.f3i-ndelete-btn {
    color: #ff3b30;
    cursor: pointer;
    font-size: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.f3i-ndelete-btn:hover {
    background-color: #ffe5e5;
}
.f3i-nadd-wrap {
    padding: 16px 20px;
    border-top: 1px solid #f2f2f7;
    background: #f1f3f6;
    display: flex;
    justify-content: center;
}
.f3i-nbtn-add {
    background: #34c759;
    color: #fff;
    width: 100%;
    justify-content: center;
}
.f3i-nbtn-add:hover {
    background: #28a745;
}

/* ════════════════════════════════════════════════════════════════
   모바일 공통 헤더 (2026-07-31)
   ────────────────────────────────────────────────────────────────
   640px 이하에서 데스크톱 헤더 카드(.gf3-header/.f3i-header)를 통째로
   숨기고, common_header.js 끝의 모바일 모듈이 만들어 넣는
   하단 독(.mkm-dock) 하나로 갈아 끼웁니다. 독은 얇은 2단입니다:
     [ ‹  날짜  › ]          ← 얇은 줄. 좌우 스와이프
     [ 제목 · 수정 · 저장 ]   ← 버튼 줄. 제목 탭 = 페이지 이동 시트
   제목을 탭하면 페이지 이동 시트가 열리고(전용 ☰ 버튼 없음 — 2026-07-31
   사용자 피드백: 자리 낭비), 날짜는 좌우 스와이프 = 전일/익일,
   탭 = 달력, 더블탭 = 오늘. 오늘/PDF/공지 버튼은 모바일에서 아예
   내보내지 않습니다(현장에서 안 씀).
   데스크톱에서는 아래 첫 줄이 mkm-* 를 전부 숨기므로 기존 화면에
   아무 영향이 없습니다. 640px 는 factory3_io.css 가 이미 쓰는
   모바일 경계와 같은 값입니다. */
.mkm-dock, .mkm-dim, .mkm-sheet { display: none; }

@media (max-width: 640px) {
    body {
        zoom: 100%;                /* PC 용 115% 확대 해제 */
        padding: 10px;
        /* 하단 독이 마지막 표를 가리지 않도록 (독 실제 높이 + 여유.
           날짜 줄을 42px 로 키우면서 104px → 114px, 2026-08-13) */
        padding-bottom: calc(114px + env(safe-area-inset-bottom));
    }

    .gf3-header, .f3i-header { display: none !important; }
    /* 헤더만 담은 래퍼(설비 안내 페이지)는 통째로 숨겨 상단 빈 띠 제거 */
    .gf3-header-wrapper { display: none !important; }

    /* ── 하단 독 (얇은 2단: 날짜 줄 + 버튼 줄) ── */
    .mkm-dock {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 12px; right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 1500;             /* 공지 모달(2000)보다는 아래 */
        gap: 4px;
        background: rgba(247,248,250,0.94);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border: 1px solid #e5e5ea;
        border-radius: 15px;
        padding: 6px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.16);
    }

    /* 날짜 줄 — 원래 버튼 줄보다 얇았는데(32px), 날짜가 눈에 잘 들어오게
       버튼 줄과 같은 높이로 키웠습니다 (2026-08-13) */
    .mkm-pill {
        position: relative;
        width: 100%;
        height: 42px;
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 12px;
        border-radius: 10px;
        user-select: none;
        -webkit-user-select: none;
        touch-action: pan-y;       /* 세로 스크롤은 살리고 가로만 잡음 */
        overflow: hidden;
    }
    .mkm-pill:active { background: #eceff4; }
    /* 화살표 ‹‹‹ ››› — 안쪽(날짜 쪽)이 제일 크고 밖으로 갈수록 작아집니다.
       누르면 전일/익일로 넘어가는 자리라(common_header.js 의 downOn 판정)
       pointer-events 를 살려 두고, height 100% 로 얇은 줄 전체를 탭
       면적으로 씁니다 (2026-08-13). */
    .mkm-hint {
        display: flex; align-items: center; gap: 3px;
        height: 100%; padding: 0 4px;
        color: #d2d2d7; font-weight: 700;
    }
    .mkm-hint span { line-height: 1; animation: mkm-glow 2.6s ease-in-out infinite; }
    /* 크기 계단 + 불이 안→밖으로 번지는 시간차 (왼쪽은 3번째가 안쪽) */
    .mkm-hint-l span:nth-child(1) { font-size: 9px;  animation-delay: 0.36s; }
    .mkm-hint-l span:nth-child(2) { font-size: 12px; animation-delay: 0.18s; }
    .mkm-hint-l span:nth-child(3) { font-size: 15px; animation-delay: 0s; }
    .mkm-hint-r span:nth-child(1) { font-size: 15px; animation-delay: 0s; }
    .mkm-hint-r span:nth-child(2) { font-size: 12px; animation-delay: 0.18s; }
    .mkm-hint-r span:nth-child(3) { font-size: 9px;  animation-delay: 0.36s; }
    /* 아주 연한 주황 불 — 잠깐 켜졌다가 대부분의 시간은 원래 회색입니다 */
    @keyframes mkm-glow {
        0%, 45%, 100% { color: #d2d2d7; text-shadow: none; }
        15% { color: #ffcf9e; text-shadow: 0 0 6px rgba(255, 160, 50, 0.35); }
    }
    .mkm-dtxt {
        position: absolute; left: 0; right: 0;
        text-align: center;
        font-size: 16px; font-weight: 700; letter-spacing: -0.3px;    /* 14.5 → 16 (2026-08-13) */
        color: #1d1d1f;
        pointer-events: none;
        will-change: transform;
    }

    /* 버튼 줄 */
    .mkm-row { display: flex; align-items: center; gap: 6px; width: 100%; }
    .mkm-dock button {
        height: 42px;
        border: none; border-radius: 11px;
        font-size: 13px; font-weight: 600; font-family: inherit;
        cursor: pointer; user-select: none;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        color: #1d1d1f;
        background: transparent;
    }
    .mkm-dock button:active { transform: scale(0.97); }

    /* 제목이 곧 메뉴 버튼입니다 (전용 ☰ 버튼 없음, 표식도 없이 깔끔하게 —
       회색 바탕이 "눌리는 것"임을 은근히 알립니다) */
    .mkm-title {
        flex: 1; min-width: 0;
        background: #eceff4 !important;
        font-size: 14.5px; font-weight: 700; letter-spacing: -0.4px;
        padding: 0 10px;
    }
    .mkm-title .mkm-title-text {
        min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* 공장 칩 — 데스크톱 스위치의 모바일 자리.
       지금 있는 공장만 적고(1공장), 탭하면 공장 선택 시트가 열립니다.
       제목이 길면 제목 쪽이 …으로 줄어듭니다 — 칩은 안 줄어듭니다. */
    .mkm-dock button.mkm-fswitch {
        padding: 0 12px;
        background: #eceff4;
        color: #007AFF;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -0.3px;
    }

    .mkm-edit { padding: 0 16px; background: #f2f2f7 !important; }
    .mkm-save { padding: 0 16px; background: #007AFF !important; color: #fff !important; }
    .mkm-dock button:disabled { opacity: 0.4; }

    /* ── 시트 (☰ 페이지 이동 / ⋯ 더보기 공용) ── */
    .mkm-dim {
        display: block;
        position: fixed; inset: 0; z-index: 1600;
        background: rgba(0,0,0,0.32);
        opacity: 0; pointer-events: none;
        transition: opacity 0.25s;
    }
    .mkm-dim.show { opacity: 1; pointer-events: auto; }
    .mkm-sheet {
        display: block;
        position: fixed; left: 10px; right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 1700;
        background: #f7f8fa; border-radius: 18px; padding: 8px;
        transform: translateY(calc(100% + 30px));
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 0 -6px 30px rgba(0,0,0,0.18);
    }
    .mkm-sheet.show { transform: none; }
    .mkm-sheet button {
        width: 100%; height: 48px;
        border: none; background: transparent; border-radius: 12px;
        font-size: 15px; font-weight: 600; font-family: inherit; color: #1d1d1f;
        display: flex; align-items: center; gap: 12px; padding: 0 14px;
        cursor: pointer; text-align: left;
    }
    .mkm-sheet button:active { background: #eceff4; }
    .mkm-sheet button.active { color: #007AFF; background: #e8f4fd; }
    .mkm-sheet button.mkm-cancel { color: #86868b; justify-content: center; }
    .mkm-sheet .mkm-divider { height: 1px; background: #f2f2f7; margin: 4px 10px; }

    /* ── flatpickr 달력 ──
       기준 요소(데스크톱 날짜 글자)가 숨겨져 있어 제자리 계산이
       불가능하므로, 모바일에서는 화면 가운데 고정으로 강제합니다.
       flatpickr 가 inline style 로 넣는 top/left 를 !important 로 덮습니다.

       열림 연출(2026-08-01): flatpickr 기본 애니메이션은 위치 계산과
       충돌해 첫 프레임이 엉뚱한 곳에서 시작합니다 — 꺼버리고,
       제자리에서 아래→위로 떠오르며 맺히는 전환으로 교체합니다.
       display 를 항상 켜두는 이유: none↔block 전환이 끼면
       트랜지션이 아예 실행되지 않습니다 (닫힘 상태는 opacity/
       visibility/pointer-events 가 완전히 무력화합니다). */
    .flatpickr-calendar {
        position: fixed !important;
        top: 18% !important;
        left: 50% !important;
        right: auto !important;
        margin: 0 !important;
        display: inline-block !important;
        animation: none !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(22px) !important;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.25s ease,
                    visibility 0s linear 0.3s;   /* 내려간 뒤에 숨김 */
    }
    .flatpickr-calendar.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0) !important;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.25s ease;
    }
}

/* ── 페이지 넘김 연출 (2026-07-31, 2026-08-06 다시 손봄) ─────────
   페이지를 옮길 때 화면이 뚝 끊기지 않게 떠날 때 한 번, 도착할 때 한 번
   짧게 움직입니다. 아래 두 블록(mkPageEnter · body.mk-leave)은 한 동작의
   앞뒤라 반드시 같이 보고 같이 고쳐야 합니다.

   [브라우저가 실제로 하는 일 — 값을 정한 근거]
   주소를 바꿔도 브라우저는 **새 페이지의 첫 그림이 나올 때까지 옛 페이지를
   그대로 띄워 둡니다.** 그래서 떠나는 쪽을 완전히 지워 버리면(opacity:0)
   그 시간만큼 하얀 빈 화면이 생기고, 그게 "사라졌다 나타나는" 끊김으로
   보입니다. 그래서 떠날 때도 반쯤만 옅어지고, 도착도 비슷한 농도에서
   시작합니다 — 두 장면이 같은 밝기에서 만나 이어지는 것처럼 보입니다.

   [값을 만질 때 지켜야 할 것]
   · 움직이는 것은 opacity 와 transform **둘뿐**입니다. 이 둘만 그래픽
     카드가 따로 처리해 표가 아무리 커도 부드럽습니다.
   · filter: blur() 는 절대 넣지 마십시오. 매 프레임 화면 전체를 다시
     그려야 해서, 행이 많은 페이지(3공장 재고 종합 등)에서 프레임이 떨어져
     오히려 렉처럼 보입니다. 예전에는 떠나는 쪽에 blur 6px 이 있었는데
     현장에서 "렉 걸리는 느낌"으로 지적돼 걷어냈습니다 (2026-08-06).
   · 떠나는 시간(0.14s)은 common_header.js 의 LEAVE_MS(140) 와 짝입니다.
     한쪽만 고치면 연출이 덜 끝난 채 넘어가거나 끝나고도 기다립니다.
   · prefers-reduced-motion 예외는 두지 않습니다 — 윈도우의 '애니메이션
     효과'가 꺼져 있으면 현장 PC 대부분에서 연출이 통째로 죽습니다.
     (factory1/index.html 에 같은 취지가 적혀 있습니다) */
@keyframes mkPageEnter {
    from { opacity: 0.4; transform: translateY(6px); }
}
body {
    animation: mkPageEnter 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 떠나는 쪽. 클래스는 common_header.js 의 leaveTo 가 붙이고, 메뉴 링크·
   좌우 화살표·공장 전환·모바일 시트가 모두 그 길로 들어옵니다.
   살짝 뒤로 물러나며 옅어지는 정도라 누른 것이 바로 느껴집니다. */
body.mk-leave {
    opacity: 0.5;
    transform: translateY(-3px);
    transition: opacity 0.14s ease-out,
                transform 0.14s ease-out;
}

/* ── 넘어갈 때 화면 테두리에 도는 회사 색 불빛 (2026-08-06) ──────
   로고의 주황(#FF6B00)이 화면 가장자리에 반사광처럼 한 번 어렸다
   꺼집니다. 떠날 때 켜지고(0.14s) 도착하면 천천히 잦아듭니다(0.5s).

   [왜 안쪽 패널 테두리마다 넣지 않았는가]
   이 페이지들은 표 칸까지 세면 테두리가 수백 개입니다. 거기에 전부
   불을 넣으면 은은한 반사광이 아니라 깜빡이는 전광판이 되고, 무엇보다
   box-shadow 는 그래픽 카드가 따로 처리하지 못해 매 프레임 그 영역을
   다시 그립니다 — 방금 blur 를 걷어낸 것과 똑같은 렉을 다시 부릅니다.
   그래서 **바깥 액자 하나**에만 넣고, 그 하나도 box-shadow 를 움직이는
   대신 다 그려 둔 판의 opacity 만 켰다 끕니다(그래픽 카드가 처리 →
   표가 아무리 커도 공짜). 값을 만질 때도 이 원칙을 지켜 주십시오.

   [왜 body 가 아니라 html 인가]
   전환 중에는 body 에 transform 이 걸립니다. transform 이 걸린 요소
   안에서는 position:fixed 가 화면이 아니라 그 요소를 기준으로 잡혀,
   스크롤이 긴 페이지에서 위아래 테두리가 화면 밖으로 밀려납니다.
   html 은 움직이지 않으므로 여기에 답니다. 클래스도 그래서 leaveTo 가
   html·body 양쪽에 붙입니다. */
html::after {
    content: '';
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 3000;                 /* 헤더·독(최대 2000) 위, 사진 확대·달력 아래 */
    pointer-events: none;          /* 장식일 뿐 — 클릭을 가로채면 안 됩니다 */
    opacity: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.20),
                inset 0 0 26px rgba(255, 107, 0, 0.13);
    animation: mkGlowOff 0.5s ease-out;
}

/* from/to 를 한쪽만 적었습니다 — 나머지 끝은 위 opacity:0 이 맡습니다 */
@keyframes mkGlowOff { from { opacity: 1; } }
@keyframes mkGlowOn  { to   { opacity: 1; } }

/* 떠나는 동안 켜진 채로 둡니다(forwards) — 넘어가기 직전이 가장 밝습니다.
   animation 은 통째로 덮어써지므로 위 mkGlowOff 와 부딪히지 않습니다. */
html.mk-leave::after {
    animation: mkGlowOn 0.14s ease-out forwards;
}