/* factory1_geupji_survey_style.css — 1공장 급지 "사전 조사" 전용 화면
   ────────────────────────────────────────────────────────────────
   아침에 폰으로 제일 먼저 여는 화면입니다. 로그인 화면의 [사전 조사]
   단추로 바로 들어옵니다.

   PC 로 열어도 동작합니다. 다만 표가 화면 폭만큼 늘어지지 않게 가운데
   한 단으로 세워 둡니다 — 현장에서 폰으로 보는 모습 그대로입니다.

   동작은 factory1_geupji_survey.js 에 있습니다.
   ──────────────────────────────────────────────────────────────── */

body {
    margin: 0;
    background: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
    color: #1d1d1f;
    -webkit-text-size-adjust: 100%;
}

/* 화면 하나가 통째로 이 틀입니다. 머리와 발은 제자리에 붙고 표만 스크롤합니다
   — 기계 앞에서 [저장] 을 찾으러 끝까지 내려갈 일이 없게. */
.f1sv-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;      /* 폰 주소창이 접혔다 펴져도 높이가 튀지 않게 */
    max-width: 560px;
    margin: 0 auto;
    background: #f5f5f7;
}

/* ── 머리 ── */
.f1sv-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
    background: #fff;
    border-bottom: 1px solid #e5e5ea;
}
.f1sv-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #1d1d1f;
}
/* 날짜 — 조사는 언제나 '오늘' 자로 남습니다. 급지 재고 화면이 어제를 보고
   있어도 여기는 오늘입니다. 그래서 날짜를 눈에 보이게 적어 둡니다. */
.f1sv-date {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #8e8e93;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 뒤로 — 폰에서 손이 먼저 가는 왼쪽 위입니다. 처음 화면(로그인 후 공장
   선택)으로 돌아갑니다. 저장하지 않은 값이 있으면 JS 가 한 번 되묻습니다. */
.f1sv-back {
    flex-shrink: 0;
    order: -1;
    width: 34px; height: 34px;
    border: none;
    border-radius: 10px;
    background: #f2f2f7;
    color: #1d1d1f;
    font-size: 19px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
}
.f1sv-back:active { transform: scale(0.96); }

/* ── 몸통 (표 세 개가 세로로) ── */
.f1sv-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.f1sv-machine-box {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    padding: 4px 10px 10px;
}
/* 지금 고른 호기 하나만 보입니다. 나머지 호기의 칸도 화면에 그대로 살아
   있으므로(감추기만 합니다) 호기를 오가며 적어도 값이 사라지지 않습니다. */
.f1sv-machine-box[hidden] { display: none; }

.f1sv-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.f1sv-th {
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 700;
    color: #6e6e73;
    text-align: center;
    border-bottom: 1px solid #e5e5ea;
}
/* 용지 이름 칸 — 나머지 두 칸은 숫자만 들어가므로 폭을 고정하고
   남는 폭을 전부 이름에 줍니다("전주 1404" 가 줄바꿈되지 않게). */
.f1sv-th.f1sv-row-title {
    width: auto;
    text-align: left;
    padding-left: 6px;
    color: #1d1d1f;
}
/* 호기 이름 줄은 표 위에 붙여 둡니다. 표 세 개가 세로로 이어져 한 화면에
   다 들어오지 않는데, 스크롤하다 머리글이 밀려 올라가면 지금 채우는 곳이
   몇 호기인지 알 수 없게 됩니다. */
.f1sv-table thead .f1sv-th {
    position: sticky;
    top: 0;
    background: #fff;
    font-size: 14px;
    color: #1d1d1f;
}
.f1sv-table tbody .f1sv-th.f1sv-row-title { font-weight: 600; }

.f1sv-td {
    width: 76px;
    padding: 5px 3px;
    border-bottom: 1px solid #f0f0f3;
}
.f1sv-table tbody tr:last-child .f1sv-td,
.f1sv-table tbody tr:last-child .f1sv-th { border-bottom: none; }

/* 입력칸 — 장갑 낀 손으로 눌러도 잡히게 높이를 넉넉히 둡니다.
   16px 아래로 내리면 iOS 가 칸을 누를 때 화면을 확대해 버립니다. */
.f1sv-cell {
    width: 100%;
    height: 42px;
    border: 1px solid #d1d1d6;
    border-radius: 9px;
    background: #fff;
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    -webkit-appearance: none;
    appearance: none;
}
.f1sv-cell:focus {
    outline: none;
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14);
}

/* ── 발 ── */
.f1sv-foot {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e5e5ea;
}
.f1sv-foot button {
    height: 46px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.f1sv-foot button:active { transform: scale(0.98); }
.f1sv-foot button:disabled { opacity: 0.45; }

/* 초기화는 지우는 단추입니다. 저장 옆에 같은 크기로 두면 잘못 누르기 쉬워
   좁게 두고 색도 뺐습니다(빨강으로 칠하면 오히려 눈이 그리로 갑니다). */
.f1sv-reset-btn {
    flex: 0 0 76px;
    background: #f2f2f7;
    color: #6e6e73;
}

/* 호기 고르기 — 세 단추 가운데입니다.

   <select> 를 그대로 씁니다. 폰에서는 브라우저가 제 손에 익은 선택 창을
   띄워 주므로, 직접 만든 목록보다 누르기 쉽고 잘못 누를 일도 적습니다.
   화살표만 직접 그려 넣습니다(기본 화살표는 브라우저마다 제각각입니다). */
.f1sv-machine-pick {
    flex: 0 0 104px;
    height: 46px;
    border: none;
    border-radius: 12px;
    background-color: #eceff4;
    color: #1d1d1f;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-align-last: center;   /* 닫힌 상태의 글자도 가운데로 (Chrome·Safari) */
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #6e6e73 50%),
        linear-gradient(135deg, #6e6e73 50%, transparent 50%);
    background-position: calc(100% - 15px) 21px, calc(100% - 10px) 21px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 8px;        /* 화살표 자리 */
}
.f1sv-machine-pick:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,122,255,0.14); }

.f1sv-save-btn {
    flex: 1;
    background: #007AFF;
    color: #fff;
}