/* factory1_stock_survey_style.css — 재고 조사(모바일) 화면들 공용 덧댐
   ────────────────────────────────────────────────────────────────
   재고 조사 다섯 화면(급지 조사 · FT 지고 · FT 급지 · 지고 5층 · 지고 6층)이
   함께 쓰는 추가분입니다.

   틀(머리·몸통·발 3단, 표, 입력칸, ▲▼ 버튼, 저장 버튼)은 전부 급지 조사의
   factory1_geupji_survey_style.css (f1sv-*) 에 있고, 다섯 화면이 그 파일을
   그대로 이어받습니다 — 한 벌만 고치면 다섯 화면이 같이 바뀌게 하기
   위해서입니다. 여기에는 그 파일에 없는 것만 둡니다:

     · 좌우 이동 바 (f1ss-rail) — 다섯 화면 공통, 양옆의 세로 바 버튼
     · 새 화면(FT·지고)에서만 쓰는 것들 — 제목 띠 ·
       읽기 전용 표시 칸 · 위에서부터 쌓는 배치(f1ss-top)
   ──────────────────────────────────────────────────────────────── */

/* ── 좌우 이동 — 화면 양옆에 위아래로 길게 선 세로 바 버튼 ─────────────
   책장 넘기듯 왼쪽 바가 이전 화면, 오른쪽 바가 다음 화면입니다.
   표는 두 바 사이(f1sv-body)에서 스크롤되고, 바는 머리와 발 사이
   높이를 통째로 차지해 엄지 어디로든 눌립니다.
   내용(어디로 가는지)은 factory1_survey_nav.js 가 채웁니다. */
.f1ss-mid {
    display: flex;
    flex: 1;
    min-height: 0;   /* 이게 없으면 몸통이 안 줄어들어 스크롤이 안 생깁니다 */
}
.f1ss-mid .f1sv-body {
    flex: 1;
    min-width: 0;
    /* 양옆 폭은 바가 이미 차지하므로 몸통의 옆 여백은 줄입니다 —
       좁은 폰에서 입력칸이 그만큼 넓어집니다 */
    padding-left: 6px;
    padding-right: 6px;
}
/* 바 틀 */
.f1ss-rail {
    flex: 0 0 40px;
    /* 안쪽 여백을 40px 안에 포함시킵니다. 이게 없으면 여백 8px 이 바깥에
       더해져 바 하나가 48px 을 먹고, 좁은 폰에서 숫자칸이 짜부라집니다
       (2026-08-16 아이폰 실화면에서 확인). */
    box-sizing: border-box;
    display: flex;
    padding: 12px 4px;
}
/* 갈 곳이 없는 바 — 첫 화면(급지 조사)의 왼쪽뿐입니다. 폭을 통째로
   접어 40px 를 표에 돌려줍니다. 예전에는 빈 띠로 폭만 지켜 다섯 화면의
   표 위치를 맞췄는데, 첫 화면의 숫자칸이 좁아 그 폭을 쓰기로 했습니다
   (주인 요청 2026-08-19). 표시를 다는 곳은 factory1_survey_nav.js. */
.f1ss-rail.is-empty {
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
}
.f1ss-rail-btn {
    flex: 1;
    min-height: 0;
    border: 1px solid #d1d1d6;
    border-radius: 12px;
    background: #fff;
    color: #3a3a3c;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    /* 세로쓰기 — upright 라야 '5층'의 숫자와 ‹ › 화살표까지 전부 바로
       섭니다(mixed 는 숫자·화살표가 옆으로 누워 '재고5'처럼 읽힙니다) */
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    /* 더블탭 확대 방지 — ▲▼ 버튼과 같은 이유 (이동 버튼이 화면을
       확대시키면 다음 화면이 확대된 채 뜹니다) */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.f1ss-rail-btn:active { background: #e0e3e8; }

/* ── 새 화면(FT 지고 · FT 급지 · 지고 5/6층)만의 것들 ────────────────── */

/* 새 화면들은 표가 짧아, 날짜를 가운데 띄우면 표와 멀어집니다.
   위에서부터 차례로 쌓습니다: 날짜 → 설명 → 표. */
.f1ss-top .f1sv-bigdate { margin: 6px 0 0; }

/* 제목 띠 — 머리에 [초기화] 대신 지금 화면 이름을 둡니다.
   좌우로 오가는 화면들이라 지금 어디인지가 항상 보여야 합니다. */
.f1ss-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #1d1d1f;
}

/* 읽기 전용 표시 칸 — FT 급지의 '사용량'처럼 계산해서 보여만 주는 자리.
   입력칸과 같은 높이지만 테두리 없이 살짝 가라앉혀, 만질 수 없다는 것이
   한눈에 보이게 합니다. */
.f1ss-view {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 54px;
    border-radius: 10px;
    background: #f2f2f7;
    font-size: 18px;
    font-weight: 700;
    color: #6e6e73;
}

/* ▲▼ 없이 혼자 서는 입력칸 (FT 급지 — kg 값이라 한 칸씩 올릴 일이 없습니다).
   f1sv-cell 은 ▲▼ 옆의 flex 자식일 때만 폭을 받으므로, 혼자 설 때는
   칸 폭을 그대로 채우게 합니다. */
.f1ss-solo { width: 100%; }

/* 전일 재고 불러오기 — 지금은 FT 지고 화면만 씁니다(표가 세 줄뿐이라 그
   아래가 늘 빕니다). [저장]과 헷갈리면 안 되는 버튼이라 파랑을 쓰지 않고,
   좌우 이동 바(.f1ss-rail-btn)와 같은 흰 바탕 · 회색 테두리로 둡니다 —
   "옆에서 거드는 단추"라는 것이 색으로 먼저 읽히게. */
.f1ss-loadprev-btn {
    /* 표 아래 남는 자리를 통째로 차지합니다 (주인 요청 2026-08-20).
       장갑 낀 손으로 아무 데나 눌러도 잡히라고 크게 둡니다 — 표가 세 줄뿐이라
       그 아래가 화면 절반쯤 비는데, 48px 짜리 한 줄만 두면 그 아래는 눌러도
       아무 일도 안 나는 죽은 자리가 됩니다.
       flex-basis 를 0 으로 두어 '남는 만큼'만 가져갑니다 — auto 로 두면 제
       높이까지 더 얹어 표를 밀어 올립니다. 자리가 모자란 폰에서는 48px 까지
       줄고, 그보다 좁으면 몸통이 스크롤됩니다. */
    flex: 1 1 0;
    min-height: 48px;
    /* 위아래·좌우로 손가락 하나 몫씩 띄웁니다 — 다른 누름 자리와 겹치면 안 됩니다.
         위   몸통의 gap 12px (표와 사이)
         아래 12px + 발의 안쪽 여백 10px = [저장]까지 22px
         좌우 6px + 몸통 여백 6px + 이동 바 안쪽 여백 4px = 바까지 16px */
    margin: 0 6px 12px;
    border: 1px solid #d1d1d6;
    border-radius: 13px;
    background: #fff;
    color: #3a3a3c;
    font-family: inherit;
    /* 버튼이 커진 만큼 글자도 키웁니다 — 제목 띠(.f1ss-title)와 같은 18px */
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    /* 더블탭 확대 방지 — ▲▼ · 이동 바와 같은 이유 */
    touch-action: manipulation;
}
.f1ss-loadprev-btn:active { background: #e0e3e8; }
.f1ss-loadprev-btn:disabled { opacity: 0.45; }

/* ══════════════════════════════════════════════════════════════════
   롤 무게 계산 팝업 (FT 급지 조사 화면)
   ─────────────────────────────────────────────────────────────────
   줄 생김새는 FT 일지의 미니 계산기(.f1rc-ft-* / factory1_ft_style.css)와
   같습니다 — [규격 ▾] [두께 cm] [무게] [×]. 담는 그릇만 다릅니다: PC 는
   표 위에 떠서 끌어 옮기는 작은 창이지만, 폰에는 옮길 자리가 없어 화면
   한가운데 뜨는 팝업으로 둡니다. 손가락으로 누르는 화면이라 칸 높이와
   글자는 PC 쪽(32px · 13px)보다 한 단계씩 큽니다.
   동작은 js/factory1_survey_rollcalc.js.
   ══════════════════════════════════════════════════════════════════ */

/* 발의 [무게 계산] — [공장 이동]과 [저장] 사이입니다.
   저장이 아니므로 파랑을 쓰지 않습니다. 옆의 [공장 이동] 선택칸과 같은
   회색 바탕이라 "누르면 뭔가 열리는 자리"로 나란히 읽힙니다. */
.f1sv-calc-btn {
    flex: 1 1 0;
    min-width: 0;
    background: #eceff4;
    color: #1d1d1f;
    /* 발의 다른 버튼과 같은 높이·모서리는 .f1sv-foot button 이 정합니다 */
    touch-action: manipulation;
}
.f1sv-calc-btn:active { background: #dfe3ea; }

/* 덮개 — 뒤의 표를 가려 계산에만 집중하게 합니다. 여기를 누르면 닫힙니다. */
.f1ss-calc-back {
    position: fixed;
    inset: 0;
    z-index: 1600;            /* 폰 하단 독(1500)보다 위, 공지 모달(2000)보다 아래 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.35);
}
/* hidden 을 쓰려면 display 를 눌러 줘야 합니다 — 위의 display:flex 가
   기본값(display:none)을 이깁니다 */
.f1ss-calc-back[hidden] { display: none; }

.f1ss-calc {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    /* 줄을 여덟까지 늘리면 길어집니다. 창보다 길어지면 줄 목록만 안에서
       굴러가고 [롤 추가]·[초기화]는 늘 보이게 (아래 .f1ss-calc-rows) */
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: #f7f8fa;
    border: 1px solid #d1d1d6;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

/* 닫기(✕)를 흐름 밖에 두고 제목만 가운데 세웁니다 — 흐름 안에 두면
   제목이 ✕ 만큼 왼쪽으로 밀려 팝업 정중앙에 서지 못합니다.
   (FT 일지 '지고 재고' 제목줄에서 같은 이유로 한 번 겪었습니다) */
.f1ss-calc-head {
    position: relative;
    flex: none;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.f1ss-calc-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #1d1d1f;
    text-align: center;
}
.f1ss-calc-close {
    position: absolute;
    top: 0;
    right: -4px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #8e8e93;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.f1ss-calc-close:active { background: #e5e5ea; color: #1d1d1f; }

/* ── 줄 ──
   [빈 22] [규격 72] [두께 남는 폭] [무게 72] [× 22]
   열 이름(.f1ss-calc-cap)도 같은 격자를 써서 줄이 늘거나 줄어도 머리글과
   어긋나지 않습니다.

   ★ 양 끝 22px 과 규격·무게 72px 이 좌우 대칭인 것이 핵심입니다
     (주인 요청 2026-08-20 — "약간 좌측으로 쏠려 보인다").
       · 오른쪽 22px 은 늘린 줄의 ✕ 자리입니다. 기본 네 줄에는 ✕ 가 없어
         그 30px 이 통째로 비는데, 왼쪽에 짝이 없으면 세 열이 그만큼
         왼쪽으로 쏠려 보입니다. 그래서 왼쪽에도 같은 22px 을 비웁니다.
       · 규격과 무게의 폭이 같아야 세 열의 **중심 간격**이 같아집니다
         (간격 = (양옆 칸 폭의 평균) + gap 이므로, 두 칸이 다르면 한쪽이
         넓어 보입니다). 실측: 72px 일 때 98px / 98px 로 같고, 세 열
         묶음의 한가운데가 팝업 한가운데와 정확히 맞습니다.
     폭을 고칠 때는 규격과 무게를 **같은 값으로** 함께 고치십시오.

   두께를 minmax(0, 1fr) 로 두는 이유: 그냥 1fr 이면 최소 폭이 <input>
   기본 폭(약 20자)이라 줄이 팝업 밖으로 삐져나갑니다. */
.f1ss-calc-cap,
.f1ss-calc-row {
    display: grid;
    grid-template-columns: 22px 72px minmax(0, 1fr) 72px 22px;
    gap: 8px;
    align-items: center;
}
/* 첫 칸(왼쪽 빈자리)은 비워 두므로 자리를 못 박아 줍니다 — 안 그러면
   규격이 그 칸으로 들어가 대칭이 깨집니다. */
.f1ss-calc-cap span:nth-child(1) { grid-column: 2; }
.f1ss-calc-cap span:nth-child(2) { grid-column: 3; }
.f1ss-calc-cap span:nth-child(3) { grid-column: 4; }
.f1ss-calc-row > .f1ss-calc-grade { grid-column: 2; }
.f1ss-calc-row > .f1ss-calc-inrow { grid-column: 3; }
.f1ss-calc-row > .f1ss-calc-kg    { grid-column: 4; }
.f1ss-calc-row > .f1ss-calc-del   { grid-column: 5; }
/* 열 이름은 제 칸의 한가운데 섭니다 (주인 요청 2026-08-20). */
.f1ss-calc-cap {
    flex: none;
    padding: 10px 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #a1a1a8;
    letter-spacing: -0.2px;
    text-align: center;
}

.f1ss-calc-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* min-height:0 이 없으면 flex 자식이 내용보다 작아지지 못해, 목록에
       스크롤이 생기는 대신 팝업이 그냥 길어집니다 */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.f1ss-calc-grade {
    width: 100%;
    height: 42px;
    /* 좌우 여백을 같게 두어야 글자가 칸 한가운데 섭니다 */
    padding: 0 4px;
    /* 닫힌 상태의 글자도 가운데로 (Chrome·Safari) — 발의 [공장 이동]과 같은 방식 */
    text-align: center;
    text-align-last: center;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    color: #1d1d1f;
    cursor: pointer;
    outline: none;
}
.f1ss-calc-grade:focus { border-color: #007AFF; }

/* 두께 입력 — cm 를 칸에 붙여 두면 따로 설명이 필요 없습니다 */
.f1ss-calc-inrow {
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 42px;
    padding: 0 11px;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    background: #fff;
}
.f1ss-calc-inrow:focus-within {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14);
}
.f1ss-calc-inrow input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font-family: inherit;
    /* 16px 미만이면 아이폰이 칸을 누를 때 화면을 확대합니다 */
    font-size: 17px;
    font-weight: 700;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
}
.f1ss-calc-inrow input::placeholder { color: #c7c7cc; font-weight: 600; }
.f1ss-calc-unit { font-size: 12px; font-weight: 700; color: #8e8e93; }

/* 무게 — 각 줄의 결과. 이 팝업에서 가장 눈이 가야 하는 숫자입니다. */
.f1ss-calc-kg {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}
/* 단위는 숫자보다 작고 옅게 — 먼저 읽혀야 하는 것은 숫자입니다.
   값이 없는 줄('—'·'?')에서는 JS 가 이 칸을 감춥니다. */
.f1ss-calc-kgunit {
    margin-left: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #8e8e93;
}
.f1ss-calc-kg.is-empty { color: #c7c7cc; font-weight: 700; }
.f1ss-calc-kg.is-bad { color: #ff3b30; }
/* 완롤 두께를 넘은 줄 — 막지는 않고 색으로만 알립니다 */
.f1ss-calc-kg.is-over { color: #c05a00; }

/* 지우기 ✕ — 늘린 줄에만 나타납니다(.is-extra). 기본 네 줄에서는 자리만
   비워 두므로 열이 흔들리지 않습니다. */
.f1ss-calc-del {
    display: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #c7c7cc;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
.f1ss-calc-row.is-extra .f1ss-calc-del { display: inline-flex; }
.f1ss-calc-del:active { background: #ffe5e5; color: #ff3b30; }

/* 줄 늘리기 — 값을 만드는 버튼이 아니라 자리를 만드는 버튼이라
   테두리만 있는 조용한 모양입니다. */
.f1ss-calc-add {
    flex: none;
    height: 40px;
    margin-top: 10px;
    border: 1px dashed #c7c7cc;
    border-radius: 11px;
    background: transparent;
    color: #636366;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.f1ss-calc-add:active:not(:disabled) { background: #eceff4; }
.f1ss-calc-add:disabled { opacity: 0.45; }
/* 글자 앞의 + — 이 화면은 아이콘 글꼴을 읽지 않으므로 글자로 그립니다 */
.f1ss-calc-plus {
    margin-right: 5px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    vertical-align: -1px;
}

/* 급지 재고에 적용 — 이 팝업의 주된 동작이라 혼자 파랑입니다.
   PC 계산기의 [적용]과 같은 색입니다. 넣기만 하고 저장은 발의 [저장]입니다. */
.f1ss-calc-apply {
    flex: none;
    height: 44px;
    margin-top: 8px;
    border: none;
    border-radius: 12px;
    /* 남빛 통일 — common_header.css 의 .save-btn 주석 참고 (2026-08-24) */
    background: #45739e;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.f1ss-calc-apply:active { background: #35597e; }

.f1ss-calc-hint {
    flex: none;
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
    letter-spacing: -0.2px;
}
.f1ss-calc-hint:empty { display: none; }
.f1ss-calc-hint.warn { color: #c05a00; font-weight: 700; }

.f1ss-calc-reset {
    flex: none;
    height: 44px;
    margin-top: 8px;
    border: none;
    border-radius: 12px;
    background: #eceff4;
    color: #3a3a3c;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.f1ss-calc-reset:active { background: #dfe3ea; }

/* ── 예상 재고 (지고 5·6층 조사 화면) ──────────────────────────────
   아직 안 적은 칸에 "이 정도 남았을 것"을 옅게 띄웁니다. 값이 아니라
   입력칸의 자리표시자(placeholder)라, 쳐 넣기 전까지는 저장되지 않습니다 —
   PC 원장이 수정 모드에서 쓰는 방식 그대로입니다.
   색은 원장의 예상 숫자와 같은 계열(주황)입니다. 회색으로 두면 '두께'
   같은 평범한 안내 글자와 구별되지 않아, 숫자인 줄 모르고 지나칩니다. */
.f1sv-cell.f1ss-haspred::placeholder {
    color: #c07a30;
    opacity: 1;              /* 파이어폭스는 기본이 반투명입니다 */
    font-weight: 700;
}

/* 표 아래 한 줄 — 옅은 숫자가 무엇인지. 하나라도 떴을 때만 survey.js 가 켭니다. */
.f1ss-prednote {
    flex-shrink: 0;
    padding: 0 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: #8e8e93;
    letter-spacing: -0.2px;
}
.f1ss-prednote b { color: #c07a30; font-weight: 800; }