/* factory1_rollcac_style.css — 1공장 롤 무게 계산 스타일
   ────────────────────────────────────────────────────────────────
   1공장 입출고 내역(factory1_inoutbound_style.css)과 같은 카드/색상/타이포
   규격을 따릅니다. 표가 없는 페이지라 표 관련 규칙만 빠졌습니다.

   화면은 좌우 두 칸입니다 — 좌측이 입력과 결과, 우측이 측정 방법 그림.
   그림을 위아래가 아니라 옆에 둔 것은, 처음 재 보는 사람이 롤 앞에서
   그림과 입력칸을 번갈아 보기 때문입니다.
   ──────────────────────────────────────────────────────────────── */

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

    /* [우측 그림 폭 옵션] */
    --rc-side-width: 300px;

    /* [한 줄의 칸 폭 옵션]
       칸마다 들어갈 글자가 정해져 있습니다 — 회사는 길어야 '페이퍼코리아',
       규격은 'A권 · 1,576mm', 무게는 '1,405 kg (48.8g)' 입니다. 남는 폭을
       똑같이 나눠 갖게 두면 회사 칸만 헐렁하게 비어 보여서, 칸마다 제 글자에
       맞춰 잡아 두었습니다. 결과 칸은 드롭다운 버튼과 같은 덩치입니다. */
    --rc-w-vendor: 124px;   /* '페이퍼코리아' */
    --rc-w-spec:   134px;   /* 'A권 · 1,576mm' */
    --rc-w-weight: 148px;   /* '1,405 kg (48.8g)' */
    --rc-w-thick:  104px;   /* '55.25' + cm */
    --rc-w-out:    124px;   /* 회사 칸과 같은 덩치 */

    /* [줄 높이 옵션] 드롭다운·입력·결과가 모두 이 높이입니다 */
    --rc-row-height: 44px;

    /* 이 페이지가 실제로 쓰는 폭. 위 숫자들을 그대로 더한 값이라, 칸 폭을
       고치면 여기도 저절로 따라옵니다 (손으로 맞출 숫자가 아닙니다). */
    --rc-page-width: calc(
        var(--rc-w-vendor) + var(--rc-w-spec) + var(--rc-w-weight)
        + var(--rc-w-thick) + var(--rc-w-out)
        + 4 * 8px                       /* 칸 사이 네 군데 */
        + 40px                          /* 카드 좌우 여백 */
        + 12px + var(--rc-side-width)   /* 두 칸 사이 + 그림 칸 */
        + 40px                          /* 바깥 틀 좌우 여백 */
        + 6px                           /* 테두리 세 겹 (카드·그림 칸·바깥 틀) */
    );
}

/* 공통값은 1200px 인데 이 페이지가 쓰는 폭은 그보다 좁습니다. 그대로 두면
   오른쪽에 140px 남짓이 빈 채로 남아 화면이 한쪽으로 쏠려 보입니다.

   위 제목 줄(.gf3-wrapper 가 하나 더 있습니다)까지 같이 좁혀야 카드와
   모서리가 맞습니다 — 아래만 좁히면 어긋나 보입니다. 이 파일은 이 페이지만
   불러가므로 다른 페이지에는 영향이 없습니다.

   min() 은 안전장치입니다. 칸 폭을 크게 늘려 1200 을 넘기면 공통값을
   따르게 됩니다. */
.gf3-wrapper { max-width: min(1200px, var(--rc-page-width)); }

.f1rc-wrapper {
    gap: 14px;
}

/* 층 외곽 프레임 — 다른 1공장 페이지의 floor-container 와 동일 규격 */
.f1rc-floor-container {
    background: #f7f8fa;
    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; }
.panel-header-grid .header-right { justify-content: flex-end; gap: 8px; }

.panel-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000 !important;
    letter-spacing: -0.3px;
    margin: 0;
}
.panel-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
    margin-left: 10px;
    white-space: nowrap;
}

/* 초기화 버튼 — 헤더의 [오늘] 버튼과 같은 크기/모양 계열입니다 */
.f1rc-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e5e5ea;
    background: #eceff4;
    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;
}
.f1rc-reset-btn:hover {
    background: #e8f4fd;
    border-color: #cfe2f8;
    color: #007aff;
}
.f1rc-reset-btn .material-symbols-outlined {
    font-size: 17px;
    line-height: 1;
}

/* ========================================
   좌우 두 칸 — 좌측 입력·결과 / 우측 측정 방법
   ======================================== */
/* 두 칸의 키를 맞춥니다. 다만 우측 칸의 여백을 억지로 늘려 맞추는 것이
   아니라, 그림이 남는 높이를 먹고 자라거나 줄어들게 했습니다 — 여백으로
   맞추면 줄 수(ROW_COUNT)를 바꾸는 순간 다시 어긋납니다.
   맞추는 규칙은 .f1rc-figure svg 에 있습니다. */
.f1rc-split {
    display: flex;
    align-items: stretch;
    gap: 12px;
}
/* 줄의 칸 폭이 고정이라 이 칸도 제 폭만 씁니다. 늘어나게 두면 카드만
   넓어지고 줄은 그대로라, 카드 오른쪽에 빈 바닥이 생깁니다. */
.f1rc-split-main {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

/* ── 입력부 ──────────────────────────────────────────────────────
   한 줄이 계산 하나입니다.

     [회사] [롤 규격] [표준 무게] [두께 cm] [잔량 kg]

   왼쪽에서 오른쪽으로 좁혀 가다 마지막 칸에서 답이 나오는 순서라, 다섯 칸을
   한 줄에 그대로 눕혔습니다. 줄 사이에는 선을 긋지 않습니다 — 칸 자체가
   테두리를 갖고 있어 선까지 그으면 격자가 두 겹으로 보입니다.

   칸 위 이름표는 없습니다. 드롭다운이 비었을 때 스스로 '회사 선택'이라고
   적혀 있고, 줄이 여섯이라 이름표를 달면 같은 글자가 여섯 번 반복됩니다.
   ──────────────────────────────────────────────────────────────── */
.f1rc-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
}

/* 칸 폭이 글자에 맞춰 고정이라 남는 폭이 생깁니다. 그 폭을 칸에 나눠 주지
   않고 오른쪽에 그대로 두는 것이 요점입니다 — 늘리면 다시 헐렁해집니다. */
.f1rc-row {
    display: grid;
    grid-template-columns:
        var(--rc-w-vendor) var(--rc-w-spec) var(--rc-w-weight)
        var(--rc-w-thick) var(--rc-w-out);
    justify-content: start;
    gap: 8px;
    align-items: center;
}
/* 칸이 제 글자 때문에 부풀어 줄을 밀어내지 않도록 */
.f1rc-row > * { min-width: 0; }

/* 완롤 두께를 넘긴 줄이 있을 때만 나옵니다 (없으면 자리도 차지하지 않습니다) */
.f1rc-note {
    display: none;
    padding: 0 20px 16px;
    font-size: 11.5px;
    font-weight: 700;
    color: #c9302c;
    letter-spacing: -0.2px;
}
.f1rc-note.is-on { display: block; }

/* ── 드롭다운 ────────────────────────────────────────────────────
   네이티브 <select> 가 아니라 버튼 + 목록입니다. body 에 걸린 zoom:115%
   때문에 크롬이 select 팝업 위치를 어긋나게 잡아, 열자마자 닫히는 일이
   있었습니다(main.js 의 같은 주석 참고).

   목록은 버튼 바로 아래에 붙습니다. 상단 헤더 드롭다운(z-index 1000)
   보다는 아래, 본문 카드보다는 위에 뜨게 z-index 를 잡았습니다.
   ──────────────────────────────────────────────────────────────── */
.f1rc-dd { position: relative; }

.f1rc-dd-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--rc-row-height);
    /* 화살표 자리(오른쪽)를 34px 에서 26px 로 줄였습니다. 칸을 좁힌 만큼
       글자가 쓸 수 있는 폭이 그대로 남아야 합니다. */
    padding: 0 26px 0 11px;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    background-color: #f7f8fa;
    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.2s, box-shadow 0.2s, background-color 0.2s;
}
.f1rc-dd-btn:hover { border-color: #b9b9c0; }
.f1rc-dd-btn:focus-visible,
.f1rc-dd.is-open .f1rc-dd-btn {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.f1rc-dd-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 아직 안 고른 칸 — 글자는 있지만 값은 아니라는 표시 */
.f1rc-dd-text.is-placeholder { color: #c7c7cc; font-weight: 600; }

/* 앞 칸을 고르기 전에는 눌리지 않습니다. 숨기지 않고 흐리게만 두는 것은,
   앞으로 무엇을 더 골라야 하는지가 그대로 보여야 하기 때문입니다. */
.f1rc-dd.is-disabled .f1rc-dd-btn {
    background-color: #f1f3f6;
    border-color: #e5e5ea;
    cursor: not-allowed;
    box-shadow: none;
}
.f1rc-dd.is-disabled .f1rc-dd-text { color: #d1d1d6; }

/* 버튼은 좁혀 두었지만 목록까지 좁으면 '1,405 kg (48.8g)' 이 잘립니다.
   목록은 버튼 폭을 밑줄로만 삼고 제 글자만큼 벌어지게 둡니다. */
.f1rc-dd-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 260px;
    z-index: 90;
    max-height: 264px;
    overflow-y: auto;
    padding: 5px;
    background: #f7f8fa;
    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;
}
.f1rc-dd.is-open .f1rc-dd-panel { display: block; }
.f1rc-dd-panel::-webkit-scrollbar { width: 6px; }
.f1rc-dd-panel::-webkit-scrollbar-track { background: transparent; }
.f1rc-dd-panel::-webkit-scrollbar-thumb { background-color: #d1d1d6; border-radius: 6px; }

.f1rc-dd-option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #3a3a3c;
    letter-spacing: -0.2px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
    transition: background 0.15s, color 0.15s;
}
.f1rc-dd-option:hover,
.f1rc-dd-option:focus-visible { background: #eceff4; color: #1d1d1f; }
.f1rc-dd-option.is-selected { background: #e8f4fd; color: #007aff; }

/* 두께 입력 — 단위(cm)를 칸 안 오른쪽에 붙박이로 둡니다.
   단위 칸을 따로 세우면 줄이 길어지고, 없으면 mm 로 적는 사람이 나옵니다. */
.f1rc-input-wrap { position: relative; }
.f1rc-input {
    width: 100%;
    height: var(--rc-row-height);
    padding: 0 38px 0 10px;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    background: #f7f8fa;
    font-family: inherit;
    font-size: 18px;
    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;
}
.f1rc-input::-webkit-outer-spin-button,
.f1rc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.f1rc-input { -moz-appearance: textfield; }
.f1rc-input:hover { border-color: #b9b9c0; }
.f1rc-input:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
/* 이름표를 뺀 자리를 여기서 메웁니다 — 빈 칸이 스스로 '두께' 라고 말합니다 */
.f1rc-input::placeholder { color: #c7c7cc; font-weight: 700; font-size: 14px; }

.f1rc-unit {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 800;
    color: #8e8e93;
    pointer-events: none;
}

/* ── 줄 끝의 결과 칸 ─────────────────────────────────────────────
   드롭다운 버튼과 같은 덩치(높이·모서리)로 두되, 테두리를 지우고 바탕을
   깔았습니다. 적는 칸과 읽는 칸이 같은 모양이면 결과에도 손이 갑니다.
   ──────────────────────────────────────────────────────────────── */
.f1rc-out {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    height: var(--rc-row-height);
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #eceff4;
    overflow: hidden;
}
/* 숫자(18px)와 kg(13px)의 밑선을 맞추려면 baseline 정렬이어야 하는데,
   baseline 은 글자를 위로 붙입니다. 그래서 두 글자에 칸 높이만큼의 줄을
   주어 그 줄 가운데에 서게 했습니다.
   (−2px 은 위아래 테두리. box-sizing 이 border-box 라 안쪽은 그만큼 좁습니다) */
.f1rc-out-value,
.f1rc-out-unit {
    line-height: calc(var(--rc-row-height) - 2px);
    white-space: nowrap;
}
.f1rc-out-value {
    font-size: 18px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.f1rc-out-unit {
    font-size: 13px;
    font-weight: 800;
    color: #8e8e93;
    letter-spacing: -0.3px;
}

/* 아직 답이 없는 줄 — 자리는 지키되 눈에 걸리지 않게 */
.f1rc-out.is-empty { background: #f1f3f6; }
.f1rc-out.is-empty .f1rc-out-value { color: #d1d1d6; }
.f1rc-out.is-empty .f1rc-out-unit { color: #d1d1d6; }

/* 완롤 두께를 넘겼거나 두께가 음수인 줄. 자세한 사정은 아래 안내 줄에 */
.f1rc-out.is-warn {
    background: #fdf0ef;
    border-color: #f3d4d2;
}
.f1rc-out.is-warn .f1rc-out-value { color: #c9302c; }
.f1rc-out.is-warn .f1rc-out-unit { color: #c9302c; }

/* ========================================
   우측 — 측정 방법
   ======================================== */
/* 남는 폭은 이 칸이 가져갑니다. 좁아지면 줄을 건드리는 대신 그림이 먼저
   줄어듭니다 — 그림은 작아져도 읽히지만 줄은 칸이 어긋나면 못 씁니다. */
.f1rc-split-side {
    flex: 0 1 var(--rc-side-width);
    min-width: 230px;
    display: flex;
    flex-direction: column;

    background: #f7f8fa;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    padding: 10px 14px 12px;
}

.f1rc-side-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #636366;
    letter-spacing: -0.2px;
    padding-bottom: 7px;
    border-bottom: 1px solid #f2f2f7;
    flex-shrink: 0;
}

/* 좌측 줄들과 키를 맞추는 자리입니다.

   글(제목 · 설명 · 기준값)은 제 높이를 지키고, 남거나 모자란 높이는 전부
   그림이 먹습니다. svg 는 viewBox 를 갖고 있어 어떤 상자를 주든 비율을
   지킨 채 그 안에 들어앉으므로, 높이만 줘도 알아서 작아지고 커집니다.

   min-height 는 바닥입니다 — 줄 수를 줄이면 그림이 먼저 작아지다가 여기서
   멈추고, 그때부터는 좌측 카드가 늘어납니다. */
.f1rc-figure {
    margin: 0;
    padding: 4px 0 2px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.f1rc-figure svg {
    flex: 1 1 0;
    min-height: 120px;
    width: 100%;
    display: block;
}

.f1rc-figure figcaption {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: #6b6b70;
    line-height: 1.5;
    letter-spacing: -0.2px;
    padding: 4px 2px 0;
}
.f1rc-figure figcaption b { color: #1d1d1f; font-weight: 800; }

/* 기준값 — 계산이 무엇을 전제하고 있는지입니다.
   숫자가 이상할 때 제일 먼저 의심해야 하는 값들이라 접어 두지 않습니다. */
.f1rc-spec {
    flex-shrink: 0;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid #f2f2f7;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.f1rc-spec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.f1rc-spec-key {
    font-size: 10.5px;
    font-weight: 700;
    color: #8e8e93;
    letter-spacing: -0.2px;
}
.f1rc-spec-val {
    font-size: 11.5px;
    font-weight: 800;
    color: #48484a;
    font-variant-numeric: tabular-nums;
}

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

/* ── 반응형 ──────────────────────────────────────────────────────
   body 에 zoom:115% 가 걸려 있어, 미디어쿼리에 적는 px 과 실제로 쓸 수 있는
   폭이 다릅니다. 화면 폭의 약 87% 에서 본문 여백(양쪽 60px 남짓)을 뺀 만큼만
   남습니다. 아래 두 숫자는 그 계산으로 잡았습니다.
     · 1180 — 줄(약 706px) + 그림(최소 230px) 이 더는 나란히 못 서는 폭
     ·  960 — 줄 하나가 한 줄에 못 들어가는 폭
   ──────────────────────────────────────────────────────────────── */

/* 그림을 줄 밑으로 내립니다.

   위아래로 놓이면 맞출 키가 없습니다. 그림이 남는 높이를 먹던 규칙을
   여기서 풀어야 합니다 — 안 풀면 채울 높이가 0 이라 그림이 min-height
   까지 쪼그라든 채로 섭니다. */
@media (max-width: 1180px) {
    .f1rc-split { flex-direction: column; }
    .f1rc-split-main { width: 100%; }
    .f1rc-split-side { flex: 0 0 auto; min-width: 0; align-self: stretch; }
    .f1rc-figure { display: block; }
    .f1rc-figure svg { height: auto; max-width: 320px; margin: 0 auto; }
}

/* 다섯 칸이 한 줄에 안 들어가는 구간 — 줄을 접습니다.

   회사를 윗줄에 혼자 세우고, 규격·무게 를 한 짝, 두께·결과 를 한 짝으로
   내립니다. 접히고 나면 어디까지가 한 계산인지가 안 보이므로, 이때부터는
   줄마다 카드 테두리를 둘러 묶어 줍니다. */
@media (max-width: 960px) {
    .f1rc-row {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        background: #f1f3f6;
        border: 1px solid #e5e5ea;
        border-radius: 10px;
    }
    .f1rc-row > .f1rc-dd:first-child { grid-column: 1 / -1; }
    .f1rc-out { background: #f7f8fa; }
    .f1rc-out.is-empty { background: #f7f8fa; }
}

@media (max-width: 640px) {
    .f1rc-floor-container { padding: 14px; border-radius: 14px; }
    .panel-title { font-size: 16px; }
    .panel-subtitle { display: none; }

    .f1rc-rows { padding: 14px; gap: 12px; }
    .f1rc-note { padding: 0 14px 14px; }
}