/* factory1_paper_usage_forecast_style.css — 용지 예상 사용량 스타일
   ────────────────────────────────────────────────────────────────
   롤 무게 계산(factory1_rollcac_style.css)과 같은 카드/색상/타이포
   규격입니다. 좌우 두 칸이라는 뼈대도 같습니다 —
   좌측이 고르는 곳(공장·매체·파트), 우측이 결과.

   결과를 우측에 붙박이로 세운 것은, 면수를 이리저리 바꿔 보는 화면이라
   숫자가 눈에서 벗어나면 안 되기 때문입니다.
   ──────────────────────────────────────────────────────────────── */

:root {
    /* [제목 좌측 여백 옵션] 다른 1공장 페이지와 같은 값 */
    --panel-title-left-offset: 12px;

    /* [우측 결과 칸 폭 옵션] 규격 표에 '지고 (롤)' 열이 붙으면서 넓혔습니다 */
    --puf-side-width: 380px;
}

.f1puf-wrapper { gap: 14px; }

/* 층 외곽 프레임 — 다른 1공장 페이지의 floor-container 와 동일 규격 */
.f1puf-floor-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    border: 1px solid #dcdce4;
}

/* 패널 헤더 그리드 — 제목은 좌측 상단 고정 */
.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);
}
.panel-header-grid .header-center { justify-content: center; }
/* flex-wrap — 계획 상태줄이 이 칸에 서면서(2026-08-12), 경고가 붙어
   길어진 날은 버튼 위로 줄바꿈해 내려가게 둡니다. 잘리는 것보다 낫습니다. */
.panel-header-grid .header-right { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.panel-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000 !important;
    letter-spacing: -0.3px;
    margin: 0;
}

/* 초기화 버튼 — 롤 무게 계산 화면과 같은 부품 */
.f1puf-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e5e5ea;
    background: #f5f5f7;
    color: #48484a;
    padding: 5px 12px 5px 9px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.f1puf-reset-btn:hover {
    background: #e8f4fd;
    border-color: #cfe2f8;
    color: #007aff;
}
.f1puf-reset-btn .material-symbols-outlined { font-size: 17px; line-height: 1; }

/* ========================================
   좌우 두 칸
   ======================================== */
.f1puf-split {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.f1puf-split-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 레이아웃 안의 레이아웃 (카드) — 다른 페이지의 inner-layout-card 와 동일 */
.inner-layout-card {
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* ── 조건 (공장 · 매체) ──────────────────────────────────────────
   전에는 공장 줄과 매체 줄이 위아래로 나뉘고 각각 이름표를 이고 있어
   네 줄을 썼습니다. 고르는 것이 둘뿐이라 한 줄에 같이 세웁니다.
   ──────────────────────────────────────────────────────────────── */
.f1puf-conditions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
}

.f1puf-label {
    font-size: 11.5px;
    font-weight: 800;
    color: #636366;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
/* [매체 추가]는 오른쪽 끝으로 — 공장 버튼과 성격이 다릅니다. 공장은
   고르는 것이고 이쪽은 화면을 늘리는 것이라, 붙여 두면 잘못 눌립니다. */
#f1pufAddMedia { margin-left: auto; }

/* [계획 불러오기] — 매체 추가 왼쪽. 화면을 늘리는 버튼이 아니라 값을
   갈아 끼우는 버튼이라 실선 테두리 그대로 두고 아이콘만 답니다. */
.f1puf-plan-btn {
    margin-left: auto;              /* 이 버튼부터 오른쪽 묶음 시작 */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.f1puf-plan-btn .material-symbols-outlined { font-size: 14px; }
.f1puf-plan-btn + #f1pufAddMedia { margin-left: 0; }

/* ── 계획 상태줄 ────────────────────────────────────────────────
   지금 카드의 값이 어디서 왔는지("계획 적용 기준일 : … · 매체 N건")를
   항상 밝히는 줄. 제목줄의 [계획 대조] 왼쪽에 섭니다(2026-08-12 이동).
   카드가 아니라 안내문이라 배경을 깔지 않습니다.
   경고(계획 없음 · 조회 실패 · 매핑 누락)는 색으로만 한 단계 올립니다. */
.f1puf-plan-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-right: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #636366;
    letter-spacing: -0.2px;
    text-align: right;
}
.f1puf-plan-bar:empty { display: none; }
.f1puf-plan-bar.is-warn { color: #b25000; }
.f1puf-plan-dirty { color: #b25000; }
.f1puf-plan-warn {
    flex: 1 1 100%;
    color: #b25000;
    font-weight: 600;
}

/* 고른 매체의 용지. 고르는 값이 아니라 고른 결과를 설명하는 값이라
   한 단계 여리게 두고, 매체를 고르기 전에는 자리도 잡지 않습니다. */
.f1puf-paper {
    font-size: 11px;
    font-weight: 700;
    color: #a1a1a6;
    letter-spacing: -0.2px;
    white-space: nowrap;
    margin-left: 2px;
}
.f1puf-paper:empty { display: none; }

/* ── 세그먼트 버튼 ─────────────────────────────────────────────
   고른 칸만 검게 채웁니다 (F.T 일지의 단위 스위처와 같은 문법).
   호버는 테두리만 진해집니다 — 자리가 움직이는 변형은 쓰지 않습니다. */
.f1puf-seg { display: flex; flex-wrap: wrap; gap: 6px; }

.f1puf-seg-btn {
    padding: 8px 15px;
    border: 1px solid #d1d1d6;
    border-radius: 9px;
    background: #ffffff;
    color: #3a3a3c;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    cursor: pointer;
    outline: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.f1puf-seg-btn:hover { border-color: #b9b9c0; }
.f1puf-seg-btn:focus-visible {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
.f1puf-seg-btn.is-on {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

/* ── 드롭다운 (매체 · 면수) ────────────────────────────────────
   고를 것이 셋 이상이면 펼쳐 두지 않고 접습니다. 매체는 다섯이라 그것만
   으로 한 줄을 먹었고, F.T 추가섹션 면수는 아홉이라 버튼이 두 줄로
   접혔습니다. 고르고 나면 고른 것 하나만 남는 편이 화면이 조용합니다.

   네이티브 <select> 가 아닌 이유는 롤 무게 계산 화면과 같습니다 —
   body 의 zoom:115% 때문에 크롬이 팝업 위치를 어긋나게 잡습니다.
   ──────────────────────────────────────────────────────────────── */
.f1puf-dd { position: relative; }

.f1puf-dd-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 0 26px 0 12px;
    border: 1px solid #d1d1d6;
    border-radius: 9px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.f1puf-dd-btn:hover { border-color: #b9b9c0; }
.f1puf-dd-btn:focus-visible,
.f1puf-dd.is-open .f1puf-dd-btn {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.f1puf-dd-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 버튼은 글자에 맞춰 좁혀 두었으므로, 목록은 버튼 폭을 밑줄로만 삼고
   제 글자만큼 벌어지게 둡니다 ('Financial Times' 가 잘리지 않게). */
.f1puf-dd-panel {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 260px;
    z-index: 90;
    max-height: 268px;
    overflow-y: auto;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    scrollbar-width: thin;
    scrollbar-color: #d1d1d6 transparent;
}
.f1puf-dd.is-open .f1puf-dd-panel { display: block; }
.f1puf-dd-panel::-webkit-scrollbar { width: 6px; }
.f1puf-dd-panel::-webkit-scrollbar-track { background: transparent; }
.f1puf-dd-panel::-webkit-scrollbar-thumb { background-color: #d1d1d6; border-radius: 6px; }

.f1puf-dd-option {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #3a3a3c;
    letter-spacing: -0.2px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition: background 0.15s, color 0.15s;
}
.f1puf-dd-option:hover,
.f1puf-dd-option:focus-visible { background: #f2f2f7; color: #1d1d1f; }
/* 고른 항목 표시는 common_dropdown.js 가 붙입니다. 이름(is-selected)은
   그쪽이 정하므로 여기서 바꾸면 안 됩니다 — 롤 무게 계산도 같은 이름입니다. */
.f1puf-dd-option.is-selected { background: #e8f4fd; color: #007aff; }

/* [칸 폭 옵션] 매체는 'Financial Times', 면수는 '36면' 이 제일 긴 글자.
   둘 다 flex 줄 안에 있어 basis 로 못박아 둡니다 — 늘어나거나 줄어들면
   여러 건이 쌓였을 때 드롭다운들이 세로로 어긋납니다. */
.f1puf-dd-media { flex: 0 0 152px; }
/* 88 → 80 (2026-08-12): 카드 2열이 서는 폭(위 #f1pufMedias 계산)에 맞춤.
   '24면' 두 글자 + 화살표가 넉넉히 들어갑니다. */
.f1puf-dd-pages { flex: 0 0 80px; }

/* 매체 이름은 카드의 제목 노릇을 하므로 한 단계 크고 진하게 */
.f1puf-dd-media .f1puf-dd-text { font-size: 14px; font-weight: 800; }

/* ── 매체 카드 ─────────────────────────────────────────────────
   매체 하나 = 카드 하나. 카드 머리에 매체와 용지, 그 아래 그 매체의
   파트(본지 · 별쇄/특집)가 들어갑니다.

   예전에는 매체가 화면에 하나뿐이라 파트가 곧 최상위 카드였습니다. 매체를
   여러 개 쌓게 되면서 파트만 늘어놓으면 어느 파트가 어느 매체 것인지
   알 수 없어, 매체가 제 카드를 갖고 파트를 품게 했습니다.
   ──────────────────────────────────────────────────────────────── */
/* 카드를 2열 그리드로 폅니다 (2026-08-12). 계획 자동 채우기로 매체 4~5장이
   한 번에 깔리면서, 한 열 쌓기는 세로로 길고 카드 속은 비어 보였습니다.

   368px 계산 근거 — 공통 래퍼(max-width 1200px) 안에서 좌측 폭은 화면과
   무관하게 약 768px 고정입니다(우측 결과 380px + 여백을 뺀 값). 두 열이
   서려면 트랙이 (768+12)÷2−12 = 378px 이하여야 하고, 카드가 실제로 그
   폭에 들어가도록 면수(80px)·부수(128px) 칸을 함께 줄였습니다 — 제일
   넓은 줄(이름 52 + 면수 80 + 부수 128 + 삭제 + 여백 24 + 카드 패딩 36)
   이 367px 입니다. 폭이 모자라면 자동으로 한 열로 돌아갑니다.
   같은 줄의 두 카드는 키를 맞춥니다(stretch 기본값) — 파트 수가 달라
   카드 키가 다르면 테두리가 어긋나 보인다는 지적이 있었습니다(2026-08-12).
   짧은 카드는 아래가 비지만, 줄이 맞는 쪽이 눈에 훨씬 편합니다. */
#f1pufMedias {
    display: grid;
    /* min(368px, 100%) — 모바일처럼 368px 이 안 나오는 폭에서는 최소폭이
       컨테이너 폭으로 접혀야 합니다. 368px 로 못박으면 그 밑 화면에서
       그리드가 못 줄어들어 페이지가 옆으로 밀립니다(실측으로 확인). */
    grid-template-columns: repeat(auto-fill, minmax(min(368px, 100%), 1fr));
    gap: 12px;
}

.f1puf-media-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid #f2f2f7;
}
/* 삭제는 오른쪽 끝으로 — 매체를 지우는 일은 드물고, 고르는 것들과 같은
   자리에 있으면 잘못 눌립니다 */
.f1puf-media-del { margin-left: auto; }

/* ── 파트 (본지 · 별쇄/특집) ───────────────────────────────────
   매체 카드 안의 한 구획입니다. 별쇄·특집은 한 날에 여러 건이 있어
   구획 안에서 줄이 늘어납니다. */
.f1puf-part {
    padding: 10px 18px 12px;
}
.f1puf-part + .f1puf-part { border-top: 1px solid #f7f7fa; }

.f1puf-part-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.f1puf-part-title {
    font-size: 12px;
    font-weight: 800;
    color: #636366;
    letter-spacing: -0.2px;
}
.f1puf-part-empty {
    font-size: 12px;
    font-weight: 600;
    color: #a1a1a6;
    letter-spacing: -0.2px;
}

.f1puf-mini-btn {
    border: 1px solid #e5e5ea;
    background: #f5f5f7;
    color: #636366;
    padding: 4px 11px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.f1puf-mini-btn:hover { background: #e8f4fd; border-color: #cfe2f8; color: #007aff; }
.f1puf-mini-btn.is-add { border-style: dashed; }
/* 줄 안의 [삭제] 는 글자만큼만 — 줄어들면 '삭제'가 두 줄로 접힙니다 */
.f1puf-entry .f1puf-mini-btn { flex: none; white-space: nowrap; }

/* ── 한 건이 한 줄 ─────────────────────────────────────────────
   [이름] [면수 ▾] [부수 부] [삭제]. 전에는 이 셋이 위아래 세 줄이었고,
   면수가 버튼으로 펼쳐져 있어 F.T 추가섹션은 한 건에 150px 씩 썼습니다.

   줄 사이에 점선을 긋지 않습니다 — 한 줄로 줄고 나면 선이 없어도 건이
   구분되고, 있으면 오히려 표처럼 보여 무거워집니다.
   ──────────────────────────────────────────────────────────────── */
.f1puf-entry {
    display: flex;
    align-items: center;
    gap: 8px;
}
.f1puf-entry + .f1puf-entry { margin-top: 8px; }

/* 이름 칸은 폭을 고정합니다 — '섹션 1' 과 '섹션 10' 이 섞여도 그 뒤의
   드롭다운들이 세로로 어긋나지 않아야 합니다. */
.f1puf-entry-name {
    flex: 0 0 52px;
    font-size: 11.5px;
    font-weight: 800;
    color: #8e8e93;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* 부수 입력 — 단위(부)를 칸 안 오른쪽에 붙박이로 둡니다.
   136 → 128 (2026-08-12): 카드 2열 폭 맞춤. 제일 긴 값(476,500 = 7자리)도
   tabular 숫자 15px 로 넉넉합니다. */
.f1puf-input-wrap { position: relative; flex: 0 0 128px; }
.f1puf-input {
    width: 100%;
    height: 36px;
    padding: 0 30px 0 11px;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.f1puf-input:hover { border-color: #b9b9c0; }
.f1puf-input:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
.f1puf-input-unit {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 800;
    color: #8e8e93;
    pointer-events: none;
}

/* ========================================
   우측 — 결과
   ======================================== */
.f1puf-split-side {
    flex: 0 0 var(--puf-side-width);
    position: sticky;
    top: 12px;

    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    padding: 14px 16px 16px;
}
/* ('예상 사용량' 제목 스타일(.f1puf-side-title)이 여기 있었습니다.
    2026-08-12 제목 삭제로 쓰는 곳이 없어져 함께 걷었습니다) */

/* ── 계산 근거 카드 (결과 밑 전폭) ──────────────────────────────
   우측 결과 칸에는 숫자만 남기고, 글로 된 것들(조합 · 표본 · 참고)은
   여기 한 카드에 모았습니다 (2026-08-12). 매번 읽을 글이 아니라 평소에는
   접어 두고(collapsed), 제목 옆 화살표로 폅니다 — 입출고 상세의
   '확인 필요'와 같은 문법입니다. */
.f1puf-detail {
    margin-top: 12px;
    padding: 11px 18px 12px;
}
.f1puf-detail-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.f1puf-detail-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #636366;
    letter-spacing: -0.2px;
}
.f1puf-detail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: 1px solid #e5e5ea;
    border-radius: 7px;
    background: #f5f5f7;
    color: #636366;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.f1puf-detail-toggle:hover { background: #e8f4fd; border-color: #cfe2f8; color: #007aff; }
.f1puf-detail-toggle .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
}
/* 펼친 상태 — 화살표가 위를 봅니다 (mk-expand-btn 과 같은 규칙) */
.f1puf-detail:not(.collapsed) .f1puf-detail-toggle .material-symbols-outlined {
    transform: rotate(180deg);
}
.f1puf-detail.collapsed .f1puf-detail-body { display: none; }

/* 고른 조합 한 줄 — 결과 숫자가 무엇의 합인지 */
.f1puf-mix {
    font-size: 11.5px;
    font-weight: 700;
    color: #8e8e93;
    letter-spacing: -0.2px;
    line-height: 1.55;
    padding: 10px 2px 0;
}

/* 정미 · 예상 실사용 두 칸 — 지고 출고의 근거 숫자 */
.f1puf-tiles { display: flex; gap: 8px; margin-top: 8px; }
.f1puf-tile {
    flex: 1 1 0;
    min-width: 0;
    background: #fafafc;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    padding: 11px 12px 12px;
    text-align: center;    /* 지고 출고 칸과 같은 이유 — 가운데 정렬 */
}
.f1puf-tile-key {
    font-size: 10.5px;
    font-weight: 800;
    color: #8e8e93;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.f1puf-tile-val {
    margin-top: 3px;
    font-size: 22px;
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.1;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.f1puf-tile-val small {
    margin-left: 3px;
    font-size: 12px;
    font-weight: 800;
    color: #8e8e93;
    letter-spacing: -0.2px;
}
.f1puf-tile.is-main { background: #f2f7ff; border-color: #d9e7fb; }
.f1puf-tile.is-main .f1puf-tile-val { color: #0062cc; }
.f1puf-tile-sub {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: #8e8e93;
    letter-spacing: -0.2px;
}

/* ── 지고 출고 예상 ────────────────────────────────────────────
   '예상 실사용'에서 급지에 이미 걸려 있는 양을 뺀 값 — 오늘 창고에서
   실제로 내야 하는 양입니다.

   결과 칸의 맨 위, 제일 큰 숫자입니다 (2026-08-12 위로 올림). 이것이
   예상량의 곁가지가 아니라 이 화면에서 몸이 움직이는 유일한 숫자라서
   결론을 먼저 보이고, 정미·예상 실사용은 그 아래 근거 숫자로 둡니다.
   색도 위와 다르게 잡아 성격이 다름을 보입니다.
   ──────────────────────────────────────────────────────────────── */
.f1puf-issue {
    background: #f3f8f4;
    border: 1px solid #d8e8dd;
    border-radius: 10px;
    padding: 12px 13px 13px;
    /* 세 덩어리(지고·정미·예상)는 가운데 정렬 — 카드형 숫자 타일이라
       가운데가 안정적이고, 아래 규격 표의 가운데 정렬과도 맞습니다.
       (2026-08-12, 좌측 정렬이 어색하다는 지적) */
    text-align: center;
}
.f1puf-issue .f1puf-tile-val { color: #1f7a45; font-size: 27px; }

/* 급지 재고를 못 읽은 상태 — 숫자 자리를 비우고 이유를 적습니다.
   모르는 값을 0 으로 채워 보여 주면 그게 사실인 줄 알고 출고를 냅니다. */
.f1puf-issue.is-blank {
    background: #fafafc;
    border-color: #e5e5ea;
}
.f1puf-issue.is-blank .f1puf-tile-val { color: #c7c7cc; }

/* 규격별 표 — 롤 수가 이 화면의 결론입니다 */
.f1puf-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
}
/* 표 전체 가운데 정렬 (2026-08-12) — 규격·사용량·롤·지고 네 열 모두.
   전에는 숫자 우측·규격 좌측이었는데, 열마다 정렬이 갈려 '합계' 줄만
   따로 노는 것처럼 보였습니다. 한 규칙이면 어긋날 자리가 없습니다. */
.f1puf-th {
    font-size: 10.5px;
    font-weight: 800;
    color: #8e8e93;
    letter-spacing: -0.2px;
    text-align: center;
    padding: 0 8px 7px;
    border-bottom: 1px solid #e5e5ea;
    white-space: nowrap;
}
.f1puf-td {
    font-size: 13px;
    font-weight: 700;
    color: #3a3a3c;
    letter-spacing: -0.2px;
    text-align: center;
    padding: 9px 8px;
    border-bottom: 1px solid #f2f2f7;
}
.f1puf-spec {
    font-weight: 800;
    color: #1d1d1f;
}
.f1puf-rollkg {
    display: block;
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 700;
    color: #a1a1a6;
}
.f1puf-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.f1puf-roll { color: #1d1d1f; font-weight: 800; }
.f1puf-none { text-align: center; color: #c7c7cc; }

/* 지고 (롤) 열 — 위 지고 출고 칸과 같은 색을 씁니다. 표에서 눈으로
   따라갈 열이 어느 것인지가 색 하나로 정해집니다. */
.f1puf-th-issue,
.f1puf-issue-td { color: #1f7a45; }
.f1puf-issue-td { font-weight: 800; }
.f1puf-total .f1puf-issue-td { color: #1f7a45; }

.f1puf-total .f1puf-td {
    border-bottom: none;
    border-top: 1px solid #e5e5ea;
    font-weight: 800;
    color: #1d1d1f;
    padding-top: 10px;
}

/* 각주 — 표본과 기간, 그리고 매체별로 오해하기 쉬운 한 줄 */
.f1puf-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f2f2f7;
    font-size: 10.5px;
    font-weight: 700;
    color: #a1a1a6;
    letter-spacing: -0.2px;
    line-height: 1.55;
}
/* 매체별로 오해하기 쉬운 한 줄. 매체를 여러 개 쌓으면 여러 줄이 되므로
   줄바꿈을 살립니다(JS 가 \n 으로 이어 붙입니다). */
.f1puf-note {
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #8e8e93;
    letter-spacing: -0.2px;
    line-height: 1.55;
    white-space: pre-line;
}

/* 공통 유틸 (다른 1공장 페이지와 동일) */
.text-center { text-align: center; }
.mb-3 { margin-bottom: 14px; }

/* ── 반응형 ──────────────────────────────────────────────────── */
@media (max-width: 1010px) {
    .f1puf-split { flex-direction: column; }
    .f1puf-split-side {
        flex: 0 0 auto;
        width: 100%;
        position: static;
    }
}

/* 한 줄에 네 칸이 안 들어가는 구간 — 이름만 윗줄로 올리고, 고르는 칸
   셋은 그대로 한 줄에 둡니다. 부수 칸이 남는 폭을 먹습니다. */
@media (max-width: 640px) {
    .f1puf-floor-container { padding: 14px; border-radius: 14px; }
    .panel-title { font-size: 16px; }

    .f1puf-conditions { padding: 12px 14px; }
    .f1puf-media-head { padding: 12px 14px; }
    .f1puf-part { padding: 10px 14px 12px; }
    .f1puf-seg-btn { padding: 8px 13px; font-size: 13px; }

    .f1puf-entry { flex-wrap: wrap; }
    .f1puf-entry-name { flex: 1 1 100%; }
    .f1puf-dd-pages { width: 84px; }
    .f1puf-input-wrap { flex: 1 1 120px; }

    .f1puf-tile-val { font-size: 20px; }
}