/* factory3_ilji.css — 3공장 일지 전용 스타일 추가본 통합 */

.f3i-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 헤더 영역
   ※ gap 은 공통 헤더(.gf3-header, css/common/common_header.css)와 같은
      12px 입니다. 이 페이지만 헤더 CSS 를 여기서 따로 갖고 있어 그 값이
      빠져 있었고, 그래서 제목 옆 공장 스위치가 제목 상자에 딱 붙어
      보였습니다(마우스를 올리면 회색 상자 둘이 맞닿음). 2026-08-04 */
.f3i-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #f7f8fa;
    padding: 12px 20px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    z-index: 100;
    position: relative;
}
.f3i-main-title {
    /* 공장 알약 칸과 같은 15px (2026-08-23, 주인 요청) — 기준은
       common_header.css 의 .gf3-main-title 주석 참고. 그쪽을 고치면
       여기도 같이 맞춰야 합니다. */
    font-size: 15px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
}

.f3i-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;
}
.f3i-title-wrap:hover {
    background-color: #eceff4;
}
/* ☰ 3선은 2026-08-23 에 뺐습니다 — 제목이 연회색 알약 + ▾ 로 바뀌면서
   (모양은 common_header.css 의 .f3i-header .f3i-title-wrap 이 덧입힙니다) */
.f3i-hamburger { display: none; }

/* ── 상단 드롭다운 메뉴(.f3i-dropdown)는 2026-08-06 에 지웠습니다 ────
   일지 페이지의 메뉴만 이 이름을 썼습니다. 이제 메뉴는 common_menu.js 가
   모든 페이지에 똑같이 .gf3-dropdown 으로 만들어 넣으므로, 이 이름을 쓰는
   요소가 하나도 없습니다. 생김새는 common_header.css 한 곳에서만
   관리됩니다 — 예전에는 폭·색·여백이 두 파일에 나뉘어 있어 한쪽만 고치면
   3공장 일지 메뉴만 다르게 보였습니다. */

/* 컨트롤러 및 탐색 버튼군 */
.f3i-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.f3i-nav-group { display: flex; align-items: center; background: #eceff4; border-radius: 20px; padding: 4px; }
.f3i-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: transform 0.1s; }
.f3i-icon-btn:hover { transform: scale(1.05); }
.f3i-icon-btn span { font-size: 18px; }
.f3i-cal-wrap { position: relative; margin: 0 12px; }
.f3i-date-text { font-size: 18px; font-weight: 700; color: #1d1d1f; min-width: 140px; text-align: center; display: inline-block; cursor: pointer; }

/* 액션 버튼 */
.f3i-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; }

/* PDF 저장 버튼 (기존 엑셀 저장 버튼 대체, 붉은색) */

/* 완롤 타이틀 박스 및 1차/2차 집계 + / - 버튼 UI */
.f3i-wan-title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    width: 100%;
}

.f3i-mid-btn-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.f3i-add-mid-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #ff3b30;
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(255, 59, 48, 0.4);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.f3i-add-mid-btn.remove {
    background-color: #8e8e93;
    box-shadow: 0 1px 3px rgba(142, 142, 147, 0.4);
}

.f3i-add-mid-btn:hover {
    background-color: #d70015;
    transform: scale(1.15);
}

.f3i-add-mid-btn.remove:hover {
    background-color: #636366;
    transform: scale(1.15);
}

.f3i-wrapper.edit-mode .f3i-add-mid-btn {
    display: inline-flex !important;
}

.f3i-mid-row {
    display: none;
}

/* 추가 집계 행 전용 배경색 */
.f3i-mid-row th:not(.special-cell),
.f3i-mid-row td:not(.special-cell) {
    background-color: #f2f5f8 !important;
}

.f3i-mid-row.show {
    display: table-row !important;
}

/* 메인 테이블 레이아웃 구조 */
.f3i-layout { display: flex; align-items: flex-start; gap: 16px; width: 100%; }
.f3i-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; }
.f3i-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.f3i-th, .f3i-td { border: 1px solid #d2d2d7; height: 38px; vertical-align: middle; padding: 0; }
.f3i-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; }

/* ── 표 라운드 테두리 (2026-08-01) ──
   collapse 표에는 border-radius 가 적용되지 않으므로(브라우저 사양),
   바깥 2px 테두리는 이 래퍼가 라운드로 그리고, 표 가장자리 셀의 1px 선은
   음수 마진 + overflow:hidden 으로 잘라냅니다. 곡률은 카드와 동일한 12px. */
.f3i-round {
    border: 2px solid #8e8e93;
    border-radius: 12px;
    overflow: hidden;
}
.f3i-round > .f3i-table { margin: -1px; width: calc(100% + 2px); }
.f3i-round > .f3i-table.border-outer { border: none !important; }
.border-right-thick { border-right: 2px solid #8e8e93 !important; }
.border-top-thick th:not(.special-cell), .border-top-thick td:not(.special-cell) { border-top: 2px solid #8e8e93 !important; }
.border-bottom-thick th:not(.special-cell), .border-bottom-thick td:not(.special-cell) { border-bottom: 2px solid #8e8e93 !important; }
.special-cell, .special-label { border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; background-color: #f7f8fa !important; }

.f3i-mid-row .special-cell, .f3i-mid-row .special-label { border-top: hidden !important; border-bottom: hidden !important; }
.special-label { text-align: right; padding-right: 8px; font-size: 13px; font-weight: 600; color: #1d1d1f; }
.f3i-wrapper.edit-mode .f3i-td.editable.special-cell { background-color: #fff9e6 !important; }
.f3i-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; }
.f3i-input::-webkit-outer-spin-button, .f3i-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fw-bold { font-weight: bold; }

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

/* 핀아웃 관련 버튼 및 동적 레이아웃 스타일 추가 */
.f3i-pinout-btn-wrap {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 4px;
}

.f3i-wrapper.edit-mode .f3i-pinout-btn-wrap {
    display: flex !important;
}

.f3i-pin-btn {
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.f3i-pin-btn.occur {
    background-color: #ff9500;
    color: #ffffff;
}

.f3i-pin-btn.occur:hover {
    background-color: #e08200;
}

.f3i-pin-btn.use {
    background-color: #34c759;
    color: #ffffff;
}

.f3i-pin-btn.use:hover {
    background-color: #28a745;
}

/* 핀아웃 동적 섹션 레이아웃 */
.f3i-pinout-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px dashed #007AFF;
    animation: f3iSlideDown 0.25s ease-out;
}

@keyframes f3iSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.f3i-pinout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 4px;
}

.f3i-pinout-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.f3i-pinout-icon {
    font-size: 20px;
    color: #007AFF;
}

.f3i-pinout-title {
    font-size: 15px;
    font-weight: 700;
    color: #007AFF;
}

.f3i-pinout-close-btn {
    background: #e5e5ea;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 16px;
    line-height: 1;
    color: #8e8e93;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.f3i-pinout-close-btn:hover {
    background: #d1d1d6;
    color: #1d1d1f;
}

.f3i-input.pinout-memo {
    width: 100%;
    height: 100%;
    resize: none;
    padding: 6px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 12px;
    border: none;
    background: transparent;
    outline: none;
}

/* 우측 사이드 패널 */
.f3i-side-panel { 
    width: 180px; 
    flex-shrink: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}
.f3i-box { 
    background: #f7f8fa; 
    border-radius: 12px; 
    padding: 10px 12px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); 
    border: 1px solid #e5e5ea; 
}

/* 사이드 패널 3적층 모드: 핀아웃 잔량 레이아웃이 없을 때
   좌측 메인 테이블(핀아웃 상세 입력 영역 제외) 높이에 맞춰 3개 박스를 균등하게 늘려서 상하폭을 맞춤.
   실제 높이(px)는 JS(App.syncSidePanelHeight)가 인라인 style.height로 고정 지정하며,
   핀아웃 상세 입력 영역이 열리고 닫히는 것과는 무관하게 유지된다. */
.f3i-side-panel.f3i-side-fill {
    align-self: stretch;
}
.f3i-side-panel.f3i-side-fill .f3i-box {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 핀아웃 잔량이 추가되어 4적층이 되면 기존과 동일하게 자연스러운 높이로 복귀 */
.f3i-side-panel:not(.f3i-side-fill) {
    align-self: flex-start;
}
.f3i-side-panel:not(.f3i-side-fill) .f3i-box {
    flex: 0 0 auto;
}
.f3i-box-header { 
    font-size: 13px; 
    font-weight: 700; 
    color: #1d1d1f; 
    text-align: center; 
    margin-bottom: 6px; 
    padding-bottom: 4px; 
    border-bottom: 1px solid #f2f2f7; 
}
.mini-table { 
    min-width: 0 !important; 
    width: 100%; 
}
.mini-table th { 
    font-size: 12px; 
    height: 24px; 
}
.mini-table td { 
    height: 28px; 
}

/* 3적층(side-fill) 모드에서는 박스 높이가 늘어나는 만큼 내용물도 비율에 맞게 함께 키워서
   작은 표가 넓은 박스 안에 납작하게 떠 있는 것처럼 보이지 않도록 함 (과하지 않게 소폭 조정) */
.f3i-side-panel.f3i-side-fill .f3i-box-header {
    font-size: 13px;
    margin-bottom: 8px;
    padding-bottom: 6px;
}
.f3i-side-panel.f3i-side-fill .mini-table th {
    height: 26px;
    font-size: 12px;
}
.f3i-side-panel.f3i-side-fill .mini-table td {
    height: 34px;
}
.f3i-side-panel.f3i-side-fill .mini-table .f3i-input {
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 1050px) {
    .f3i-layout { flex-direction: column; }
    /* height auto !important: 표 옆에 나란히 설 때 JS(App.syncSidePanelHeight)가
       박아 두는 인라인 height 가, 패널이 표 아래로 내려온 뒤에도 남아
       박스들이 세로로 길게 늘어나는 증상 수정 (2026-07-31) */
    .f3i-side-panel { width: 100%; flex-direction: row; gap: 10px; height: auto !important; }
    .f3i-box { flex: 1; }
    .f3i-side-panel.f3i-side-fill { align-self: auto; }
    .f3i-side-panel.f3i-side-fill .f3i-box,
    .f3i-side-panel:not(.f3i-side-fill) .f3i-box { flex: 1; display: block; }
    /* flex: 0 0 100% — 이유는 common_header.css 의 같은 규칙 주석 참고.
       (이 파일이 common 보다 뒤에 읽혀 여기서도 같이 맞춰야 합니다) */
    .f3i-notice-ticker { margin: 8px 0; width: 100%; flex: 0 0 100%; order: 3; }
    .f3i-header { flex-wrap: wrap; gap: 12px; }
}

.flatpickr-calendar { margin-top: 5px; margin-left: -120px; }
/* 파란 통버튼 남빛 통일 — common_header.css 의 .save-btn 주석 참고 (2026-08-24) */
.f3i-swap-btn { background: #45739e; color: #fff; border: none; border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.f3i-swap-btn:hover { background: #35597e; }
.f3i-wrapper.edit-mode .f3i-swap-btn { display: inline-block !important; }
.f3i-swap-info-bar { background: #e8f4fd; color: #007AFF; border: 1px solid #d0e7fa; border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 600; text-align: center; margin-bottom: 12px; animation: f3iFadeIn 0.2s; }

@keyframes f3iFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.f3i-wrapper.edit-mode .f3i-td.editable.swap-candidate { border: 2px dashed #007AFF !important; background-color: #f0f7ff !important; cursor: pointer !important; }
.f3i-wrapper.edit-mode .f3i-td.editable.swap-candidate .f3i-input { cursor: pointer !important; }
.f3i-wrapper.edit-mode .f3i-td.editable.swap-selected { border: 2px solid #ff9500 !important; background-color: #ffeccf !important; animation: f3iWiggle 0.15s infinite alternate; }

@keyframes f3iWiggle {
    0% { transform: rotate(-0.5deg); }
    100% { transform: rotate(0.5deg); }
}

/* 1차 사용 후 잔량 위치 변경 시 2줄 표시 (윗줄: 기존값 취소선, 아랫줄: 변경값) */
.f3i-swap-cell-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 1px 0;
    box-sizing: border-box;
}
.f3i-swap-orig {
    font-size: 10px !important;
    line-height: 1.1;
    color: #8e8e93;
    text-decoration: line-through;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}
.f3i-swap-curr {
    font-size: 11px !important;
    font-weight: 700;
    color: #007AFF !important;
    line-height: 1.2;
    text-align: center;
    height: 18px !important;
    padding: 0 !important;
    width: 100%;
}

/* 공지사항 롤링 티커 · PDF 버튼 · 상세/편집 모달 스타일은
   css/common_header.css 로 이전되었습니다 (1공장과 공유). */

/* ════════════════════════════════════════════════════════════════
   일지 모바일 배치 (2026-07-31) — 640px 이하
   ────────────────────────────────────────────────────────────────
   factory3_ilji_mobile.js 가 요소를 옮기고, 여기서는 모양만 만듭니다.
   세로 적층 순서(2026-07-31 2차 조정): 본표(지종 6열, 특집 열 숨김)
   → 통계 카드(좌 [메모+사용량 A/D] · 우 [총계/실사용/증감])
   → 보조 3박스(급지 재고 · 급지 출고 · 완롤 잔량) 맨 아래.
   완롤 잔량이 유일하게 수정되는 박스라 맨 오른쪽(엄지 쪽)입니다.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .f3i-layout { gap: 10px; }

    /* ── 보조 3박스: 한 줄, 선 없는 컴팩트 카드 ──
       (박스 안에 또 표 선이 그어져 공간을 허비한다는 피드백) */
    .f3i-side-panel { flex-wrap: wrap; gap: 8px; }
    .f3i-box { padding: 8px 10px 6px; border-radius: 12px; }
    #f3iSidePinoutBox { flex-basis: 100%; }
    .f3i-box-header {
        font-size: 11px; color: #86868b;
        margin-bottom: 2px; padding-bottom: 0; border-bottom: none;
    }
    .mini-table, .mini-table th, .mini-table td { border: none !important; }
    /* 모바일 보조 박스는 "선 없는 카드" — 라운드 래퍼의 테두리도 함께 제거 */
    .f3i-box .f3i-round { border: none; border-radius: 0; overflow: visible; }
    .f3i-box .f3i-round > .f3i-table { margin: 0; width: 100%; }
    .mini-table thead { display: none; }          /* A/D 열 제목도 생략 */
    .mini-table td { height: 26px; }
    .mini-table .f3i-input { font-size: 14px; font-weight: 700; text-align: center; }

    /* ── 본표: 지종 6열이 화면에 딱 맞게 ──
       행 제목은 JS 가 축약("사용 전 잔량"→"전 잔량")하므로 제목 열을
       42px 까지 좁혀 그만큼 지종 열이 넓어집니다. */
    .f3i-main-table-box { padding: 10px 4px; border-radius: 12px; }
    /* 지종 열 폭을 명시적으로 배분합니다: 42px + 6등분 = 100%.
       'auto' 로 두면 아이폰 사파리가 숨긴 8·9열에도 폭을 나눠 줘서
       표 오른쪽이 열 두 개만큼 비어 보입니다 (2026-07-31 실기기 확인). */
    .f3i-table colgroup col { width: calc((100% - 42px) / 6) !important; }
    .f3i-table colgroup col:first-child { width: 42px !important; }
    .f3i-table colgroup col:nth-child(n+8) { width: 0 !important; }
    .f3i-th { font-size: 10px; }
    .f3i-th, .f3i-td { height: 30px; }
    .f3i-input { font-size: 12px; padding: 0 2px; }
    .f3i-th.row-title { padding: 2px 1px; line-height: 1.25; }

    /* 특집(우측) 칸은 전부 숨김 — 내용은 아래 카드로 옮겨집니다 */
    .f3i-table th[colspan="2"],
    .f3i-table td[colspan="2"],
    .f3i-table .special-cell { display: none; }

    /* 마지막 지종 열(R55)의 2px 굵은 선은 PC 에서 '지종 ↔ 특집' 경계선입니다.
       특집 칸을 숨기는 모바일에서는 이 선이 라운드 래퍼의 2px 테두리 바로
       안쪽에 붙어 우측이 두 줄로 보입니다. 일반 1px 로 되돌리면 래퍼의
       overflow:hidden + 음수 마진에 가려져 테두리 한 줄만 남습니다.
       (행 제목 열의 구분선은 그대로 둡니다.) */
    .f3i-table td.border-right-thick,
    .f3i-table th.border-right-thick:not(.row-title):not(.col-title) {
        border-right: 1px solid #d2d2d7 !important;
    }

    /* 핀아웃 표의 비고 열 숨김 (본표와 같은 6열 맞춤) */
    .f3i-pinout-section thead th:nth-child(8),
    .f3i-pinout-section td[rowspan="3"] { display: none; }

    /* ── 통계 카드 2장 (본표 아래) ──
       왼쪽 기둥 = [메모 한 줄] + [사용량 A/D], 오른쪽 = 총계/실사용/증감.
       왼쪽에 남던 한 줄을 메모가 채워 두 기둥의 높이가 맞습니다. */
    .f3im-statrow { display: flex; gap: 8px; align-items: stretch; }
    .f3im-leftcol { flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .f3im-leftcol .f3im-usage { flex: 1; }

    /* 메모 한 줄 — 내용이 있으면 내용, 없으면 자리 표시("메 모")만 */
    .f3im-memo { padding: 5px 10px; display: flex; align-items: center; }
    .f3im-memo .f3i-input {
        height: 24px;
        font-size: 12.5px;
        text-align: center;
    }
    .f3im-memo .f3i-input::placeholder { color: #b9b9c0; letter-spacing: 4px; }
    .f3im-card {
        background: #f7f8fa;
        border: 1px solid #e5e5ea;
        border-radius: 12px;
        padding: 8px 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }
    .f3im-stats { flex: 1.25; display: flex; flex-direction: column; justify-content: space-between; }
    .f3im-stat-line {
        display: flex; align-items: center; justify-content: space-between;
        min-height: 26px;
    }
    .f3im-stat-line .lbl { font-size: 11.5px; font-weight: 600; color: #86868b; }
    .f3im-stat-line .val { font-size: 14px; font-weight: 700; color: #1d1d1f; }
    /* 사용량 총계 입력 미러 — 수정모드에서 PC 처럼 직접 고칠 수 있습니다 */
    .f3im-total-cell { width: 45%; }
    .f3im-total-cell .f3i-input {
        height: 26px;
        font-size: 14px; font-weight: 700;
        text-align: right; padding-right: 2px;
    }

    .f3im-usage { flex: 1; }
    .f3im-usage .f3im-cols { display: flex; gap: 4px; }
    .f3im-usage .f3im-col { flex: 1; }
    .f3im-usage .f3im-col .sub { font-size: 10px; color: #86868b; font-weight: 600; text-align: center; display: block; }
    .f3im-usage .f3i-input { font-size: 14px; font-weight: 700; text-align: center; height: 26px; }

    /* 카드로 옮긴 실물 입력칸들 — td 클래스의 표 테두리·높이만 무효화.
       배경은 건드리지 않아야 edit-mode 의 노란 강조가 그대로 보입니다. */
    .f3im-card .f3i-td { border: none; height: auto; }

    /* ── 모바일에서 쓰지 않는 편집 기능 숨김 ──
       집계 추가(+/-)·잔량 위치 변경·핀아웃 발생/사용은 PC 에서만.
       (핀아웃 버튼은 숨긴 특집 칸에 그대로 있어 별도 규칙이 필요 없고,
       swap 버튼은 위쪽의 edit-mode !important 규칙을 같은 선택자로 덮습니다) */
    .f3i-mid-btn-group { display: none !important; }
    .f3i-wrapper.edit-mode .f3i-swap-btn { display: none !important; }
    .f3i-swap-info-bar { display: none !important; }
}