/* factory1_ft_style.css — 1공장 FT 일지 "전용" 스타일 */

/* 너무 퍼져 보이지 않도록 좌우 최대 폭을 기존 1200px에서 890px로 축소 */
.f1ft-wrapper {
    max-width: 1200px;
    margin: 0 auto;

    /* 본문 글자색. body 에는 글자색이 지정돼 있지 않아 색을 따로 정하지
       않은 글자는 순검정(#000)으로 떨어집니다 — 이 페이지의 나머지 글자는
       모두 #1d1d1f 라 그런 글자만 혼자 진해 보였습니다. */
    color: #1d1d1f;
}

.f1ft-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* 1층: 본래의 표 크기에 맞게 채움 */
.f1ft-row-1 {
    width: 100%;
}

/* 2층: 대조 표 48% · 급지 재고 합계 20% · 지고 재고 28% (gap 2% × 2 = 4%) */
.f1ft-row-2 {
    display: grid;
    grid-template-columns: 48% 20% 28%;
    gap: 2%;
    width: 100%;
    align-items: start;
}

.f1ft-geupji-total-cell {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.f1ft-box {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #f7f8fa;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    border: 1px solid #e5e5ea;
}

.f1ft-box-header {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f2f2f7;
}

/* 단위 스위처를 우측에 겹쳐 배치해 제목은 카드 정중앙을 유지 */
.f1ft-box-header.with-toggle {
    position: relative;
    min-height: 24px;
    line-height: 24px;
}

.f1ft-box-header.with-toggle .unit-switcher {
    position: absolute;
    top: 0;
    right: 0;
}

/* 지고 재고 제목줄 좌측 [전일 재고] — 급지 재고 원장의 같은 버튼
   (.f1il-loadprev-btn)과 같은 자리·같은 규격입니다. 모양은 공통 알약
   부품(css/common/common_pill_btn.css 의 .mk-pill-btn)이 냅니다.

   ★ 흐름 밖(absolute)에 세웁니다. 제목은 .f1ft-box-header 의
     text-align:center 가 카드 정중앙에 세우는데, 버튼을 흐름 안에 두면
     그 가운데를 밀어 버립니다 — 특히 **조회 계정에서는 이 버튼이 DOM 에서
     지워지므로**(.gf3-master-only) 흐름 안에 두면 계정에 따라 제목 위치가
     달라집니다. 실제로 그렇게 만들었다가 조회 계정에서 제목이 왼쪽으로
     48px 쏠렸습니다(2026-08-20, 주인 화면에서 확인). absolute 로 두면
     두 계정 모두 제목이 정확히 같은 자리(중심 오차 0)에 섭니다.
   .with-toggle 이 헤더를 relative 로 만들어 주므로 자리만 잡으면 됩니다.

   ★ 글자를 늘리지 마십시오. 이 칸은 2층 배치의 28% 라 제목줄이 302px
     뿐입니다. 크로뮴 실측(2026-08-20) 제목까지 남는 틈:
       '전일 재고'(88px)          1050px 화면 12.6 · 1210px 이상 33.6  ✓
       '전일 재고 가져오기'(111px) 1210px 미만에서 제목을 파고듦        ✗
     제목과 스위처는 1000px 이하에서 원래부터 붙습니다(이 버튼과 무관한
     기존 동작). '전일 재고'는 그 한계를 넓히지 않는 가장 긴 글자입니다. */
.f1ft-jigo-prev-btn {
    position: absolute;
    /* 알약 26px 을 제목줄 24px 줄높이 한가운데로 */
    top: -1px;
    left: 0;
}

/* R/L Kg 단위 스위처 (factory1_ft_io 페이지와 동일 디자인) */
.unit-switcher {
    position: relative;
    display: flex;
    background: #eef0f4;
    border-radius: 14px;
    padding: 2px;
    width: 84px;
    height: 24px;
    align-items: center;
    border: 1px solid #d1d1d6;
    overflow: hidden;
    cursor: pointer;
}

.selection-bg {
    position: absolute;
    top: 2px; left: 2px;
    width: calc(50% - 2px); height: calc(100% - 4px);
    background-color: #000000;
    border-radius: 12px;
    transition: transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    will-change: transform;
    z-index: 1;
}

.selection-bg.mode-roll { transform: translateX(0); }
.selection-bg.mode-kg { transform: translateX(100%); }

.unit-btn {
    position: relative; z-index: 2; flex: 1; border: none;
    background: transparent !important;
    font-family: inherit; font-size: 11px;
    font-weight: 700; color: #55555d; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s ease; outline: none;
    height: 100%;
}

.unit-btn.active { color: #ffffff !important; }

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

/* ── 표의 선 ──
   원래는 엑셀 원본을 그대로 옮겨 굵은 실선 격자(1px #d2d2d7 + 2px #8e8e93)
   였습니다. 2026-08-06, 사이트의 다른 표와 같은 톤으로 낮췄습니다 —
   재고실사·지고 재고·3공장 재고종합은 모두 얇은 구분선(#e5e5ea)에 그룹
   경계만 한 단계 진하게(#d1d1d6) 씁니다. 이 페이지만 선이 굵어서, 화면을
   옮기면 같은 표인데 다른 프로그램처럼 보였습니다.
   선을 낮춰도 그룹(A|C|D) 경계는 아래 규칙이 여전히 진하게 그어 줍니다. */
/* 칸과 칸 사이 — 가장 옅은 선입니다. 표 안에서 가장 자주 반복되는 선이라
   여기가 진하면 표 전체가 무거워집니다. */
.f1ft-th,
.f1ft-td {
    border: 1px solid #f0f1f4;
    height: 38px;
    vertical-align: middle;
    padding: 0;
}

.f1ft-th {
    background: #eceff4;
    font-size: 12.5px;
    font-weight: 700;
    color: #1d1d1f;
    text-align: center;
    letter-spacing: -0.2px;
}

.row-title {
    background: #f1f3f6;
    color: #1d1d1f;
    width: 110px;
}

.border-outer {
    border: 1px solid #dcdce4 !important;
}

/* ── 표 라운드 테두리 (2026-08-01) ──
   collapse 표에는 border-radius 가 적용되지 않으므로(브라우저 사양),
   바깥 2px 테두리는 이 래퍼가 라운드로 그리고, 표 가장자리 셀의 1px 선은
   음수 마진 + overflow:hidden 으로 잘라냅니다. 곡률은 카드(.f1ft-box)와
   같은 12px 입니다. */
.f1ft-round {
    border: 1px solid #dcdce4;
    border-radius: 12px;
    overflow: hidden;
}
.f1ft-round > .f1ft-table { margin: -1px; width: calc(100% + 2px); }
.f1ft-round > .f1ft-table.border-outer { border: none !important; }

/* ── 머리글과 본문 사이 ──
   굵기는 나머지와 같은 1px 이고, 진하기만 한 단계 올립니다. 제목 줄과
   자료가 갈리는 자리라 칸과 칸 사이보다는 또렷해야 합니다.

   ★ th·td 를 직접 지목해야 합니다. common_header.css 에 아래 규칙이
     있어서, thead 에만 걸면 이쪽이 (셀을 직접 짚은) 저쪽에 집니다 —
     그래서 2px #8e8e93 굵은 선이 그대로 남아 있었습니다.
       .border-bottom-thick th, .border-bottom-thick td {
           border-bottom: 2px solid #8e8e93 !important; }
     (다른 페이지들이 아직 쓰는 규칙이라 거기는 손대지 않고 여기서 덮습니다) */
.f1ft-table .border-bottom-thick th,
.f1ft-table .border-bottom-thick td {
    border-bottom: 1px solid #d1d1d6 !important;
}

/* 1층 급지 재고 표의 그룹 경계 (행 제목 | A A A A | C C | D D).
   격자선보다 아주 조금만 진합니다 — 어디까지가 A 인지는 읽히되, 선이
   도드라져 표가 무거워 보이지 않을 만큼입니다. */
.f1ft-row-1 .f1ft-table tr > *:nth-child(5),
.f1ft-row-1 .f1ft-table tr > *:nth-child(7),
.f1ft-row-1 .f1ft-table tr > *:nth-child(9) {
    border-right: 1px solid #dcdce4 !important;
}

/* 행 제목 열의 오른쪽 — 네 표 모두에 긋습니다.
   1층은 '사용 전 잔량 / 사용량 / 사용 후 잔량', 아래 세 표는 'A / C / D'
   가 서 있는 열입니다. 둘 다 '무엇에 대한 줄인가'를 적는 자리라 값이
   시작되는 지점을 같은 선으로 알려 줍니다 — 1층에만 있으면 아래로
   내려올 때 표의 규칙이 바뀐 것처럼 보입니다. */
.f1ft-table tr > *:first-child {
    border-right: 1px solid #dcdce4 !important;
}

.col-row-title {
    width: 110px;
}

.col-data {
    width: 72px;
}

.col-memo {
    width: 240px;
}

.f1ft-td.readonly {
    background: #f2f4f7;
}

.f1ft-td.editable {
    background: #f7f8fa;
}

.f1ft-wrapper.edit-mode .f1ft-td.editable {
    background: #fff9e6;
}

.f1ft-wrapper.edit-mode .f1ft-td.editable .f1ft-input:focus {
    background: #fff2cc;
}

/* ※ 비고 칸에 거의 흰색(#fcfcfe)을 깔았었습니다. 2026-08-06 걷어냈습니다 —
     사이트가 눈부심 때문에 순백 계열을 한 단계 낮춘 뒤로 이 칸만 혼자
     하얗게 떴고, 첫 줄(수정 가능)과 아래 두 줄(잠김)이 같은 색이라
     어디를 적을 수 있는지도 가려졌습니다. 이제 위의 editable/readonly
     색을 그대로 따릅니다. */

/* 입력칸의 글꼴 — font-family 를 적어 주지 않으면 <input> 은 본문 글꼴을
   물려받지 않고 브라우저 기본 입력 글꼴로 그려집니다. 표의 머리글·행
   제목은 본문 글꼴인데 칸 안의 숫자만 다른 글꼴이라 자모 굵기와 숫자
   모양이 미묘하게 달랐습니다.
   tabular-nums 는 숫자 폭을 고정합니다 — 자리마다 폭이 다르면 세로로
   늘어선 잔량이 들쭉날쭉해 보입니다(다른 페이지의 숫자 칸과 같은 규격). */
.f1ft-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    padding: 0 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    box-sizing: border-box;
}

.f1ft-input::placeholder {
    color: #c7c7cc;
}

/* 잠긴 칸의 글자 — 사파리는 readonly 입력의 글자를 흐리게 그립니다.
   값이 흐려지면 '아직 안 온 값'처럼 보이므로 또렷하게 되돌립니다.
   색을 못 박지 않고 currentColor 로 두는 이유: 증감 칸(.delta-positive /
   .delta-negative)도 잠긴 칸이라, 여기서 색을 정해 버리면 그 초록·빨강이
   덮여 사라집니다. */
.f1ft-input[readonly] {
    opacity: 1;
    -webkit-text-fill-color: currentColor;
    cursor: default;
}

/* ※ .f1ft-input.is-auto (ERP 출고에서 가져온 값)에 파란 글씨 + 점선 밑줄을
     그렸었습니다. 2026-08-06, ERP 입력량 칸이 아예 잠긴 칸이 되면서
     걷어냈습니다 — 사람이 고칠 수 없는 칸이라 '가져온 값'과 '적은 값'을
     눈으로 갈라 놓을 이유가 없고, 잠긴 칸에 밑줄만 남으니 눌러야 하는
     것처럼 보였습니다. 클래스와 툴팁(어디서 온 값인지)은 그대로입니다. */

.delta-input {
    font-weight: 700;
}

/* 증감 색 — 사이트 공통 초록/빨강입니다 (재고실사의 차이 열과 같은 값).
   여기만 다른 초록·빨강을 쓰고 있어서 화면을 옮길 때 같은 뜻의 색이
   달라 보였습니다. */
.delta-positive {
    background: #e8f8ec !important;
    color: #248a3d;
}

.delta-negative {
    background: #ffeceb !important;
    color: #d70015;
}

@media (max-width: 900px) {
    /* 화면 폭이 좁아질 경우 2층 레이아웃도 수직 적층으로 전환 */
    .f1ft-row-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ── 태블릿(761~1050px · 아이패드 세로 등) ──
   급지 재고 표의 자연 폭(약 930px)이 이 구간의 화면보다 넓은데, 아래
   760px 블록의 가로 스크롤 규칙이 여기까지는 안 올라와서 라운드 래퍼
   (overflow:hidden)가 표 오른쪽을 스크롤도 없이 잘라 버렸습니다 —
   아이패드 세로(820px)에서 D 열 뒤가 아예 안 보였습니다. 폰과 같은
   가로 스크롤만 이 구간에 켭니다(글자 크기 등은 건드리지 않습니다). */
@media (min-width: 761px) and (max-width: 1050px) {
    .f1ft-row-1 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .f1ft-row-1 .f1ft-round {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 760px) {
    .f1ft-row-1 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .f1ft-row-1 .f1ft-table {
        min-width: 780px;
    }

    /* 라운드 래퍼(overflow:hidden)가 780px 표를 잘라 버리지 않도록, 좁은
       화면에서는 래퍼 자신이 가로 스크롤 상자가 됩니다. 둥근 모서리는
       그대로 유지됩니다. */
    .f1ft-row-1 .f1ft-round {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .f1ft-input {
        font-size: 16px;
    }
}
/* ================================================
   F.T 롤 무게 미니 계산기
   — '급지 재고' 헤더 우측 버튼 + 떠 있는 팝업
   (동작은 factory1_ft_rollcalc.js, 계산 규칙은
    factory1_rollcac_constant.js 가 유일한 출처)
   ================================================ */

/* 헤더 우측 [롤 무게 계산] — 지고 재고의 '출고 요약'과 같은 규격.
   .with-toggle 이 헤더를 relative 로 만들어 주므로 자리만 잡으면 됩니다. */
.f1rc-ft-open-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 11px 0 8px;
    border: 1px solid #d1d1d6;
    border-radius: 13px;
    background: #f7f8fa;
    color: #1d1d1f;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.f1rc-ft-open-btn:hover { background: #f4f4f8; border-color: #a1a1a8; }
.f1rc-ft-open-btn .material-symbols-outlined { font-size: 15px; color: #8e8e93; }

/* ── 떠 있는 팝업 ──
   모달이 아닙니다. 덮개(overlay)가 없어 뒤의 표를 그대로 만질 수 있고,
   닫기 전까지 화면 위에 계속 남습니다. 위치는 JS 가 left/top 으로
   잡습니다(끌어서 옮긴 자리를 기억). */
/* 세로로 쌓이는 상자입니다 — 줄이 여덟까지 늘 수 있어서, 창보다 길어지면
   줄 목록만 안에서 굴러가고 [적용] 버튼은 늘 바닥에 남아야 합니다.
   높이 상한(max-height)은 JS 가 창 높이를 재서 넣습니다(rollcalc.js 의
   keepInView) — body 에 걸린 zoom 때문에 vh 로는 정확히 맞출 수 없습니다.
   ※ 여는 쪽(JS)에서 display 를 'block' 으로 박으면 이 flex 가 무력화됩니다.
     그래서 open() 은 인라인 display 를 지우기만 합니다. */
.f1rc-ft-pop {
    position: fixed;
    z-index: 1550;              /* 폰 하단 독(1500)보다 위, 공지 모달(2000)보다는 아래 */
    width: 270px;               /* 규격 50 + 두께 + 무게 58 + 지우기 16 */
    display: flex;
    flex-direction: column;
    background: #f7f8fa;
    border: 1px solid #d1d1d6;
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    user-select: none;          /* 길게 눌러 끌 때 글자가 선택되면 안 됩니다 */
    -webkit-user-select: none;
}

.f1rc-ft-pop.is-dragging {
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.26);
    cursor: grabbing;
}

/* 머리띠 — 잡는 즉시 끌리는 손잡이입니다 */
.f1rc-ft-pop-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 7px;
    border-bottom: 1px solid #f0f0f3;
    cursor: grab;
    touch-action: none;         /* 폰에서 끌 때 화면 스크롤이 같이 밀리면 안 됩니다 */
    border-radius: 14px 14px 0 0;
    background: #f1f3f6;
}
.f1rc-ft-pop.is-dragging .f1rc-ft-pop-head { cursor: grabbing; }

.f1rc-ft-pop-grip { font-size: 16px; color: #c7c7cc; }
.f1rc-ft-pop-title {
    flex: 1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #1d1d1f;
}
.f1rc-ft-pop-close {
    font-size: 17px;
    color: #8e8e93;
    cursor: pointer;
    padding: 2px;
    border-radius: 6px;
}
.f1rc-ft-pop-close:hover { background: #ececf0; color: #1d1d1f; }

/* 머리띠는 고정 높이, 몸통이 남는 높이를 다 씁니다.
   min-height: 0 이 없으면 flex 자식은 내용보다 작아지지 못해, 안쪽
   줄 목록에 스크롤이 생기는 대신 상자가 그냥 길어집니다. */
.f1rc-ft-pop-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── 네 줄 ──
   한 줄이 롤 하나입니다: [규격 ▾] [두께 cm] [무게].
   세 칸의 폭을 여기 한 곳에서 정하고 열 이름(.f1rc-ft-cap)도 같은 격자를
   써서, 줄이 늘거나 줄어도 머리글과 어긋나지 않습니다. */
/* 가운데 칸이 minmax(0, 1fr) 인 이유: 그냥 1fr 로 두면 최소 폭이 '내용
   만큼'이라, 안에 든 <input> 의 기본 폭(약 20자)보다 좁아지지 못해 줄이
   팝업 밖으로 삐져나갑니다. 0 까지 줄어들 수 있다고 밝혀 줘야 남는 폭만
   가져갑니다. (input 쪽 min-width: 0 만으로는 부족합니다 — 격자 칸이
   먼저 버팁니다)

   마지막 16px 은 늘린 줄의 지우기(×) 자리입니다. 기본 네 줄에는 × 가
   없지만 칸은 그대로 비워 둡니다 — 줄마다 칸 수가 달라지면 그 줄만
   열이 밀려서, 늘리는 순간 표가 어긋난 것처럼 보입니다. */
.f1rc-ft-cap,
.f1rc-ft-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 58px 16px;
    gap: 6px;
    align-items: center;
}

/* 좌우 여백을 두지 않습니다 — 두면 격자 칸이 그만큼 좁아져 아래 줄과
   열이 어긋납니다. 대신 글자만 아래 칸의 안쪽 여백(드롭다운 8px ·
   두께칸 10px)만큼 밀어 맞춥니다. */
.f1rc-ft-cap {
    padding: 0 0 5px;
    font-size: 9.5px;
    font-weight: 700;
    color: #a1a1a8;
    letter-spacing: -0.2px;
}
.f1rc-ft-cap span:nth-child(1) { padding-left: 8px; }
.f1rc-ft-cap span:nth-child(2) { padding-left: 10px; }
.f1rc-ft-cap span:nth-child(3) { text-align: right; padding-right: 2px; }

/* 여덟 줄까지 늘리면 팝업이 꽤 길어집니다. 창이 낮은 노트북에서 아래가
   화면 밖으로 나가면 [적용] 버튼에 손이 닿지 않으므로, 상자가 창 높이에
   닿는 순간 줄어드는 것은 이 목록입니다(나머지는 제 높이를 지킵니다).
   창이 넉넉하면 flex-shrink 가 할 일이 없어 그대로 다 보입니다. */
.f1rc-ft-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}
.f1rc-ft-cap, .f1rc-ft-add, .f1rc-ft-apply,
.f1rc-ft-target, .f1rc-ft-hint { flex: none; }

/* 지우기 × — 늘린 줄에만 나타납니다(.is-extra). 기본 네 줄에서는 자리만
   비워 두므로 열이 흔들리지 않습니다. */
.f1rc-ft-del {
    display: none;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #c7c7cc;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.f1rc-ft-row.is-extra .f1rc-ft-del { display: inline-flex; }
.f1rc-ft-del:hover { background: #ffe5e5; color: #ff3b30; }
.f1rc-ft-del .material-symbols-outlined { font-size: 14px; }

/* 줄 늘리기 — 값을 만드는 버튼이 아니라 자리를 만드는 버튼이라
   [적용]과 달리 테두리만 있는 조용한 모양입니다. */
.f1rc-ft-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 28px;
    margin-top: 7px;
    border: 1px dashed #c7c7cc;
    border-radius: 9px;
    background: transparent;
    color: #636366;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.f1rc-ft-add:hover:not(:disabled) { background: #f1f3f6; border-color: #a1a1a8; color: #1d1d1f; }
.f1rc-ft-add:disabled { opacity: 0.4; cursor: not-allowed; }
.f1rc-ft-add .material-symbols-outlined { font-size: 15px; }

/* 규격 드롭다운 — 완롤 무게는 title 툴팁에 있습니다(칸이 좁습니다) */
.f1rc-ft-grade {
    width: 100%;
    height: 32px;
    padding: 0 4px 0 8px;
    border: 1px solid #d1d1d6;
    border-radius: 9px;
    background: #f7f8fa;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: #1d1d1f;
    cursor: pointer;
    outline: none;
}
.f1rc-ft-grade:focus { border-color: #007aff; }

/* 무게 — 각 줄의 결과. 이 팝업에서 가장 눈이 가야 하는 숫자입니다. */
.f1rc-ft-kg {
    text-align: right;
    padding-right: 2px;
    font-size: 15px;
    font-weight: 800;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}
.f1rc-ft-kg.is-empty { color: #c7c7cc; font-weight: 700; }
.f1rc-ft-kg.is-bad { color: #ff3b30; }
/* 완롤 두께를 넘은 줄 — 막지는 않고 색으로만 알립니다 */
.f1rc-ft-kg.is-over { color: #c05a00; }

/* 급지 재고에 넣는 버튼 — 넣기만 하고 저장은 상단 [저장]입니다 */
.f1rc-ft-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 34px;
    margin-top: 10px;
    border: none;
    border-radius: 10px;
    /* 남빛 통일 — common_header.css 의 .save-btn 주석 참고 (2026-08-24) */
    background: #45739e;
    color: #ffffff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.f1rc-ft-apply:hover:not(:disabled) { background: #35597e; }
.f1rc-ft-apply:disabled { background: #c7c7cc; cursor: not-allowed; }
.f1rc-ft-apply .material-symbols-outlined { font-size: 16px; }

/* 어느 날짜의 어느 줄에 들어가는지 — 버튼 바로 아래 한 줄 */
.f1rc-ft-target {
    margin-top: 5px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: #8e8e93;
    letter-spacing: -0.2px;
}
.f1rc-ft-target.warn { color: #c05a00; font-weight: 700; }

/* 두께 입력 — cm 단위를 칸에 붙여 두면 따로 설명이 필요 없습니다 */
.f1rc-ft-inrow {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    border: 1px solid #d1d1d6;
    border-radius: 9px;
    padding: 0 10px;
    background: #f7f8fa;
}
.f1rc-ft-inrow:focus-within { border-color: #007aff; }

.f1rc-ft-inrow input {
    flex: 1;
    min-width: 0;
    height: 30px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
    user-select: text;
    -webkit-user-select: text;
}
.f1rc-ft-inrow input::placeholder { color: #c7c7cc; font-weight: 600; }
.f1rc-ft-unit { font-size: 11px; font-weight: 700; color: #8e8e93; }

/* ※ 여기 있던 .f1rc-ft-result (한 줄짜리 계산기의 큰 결과 칸)는 없앴습니다
     (2026-08-06). 이제 결과는 줄마다 하나씩이라 .f1rc-ft-kg 이 대신합니다. */

/* 한 줄 안내 — 평소에는 비어 있어 자리도 차지하지 않습니다.
   ok(초록)는 표에 넣은 직후의 확인, warn(주황)은 손봐야 할 것입니다. */
.f1rc-ft-hint { margin-top: 6px; font-size: 10.5px; line-height: 1.4; color: #8e8e93; min-height: 0; }
.f1rc-ft-hint.warn { color: #c05a00; font-weight: 600; }
.f1rc-ft-hint.ok { color: #248a3d; font-weight: 600; }