:root{
    /* 운영허브와 동일한 흑백 미니멀 테마 */
    --paper:#FFFFFF;
    --paper-2:#F5F5F4;
    --card:#FFFFFF;
    --ink:#0A0A0A;
    --ink-2:#5F5F5F;
    --mute:#6E6E6E;
    --line:#E7E7E7;
    --line-2:#E8E8E8;
    --grid:#BDBDBD;        /* 재고 표 칸 구분선 — --line 보다 진하게(사장님 2026-09-22 가독성) */
    --head:#3A3A3A;        /* 표 머리글 띠 — 순검정보다 한 톤 위 */
    --jade:#0A0A0A;        /* 강조색 = 잉크블랙 (운영허브 active 채움) */
    --jade-2:#5F5F5F;      /* 2차 강조 = 중간 회색 */
    --jade-soft:#F5F5F4;
    --jade-softer:#FAFAFA;
    --pat:#B00020;         /* 경고 / 음수 (운영허브 --warn) */
    --pat-soft:#FBEAEC;
    --gold:#9B9B9B;        /* 3차 톤 = 연회색 */
    --gold-soft:#F0F0F0;
    /* 의미색 — 장식이 아니라 신호로만. 흰 배경에서 읽히도록 진한 톤 + 연한 배경 쌍 */
    --ok:#0E8F80;          /* 완료·양호 */
    --ok-soft:#E7F6F4;
    --warn:#A96500;        /* 확인 필요 */
    --warn-soft:#FDF2E0;
    --bad:#B00020;         /* 문제·마이너스 (= --pat) */
    --bad-soft:#FBEAEC;
    /* 잉크 바탕(검은 버튼·고른 탭) 위에 얹는 글자색. 어두울 때는 뒤집힌다 —
       #fff 로 굳혀두면 어두운 화면에서 흰 버튼에 흰 글씨가 된다. */
    --on-ink:#FFFFFF;
    --toss:#3182F6;   /* 토스 파랑 — 시간대 매출 '오늘' 라인·툴팁 점 */
    /* 살짝 비치는 바탕(위쪽 머리띠·직원코드 화면). 반투명이라 --paper 로는 못 쓴다.
       흰색으로 굳혀두면 어두운 화면에서 흰 띠가 되고 그 위 글씨가 사라진다. */
    --paper-veil:rgba(255,255,255,.92);
    --paper-veil-2:rgba(255,255,255,.97);
    /* 밝기 단추 색 — 자동은 조용히, 어둡게는 밤빛, 밝게는 햇빛 */
    --ic-auto:#6E6E6E; --ic-dark:#4B5BD0; --ic-light:#A16400;
    --shadow:none;         /* 운영허브 카드는 그림자 없는 플랫 */
    --radius:14px;
  }

  /* ===== 어두운 화면 =====
     마감은 밤에 한다. 흰 화면은 어두운 데서 눈이 부시다.

     여기 스물몇 개만 바꾼다 — 나머지 규칙은 전부 이 이름들을 쓰므로 건드릴 게 없다.
     순검정(#000) 대신 #0F0F0F 를 쓴다. 완전한 검정 위의 흰 글씨는 번져 보이고,
     유기EL 화면에서는 스크롤할 때 검정이 끊겨 보인다.

     세 갈래로 적는다. 폰 설정이 '어둡게'면 첫째가 잡고, 화면에서 손으로 고르면
     둘째·셋째가 그것을 이긴다 — 사장님이 고른 쪽이 늘 이겨야 한다. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
    --paper:#0F0F0F; --paper-2:#191919; --card:#151515;
    --ink:#F2F2F2; --ink-2:#B4B4B4; --mute:#8C8C8C;
    --line:#2C2C2C; --line-2:#262626; --head:#2E2E2E; --grid:#4A4A4A;
    --jade:#F2F2F2; --jade-2:#B4B4B4; --jade-soft:#1E1E1E; --jade-softer:#1A1A1A;
    --pat:#FF7086; --pat-soft:#3A1219;
    --gold:#7C7C7C; --gold-soft:#242424;
    --ok:#3ED6C0; --ok-soft:#0E2A27;
    --warn:#E9A63F; --warn-soft:#2E2210;
    --bad:#FF7086; --bad-soft:#3A1219;
    --on-ink:#0F0F0F;
    --toss:#4C90F7;   /* 토스 파랑(어두운 화면용, 살짝 밝게) */
    --paper-veil:rgba(15,15,15,.92); --paper-veil-2:rgba(15,15,15,.97);
    --ic-auto:#8C8C8C; --ic-dark:#9AA6FF; --ic-light:#F0B24A;
    }
  }
  :root[data-theme="dark"]{
    --paper:#0F0F0F; --paper-2:#191919; --card:#151515;
    --ink:#F2F2F2; --ink-2:#B4B4B4; --mute:#8C8C8C;
    --line:#2C2C2C; --line-2:#262626; --head:#2E2E2E; --grid:#4A4A4A;
    --jade:#F2F2F2; --jade-2:#B4B4B4; --jade-soft:#1E1E1E; --jade-softer:#1A1A1A;
    --pat:#FF7086; --pat-soft:#3A1219;
    --gold:#7C7C7C; --gold-soft:#242424;
    --ok:#3ED6C0; --ok-soft:#0E2A27;
    --warn:#E9A63F; --warn-soft:#2E2210;
    --bad:#FF7086; --bad-soft:#3A1219;
    --on-ink:#0F0F0F;
    --toss:#4C90F7;   /* 토스 파랑(어두운 화면용, 살짝 밝게) */
    --paper-veil:rgba(15,15,15,.92); --paper-veil-2:rgba(15,15,15,.97);
    --ic-auto:#8C8C8C; --ic-dark:#9AA6FF; --ic-light:#F0B24A;
  }

  /* 마감 사진은 어떤 설정이든 흰 바탕으로 찍는다.
     남겨두고 인쇄도 하는 기록이라 검은 바탕이면 못 쓴다.
     위 두 갈래보다 뒤에, 같은 무게로 와야 이긴다. */
  :root.capturing{
    --paper:#FFFFFF; --paper-2:#F5F5F4; --card:#FFFFFF;
    --ink:#0A0A0A; --ink-2:#5F5F5F; --mute:#6E6E6E;
    --line:#E7E7E7; --line-2:#E8E8E8; --head:#3A3A3A; --grid:#BDBDBD;
    --jade:#0A0A0A; --jade-2:#5F5F5F; --jade-soft:#F5F5F4; --jade-softer:#FAFAFA;
    --pat:#B00020; --pat-soft:#FBEAEC;
    --gold:#9B9B9B; --gold-soft:#F0F0F0;
    --ok:#0E8F80; --ok-soft:#E7F6F4;
    --warn:#A96500; --warn-soft:#FDF2E0;
    --bad:#B00020; --bad-soft:#FBEAEC;
    --on-ink:#FFFFFF;
    --toss:#3182F6;   /* 토스 파랑 — 시간대 매출 '오늘' 라인·툴팁 점 */
    --paper-veil:rgba(255,255,255,.92); --paper-veil-2:rgba(255,255,255,.97);
    --ic-auto:#6E6E6E; --ic-dark:#4B5BD0; --ic-light:#A16400;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  /* 아이폰에서 화면이 갑자기 확대돼 안 돌아오던 것(사장님 2026-09-22) — 숫자판을 빠르게 두 번 누르면 '두 번 눌러 확대'로
     먹혔다. manipulation 은 두 번 눌러 확대만 끄고 스크롤·손가락 두 개 확대는 그대로 둔다.
     입력칸을 누를 때 글자가 16px 보다 작아 확대되던 것은 viewport 의 maximum-scale=1 로 막는다. */
  html,body{touch-action:manipulation}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Pretendard",system-ui,-apple-system,sans-serif;
    font-feature-settings:"tnum" 1;
    line-height:1.6;letter-spacing:-.012em;word-break:keep-all;overflow-wrap:break-word;
    -webkit-font-smoothing:antialiased;
  }
  .serif{font-family:"Pretendard",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em}
  .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
  .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
  a{color:inherit}

  /* ---------- Top bar ---------- */
  header.top{
    position:sticky;top:0;z-index:40;
    background:var(--paper-veil);backdrop-filter:saturate(1.2) blur(8px);
    border-bottom:1px solid var(--line);
  }
  .top-inner{display:flex;align-items:center;gap:16px;height:60px}
  .brand{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
  /* 화면 밝기 — 지점 버튼 옆. 셋을 돌아가며 고른다(자동 → 어둡게 → 밝게) */
  .theme-btn{appearance:none;border:1px solid var(--line);background:var(--card);
    border-radius:999px;width:34px;height:34px;margin-right:8px;cursor:pointer;
    padding:0;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
  /* 상태마다 색이 다르다 — 그림만으로는 초승달과 반달이 작은 화면에서 헷갈린다.
     여기가 화면에서 유일하게 색을 쓰는 조작 단추다. 나머지는 흑백으로 두고
     이 하나만 살린다(경고색과는 다른 색이어야 한다 — 경고로 읽히면 안 된다). */
  .theme-btn[data-t="auto"] {color:var(--ic-auto)}
  .theme-btn[data-t="dark"] {color:var(--ic-dark)}
  .theme-btn[data-t="light"]{color:var(--ic-light)}
  .theme-btn:hover{border-color:currentColor}
  .capturing .theme-btn{display:none}   /* 사진에는 조작 단추가 안 나온다 */
  .branch-btn{margin-left:auto;appearance:none;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font:inherit;font-weight:700;font-size:12.5px;border-radius:999px;padding:6px 14px;cursor:pointer;letter-spacing:-.01em;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
  .branch-btn::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--jade)}
  .branch-btn::after{content:'⇄';font-size:12px;color:var(--mute);margin-left:1px}
  .branch-btn:hover{border-color:var(--ink)}
  .branch-btn.locked{pointer-events:none}
  .branch-btn.locked::after{content:''}   /* 지점 전용 코드: 전환 화살표 숨김 */
  /* 눌러서 고르는 작은 목록 — 지점 고르기, 시트 불러오기 범위 고르기 */
  .branch-pick,.pick-menu{position:fixed;z-index:220;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:5px;min-width:132px;box-shadow:0 14px 34px -10px rgba(0,0,0,.28)}
  .branch-pick button,.pick-menu button{display:block;width:100%;appearance:none;border:0;background:none;
    font:inherit;font-size:13px;font-weight:600;color:var(--ink);text-align:left;
    padding:8px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
  .branch-pick button:hover,.pick-menu button:hover{background:var(--paper-2)}
  .branch-pick button.on{color:var(--jade)}
  .branch-pick button.on::after{content:'✓';float:right;font-weight:700}
  .pick-menu .sub{display:block;font-weight:500;font-size:11.5px;color:var(--mute);margin-top:1px}
  /* 기간 고르기 — 날짜는 손으로 적는 것보다 달력에서 짚는 게 빠르고 덜 틀린다 */
  .range-dim{position:fixed;inset:0;z-index:230;background:rgba(10,10,10,.35);display:flex;align-items:flex-start;justify-content:center}
  .range-box{width:min(360px,92vw);margin-top:14vh;background:var(--card);border-radius:16px;padding:20px 20px 16px;box-shadow:0 24px 60px -12px rgba(0,0,0,.35)}
  .range-box h1{font-size:15.5px;font-weight:800;margin:0 0 3px}
  .range-box .rb-sub{color:var(--mute);font-size:12.5px;margin:0 0 15px}
  .range-box label{display:block;font-size:11.5px;font-weight:700;color:var(--mute);margin-bottom:5px;letter-spacing:.02em}
  .range-box .rb-two{display:flex;gap:9px;align-items:flex-end}
  .range-box .rb-two > div{flex:1;min-width:0}
  .range-box .rb-tilde{padding-bottom:11px;color:var(--mute);font-weight:700}
  .range-box input[type=date]{width:100%;box-sizing:border-box;appearance:none;border:1px solid var(--line);
    border-radius:10px;padding:9px 10px;font:inherit;font-size:13.5px;color:var(--ink);background:var(--card);
    font-variant-numeric:tabular-nums}
  .range-box input[type=date]:focus{outline:none;border-color:var(--jade);background:var(--jade-softer)}
  .range-box .rb-quick{display:flex;gap:6px;flex-wrap:wrap;margin:11px 0 0}
  .range-box .rb-quick button{appearance:none;border:1px solid var(--line);background:var(--card);font:inherit;
    font-size:12px;font-weight:700;color:var(--ink-2);border-radius:999px;padding:6px 11px;cursor:pointer}
  .range-box .rb-quick button:hover{border-color:var(--jade);color:var(--jade)}
  .range-box .rb-count{margin:13px 0 0;font-size:12.5px;color:var(--mute);min-height:18px}
  .range-box .rb-count b{color:var(--ink)}
  .range-box .rb-count.bad{color:var(--pat)}
  .range-box .rb-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:15px}
  /* 기간 불러오기 달력 (여러 날 콕콕 집기) */
  .cal-nav{display:flex;align-items:center;justify-content:space-between;margin:4px 0 8px}
  .cal-mon{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
  .cal-mv{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
    width:32px;height:32px;border-radius:9px;font-size:17px;font-weight:700;line-height:1;cursor:pointer}
  .cal-mv:hover{border-color:var(--jade);color:var(--jade)}
  .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
  .cal-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--mute);padding:2px 0}
  .cal-dow .sun{color:var(--pat)} .cal-dow .sat{color:var(--toss)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .cal-cell{appearance:none;border:1px solid transparent;background:none;color:var(--ink);
    aspect-ratio:1/1;border-radius:9px;font:inherit;font-size:13px;font-weight:600;
    font-variant-numeric:tabular-nums;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .cal-cell.pad{visibility:hidden;pointer-events:none}
  .cal-cell:hover:not(.on):not(:disabled){background:var(--paper-2)}
  .cal-cell.sun{color:var(--pat)} .cal-cell.sat{color:var(--toss)}
  .cal-cell.today{border-color:var(--line)}
  .cal-cell.on{background:var(--jade);border-color:var(--jade);color:var(--paper)}
  .cal-cell:disabled{color:var(--line);cursor:default}
  /* 매출 그래프 커서 표시 */
  #rpChart{position:relative}
  .rp-tip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:var(--on-ink);
    border-radius:9px;padding:7px 10px;font-size:12px;font-weight:600;white-space:nowrap;
    box-shadow:0 6px 18px -6px rgba(0,0,0,.4);transform:translate(-50%,-115%)}
  .rp-tip b{display:block;font-size:14px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
  .rp-tip small{color:#C9D2DD;font-weight:600}
  .rp-hit{cursor:pointer}
  rect[data-bar].on{filter:brightness(1.25)}
  /* 잠금이 꺼졌을 때 띄우는 경고 띠 — 조용히 열려 있는 것이 가장 위험하다 */
  .lockwarn{position:sticky;top:0;z-index:60;background:var(--bad-soft);color:var(--bad);
    font-size:12.5px;font-weight:700;line-height:1.5;padding:9px 22px;text-align:center;
    border-bottom:1px solid var(--bad)}
  .lockwarn b{font-weight:800}
  .lockwarn small{display:block;font-weight:600;color:var(--bad);opacity:.85;font-size:11.5px;margin-top:2px}
  .capturing .lockwarn{display:none}   /* 설정 경고는 기록이 아니다 */
  /* 마스터 전용: 지점 코드 관리 */
  .code-admin-btn{margin-left:8px;appearance:none;border:1px solid var(--line);background:var(--card);color:var(--mute);font:inherit;font-weight:700;font-size:11.5px;border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
  .code-admin-btn:hover{color:var(--ink);border-color:var(--ink)}
  /* 오버레이 자체가 세로로 스크롤된다 — 박스가 화면보다 길어도 끝까지 볼 수 있게.
     내용이 늘어(제빵 채우기 등) 화면을 넘겼는데 스크롤이 없어 아래가 잘렸었다. */
  .code-admin{position:fixed;inset:0;z-index:210;background:rgba(10,10,10,.35);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:12vh 0 24px;-webkit-overflow-scrolling:touch}
  .code-admin .ca-box{width:min(420px,92vw);margin:0 auto;background:var(--card);border-radius:16px;padding:22px 22px 18px;box-shadow:0 24px 60px -12px rgba(0,0,0,.35)}
  .code-admin h1{font-size:16px;font-weight:800;margin:0 0 4px}
  .code-admin p{color:var(--mute);font-size:12.5px;margin:0 0 14px;line-height:1.55}
  .code-admin .ca-row{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;margin-bottom:10px}
  .code-admin .ca-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
  .code-admin .ca-code{font-variant-numeric:tabular-nums;letter-spacing:.12em;font-weight:700}
  .code-admin .ca-code i{color:var(--mute);font-weight:500;letter-spacing:0}
  .code-admin .ca-btns{display:flex;gap:8px}
  .code-admin .ca-btns button{appearance:none;border:1px solid var(--line);background:var(--card);font:inherit;font-size:12.5px;font-weight:700;border-radius:8px;padding:7px 13px;cursor:pointer}
  .code-admin .ca-btns button:hover:not(:disabled){border-color:var(--ink)}
  .code-admin .ca-btns button:disabled{opacity:.4;cursor:default}
  .code-admin .ca-new{margin-top:10px;background:var(--paper-2);border-radius:9px;padding:9px 11px;font-size:12.5px}
  .code-admin .ca-new b{letter-spacing:.15em}
  .code-admin .ca-new button{margin-left:6px;font-size:11px;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:2px 8px;cursor:pointer}
  .code-admin .ca-new small{color:var(--mute)}
  .code-admin .ca-close{width:100%;margin-top:6px;appearance:none;border:0;background:var(--ink);color:var(--on-ink);font:inherit;font-weight:700;font-size:13.5px;border-radius:10px;padding:11px;cursor:pointer}
  .code-admin .sm-add{display:flex;gap:6px}
  .code-admin .sm-add input,.code-admin .sm-add select{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
  .code-admin .sm-add input{flex:1;min-width:0}
  .code-admin .sm-add button{border:0;background:var(--ink);color:var(--on-ink);font:inherit;font-weight:700;font-size:13px;border-radius:8px;padding:8px 14px;cursor:pointer}
  .code-admin .sm-row{border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;margin-bottom:8px}
  .code-admin .sm-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .code-admin .sm-b{font-size:11px;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
  .code-admin .sm-b.mst{color:var(--on-ink);background:var(--ink);border-color:var(--ink)}
  .code-admin .sm-b.none{color:#C0392B;border-color:#F0C8C2}
  .code-admin .sm-r{display:flex;align-items:center;gap:6px;margin-left:auto}
  .code-admin .sm-r button{border:1px solid var(--line);background:var(--card);font:inherit;font-size:12px;font-weight:700;border-radius:7px;padding:5px 10px;cursor:pointer}
  .code-admin .sm-perm{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2);font-size:12.5px;color:var(--ink-2)}
  .code-admin .sm-perm label{display:flex;align-items:center;gap:5px;cursor:pointer}
  .code-admin .sm-perm input:disabled+*,.code-admin .sm-perm label:has(input:disabled){opacity:.45}
  .code-admin .sm-fresh{font-size:11px;color:#2AC1BC;font-weight:700;margin-top:7px}
  .brand .mark{font-family:"Pretendard",system-ui,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
  .brand .sub{font-size:10.5px;letter-spacing:.16em;color:var(--mute);font-weight:600}
  .brand .dot{width:6px;height:6px;border-radius:50%;background:var(--jade-2);align-self:center}
  .top-spacer{flex:1}
  .who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
  .who .ava{width:28px;height:28px;border-radius:50%;background:var(--jade);color:var(--on-ink);display:grid;place-items:center;font-size:11px;font-weight:700}

  /* ---------- Date strip ---------- */
  .datestrip{display:flex;align-items:center;gap:12px;margin:22px 0 4px}
  .eyebrow{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--mute);text-transform:uppercase}
  .datepick{
    flex:1;display:flex;align-items:center;justify-content:space-between;
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:9px 14px;box-shadow:var(--shadow);max-width:340px;
  }
  .datepick .d{font-weight:600;font-size:14.5px}
  .datepick button{
    border:0;background:transparent;color:var(--mute);font-size:14px;cursor:pointer;
    width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  }
  .datepick button:hover{background:var(--jade-soft);color:var(--jade)}
  /* 날짜 텍스트(버튼) — ◀▶ 정사각 스타일에서 제외 */
  .datepick button#theDate.d{width:auto;height:auto;display:inline-block;place-items:unset;color:var(--ink);font-weight:600;font-size:14.5px;padding:4px 10px;border-radius:8px}
  .datepick button#theDate.d:hover{background:var(--paper-2);color:var(--ink)}
  .stamp{font-size:11.5px;color:var(--mute);margin-left:2px}
  .stamp b{color:var(--ink-2);font-weight:600}
  /* ---------- 달력 ---------- */
  .cal{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:60;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 14px 36px -14px rgba(0,0,0,.28);padding:12px;width:286px}
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .cal-head b{font-size:13px;font-weight:700;letter-spacing:.02em}
  .cal-head button{border:1px solid var(--line);background:var(--card);width:28px;height:28px;border-radius:8px;cursor:pointer;color:var(--ink-2);font-size:14px;line-height:1}
  .cal-head button:hover{border-color:var(--ink);color:var(--ink)}
  .cal-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
  .cal-wk span{text-align:center;font-size:10.5px;color:var(--mute);font-weight:700;padding:3px 0}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .cal-d{display:flex;align-items:center;justify-content:center;height:34px;border:0;background:transparent;border-radius:8px;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
  .cal-d:hover:not(.dis):not(.empty){background:var(--paper-2)}
  .cal-d.empty{visibility:hidden;cursor:default}
  .cal-d.sel{background:var(--ink);color:var(--on-ink);font-weight:700}
  .cal-d.today:not(.sel){box-shadow:inset 0 0 0 1.5px var(--line)}
  .cal-d.dis{color:var(--mute);opacity:.45;cursor:default}

  /* ---------- Hero ---------- */
  .hero{
    margin-top:14px;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
    display:grid;grid-template-columns:1.05fr 1fr;
  }
  .hero .left{padding:26px 28px;border-right:1px solid var(--line-2)}
  .hero .label{font-size:12.5px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:7px}
  .hero .label .tag{font-size:10.5px;color:var(--jade);background:var(--jade-soft);padding:2px 7px;border-radius:999px;font-weight:700;letter-spacing:.02em}
  .bignum{font-size:clamp(34px,6vw,46px);font-weight:800;letter-spacing:-.03em;margin:6px 0 2px;line-height:1}
  .bignum .won{font-size:.5em;font-weight:700;color:var(--ink-2);margin-left:4px}
  /* 매출 리포트 */
  .rp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .rp-tabs{display:flex;gap:6px;flex-wrap:wrap}
  .rp-t{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:700;border-radius:999px;padding:7px 14px;cursor:pointer}
  .rp-t.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
  /* 상품분석 머리글 클릭 정렬 — 누른 열은 진하게 + 화살표 */
  #prodTable th.psort{cursor:pointer;user-select:none;white-space:nowrap}
  #prodTable th.psort:hover{color:var(--ink)}
  #prodTable th.psort.on{color:var(--ink);font-weight:800}
  #prodTable th.psort .ar{display:inline-block;width:0;margin-left:3px;font-size:10px;color:var(--ink-2)}
  .rp-range{display:flex;align-items:center;gap:8px}
  .rp-nav{appearance:none;border:1px solid var(--line);background:var(--card);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:11px;color:var(--ink-2)}
  .rp-nav:disabled{opacity:.35;cursor:default}
  .rp-label{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;min-width:150px;text-align:center}
  .rp-custom{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
  .rp-custom[hidden]{display:none}   /* hidden 속성이 display:flex에 묻히지 않게 */
  /* 재고 탭 드롭다운 (재고·발주·월 합계·임원진 폐기) */
  .tab .caret{font-size:10px;color:var(--mute);margin-left:1px}
  .tab[aria-selected="true"] .caret{color:var(--ink-2)}
  .inv-menu{position:fixed;z-index:80;background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 14px 34px -10px rgba(0,0,0,.22);padding:6px;min-width:180px;display:flex;flex-direction:column;gap:2px}
  .inv-menu[hidden]{display:none}
  .inv-menu button{appearance:none;border:0;background:transparent;text-align:left;cursor:pointer;
    font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);border-radius:8px;padding:10px 12px}
  .inv-menu button:hover{background:var(--paper-2);color:var(--ink)}
  .inv-menu button.on{background:var(--ink);color:var(--on-ink);font-weight:700}
  /* 지출·매입 */
  #exTable td{padding:7px 8px}
  .exin{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;background:var(--card);max-width:100%}
  .exin:focus{outline:none;border-color:var(--ink)}
  select.exin{padding:6px 4px}
  input.exin.tnum{text-align:right;font-variant-numeric:tabular-nums}
  #exTable td.rcpt{text-align:center;white-space:nowrap}
  #exTable td.rcpt img{width:34px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--line);vertical-align:middle}
  .upl{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px dashed var(--line);
    border-radius:7px;color:var(--mute);cursor:pointer;font-weight:700}
  .upl:hover{border-color:var(--ink);color:var(--ink)}
  .xbtn{appearance:none;border:0;background:transparent;cursor:pointer;font-size:13px;color:var(--mute);padding:4px 6px}
  .xbtn:hover{color:var(--pat)}
  #exTable tfoot .rp-sum td{padding:11px 8px;text-align:right;white-space:nowrap;border-top:2px solid var(--ink);
    border-bottom:0;font-weight:800;background:var(--paper-2);font-variant-numeric:tabular-nums}
  #exTable tfoot .rp-sum td.nm{text-align:left}
  /* tfoot에도 tbody와 같은 셀 규칙(패딩·우측정렬)을 적용해 열이 어긋나지 않게 */
  #rpTable tfoot .rp-sum td{padding:11px 10px;text-align:right;white-space:nowrap;
    border-top:2px solid var(--ink);border-bottom:0;font-weight:800;background:var(--paper-2);
    font-variant-numeric:tabular-nums}
  #rpTable tfoot .rp-sum td.nm{text-align:left}
  #rpTable tfoot .rp-sum .dim{font-weight:600}
  .rp-custom input{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:9px;padding:8px 10px}
  .rp-kpi{padding:15px 16px}
  .rp-kpi .k{font-size:12px;color:var(--mute);font-weight:700}
  .rp-kpi .v{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:5px 0 2px}
  .rp-kpi .s{font-size:12px;color:var(--mute)}
  .rp-kpi .s.up{color:var(--ok);font-weight:700}
  .rp-kpi .s.down{color:var(--bad);font-weight:700}
  /* ── 토스식 매출 요약 (헤드라인 + 실매출·주문·취소·할인) ── */
  .rp-head{display:flex;align-items:center;gap:9px;margin-top:16px;padding:14px 16px;border-radius:14px;
    background:color-mix(in srgb, var(--toss) 10%, var(--card));border:1px solid color-mix(in srgb, var(--toss) 22%, var(--line));
    font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .rp-head::before{content:"📈";font-size:16px;line-height:1}
  .rp-summary{display:grid;grid-template-columns:1.35fr 1.35fr 1fr 1fr;gap:12px;margin-top:14px}
  .rp-cell{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 17px;min-width:0}
  .rp-cell .k{font-size:12px;color:var(--mute);font-weight:700}
  .rp-cell .v{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:6px 0 3px;white-space:nowrap}
  .rp-cell .v.ord{white-space:normal}   /* 주문건/건당만 칸이 좁으면 슬래시에서 줄바꿈 */
  .rp-cell.sm .v{font-size:19px}
  .rp-cell .v .sl{color:var(--gold);font-weight:600;margin:0 3px}
  .rp-cell .v.neg{color:var(--bad)}
  .rp-cell .s{font-size:12px;color:var(--mute);font-weight:600}
  .rp-cell .s.up{color:var(--ok);font-weight:700}
  .rp-cell .s.down{color:var(--bad);font-weight:700}
  @media (max-width:820px){ .rp-summary{grid-template-columns:1fr 1fr} .rp-cell .v{font-size:19px} .rp-cell.sm .v{font-size:18px} }
  /* ── 상품 매출 순위 (정렬 가능한 머리글) ── */
  #rpProdTable.rp-prod th.psort{cursor:pointer;user-select:none;white-space:nowrap;text-align:right}
  #rpProdTable.rp-prod th.psort:hover{color:var(--ink)}
  #rpProdTable.rp-prod th.psort.on{color:var(--ink);font-weight:800}
  #rpProdTable.rp-prod th.psort .ar{display:inline-block;width:0;margin-left:3px;font-size:10px;color:var(--ink-2)}
  #rpProdTable.rp-prod td.tnum{text-align:right;font-variant-numeric:tabular-nums}
  #rpProdTable.rp-prod td.nm .rk{display:inline-block;min-width:18px;color:var(--mute);font-weight:700;margin-right:6px}
  .grid.g-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  @media (max-width:820px){ .grid.g-4{grid-template-columns:repeat(2,1fr)} .rp-label{min-width:120px;font-size:13px} }
  /* 이번 달 누적 — 실매출과 같은 크기로 둔다. 하루치와 한 달치는 둘 다 마감 때
     보는 숫자라 한쪽만 작으면 다른 쪽을 찾느라 눈이 두 번 움직인다.

     라벨('08월 누적 · 17일')은 숫자 위 줄에 둔다. 옆에 붙이면 큰 숫자가 라벨 폭만큼
     오른쪽으로 밀려 실매출과 왼쪽 끝이 어긋난다 — 큰 숫자 둘이 들쭉날쭉하면 어느
     쪽이 큰지가 길이가 아니라 시작 위치로 읽혀 헷갈린다. 실매출도 라벨이 위에 있어
     이렇게 두면 두 덩어리의 생김새가 같아진다.

     마감 사진(칸 438px)에서도 한 줄에 들어가는 것을 확인했다. */
  .mtd{margin:10px 0 0;font-size:12.5px;color:var(--mute);font-weight:600;
       font-variant-numeric:tabular-nums;white-space:nowrap;
       display:grid;grid-template-columns:auto auto 1fr}
  .mtd > span{grid-row:1;align-self:end}
  .mtd .d{margin-left:5px}
  .mtd b{grid-row:2;grid-column:1/-1;
         color:var(--ink);font-weight:800;font-size:clamp(34px,6vw,46px);letter-spacing:-.03em;line-height:1.15}
  .mtd b i{font-size:.5em;font-weight:700;font-style:normal;color:var(--ink-2);margin-left:4px}
  .ledger{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
  .ledger .row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13px}
  .ledger .row span{color:var(--mute)}
  .ledger .row b{font-weight:700;color:var(--ink)}
  .ledger .neg b{color:var(--pat)}
  .hero .right{padding:22px 24px;display:flex;flex-direction:column}
  .mini-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .mini-h .t{font-size:12px;font-weight:700;color:var(--ink-2)}
  .legend2{display:flex;gap:12px;font-size:11px;color:var(--mute)}
  .legend2 i{display:inline-block;width:14px;height:2.5px;border-radius:2px;margin-right:4px;vertical-align:middle}
  .chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
  .chip{background:var(--paper-2);border:1px solid var(--line-2);border-radius:11px;padding:9px 10px;text-align:center}
  .chip .v{font-size:17px;font-weight:800;letter-spacing:-.02em}
  .chip .k{font-size:10.5px;color:var(--mute);margin-top:1px}
  .chip.pat .v{color:var(--pat)}
  .chip.pat.zeroed .v{color:var(--ink)}   /* 환불 0건은 경고가 아니다 */
  .chip.jade .v{color:var(--jade)}

  /* ---------- Tabs ---------- */
  nav.tabs{position:sticky;top:60px;z-index:30;background:var(--paper);border-bottom:1px solid var(--line);margin-top:26px}
  .tabs-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
  .tabs-inner::-webkit-scrollbar{display:none}
  .tab{
    appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;
    padding:14px 6px;margin-right:18px;font-size:14.5px;font-weight:600;color:var(--mute);
    border-bottom:2px solid transparent;letter-spacing:-.01em;
  }
  .tab small{font-family:"Pretendard",system-ui,sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.16em;display:block;color:var(--mute);margin-bottom:2px;text-transform:uppercase}
  .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
  .tab[aria-selected="true"] small{color:var(--ink-2)}

  /* ---------- Panels / cards ---------- */
  main{padding:26px 0 80px}
  .panel{display:none}
  .panel.on{display:block;animation:fade .35s ease}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .grid{display:grid;gap:16px}
  /* minmax(0,…) 없는 1fr 은 '내용보다 좁아지지 않는' 칸이 된다. 안 줄어드는 것이
     하나라도 있으면 칸이 스스로 넓어져 두 칸 합이 화면보다 커지고, 화면에서는
     가로 스크롤로 덮이지만 마감 사진에는 오른쪽이 잘려 나온다(근무표의 퇴근·
     시간이 통째로 사라졌다). 0 을 최소로 박아 칸이 화면을 못 넘게 한다. */
  .g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
  .card > h3{margin:0 0 2px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
  .card > h3 .eb{font-family:"Pretendard",system-ui,sans-serif;font-size:9.5px;letter-spacing:.16em;color:var(--mute);font-weight:700;text-transform:uppercase}
  .card .csub{font-size:12px;color:var(--mute);margin:0 0 16px}
  .card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
  .card-head .r{text-align:right}
  .card-head .r .v{font-size:18px;font-weight:800}
  .card-head .r .k{font-size:11px;color:var(--mute)}

  /* ---------- Bars (결제수단) ---------- */
  .bars{display:flex;flex-direction:column;gap:13px}
  .bar .bl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
  .bar .bl .nm{font-weight:600;display:flex;align-items:center;gap:7px}
  .bar .bl .nm .cnt{font-size:11px;color:var(--mute);font-weight:500}
  .bar .bl .amt{font-weight:700}
  .track{height:8px;border-radius:6px;background:var(--line-2);overflow:hidden}
  .fill{height:100%;border-radius:6px;background:var(--jade)}
  .fill.c2{background:var(--jade-2)}
  .fill.c3{background:var(--gold)}

  /* ---------- Deposit list ---------- */
  .dlist{display:flex;flex-direction:column}
  .dlist .di{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px}
  .dlist .di:last-child{border-bottom:0}
  .dlist .rk{width:18px;color:var(--mute);font-size:11px;font-weight:700;text-align:center}
  .dlist .nm{flex:1;font-weight:600}
  .dlist .cnt{font-size:11px;color:var(--mute)}
  .dlist .amt{font-weight:700;width:88px;text-align:right}
  /* 마감 사진 캡처: 시스템 폰트로 대체돼 폭이 넓어져도 라벨·단위가 쪼개지지 않도록(줄바꿈 금지) */
  .card > h3 .eb{white-space:nowrap;flex-shrink:0}
  .bar .bl .amt{white-space:nowrap;flex-shrink:0}
  .bar .bl .nm .cnt{white-space:nowrap}
  .dlist .nm,.dlist .cnt,.dlist .amt{white-space:nowrap}
  .dlist .cnt{flex-shrink:0}
  .bignum .won,.eyebrow,.ratio-card .big{white-space:nowrap}
  .ledger .row span,.ledger .row b{white-space:nowrap}   /* 캡처 시 '3,705,200 / 원' 줄바꿈 방지 */
  .hero .label .tag{white-space:nowrap}
  /* 마감 사진 촬영 중: 캡처 엔진이 쓰는 시스템 폰트로 잠시 전환해 화면=사진 레이아웃 일치 */
  .capturing, .capturing *{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif !important}
  /* 촬영 중 매출상세는 넓게 펼쳐 시간대 표가 잘리지 않게 */
  .capturing .hero,.capturing #sales{width:860px;max-width:860px}
  .capturing #sales .tbl-scroll{overflow:visible}
  /* 마감 사진은 표를 통째로 펼쳐 찍으므로 고정 열이 필요 없다 — 캡처 엔진에서 어긋날 수 있어 끈다 */
  .capturing th:first-child,.capturing td:first-child{position:static !important;box-shadow:none !important}
  /* 조작용 버튼은 기록이 아니다 — 사진에는 남기지 않는다
     (시트 불러오기·편집·저장됨·동기화 표시, 줄 추가, 삭제 칸) */
  .capturing .card-bar .rhs,
  .capturing .add-row,
  .capturing .delcol,
  .capturing .row-del,
  .capturing .memo-add,
  .capturing .stockcount{display:none !important}
  /* 안 적은 줄·안 적은 카드는 기록이 아니다 — 사진에는 남기지 않는다.
     특히 대공원점처럼 토스가 없는 지점은 선물세트·환불·디톡스가 늘 비어 있어,
     그대로 두면 이름만 있는 빈 표가 사진 몇 장을 차지한다. */
  .capturing .memo-row.blank,
  .capturing .mini.allblank{display:none !important}
  /* 사진에서 제빵은 뺀다 — 생산일지에 같은 내용이 더 자세히 들어간다.
     단, 생산일지를 쓰는 지점(bakes)만. 굽지 않는 지점은 여기가 유일한 기록이라 남긴다. */
  .capturing #stockTable.bakes tr.bkrow,
  .capturing #stockTable.bakes tr.bkhead,
  .capturing #stockTable.bakes tr.capskip{display:none !important}
  /* 시간대별 상세 표 (오늘 vs 전주) */
  /* 시간대별 그래프 커서/터치 툴팁 */
  #hourly .hbar{cursor:pointer}
  .hchart-tip{position:absolute;z-index:20;pointer-events:none;background:var(--ink);color:var(--on-ink);
    border-radius:9px;padding:8px 11px;font-size:11.5px;line-height:1.5;white-space:nowrap;
    box-shadow:0 6px 18px rgba(0,0,0,.22);min-width:118px}
  .hchart-tip[hidden]{display:none}
  .hchart-tip b{display:block;font-size:12px;font-weight:800;margin-bottom:3px}
  .hchart-tip .tl{display:flex;align-items:center;gap:6px}
  .hchart-tip .tl i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
  .hchart-tip .tl i.today{background:var(--toss)}   /* 오늘 = 토스 파랑 (그래프 라인과 맞춤) */
  .hchart-tip .tl i.prev{background:var(--gold)}    /* 전주 = 회색 */
  .hchart-tip .tl em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;margin-left:auto;padding-left:8px}
  /* 제빵 월매출 품목별 분해 (시트 대조용) */
  .bi-toggle{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font:inherit;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;cursor:pointer;margin-left:6px;vertical-align:1px}
  .bi-toggle:hover{border-color:var(--ink);color:var(--ink)}
  .bi-box{margin:4px 0 2px;border-top:1px dashed var(--line-2);padding-top:8px}
  .bi-box[hidden]{display:none}
  .bi-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0;border-top:1px solid var(--line-2)}
  .bi-row:first-child{border-top:0}
  .bi-row .n{color:var(--ink-2)}
  .bi-row .v{font-weight:700;font-variant-numeric:tabular-nums}
  .bi-row.sum{border-top:1.5px solid var(--ink);font-weight:800;margin-top:2px;padding-top:7px}
  .bi-note{font-size:11px;color:var(--mute);margin-top:7px;line-height:1.5}
  .hourly-tbl{border-collapse:collapse;font-size:10.5px;white-space:nowrap}
  .hourly-tbl th{font-weight:700;color:var(--mute);padding:5px 7px;border-bottom:1px solid var(--line);text-align:right}
  .hourly-tbl th.l,.hourly-tbl td.l{text-align:left;font-weight:700;color:var(--ink-2)}
  .hourly-tbl td{padding:5px 7px;text-align:right;border-bottom:1px solid var(--line-2);font-variant-numeric:tabular-nums}
  .hourly-tbl tr.prev td{color:var(--mute)}

  /* ---------- Donut ---------- */
  .donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .donut{width:152px;height:152px;border-radius:50%;flex:none;position:relative}
  .donut::after{content:"";position:absolute;inset:30px;background:var(--card);border-radius:50%}
  .donut .dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;z-index:1;text-align:center;line-height:1.2}
  .donut .dc .v{font-size:18px;font-weight:800}
  .donut .dc .k{font-size:10px;color:var(--mute)}
  .dleg{flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px}
  .dleg .li{display:flex;align-items:center;gap:9px;font-size:12.5px}
  .dleg .li i{width:9px;height:9px;border-radius:3px;flex:none}
  .dleg .li .nm{flex:1;font-weight:600}
  .dleg .li .pc{color:var(--mute);font-weight:700}

  /* ---------- Tables ---------- */
  .tbl-scroll{overflow-x:auto;margin:0 -22px;padding:0 22px}
  table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
  thead th{
    text-align:right;font-weight:600;color:var(--mute);font-size:11.5px;
    padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.01em;
  }
  thead th:first-child,tbody td:first-child{text-align:left}
  thead th.l{text-align:left}
  tbody td{padding:9px 10px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap}
  tbody tr:hover{background:var(--jade-softer)}
  /* 합계(tfoot) 행도 본문과 같은 정렬·패딩. 표를 새로 만들 때마다 어긋나서
     지출·매출리포트에 이어 세 번째 고쳤다 — 이제 공통 규칙으로 둔다. */
  tfoot td{padding:9px 10px;text-align:right;white-space:nowrap}
  tfoot td.l,tfoot td.nm{text-align:left}
  /* 2단 머리글의 아랫줄 첫 칸이 'thead th:first-child' 규칙에 걸려 왼쪽으로 밀리던 것 */
  thead tr + tr th:first-child{text-align:right}
  thead tr + tr th.l:first-child{text-align:left}

  /* 품목 열은 줄어들지 않고, 옆으로 밀어도 왼쪽에 붙어 있는다.
     휴대폰(375px)에서 품목 칸이 27px까지 눌려 'ORM 쌀식빵'이 한 글자만 보였고,
     숫자를 고치려고 오른쪽으로 밀면 어느 품목인지조차 알 수 없었다. */
  #stockTable th:first-child,#stockTable td:first-child:not([colspan]),
  #bakeTable th:first-child,#bakeTable td:first-child:not([colspan]){
    position:sticky;left:0;z-index:2;
    min-width:196px;background:var(--paper);
    /* 오른쪽으로 밀면 숫자들이 이 칸 밑으로 지나간다 —
       그림자로 경계를 만들어 '가려진 것'이지 '글자가 깨진 것'이 아님을 보이게 */
    box-shadow:1px 0 0 var(--line), 7px 0 7px -7px rgba(0,0,0,.22);
  }
  #stockTable thead th:first-child,
  #bakeTable thead th:first-child{z-index:3;background:var(--paper)}
  /* 근무표는 순번+근무자 두 열을 함께 고정한다 (근무자만 고정하면 순번 자리를 덮는다) */
  #wkTable th:nth-child(1),#wkTable td:nth-child(1):not([colspan]),
  #wkTable th:nth-child(2),#wkTable td:nth-child(2):not([colspan]){
    position:sticky;background:var(--paper);z-index:2}
  #wkTable th:nth-child(1),#wkTable td:nth-child(1):not([colspan]){left:0;width:38px;min-width:38px;padding-right:2px}
  #wkTable th:nth-child(2),#wkTable td:nth-child(2):not([colspan]){
    left:38px;min-width:110px;box-shadow:1px 0 0 var(--line), 7px 0 7px -7px rgba(0,0,0,.22)}
  #wkTable thead th:nth-child(1),#wkTable thead th:nth-child(2){z-index:3}
  #wkTable tbody tr:hover td:nth-child(1),#wkTable tbody tr:hover td:nth-child(2){background:var(--jade-softer)}
  /* 주차마다 4열씩 붙는 넓은 표 — 주차 경계에 선을 넣어 어느 주인지 놓치지 않게 */
  /* 서버에 못 올라간 날이 있으면 화면 아래에 계속 띄운다 — 놓치면 그 날이 사라진다 */
  .pendbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:200;display:flex;align-items:center;
    gap:10px;flex-wrap:wrap;background:var(--warn-soft);border:1px solid var(--warn);
    color:var(--warn);border-radius:12px;padding:11px 14px;font-size:13px;font-weight:700;
    box-shadow:0 6px 24px rgba(0,0,0,.12)}
  .pendbar span{font-weight:600;color:var(--ink-2);font-size:12px}
  .pendbar button{margin-left:auto;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
    border:0;border-radius:9px;padding:7px 13px;background:var(--warn);color:#fff}
  .capturing .pendbar{display:none}
  .wk-also{font-size:10.5px;font-weight:700;color:var(--ink-2);background:var(--paper-2);
           border-radius:20px;padding:2px 7px;margin-left:6px;white-space:nowrap;letter-spacing:.01em}
  #wkTable th.wk-grp{text-align:center;border-left:2px solid var(--line)}
  #wkTable td.wk-c1,#wkTable th.wk-grp{border-left:2px solid var(--line)}
  #wkTable thead tr:first-child th{border-bottom:0}
  #wkTable{min-width:900px}
  tbody tr:hover td:first-child:not([colspan]){background:var(--jade-softer)}
  #stockTable td:first-child .cinput{width:100%;min-width:0}

  tbody td .rk{display:inline-block;width:20px;color:var(--mute);font-size:11px;font-weight:700}
  tbody td.nm{font-weight:600;text-align:left}
  .pill{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.6}
  .pill.j{background:var(--jade-soft);color:var(--jade)}
  .pill.p{background:var(--pat-soft);color:var(--pat)}
  .pill.g{background:var(--gold-soft);color:var(--gold)}
  .neg{color:var(--pat);font-weight:700}
  /* 0원짜리는 경고가 아니다 — 빨간색은 실제로 빠져나간 금액에만 */
  .row.neg.zeroed,.row.neg.zeroed b,.neg.zeroed{color:var(--mute);font-weight:600}
  .dim{color:var(--mute)}
  /* 상품 순위 검색 — 품목이 40개가 넘어 원하는 것을 찾으려면 다 펼쳐 훑어야 했다 (사장님 2026-10-03) */
  /* 글자는 16px — 그보다 작으면 아이폰이 칸을 누를 때 화면을 확대해서 또 한 번 튄다 */
  .prod-search{display:block;width:100%;box-sizing:border-box;margin:0 0 10px;padding:9px 12px;font:inherit;font-size:16px;
    border:1px solid var(--line);border-radius:10px;background:var(--paper-2);color:var(--ink);-webkit-appearance:none;appearance:none}
  .prod-search:focus{outline:none;border-color:var(--ink);background:var(--card)}
  .card .csub.prod-found{margin:0 0 10px;min-height:1.5em;color:var(--ink-2);font-weight:600}   /* 늘 한 줄 자리 — 나타났다 사라지면 표가 밀린다 */
  .capturing .prod-search,.capturing .prod-found{display:none}   /* 사진에는 검색 칸이 안 나온다 — 사진은 늘 전체 순위다 */
  .more-btn{display:block;width:100%;margin-top:12px;padding:10px;border:1px solid var(--line);background:var(--paper-2);border-radius:10px;color:var(--ink-2);font-weight:600;font-size:13px;cursor:pointer}
  .more-btn:hover{background:var(--jade-soft);color:var(--jade);border-color:var(--jade-soft)}
  .hidden-row{display:none}

  /* ---------- Side mini panels ---------- */
  .mini{background:var(--paper-2);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px}
  .mini h4{margin:0 0 10px;font-size:12.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
  .mini h4 .tg{font-size:10px;color:var(--jade);background:var(--card);border:1px solid var(--line-2);padding:1px 7px;border-radius:999px}
  /* 위계: 라벨은 물러나고 숫자가 앞으로 */
  .kv{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0}
  .kv span{color:var(--mute)}
  .kv b{font-weight:700;color:var(--ink)}
  .kv .note{color:var(--mute);font-size:11px;font-weight:400}

  .ratio-card{background:var(--card);color:var(--ink)}
  .ratio-card h3{color:var(--ink)}
  .ratio-card .big{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1;margin:6px 0 2px}
  .ratio-card .rsub{color:var(--mute);font-size:12px}
  .ratio-card .rrow{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-top:1px solid var(--line-2);margin-top:10px}
  .ratio-card .rrow:first-of-type{border-top:0;margin-top:14px}
  .ratio-card .rrow b{font-weight:700}

  /* 안전재고 미달은 상태 칸 글씨로만 알린다 — 줄 색·빨간불은 쓰지 않는다.
     시트 기준으로는 미달 품목이 워낙 많아 빨갛게 칠하면 전부 경고처럼 보인다. */
  /* 상태 칩 — 표에서 눈으로 훑을 때 걸리도록 */
  .stat{display:inline-block;font-size:10.5px;font-weight:700;line-height:1.7;padding:2px 8px;border-radius:999px;white-space:nowrap}
  .stat.ok{background:var(--ok-soft);color:var(--ok)}
  .stat.warn{background:var(--warn-soft);color:var(--warn)}
  .stat.bad{background:var(--bad-soft);color:var(--bad)}
  .stat.mute{background:var(--paper-2);color:var(--mute)}
  /* 상태를 고르는 select 자체에 색을 입혀 표 전체가 한눈에 스캔되게 */
  select.exin.s-ok{background:var(--ok-soft);color:var(--ok);border-color:transparent;font-weight:700}
  select.exin.s-warn{background:var(--warn-soft);color:var(--warn);border-color:transparent;font-weight:700}
  select.exin.s-bad{background:var(--bad-soft);color:var(--bad);border-color:transparent;font-weight:700}
  /* KPI 숫자: 값이 있을 때만 색이 붙어 '지금 볼 것'이 드러남 */
  .rp-kpi .v.is-warn{color:var(--warn)}
  .rp-kpi .v.is-bad{color:var(--bad)}
  .ok-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--jade-2);margin-right:6px}
  .warn-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pat);margin-right:6px}

  /* ---------- editable inventory ---------- */
  .card-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
  .card-bar .lhs h3{margin:0}
  .card-bar .rhs{display:flex;align-items:center;gap:10px}
  .sync{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--mute);background:var(--paper-2);border:1px solid var(--line-2);border-radius:999px;padding:4px 10px}
  .sync i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
  .sync.live i{background:var(--jade-2)}
  /* 서버 연동 성공 시 초록불 */
  .sync.ok i{background:#1FA971;box-shadow:0 0 0 3px rgba(31,169,113,.18)}
  .sync.ok{color:#1FA971;border-color:rgba(31,169,113,.35)}
  .saved{font-size:11px;color:var(--mute)}
  .btn{appearance:none;border:1px solid var(--jade);background:var(--jade);color:var(--on-ink);font-weight:700;font-size:13px;border-radius:10px;padding:9px 16px;cursor:pointer;letter-spacing:-.01em}
  .btn:hover{background:var(--jade-2);border-color:var(--jade-2)}
  .btn:disabled{opacity:.5;cursor:default}
  .btn.ghost{background:transparent;color:var(--jade)}
  .btn.ghost:hover{background:var(--jade-soft)}
  .btn.ghost.on{background:var(--ink);color:var(--on-ink)}  /* 편집 모드 활성 */

  #stockTable.edit td{padding:5px 6px;vertical-align:middle}
  .cinput{
    width:100%;border:1px solid transparent;background:transparent;border-radius:8px;
    font:inherit;color:var(--ink);padding:6px 8px;text-align:right;
    font-variant-numeric:tabular-nums;-moz-appearance:textfield;
  }
  .cinput::-webkit-outer-spin-button,.cinput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .cinput.name{text-align:left;font-weight:600}
  .cinput:hover{background:var(--paper-2)}
  .cinput:focus{outline:none;border-color:var(--jade);background:var(--jade-softer)}
  .cinput.stockv{font-weight:700;text-align:center}
  .cinput.move{text-align:left;font-weight:500;color:var(--ink-2)}
  .cinput.bad{color:var(--pat);font-weight:700}
  /* 생산일지: 열마다 세로 구분선 — 숫자 열이 8개라 줄을 따라 읽다 보면 어느 열인지 놓친다(2026-09-08 사장님).
     가격 3열(원가·유통가·판매가) 뒤와 이동 2열 앞은 조금 진한 선으로 묶음을 나눈다. */
  #bakeTable th,#bakeTable td{border-right:1px solid var(--line-2)}
  #bakeTable th:last-child,#bakeTable td:last-child{border-right:0}
  #bakeTable th:nth-child(4),#bakeTable td:nth-child(4),
  #bakeTable th:nth-child(9),#bakeTable td:nth-child(9){border-right:1px solid var(--line)}
  /* 품목 이름까지 전부 가운데 정렬(2026-09-08 사장님). 세로선 안에서 글자가 한가운데 오게. */
  #bakeTable th,#bakeTable td{text-align:center}
  #bakeTable.edit{min-width:720px}
  #bakeTable.edit input[type="number"].cinput{width:62px}
  #bakeTable.edit input.cinput.move{width:92px}
  .srccell{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;background:var(--jade-softer);white-space:nowrap}
  .srctag{display:inline-block;margin-left:5px;font-size:9px;font-weight:700;color:var(--jade);background:var(--card);border:1px solid var(--jade-soft);border-radius:5px;padding:0 4px;vertical-align:middle;letter-spacing:.02em}
  tr.divider td{background:var(--paper-2);color:var(--mute);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
  /* 구역 머리글: 숫자 칸 라벨은 본문 숫자와 같은 줄에 서도록 오른쪽 정렬 */
  tr.grouphead td{text-align:right;letter-spacing:.02em;font-size:10.5px}
  tr.grouphead td.l{text-align:left;letter-spacing:.14em;color:var(--ink-2)}
  /* 머리글·구역머리글·숫자를 같은 세로선에 세운다.
     한 칸 안에서 글자가 서는 자리가 셋 다 달랐다:
       큰 머리글  칸 여백 10px                       → 오른쪽에서 10px
       구역 머리글 칸 여백 6px                        → 6px
       본문 숫자  칸 여백 6px + input 여백 8px + 투명 테두리 1px → 15px
     9px씩 어긋나 사진에서 숫자가 제목보다 안쪽으로 밀려 보였다.
     보기·사진 모드에서는 input 여백을 걷어내 칸 여백 하나에만 기대게 한다.
     (편집 중에는 그대로 둔다 — 누를 자리가 좁아지면 값을 고치기 불편하다) */
  #stockTable thead th{padding-left:6px;padding-right:6px}
  #stockTable:not(.editing) td > .cinput{padding-left:0;padding-right:0}
  /* 재고 숫자도 다른 숫자 칸처럼 오른쪽에 세운다.
     이 칸만 가운데 정렬이라, 소분/PK 묶음 때문에 넓어진 칸 한가운데에 숫자가 서고
     제목은 오른쪽 끝에 서서 27px 어긋나 있었다. */
  #stockTable .cinput.stockv{text-align:right}
  #stockTable .substock input.cinput{text-align:right}
  #stockTable:not(.editing) .substock input.cinput{padding-left:0;padding-right:0}
  #stockTable.edit input[type="number"].cinput{width:54px}
  #stockTable.edit input.cinput.carry{width:46px;color:var(--mute)}
  #stockTable.edit input.cinput.unit{width:38px;text-align:center;color:var(--mute);font-size:12px}
  /* 해동/냉동(소분/PK) 묶음은 오른쪽 정렬 — 단일 재고 숫자와 같은 선에 세워야 세로로 읽힌다 */
  /* 숫자를 오른쪽에 세우면서 gap 이 2px 이면 '소분 128' 의 8 이 다음 'PK' 라벨에 붙는다 */
  .substock{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
  .substock .sublbl{flex:0 0 auto}
  .sublbl{font-size:10.5px;color:var(--mute);font-weight:700;letter-spacing:.02em}
  /* 해동/냉동 칸이 38px라 세 자리부터 잘렸다 — 네 자리(1080)까지 들어가게.
     flex 안에서 줄어들지 않도록 basis 를 못박는다 */
  .substock input.cinput{flex:0 0 58px;width:58px;min-width:58px;text-align:center;padding-left:4px;padding-right:4px}
  .st{display:inline-flex;align-items:center;font-size:12px;white-space:nowrap}
  .row-del{border:1px solid var(--line);background:var(--card);color:var(--pat);cursor:pointer;font-size:11.5px;font-weight:700;line-height:1;padding:6px 11px;border-radius:7px;white-space:nowrap}
  .row-del:hover{background:var(--pat-soft);border-color:var(--pat-soft)}
  /* 삭제 칸은 '편집' 모드일 때만 보임 */
  #stockTable:not(.editing) .delcol,#stockTable:not(.editing) .delcell{display:none}
  /* 가독성: 한 화면에 60줄이 뜬다. 눈이 찾는 건 값이 든 칸이다. */
  #stockTable input.cinput.z0{color:var(--line-2)}        /* 0은 자리만 남기고 거의 지운다 */
  #stockTable:not(.editing) input.cinput.carry{color:var(--mute)}   /* 이월은 참고값 — 늘 한 톤 뒤로 */
  /* 이름 옆 단위 — 'ea' 가 아닌 줄에만 붙는다(죽·앙금 같은 팩 품목 16개).
     품목 칸이 sticky 라 그 안에서 절대 위치를 잡을 수 있다. 편집할 때는
     단위 칸이 따로 보이므로 겹치지 않게 숨긴다. */
  #stockTable td:first-child .unit-tag{
    position:absolute; right:9px; top:50%; transform:translateY(-50%);
    font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.02em;
    color:var(--ink-2); background:var(--paper-2); border-radius:20px; padding:2px 7px;
    pointer-events:none;
  }
  #stockTable.editing td:first-child .unit-tag{display:none}
  #stockTable:not(.editing) .unitcol{display:none}        /* 'ea'가 60줄 반복되는 건 정보가 아니다 */
  #stockTable tbody tr:nth-child(even):not(.grouphead){background:#FCFCFC}  /* 눈이 가로로 따라가게 */
  #stockTable tbody tr:hover:not(.grouphead){background:var(--jade-softer)}
  /* ── 재고 표: 세로줄 · 큰 글자 · 가운데 정렬 ──
     시트를 보던 눈에 맞춘다. 칸마다 세로줄을 세우고 숫자를 칸 한가운데 놓는다. */
  #stockTable th + th, #stockTable td + td{border-left:1px solid var(--line-2)}
  #stockTable{font-size:14.5px}
  #stockTable thead th{font-size:12.5px}
  #stockTable tr.grouphead td{font-size:11.5px}
  #stockTable .stat{font-size:11.5px}
  #stockTable .sublbl{font-size:11.5px}
  /* 가운데 정렬 — 앞서 오른쪽으로 맞춰둔 규칙들을 전부 덮는다 */
  #stockTable th, #stockTable td,
  #stockTable thead th, #stockTable thead th.l,
  #stockTable tr.grouphead td, #stockTable tr.grouphead td.l,
  #stockTable tbody td:first-child{text-align:center}
  #stockTable .cinput,
  #stockTable .cinput.name,
  #stockTable .cinput.stockv,
  #stockTable .substock input.cinput{text-align:center}
  #stockTable .substock{justify-content:center}
  /* ── 60줄을 훑기 위한 장치들 ── */
  /* 세로줄을 한 단계 진하게 — 칸 구분이 먼저 보이게 */
  #stockTable th + th, #stockTable td + td{border-left:1px solid var(--line)}
  /* ① 머리글 고정 — 60줄을 훑을 때 그 숫자가 입고인지 사용인지 알 수 있게.
     표를 감싼 .tbl-scroll 이 이미 가로 스크롤 상자라, 페이지 스크롤에는 sticky 가
     안 먹는다. 그래서 표에 자체 스크롤 높이를 주고 그 안에서 머리글을 붙인다. */
  #stock .tbl-scroll{max-height:70vh;overflow:auto}
  #stockTable thead th{position:sticky;top:0;z-index:3;background:var(--card)}
  #stockTable thead th:first-child{z-index:4}
  /* 머리글은 진회색 띠 — 표가 길어지면 어디가 위인지 한눈에 잡혀야 한다.
     순검정은 화면에 구멍처럼 뚫려 보여 한 톤 올렸다. 대비는 그대로 남는다.
     칸 구분선도 어두운 바탕에 맞춰 흰 실선으로 뒤집는다. */
  #stockTable thead th{
    background:var(--head);color:#FFF;font-weight:700;letter-spacing:.02em;
    border-bottom-color:var(--head);
  }
  #stockTable thead th + th{border-left-color:rgba(255,255,255,.22)}
  /* 발주·주의는 품목 칸을 옅게 칠한다. 상태 칸은 표 오른쪽 끝이라
     60줄을 훑을 때 이름과 상태 사이를 눈이 왕복해야 했다.
     글자 색으로 하던 것을 칸 색으로 옮겼다 — 면이 글자보다 멀리서 보이고,
     이름은 검은 글자 그대로라 읽기가 나빠지지 않는다.
     품목 칸은 :first-child:not([colspan]) 로 제 배경을 쥐고 있어 더 세게 준다.
     hover 규칙(0,3,3)보다도 세서 마우스를 얹어도 색이 안 지워진다. */
  #stockTable tbody tr.lv-bad  td:first-child:not([colspan]){background:var(--bad-soft)}
  #stockTable tbody tr.lv-warn td:first-child:not([colspan]){background:var(--warn-soft)}
  /* 품목 칸은 왼쪽 고정이라 제 배경을 따로 쥐고 있다(:first-child 가 더 세다).
     머리글 모서리도 같이 칠하고, 경계 그림자만 흰 실선으로 뒤집는다. */
  #stockTable thead th:first-child{
    background:var(--head);
    box-shadow:1px 0 0 rgba(255,255,255,.22), 7px 0 7px -7px rgba(0,0,0,.22);
  }
  /* 사진에는 붙박이도 스크롤도 필요 없다 — 통째로 펼쳐 찍는다 */
  .capturing #stock .tbl-scroll{max-height:none;overflow:visible}
  .capturing #stockTable thead th{position:static}
  /* ③ 품목명도 가운데 — 나머지 칸이 전부 가운데라 이 칸만 왼쪽이면 줄이 어긋나 보인다 */
  #stockTable th:first-child, #stockTable td:first-child,
  #stockTable .cinput.name{text-align:center}
  /* 품목 이름이 이 표에서 가장 먼저 읽는 값이다 — 숫자보다 한 단계 크고 진하게.
     다른 칸은 14.5px/보통이라 이 대비가 곧 '어디부터 읽나'를 알려준다. */
  #stockTable .cinput.name{font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
  /* ④ 재고 칸 좁히기 — 소분/PK 때문에 이 칸만 두세 배로 벌어져 있었다 */
  #stockTable .substock{gap:4px}
  #stockTable .substock input.cinput{flex:0 0 44px;width:44px;min-width:44px}
  #stockTable .sublbl{font-size:10.5px}
  /* ⑤ 구역 접기 */
  #stockTable tr.grouphead{cursor:pointer}
  #stockTable tr.grouphead td.l::after{content:'  ▾';color:var(--mute);font-size:10px}
  #stockTable tr.grouphead.folded td.l::after{content:'  ▸'}
  #stockTable.foldb tbody tr[data-grp="b"]:not(.grouphead),
  #stockTable.foldm tbody tr[data-grp="m"]:not(.grouphead){display:none}
  .rowtools{display:inline-flex;align-items:center;gap:4px}
  .drag-handle{border:1px solid var(--line);background:var(--card);color:var(--mute);width:26px;height:26px;border-radius:7px;cursor:grab;font-size:13px;line-height:1;padding:0}
  .drag-handle:hover{border-color:var(--ink);color:var(--ink)}
  .drag-handle:active{cursor:grabbing}
  #stockTable tr.dragging{opacity:.4}
  #stockTable tr.drop-into td{box-shadow:inset 0 2px 0 var(--ink)}
  /* 메모 카드 편집 */
  .memo-add{margin-top:10px;padding:9px}
  .memo-edit{display:flex;flex-direction:column;gap:4px;padding:7px 0;border-bottom:1px solid var(--line-2)}
  .me-top{display:flex;align-items:center;gap:5px}
  .me-bot{display:flex;gap:5px;padding-left:26px}
  .minput{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:5px 7px;min-width:0;color:var(--ink)}
  .minput:focus{outline:none;border-color:var(--ink)}
  /* 캡처 때 메모 입력칸을 대신하는 줄바꿈 글상자 — 긴 특이사항·폐기가 안 잘리고 여러 줄로 나온다.
     폭·정렬은 옆의 .ml/.mv/.mn 규칙을 그대로 받고, 여기선 줄바꿈만 켠다. */
  .cap-text{font:inherit;font-size:12.5px;line-height:1.45;padding:5px 7px;color:var(--ink);min-width:0;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
  .capturing .memo-row{align-items:flex-start}   /* 여러 줄로 늘어난 메모는 위로 맞춘다 */
  .me-top .ml{flex:1}
  .me-bot .mv{flex:0 0 64px}
  .me-bot .mn{flex:1}
  /* 보기 모드 행: 항목 글자 + 수량·세부사항 입력칸 */
  .memo-row{display:flex;align-items:center;gap:6px;padding:4px 0}
  .memo-row .mr-label{flex:1.1 1 0;min-width:0;font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .memo-row .ml{flex:1.1 1 0;min-width:0;color:var(--ink-2)}
  .memo-row .mv{flex:1 1 0;min-width:0;text-align:center;font-weight:600}
  .memo-row .mn{flex:1.4 1 0;min-width:0}
  .memo-row.nonote .mv{flex:1.8 1 0;text-align:left;font-weight:400}
  /* 특이사항은 문장이 들어와서 이름표만 한 폭으로는 못 읽는다 */
  .memo-row.note .ml{flex:2.6 1 0}
  .memo-row.note .mv{flex:1.2 1 0}
  /* 근무 탭: 사람 줄을 펼치면 주차별·일자별이 나온다 */
  .wk-toggle{border:0;background:transparent;color:var(--mute);font-size:11px;cursor:pointer;padding:0 4px 0 0}
  .wk-row{cursor:pointer}
  .wk-row:hover td{background:var(--paper-2)}
  .wk-detail td{background:var(--paper-2);padding:10px 12px}
  /* 펼침 안 주차 요약 — 넓은 화면에는 주차가 이미 열로 있으므로 숨긴다.
     폰에서는 그 열들을 통째로 감추므로 거기서만 켠다(아래 640px 규칙). */
  .wk-weeks{display:none}
  .wk-weeks,.wk-log{flex-wrap:wrap;gap:6px 14px;font-size:12px}
  .wk-log{display:flex}
  .wk-log{margin-top:8px;color:var(--ink-2)}
  .wk-weeks em,.wk-log em{font-style:normal;font-weight:700;color:var(--ink)}
  .wk-weeks span{color:var(--ink-2)}
  .wk-weeks b{color:var(--ok);font-weight:700}

  /* 근무표: 이름 · 출근 ~ 퇴근 · 계산된 근무시간 */
  .memo-row.shift .ml{flex:1 1 0}
  .memo-row.shift .mv,.memo-row.shift .mn{flex:0 0 auto;width:82px;text-align:center;font-weight:600}
  .memo-row.shift .sh-sep{color:var(--mute);font-size:12px}
  .memo-row.shift .sh-dur{flex:0 0 auto;min-width:62px;text-align:right;font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .memo-row.shift .sh-dur:empty::before{content:'—';color:var(--mute);font-weight:400}
  /* 근무표 아래 요약 — 총원·합계·평균 */
  .memo-sum{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
    margin-top:6px;padding-top:8px;border-top:1px solid var(--line);
    font-size:12px;color:var(--mute)}
  .memo-sum b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
  .memo-sum .ms-note{color:var(--warn)}
  .memo-row .minput{border-color:transparent;background:transparent}
  .memo-row .minput:hover{background:var(--paper-2)}
  .memo-row .minput:focus{border-color:var(--ink);background:var(--card)}
  /* 폐기 내역 – 재고 탭에서 자동으로 온 읽기전용 행 */
  .memo-row.auto .av{flex:1 1 0;min-width:0;text-align:center;font-weight:600;color:var(--ink)}
  .memo-row.auto .an{flex:1.4 1 0;min-width:0}
  .auto-chip{font-style:normal;font-size:9px;font-weight:700;color:var(--jade);background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:0 5px;margin-left:6px;vertical-align:middle}
  /* 레시피 */
  .ring-add{margin-top:8px;padding:8px;font-size:12px}
  .memo-reorder{display:flex;flex-direction:column;gap:1px}
  .memo-reorder button{border:1px solid var(--line);background:var(--card);color:var(--mute);width:20px;height:14px;line-height:1;font-size:9px;border-radius:4px;cursor:pointer;padding:0}
  .memo-reorder button:hover{border-color:var(--ink);color:var(--ink)}
  .memo-del{border:1px solid var(--line);background:var(--card);color:var(--pat);width:26px;height:28px;border-radius:7px;cursor:pointer;font-size:13px;flex:none}
  .memo-del:hover{background:var(--pat-soft)}
  h4 .memo-tag{width:96px;text-align:right;font-size:11px;padding:3px 7px}
  .add-row{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;padding:11px;border:1px dashed var(--line);background:transparent;border-radius:11px;color:var(--ink-2);font-weight:600;font-size:13px;cursor:pointer}
  .add-row:hover{border-color:var(--jade);color:var(--jade);background:var(--jade-softer)}
  .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--ink);color:var(--on-ink);font-size:13px;font-weight:600;padding:11px 18px;border-radius:12px;box-shadow:0 12px 32px -12px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:60}
  .shotbtn{position:fixed;right:16px;bottom:20px;z-index:55;background:var(--ink);color:var(--on-ink);border:0;border-radius:999px;padding:12px 18px;font-family:inherit;font-weight:700;font-size:13px;box-shadow:0 10px 28px -8px rgba(0,0,0,.45);cursor:pointer;letter-spacing:-.01em}
  /* 모바일 마감 사진: 합친 이미지를 보여주고 꾹 눌러 저장 */
  .shot-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.9);overflow:auto;-webkit-overflow-scrolling:touch}
  .shot-overlay .so-bar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#111;color:#fff;font-size:13px;font-weight:600}
  .shot-overlay .so-bar b{color:#fff;font-weight:800}
  .shot-overlay .so-close{appearance:none;border:1px solid #555;background:#222;color:#fff;font:inherit;font-weight:700;font-size:13px;border-radius:8px;padding:7px 15px;cursor:pointer;white-space:nowrap}
  .shot-overlay .so-cap{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;padding:14px 16px 6px}
  .shot-overlay img{display:block;width:100%;height:auto}
  /* 직원 코드 잠금 화면 */
  .staff-gate{position:fixed;inset:0;z-index:200;background:var(--paper-veil-2);display:flex;align-items:flex-start;justify-content:center}
  .staff-gate .sg-box{width:min(340px,86vw);margin-top:16vh;text-align:center}
  .staff-gate h1{font-size:17px;font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
  .staff-gate p{color:var(--mute);font-size:13px;margin:0 0 16px}
  .staff-gate input{width:100%;font:inherit;font-size:16px;text-align:center;letter-spacing:.2em;border:1px solid var(--line);border-radius:11px;padding:12px;box-sizing:border-box}
  .staff-gate input:focus{outline:none;border-color:var(--ink)}
  .staff-gate button{width:100%;margin-top:10px;appearance:none;border:0;background:var(--ink);color:var(--on-ink);font:inherit;font-weight:700;font-size:14px;border-radius:11px;padding:12px;cursor:pointer}
  .staff-gate #sgBio{background:var(--card);color:var(--ink);border:1px solid var(--line)}
  .staff-gate #sgBio:hover{border-color:var(--ink)}
  .staff-gate .sg-err{color:#C0392B;font-size:12.5px;min-height:18px;margin-top:10px}
  .shotbtn:disabled{opacity:.6;cursor:default}
  .shotbtn:active{transform:translateY(1px)}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  footer{border-top:1px solid var(--line);margin-top:40px}
  .foot{padding:22px 0 40px;font-size:12px;color:var(--mute);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .foot .serif{color:var(--ink-2)}
  .foot code{background:var(--paper-2);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;font-size:11px;color:var(--jade)}

  .section-lead{margin:0 0 16px}
  .section-lead .eyebrow{margin-bottom:6px;display:block}
  .section-lead h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em}
  .section-lead p{margin:5px 0 0;color:var(--ink-2);font-size:13.5px;max-width:560px}

  @media (max-width:860px){
    .hero{grid-template-columns:1fr}
    .hero .left{border-right:0;border-bottom:1px solid var(--line-2)}
    /* 여기도 minmax(0,…). 한 칸이어도 맨 1fr 은 '내용보다 좁아지지 않는' 칸이라,
       안 줄어드는 것이 있으면 칸이 505px 로 부풀어 화면(331px)을 넘겼다.
       그러면 매출상세 전체가 옆으로 밀린다 — 위 .g-2 만 고치고 여기를 놓쳤었다. */
    .g-2,.g-3{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:560px){
    .chips{grid-template-columns:repeat(2,1fr)}
    .who .nm-hide{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
  }

  /* 안전재고 막대 — 폰 카드에서만 쓴다. 표와 마감 사진에는 안 나온다.
     숫자만 있으면 '안전 5인데 2면 많이 모자란 건가'를 머리로 셈해야 한다. */
  #stockTable .safebar{display:none;height:4px;border-radius:4px;background:var(--line-2);overflow:hidden}
  #stockTable .safebar i{display:block;height:100%;border-radius:4px;background:var(--mute)}
  #stockTable .safebar.bad i{background:var(--bad)}
  #stockTable .safebar.warn i{background:var(--warn)}
  #stockTable .safebar.ok i{background:var(--ok)}
  #stockTable .shortnum{display:none;font-size:11.5px;font-weight:700;color:var(--bad);white-space:nowrap}

  /* ===== 폰에서는 재고표를 카드로 =====
     표 그대로 두면 721px 라 화면(390px) 밖으로 절반이 나간다. 마감은 폰으로 하니
     가로로 밀면서 숫자를 넣게 된다.

     칸(<input>)은 손대지 않고 배치만 바꾼다 — 같은 data-i·data-k 를 쓰므로
     저장·편집·시트 불러오기가 전부 그대로 돈다. 머리글이 사라지는 대신
     각 칸 위에 이름을 붙인다(::before).                                    */
  @media (max-width:640px){
    /* 헤더가 좁은 화면에서 넘쳤다: 브랜드(OKRUMONG·CLOSING) 199px + 밝기 + 지점 버튼이
       한 줄에 안 들어가 지점 버튼이 19px 밖으로 나갔다. CLOSING 은 장식이라 뺀다. */
    .top-inner{gap:10px}
    .brand{gap:7px}
    .brand .sub,.brand .dot{display:none}
    /* 날짜가 두 줄로 접혔다: 날짜칸이 상태문구(마감 완료 데이터예요)와 한 줄을
       나눠 쓰느라 91px 로 좁아졌다. 폰에선 날짜칸을 한 줄 통째로, 문구는 그 아래로. */
    .datestrip{flex-wrap:wrap;gap:8px;margin:16px 0 4px}
    .datepick{flex:1 1 100%;max-width:none}
    #theDate{white-space:nowrap}
    .stamp{margin-left:2px}
    :root:not(.capturing) #stock .tbl-scroll{max-height:none;overflow:visible;margin:0;padding:0}
    :root:not(.capturing) #stockTable{min-width:0;display:block}
    :root:not(.capturing) #stockTable thead{display:none}
    :root:not(.capturing) #stockTable tbody{display:block}
    :root:not(.capturing) #stockTable tbody tr{display:block}

    /* 품목 한 줄이 카드 하나 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead){
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
      background:var(--card); border:1px solid var(--line); border-radius:12px;
      padding:12px 13px 11px; margin-bottom:10px;
    }
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):nth-child(even){background:var(--card)}
    :root:not(.capturing) #stockTable tbody tr:hover:not(.grouphead){background:var(--card)}
    :root:not(.capturing) #stockTable tbody tr.lv-bad{border-color:#F0C9CF}
    :root:not(.capturing) #stockTable tbody tr.lv-warn{border-color:#F0DCB6}

    /* 칸 공통 — 표의 테두리·고정을 걷어내고 네모 칸으로 */
    :root:not(.capturing) #stockTable tbody td{
      display:block; border:1px solid var(--line); border-radius:10px;
      padding:6px 9px 7px; text-align:left; white-space:normal;
      position:static; min-width:0; box-shadow:none;
    }
    :root:not(.capturing) #stockTable tbody td+td{border-left:1px solid var(--line)}
    /* 표에서 품목 칸을 왼쪽에 붙여두던 규칙 — 폰에서는 카드라 필요 없다.
       :first-child:not([colspan]) 가 더 세서 여기서 같은 세기로 풀어준다. */
    :root:not(.capturing) #stockTable tbody td:first-child:not([colspan]){
      position:static; left:auto; min-width:0; width:auto; box-shadow:none; z-index:auto}
    :root:not(.capturing) #stockTable tbody td::before{
      content:attr(data-lbl); display:block; height:14px; line-height:14px;
      font-size:10.5px; font-weight:700; color:var(--mute); letter-spacing:.02em;
    }
    /* 칸을 꽉 채우고 오른쪽 끝에 붙인다.
       표 시절 규칙들이 폭을 54px·46px·44px 로 잡아두고 재고는 가운데 정렬이라
       숫자가 칸 한가운데 떠 있었다. 같은 세기 이상으로 하나씩 푼다. */
    :root:not(.capturing) #stockTable tbody td .cinput{
      width:100%; height:28px; line-height:28px; font-size:22px; font-weight:800;
      text-align:right; padding:0; color:var(--ink);
    }
    :root:not(.capturing) #stockTable.edit tbody td input[type="number"].cinput{width:100%}
    :root:not(.capturing) #stockTable.edit tbody td input.cinput.carry{width:100%}
    :root:not(.capturing) #stockTable tbody td .cinput.stockv{text-align:right}
    :root:not(.capturing) #stockTable tbody .substock{gap:10px}
    :root:not(.capturing) #stockTable tbody .substock input.cinput{flex:1 1 0;width:auto;min-width:0;text-align:right}
    :root:not(.capturing) #stockTable tbody td input.cinput.z0{color:#C8C8C8}

    /* 자리 잡기 — 이름·상태 / 이월 / 입고·사용 / 재고·폐기 / 안전 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(1){grid-area:1/1/2/2;
      border:0;padding:0;display:flex;align-items:center;gap:7px;min-height:24px}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(1)::before{content:none}
    :root:not(.capturing) #stockTable tbody td:nth-child(1) .cinput.name{
      width:auto;flex:0 1 auto;height:24px;line-height:24px;font-size:16.5px;text-align:left}
    :root:not(.capturing) #stockTable td:first-child .unit-tag{position:static;transform:none}

    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(9){grid-area:1/2/2/3;
      border:0;padding:0;display:flex;align-items:center;justify-content:flex-end}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(9)::before{content:none}

    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(2){grid-area:2/1/3/2}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(3){grid-area:3/1/4/2}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(4){grid-area:3/2/4/3}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(5){grid-area:4/1/5/2;
      border-color:var(--ink);border-width:1.5px}   /* 재고 — 마감 때 실제로 적는 칸 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(6){grid-area:4/2/5/3}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(7){grid-area:5/1/6/3}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td.delcell{grid-area:6/1/7/3;border:0;padding:4px 0 0}

    /* 이월은 참고값 — 한 단계 뒤로 */
    :root:not(.capturing) #stockTable tbody td:nth-child(2) .cinput{font-size:15px;color:var(--ink-2)}
    /* 안전은 가로로 눕혀 한 줄 — 라벨 · 숫자 · 막대 · 부족분 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(7){display:flex;align-items:center;gap:8px}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:nth-child(7)::before{height:auto;flex:0 0 auto}
    /* 안전 숫자는 좁게 — 남는 자리는 막대가 가져간다.
       위의 width:100% 규칙(.edit input[type=number].cinput)이 더 세서 여기서
       그보다 한 단계 더 좁혀 잡는다. 안 그러면 입력칸이 칸 전체를 먹는다. */
    :root:not(.capturing) #stockTable tbody td:nth-child(7) .cinput,
    :root:not(.capturing) #stockTable.edit tbody td:nth-child(7) input[type="number"].cinput{
      flex:0 0 auto;width:40px;font-size:15px;text-align:right;height:20px;line-height:20px}
    :root:not(.capturing) #stockTable tbody td:nth-child(7) .safebar{display:block;flex:1 1 0;min-width:24px;width:auto}
    :root:not(.capturing) #stockTable tbody td:nth-child(7) .shortnum{display:block;flex:0 0 auto}

    /* 소분/PK — 한 칸 안에서 둘로 */
    :root:not(.capturing) #stockTable .substock{gap:8px;justify-content:space-between}
    :root:not(.capturing) #stockTable .substock input.cinput{flex:1 1 0;min-width:0;width:auto;font-size:20px}
    :root:not(.capturing) #stockTable .sublbl{font-size:10px}

    /* 구역 머리글 — 표에서는 열 이름을 되풀이하지만 카드에서는 이름만 */
    :root:not(.capturing) #stockTable tbody tr.grouphead{
      display:block;background:transparent;border:0;padding:14px 2px 6px;margin:0}
    :root:not(.capturing) #stockTable tbody tr.grouphead td{display:none;border:0;padding:0}
    :root:not(.capturing) #stockTable tbody tr.grouphead td:first-child{
      display:block;text-align:left;font-size:11px;font-weight:800;
      letter-spacing:.14em;color:var(--mute)}
    :root:not(.capturing) #stockTable tbody tr.grouphead td::before{content:none}

    /* 단위 칸은 이름 옆 표시로 대신한다 */
    :root:not(.capturing) #stockTable tbody td.unitcol{display:none}

    /* ===== 폰 마감 줄 — 한 품목이 한 줄 (사장님 2026-09-20) =====
       카드(2열 격자)는 한 화면에 두세 개뿐이라 68개를 세려면 스무 번 넘게 밀어야 했다.
       상태점·이름·사용·생산·재고·폐기만 한 줄에 두고 나머지는 눌러서 펼친다. */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand){
      display:flex; align-items:center; gap:5px;
      border:0; border-bottom:1px solid var(--line); border-radius:0;
      padding:6px 2px; margin:0; background:transparent;
    }
    /* 구역 접기 — 위의 한 줄 배치 규칙이 바깥의 접기 규칙(app.css:818)을 명시도로 눌러
       폰에서 접기가 안 먹었다. 같은 범위·같은 명시도로 다시 적는다. */
    :root:not(.capturing) #stockTable.foldb tbody tr[data-grp="b"]:not(.grouphead),
    :root:not(.capturing) #stockTable.foldm tbody tr[data-grp="m"]:not(.grouphead){display:none}
    /* 펼친 줄 자체 — 위의 카드형(그리드 2열) 규칙(app.css:985)이 tr.expand 에도 걸려
       바깥 카드 테두리 + 안쪽 td 테두리가 겹치고 colspan=12 칸이 2열 그리드의
       절반 폭에 눌려 있었다. 펼친 줄은 카드가 아니라 상세 설명이라 한 줄 통짜로 되돌린다. */
    :root:not(.capturing) #stockTable tbody tr.expand{
      display:block;background:transparent;border:0;border-radius:0;padding:0;margin:0}
    :root:not(.capturing) #stockTable tbody tr.expand > td{
      display:block; border:1px solid var(--line); border-radius:10px;
      padding:8px 10px; margin:0 0 8px; font-size:12px; color:var(--ink-2);
    }
    :root:not(.capturing) #stockTable tbody tr.expand .ex-calc{display:block;margin-top:5px;color:var(--mute)}
    :root:not(.capturing) #stockTable tbody tr.expand .ex-bad{display:block;margin-top:3px;color:var(--bad);font-weight:700}
    /* 줄 안에서 칸 자리 잡기 — 나머지 칸은 숨긴다(값은 살아 있다) */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td{
      display:none; border:0!important; padding:0; margin:0; background:transparent;
    }
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td::before{content:none}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(1){display:flex;flex:1;min-width:0;align-items:center;gap:5px}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(3),
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(4),
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(5),
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(6){display:block;flex:none}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(4){width:32px}       /* 사용 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(3),
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(5),
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(6){width:38px}       /* 생산·재고·폐기 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) .cinput.name{
      width:100%;flex:1;min-width:0;height:22px;line-height:22px;font-size:13px;text-align:left;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(3) .cinput,
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(5) .cinput,
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(6) .cinput{
      width:100%;height:26px;line-height:26px;font-size:15px;font-weight:700;text-align:center;
      border:1px solid var(--line);border-radius:6px;padding:0;
    }
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(5) .cinput{border-color:var(--ink)}   /* 재고 — 매일 적는 칸 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) .cinput.kp-on{outline:2px solid var(--jade);outline-offset:0}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(4) .calc{font-size:13px;font-weight:700;color:var(--ink-2)}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(4) .calc.off{color:var(--bad)}
    /* 안전재고 막대·상태·단위·순서 손잡이는 폰 줄에서 뺀다 (펼치면 보인다) */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) .safebar,
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) .shortnum{display:none}
    /* 상태점 — 안전재고 대비 색 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(1)::after{
      content:"";width:6px;height:6px;border-radius:50%;background:transparent;flex:none;order:-1;
    }
    /* 기준(안전재고) 없이는 초록을 안 칠한다 — '충분'을 근거 없이 보여주는 게 아무것도
       안 보여주는 것보다 나쁘다(stockLevel 위 주석). lv-ok 인 줄만 초록. */
    :root:not(.capturing) #stockTable tbody tr.lv-ok:not(.expand)   td:nth-child(1)::after{background:var(--ok)}
    :root:not(.capturing) #stockTable tbody tr.lv-warn:not(.expand) td:nth-child(1)::after{background:var(--warn)}
    :root:not(.capturing) #stockTable tbody tr.lv-bad:not(.expand)  td:nth-child(1)::after{background:var(--bad)}
    :root:not(.capturing) .stockcount{display:block;font-size:12px;margin:2px 0 0}
    /* 펼친 상세 줄은 사진에 안 남는다 — 위 .capturing 복구 규칙(아래 '.capturing #stockTable
       tbody tr:not(.grouphead)')과 세기가 같아(둘 다 id+class 2개+태그 2개) 순서로 갈리는데
       그 규칙이 파일에서 더 뒤에 있어 이겨버린다. !important 로 확실히 이긴다 — 바로 위
       제빵 줄 감추기(.bakes tr.bkrow 등)도 같은 이유로 !important 를 쓴다 (리뷰 2026-09-21). */
    .capturing #stockTable tbody tr.expand{display:none !important}

    /* 칸 순서 — 설계는 이름 다음 사용 → 생산(td3 가 DOM은 사용보다 앞이라 그냥 사용만
       앞으로 당기면(order:-1) 이름(기본 order 0)보다도 앞으로 튀어나간다 — 이름 칸엔
       order 가 없어 0이기 때문. 넷 다 순서를 매겨 이름 뒤로 확실히 묶어둔다 (리뷰 2026-09-21). */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(4){order:1}   /* 사용 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(3){order:2}   /* 생산 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(5){order:3}   /* 재고 */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(6){order:4}   /* 폐기 */

    /* 품목명을 눌러도 안 펼쳐졌다 — input.cinput.name 이 칸을 거의 다 채워 클릭이
       입력칸으로 먼저 먹혔다. 편집 모드가 아닐 때만 입력칸을 클릭 통과시켜 줄 클릭이 받게 한다
       (편집 중엔 이름을 고칠 수 있어야 하니 그대로 둔다). (리뷰 2026-09-21) */
    :root:not(.capturing) #stockTable:not(.editing) tbody tr:not(.grouphead):not(.expand) .cinput.name{pointer-events:none}

    /* 누를 수 있다는 표시 — 손 커서 + 펼침 화살표(▸/▾). 펼쳐진 줄 바로 위 줄만 ▾ (리뷰 2026-09-21) */
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(1){cursor:pointer}
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(1)::before{
      content:"▸"; order:2; flex:none; font-size:9px; color:var(--mute); margin-left:2px;
    }
    :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand):has(+ tr.expand) td:nth-child(1)::before{content:"▾"}

    /* ===== 근무표: 폰에서는 사람 하나가 카드 하나 =====
       열이 최소 7개에 주차마다 4개씩 더 붙는다(5주면 27열, 최소 폭 900px).
       폰에서는 표를 옆으로 밀어야 보이는데, 미는 동안 왼쪽 이름이 어느 줄이었는지
       놓친다. 주차별은 눌러서 펼치는 안으로 옮기고, 카드에는 달 전체 숫자만 둔다. */
    #wkTable{min-width:0;display:block}
    #wkTable thead{display:none}
    #wkTable tbody,#wkTable tfoot{display:block}
    /* 순번·근무자 두 열을 왼쪽에 붙여두던 규칙을 푼다 — 카드에는 밀 것이 없다 */
    #wkTable th:nth-child(1),#wkTable td:nth-child(1):not([colspan]),
    #wkTable th:nth-child(2),#wkTable td:nth-child(2):not([colspan]){
      position:static;left:auto;width:auto;min-width:0;box-shadow:none;padding-right:0;background:none}
    #wkTable .wk-detail .wk-weeks{display:flex}

    #wkTable tbody tr.wk-row,#wkTable tfoot tr{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;
      background:var(--card);border:1px solid var(--line);border-radius:12px;
      padding:12px 14px;margin:0 0 10px}
    #wkTable tfoot tr{background:var(--paper-2)}
    #wkTable tbody tr.wk-row>td,#wkTable tfoot tr>td{
      display:flex;align-items:baseline;justify-content:space-between;gap:8px;
      border:0;padding:4px 0;text-align:right}
    /* 머리글이 없으니 칸마다 무슨 값인지 붙여준다 */
    #wkTable tbody tr.wk-row>td::before,#wkTable tfoot tr>td::before{
      content:attr(data-lbl);font-size:11px;font-weight:600;color:var(--mute);
      text-align:left;white-space:nowrap}

    /* 주차 칸(wkw)과 순번은 감춘다 — 주차는 펼침 안 요약으로 대신한다.
       바로 위 'display:flex' 와 무게를 맞춰야 이긴다(선택자를 짧게 쓰면 진다). */
    #wkTable tbody tr.wk-row>td.wkw,#wkTable tbody tr.wk-row>td.wk-no,
    #wkTable tfoot tr>td.wkw,#wkTable tfoot tr>td.wk-no{display:none}

    /* 이름과 '월 총 근무'를 위로 끌어올린다. 달 마감에서 먼저 찾는 두 가지다 */
    /* 이 둘도 위 'td' 규칙과 무게를 맞춰야 한다 — 짧게 쓰면 정렬이 도로 밀린다 */
    #wkTable tbody tr.wk-row>td.wk-name,#wkTable tfoot tr>td.wk-name{
      order:-2;grid-column:1/-1;justify-content:flex-start;gap:4px;text-align:left;
      font-size:15px;font-weight:800;padding:0 0 8px;border-bottom:1px solid var(--line-2)}
    #wkTable tbody tr.wk-row>td.wk-key,#wkTable tfoot tr>td.wk-key{
      order:-1;grid-column:1/-1;padding:8px 0 6px;
      font-size:22px;font-weight:800;letter-spacing:-.02em}
    #wkTable .wk-key::before{font-size:11.5px}
    /* 합계 줄의 '4주 평균'은 값이 없다 — 이름표만 남으면 덜 만든 것처럼 보인다 */
    #wkTable tfoot tr>td:empty{display:none}

    /* 펼침 — 카드 바로 밑에 이어 붙는다 */
    #wkTable tbody tr.wk-row:has(+ .wk-detail){margin-bottom:0;border-radius:12px 12px 0 0;border-bottom:0}
    #wkTable tbody tr.wk-detail{display:block;margin:0 0 10px}
    #wkTable tbody tr.wk-detail>td{display:block;border:1px solid var(--line);border-top:0;
      border-radius:0 0 12px 12px;padding:10px 14px 12px}


    /* ===== 매출 리포트: 폰에서는 기간 하나가 카드 하나 =====
       열이 여섯이라 폰에서는 564px 이 되어 옆으로 밀어야 했다. 근무표와 같은 꼴로 둔다. */
    #rpTable{min-width:0;display:block}
    #rpTable thead{display:none}
    #rpTable tbody,#rpTable tfoot{display:block}
    #rpTable tbody tr,#rpTable tfoot tr{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;
      background:var(--card);border:1px solid var(--line);border-radius:12px;
      padding:12px 14px;margin:0 0 10px}
    #rpTable tfoot tr{background:var(--paper-2)}
    /* tfoot 은 '.rp-sum' 을 넣어야 위쪽 '#rpTable tfoot .rp-sum td' 를 이긴다.
       그 규칙이 칸마다 굵은 윗선을 그어서, 카드에서는 줄이 어지럽게 남았다. */
    #rpTable tbody tr>td,#rpTable tfoot tr.rp-sum>td{
      border-top:0;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
      border:0;padding:4px 0;text-align:right}
    #rpTable tbody tr>td::before,#rpTable tfoot tr.rp-sum>td::before{
      content:attr(data-lbl);font-size:11px;font-weight:600;color:var(--mute);
      text-align:left;white-space:nowrap}
    /* 기간과 실매출을 위로. 리포트에서 먼저 찾는 두 가지다.
       (근무표와 같은 이유로 선택자 무게를 위 'td' 규칙에 맞춘다) */
    #rpTable tbody tr>td.nm,#rpTable tfoot tr.rp-sum>td.nm{
      order:-2;grid-column:1/-1;justify-content:flex-start;gap:6px;text-align:left;
      font-size:15px;font-weight:800;padding:0 0 8px;border-bottom:1px solid var(--line-2)}
    #rpTable tbody tr>td.rp-key,#rpTable tfoot tr.rp-sum>td.rp-key{
      order:-1;grid-column:1/-1;padding:8px 0 6px;
      font-size:22px;font-weight:800;letter-spacing:-.02em}
    #rpTable tbody tr>td.rp-key::before,#rpTable tfoot tr.rp-sum>td.rp-key::before{font-size:11.5px}
    /* '데이터가 없어요' 한 칸짜리 줄은 카드로 만들지 않는다 */
    #rpTable tbody tr>td[colspan]{grid-column:1/-1;display:block;text-align:left}

    /* ===== 시간대별 매출표는 표로 둔다 =====
       14시간이 흐름으로 읽혀야 하는 것이라 카드로 쪼개면 오히려 못 읽는다.
       대신 날짜 칸을 왼쪽에 붙여둔다 — 옆으로 미는 동안 어느 날 줄인지 놓치지 않게.
       (재고·근무표에서 쓰던 것과 같은 방식) */
    #hourlyTable table th:first-child,#hourlyTable table td:first-child,
    #hourlyTable tr > :first-child{
      position:sticky;left:0;z-index:2;background:var(--paper);
      box-shadow:1px 0 0 var(--line), 7px 0 7px -7px rgba(0,0,0,.22)}

  }

    /* 마감 사진은 폰에서도 표로 찍는다.
       카드로 찍으면 품목 하나가 275px 라 44줄이 11,629px 가 되고, 사진 한 변
       한계(4096) 를 훌쩍 넘겨 배율이 0.33 까지 떨어진다 — 읽을 수 없는 사진이 된다.
       표로 찍으면 예전 높이 그대로다. 사진은 훑어보는 기록이지 적는 화면이 아니다. */
    /* 폰 카드 규칙은 위에서 사진 찍을 땐 꺼진다(:root:not(.capturing)) — 폰 사진도 PC 표 그대로 찍힌다.
       예전엔 여기서 카드 규칙을 하나씩 되돌렸는데 덜 되돌려져 선이 사라지고 이름이 위로 붙었다(2026-09-22). */
    .capturing #stockTable .safebar{display:none}
    .capturing #stock .card{width:max-content;min-width:100%}

  /* ===== 앱으로 설치했을 때 =====
     홈 화면에서 열면 브라우저 껍데기가 없어져 화면 끝까지 쓴다. 그러면 아이폰의
     노치·홈 인디케이터, 안드로이드의 제스처 바 자리에 내용이 깔린다.
     viewport-fit=cover 로 그 자리까지 받은 뒤 여기서 비워준다. */
  header.top{padding-top:env(safe-area-inset-top)}
  .wrap{padding-left:calc(22px + env(safe-area-inset-left));
        padding-right:calc(22px + env(safe-area-inset-right))}
  .shotbtn{bottom:calc(20px + env(safe-area-inset-bottom));
           right:calc(16px + env(safe-area-inset-right))}
  .pendbar{bottom:calc(12px + env(safe-area-inset-bottom));
           left:calc(12px + env(safe-area-inset-left));
           right:calc(12px + env(safe-area-inset-right))}
  .toast{bottom:calc(26px + env(safe-area-inset-bottom))}
  .shot-overlay{padding-bottom:env(safe-area-inset-bottom)}
  /* 사진 저장 단추 줄이 노치·다이내믹 아일랜드 밑에 깔렸다(앱은 화면 끝까지 쓴다, 2026-09-22) — 위쪽 안전 영역만큼 띄운다 */
  .shot-overlay .so-bar{padding-top:calc(12px + env(safe-area-inset-top));
    padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}

  /* 설치 안내 띠 — 아직 홈 화면에 없을 때만 한 번 띄운다 */
  .installbar{position:fixed;left:calc(12px + env(safe-area-inset-left));
    right:calc(12px + env(safe-area-inset-right));
    bottom:calc(12px + env(safe-area-inset-bottom));z-index:190;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:var(--ink);color:var(--on-ink);border-radius:12px;padding:11px 14px;
    font-size:13px;font-weight:700;box-shadow:0 10px 28px -8px rgba(0,0,0,.45)}
  .installbar small{font-weight:600;opacity:.75;font-size:12px;display:block;margin-top:2px}
  .installbar .go{margin-left:auto;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
    border:0;border-radius:9px;padding:7px 13px;background:var(--card);color:var(--ink)}
  .installbar .x{background:transparent;border:1px solid currentColor;color:var(--on-ink);opacity:.75;
    border-radius:9px;padding:7px 10px;font-family:inherit;font-size:12.5px;cursor:pointer}
  .capturing .installbar{display:none}

  /* 재고표 '차이' — 실사용(이월+입고−재고−폐기−이동) − 사용(POS). 0은 흐리게, 아니면 붉게 (시트의 차이 칸) */
  #stockTable .difcell{text-align:center}
  .dif{font-variant-numeric:tabular-nums;color:var(--mute);font-weight:600}
  .dif.none{color:var(--line)}
  .dif.bad{color:var(--pat);font-weight:800}

  /* 재고표 '사용' 계산 셀(읽기 전용) — 이월+입고−재고−폐기−이동 */
  #stockTable .usecell{text-align:center}
  .calc{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2)}

  /* 토스 비교 칸 숨김 — 판매(7열)·차이(8열): 머리글·구역머리글·본문 */
  #stockTable.nodiff thead th:nth-child(7),#stockTable.nodiff thead th:nth-child(8),
  #stockTable.nodiff tr.grouphead td:nth-child(7),#stockTable.nodiff tr.grouphead td:nth-child(8),
  #stockTable.nodiff .poscell,#stockTable.nodiff .difcell{display:none}

  /* ===== 앱(폰)에서 어긋나던 세 곳 — 2026-09-18 사장님 지적 =====
     1) 메뉴 탭이 오른쪽에서 잘렸다: 7개를 한 줄에 못 넣으니 두 줄로 접는다(4+3). 가로 스크롤 없음.
     2) 디톡스 판매 개수: 세부사항 칸이 없는 카드(nonote)만 숫자가 왼쪽으로 치우쳤다
        → 다른 카드와 같은 자리(가운데 칸)에 놓고, 세부사항 자리는 빈 칸으로 채운다.
     3) 재고 카드 버튼 줄(서버 연동·토스 비교 숨기기·시트 불러오기·편집·저장):
        글자가 두세 줄로 꺾여 높이가 제각각 → 한 줄 고정, 자리가 모자라면 버튼 단위로 다음 줄. */
  @media (max-width:640px){
    .tabs-inner{flex-wrap:wrap;overflow-x:visible;gap:0}
    .tab{flex:1 1 25%;margin-right:0;padding:9px 2px 8px;text-align:center;font-size:13px}
    .tab small{font-size:8.5px;letter-spacing:.12em}
    .card-bar .rhs{flex-wrap:wrap;gap:8px}
    .card-bar .rhs .btn{white-space:nowrap;padding:8px 12px;font-size:12.5px;line-height:1.2}
    .card-bar .rhs .sync{white-space:nowrap;padding:6px 10px}
  }
  /* 재고 카드 버튼 줄(폰): 줄바꿈 위치가 글자 길이에 따라 들쭉날쭉했다 — 2026-09-21 사장님 지적.
     상태 표시는 맨 윗줄 왼쪽에 따로 두고, 버튼 넷은 같은 너비·같은 높이로 2×2 칸에 맞춘다. */
  @media (max-width:640px){
    #stock .card-bar .rhs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;flex:1 1 100%}   /* 토스 비교 단추를 빼 셋 — 한 줄 */
    #stock .card-bar .rhs .sync{grid-column:1 / -1;justify-self:start}
    #stock .card-bar .rhs .btn{width:100%;min-height:40px;justify-content:center;text-align:center}
  }
  .memo-row.nonote .mv{flex:1 1 0;text-align:center;font-weight:600}
  .memo-row.nonote::after{content:"";flex:1.4 1 0;min-width:0}

  /* ===== 4) 상단 밝기 단추가 옆으로 눌려 납작해졌다 =====
     헤더가 flex 라 자리가 모자라면 34px 단추가 18px 로 줄었다(iPhone 16 Pro 폭). 줄어들지 않게 고정. */
  .theme-btn{flex:0 0 34px;min-width:34px}

  /* ===== 5) 생산일지 표를 폰에서는 카드로 =====
     11칸(680px)이라 폰(402px)에선 옆으로 밀어야 했다. 재고 표와 같은 방식으로 품목 하나가
     카드 하나. 머리글 대신 칸마다 ::before 로 이름을 붙인다. 표 자체(JS)는 손대지 않는다.
     줄 배치: 이름 / 생산·판매·재고·폐기 / 기부·이동·이동 매출 / 원가·유통가·판매가 */
  @media (max-width:640px){
    #bake .tbl-scroll{overflow:visible;margin:0;padding:0}
    #bakeTable,#bakeTable.edit{min-width:0;display:block}
    #bakeTable thead{display:none}
    #bakeTable tbody{display:block}
    #bakeTable tbody tr{
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
      background:var(--card);border:1px solid var(--line);border-radius:12px;
      padding:11px 12px 10px;margin-bottom:8px;
    }
    #bakeTable tbody td,#bakeTable tbody td:first-child:not([colspan]){
      display:block;border:0!important;padding:0;text-align:left;white-space:nowrap;
      position:static;min-width:0;width:auto;box-shadow:none;background:transparent;
      font-size:15px;font-weight:700;color:var(--ink);
    }
    #bakeTable tbody td::before{
      display:block;font-size:10.5px;font-weight:700;color:var(--mute);letter-spacing:.02em;line-height:14px;margin-bottom:1px;
    }
    #bakeTable tbody td.nm{grid-column:1/-1;font-size:16px;padding-bottom:5px;border-bottom:1px solid var(--line-2)!important;white-space:normal}
    #bakeTable tbody td:nth-child(2)::before{content:"원가"}
    #bakeTable tbody td:nth-child(3)::before{content:"유통가"}
    #bakeTable tbody td:nth-child(4)::before{content:"판매가"}
    #bakeTable tbody td:nth-child(5)::before{content:"생산"}
    #bakeTable tbody td:nth-child(6)::before{content:"판매"}
    #bakeTable tbody td:nth-child(7)::before{content:"재고"}
    #bakeTable tbody td:nth-child(8)::before{content:"폐기"}
    #bakeTable tbody td:nth-child(9)::before{content:"기부"}
    #bakeTable tbody td:nth-child(10)::before{content:"이동"}
    #bakeTable tbody td:nth-child(11)::before{content:"이동 매출"}
    #bakeTable tbody td:nth-child(5){grid-area:2/1}
    #bakeTable tbody td:nth-child(6){grid-area:2/2}
    #bakeTable tbody td:nth-child(7){grid-area:2/3}
    #bakeTable tbody td:nth-child(8){grid-area:2/4}
    #bakeTable tbody td:nth-child(9){grid-area:3/1}
    #bakeTable tbody td:nth-child(10){grid-area:3/2}
    #bakeTable tbody td:nth-child(11){grid-area:3/3/4/5}
    #bakeTable tbody td:nth-child(2){grid-area:4/1}
    #bakeTable tbody td:nth-child(3){grid-area:4/2}
    #bakeTable tbody td:nth-child(4){grid-area:4/3/5/5}
    #bakeTable tbody td.dim,#bakeTable tbody td:nth-child(2),#bakeTable tbody td:nth-child(3){font-weight:500;color:var(--ink-2)}
    #bakeTable tbody td.srccell{background:transparent}
    #bakeTable tbody td .cinput,#bakeTable.edit tbody td input[type="number"].cinput,#bakeTable.edit tbody td input.cinput.move{width:100%;text-align:left}
  }

  /* ===== 폰 마감 숫자판 ===== */
  /* z-index 90 — .pendbar(200, '서버에 아직 안 올라간 날')·.installbar(190) 가 화면 아래에
     함께 떠 있으면 그 위에 숫자판이 깔려 '다음' 버튼을 가로챈다(실기기 확인 2026-09-21).
     한때 201 로 올려 해결했지만, 그러면 .staff-gate(200, 직원 코드 잠금 화면)보다도 위에 서게 된다 —
     숫자 입력 500ms 뒤 자동저장이 401 을 받으면 그 화면이 뜨는데, 숫자판에 가려 안 보이면 로그인이
     막힌 줄 모른 채 계속 입력하게 된다. 그래서 판은 낮게 두고, 부딪히는 하단 막대만 판이 떠 있는
     동안 숨긴다(어차피 불투명한 판이 그 자리를 덮으므로 — 아래 body.kpad-on 규칙). */
  .kpad{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper-2);
        border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .kpad[hidden]{display:none}
  .kpad-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
           padding:7px 12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink)}
  .kpad-hd b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kpad-hd span{font-size:11px;color:var(--mute);font-weight:500;white-space:nowrap}
  .kpad-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px}
  .kpad-keys button{appearance:none;background:var(--card);border:1px solid var(--line);
    border-radius:9px;height:46px;font:inherit;font-size:19px;font-weight:600;color:var(--ink);cursor:pointer}
  .kpad-keys button:active{background:var(--paper)}
  .kpad-keys .kpad-back{font-size:17px;color:var(--mute)}
  .kpad-keys .kpad-next{background:var(--jade);border-color:var(--jade);color:var(--on-ink);font-size:15px;font-weight:800}
  body.kpad-on{padding-bottom:calc(300px + env(safe-area-inset-bottom))}   /* 판에 가려 마지막 줄을 못 보는 일이 없게 */
  /* 판(z90)보다 위(200)에 떠서 '다음' 키를 가로채던 막대들 — 어차피 불투명한 판이
     그 자리를 덮으므로 판이 열려 있는 동안은 그냥 숨긴다. .staff-gate(200) 는 로그인이
     막혔다는 뜻이라 반대로 판 위에 그대로 떠 있어야 하므로 여기서 건드리지 않는다. */
  body.kpad-on .pendbar, body.kpad-on .installbar{display:none}

/* ===== 재고 표 — 모바일에서 표가 이리저리 움직이던 것 + 머리글 고정 (사장님 2026-09-22) =====
   태블릿(아이패드) 폭에선 표가 제 스크롤 상자(높이 70vh, 가로도 넘침) 안에 들어 있어서, 손가락으로 잡으면
   페이지 대신 표 속이 위아래·옆으로 따로 밀렸다. 태블릿에선 상자를 풀고 페이지째 내려가게 한다.
   표가 화면 폭에 들어가도록 안전 칸을 빼고(폰 화면에서도 뺐다) 품목 칸을 조금 줄인다.
   머리글은 위 막대·탭 막대 바로 아래(--stick-top)에 붙인다 — 내려도 입고·사용·재고·폐기 이름이 보인다. */
@media (min-width:641px) and (max-width:1100px){
  :root:not(.capturing) #stock .tbl-scroll{max-height:none;overflow:visible;margin:0;padding:0}
  :root:not(.capturing) #stockTable{min-width:0;width:100%}
  :root:not(.capturing) #stockTable thead th{top:var(--stick-top,0px)}
  :root:not(.capturing) #stockTable th:nth-child(9),
  :root:not(.capturing) #stockTable td:nth-child(9){display:none}       /* 안전 */
  :root:not(.capturing) #stockTable .cinput.name{font-size:15px;width:148px}
  /* 품목 칸 최소 196px(가로로 밀 때 이름이 눌리지 않게 둔 것)을 풀어준다 — 여기선 가로로 밀 일이 없다 */
  :root:not(.capturing) #stockTable th:first-child,
  :root:not(.capturing) #stockTable td:first-child:not([colspan]){min-width:156px}
  :root:not(.capturing) #stockTable .substock .cinput{width:46px}      /* 소분·PK 두 칸 — 재고 칸이 150px 로 벌어지던 것 */
}
/* 폰: 머리글을 줄과 똑같은 한 줄로 되살려 붙인다 (줄 순서 = 품목 · 입고 · 사용 · 재고 · 폐기) */
@media (max-width:640px){
  :root:not(.capturing) #stockTable thead{display:block;position:sticky;top:var(--stick-top,0px);z-index:5}
  :root:not(.capturing) #stockTable thead tr{
    display:flex;align-items:center;gap:5px;padding:7px 2px;
    background:var(--head);border-radius:8px;
  }
  :root:not(.capturing) #stockTable thead th{
    display:none;position:static;padding:0;border:0!important;box-shadow:none;background:transparent;
    font-size:11.5px;font-weight:700;letter-spacing:0;   /* 글자색은 위 PC 머리글 규칙(흰 글자)을 그대로 받는다 */text-align:center;white-space:nowrap;
  }
  :root:not(.capturing) #stockTable thead th:nth-child(1){display:block;flex:1;min-width:0;text-align:left;padding-left:8px}
  :root:not(.capturing) #stockTable thead th:nth-child(3),
  :root:not(.capturing) #stockTable thead th:nth-child(5),
  :root:not(.capturing) #stockTable thead th:nth-child(6){display:block;flex:none;width:38px}
  :root:not(.capturing) #stockTable thead th:nth-child(4){display:block;flex:none;width:32px}
  /* 머리글 순서 = 줄 순서 */
  :root:not(.capturing) #stockTable thead th:nth-child(3){order:1}   /* 입고(생산) */
  :root:not(.capturing) #stockTable thead th:nth-child(4){order:2}   /* 사용 */
  :root:not(.capturing) #stockTable thead th:nth-child(5){order:3}   /* 재고 */
  :root:not(.capturing) #stockTable thead th:nth-child(6){order:4}   /* 폐기 */
  /* '생산·입고' 는 38px 에 안 들어간다 — 폰 머리글에선 '입고' 로 */
  :root:not(.capturing) #stockTable thead th:nth-child(3){font-size:0}
  :root:not(.capturing) #stockTable thead th:nth-child(3)::after{content:"입고";font-size:11.5px}
  /* 소분·PK(해동·생동) 두 칸 품목 — 38px 재고 칸에 두 입력칸이 옆으로 붙어 65px 로 넘쳤다.
     위아래로 쌓고 이름표는 숨긴다(빈 칸엔 흐린 '소분'·'PK', 숫자판을 열면 머리에 이름이 뜬다). */
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) .substock{
    display:flex;flex-direction:column;gap:3px;align-items:stretch;justify-content:center}
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) .substock .sublbl{display:none}
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) .substock input.cinput{
    flex:none;width:38px;min-width:0;height:22px;padding:0 2px;font-size:13px;text-align:center}
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) .substock input.cinput::placeholder{font-size:9.5px;color:var(--mute)}
  /* 두 칸 품목은 사용이 입력칸으로 그려져 크게 튀었다 — 다른 줄의 사용 숫자와 같은 모양으로 */
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) td:nth-child(4) input.cinput{
    width:32px;min-width:0;padding:0;border:0;background:transparent;font-size:13px;font-weight:700;color:var(--ink-2);text-align:center}
  /* 줄 순서도 입고 → 사용 → 재고 → 폐기 (사장님이 부른 순서, PC 표와 같은 순서) */
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(3){order:1}
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand) > td:nth-child(4){order:2}
}

/* ===== 재고 탭 다듬기 (사장님 2026-09-22) ===== */
/* 재고 탭 안 날짜 이동 — 표를 내려 본 채로 날짜를 넘긴다 */
.stock-date{display:flex;align-items:center;gap:8px;margin:8px 0 2px}
.stock-date .btn{padding:5px 11px;min-height:32px;font-size:12px}
.stock-date b{font-size:15px;min-width:92px;text-align:center}
.capturing .stock-date .btn{display:none}      /* 사진엔 날짜만 남긴다 */

/* 칸 구분선을 진하게 — 칸 사이 세로선·줄 사이 가로선 모두 (PC·태블릿 표, 폰 한 줄 배치) */
#stockTable th + th, #stockTable td + td{border-left-color:var(--grid)}
#stockTable tbody td{border-bottom-color:var(--grid)}
@media (max-width:640px){
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead):not(.expand){border-bottom-color:var(--grid)}
}

/* 태블릿: 상태 칸을 빼고 폰처럼 이름 앞 점으로 — 발주 빨강 · 주의 주황 · 충분 초록(기준 있을 때만) */
@media (min-width:641px) and (max-width:1100px){
  :root:not(.capturing) #stockTable th:nth-child(11),
  :root:not(.capturing) #stockTable td:nth-child(11){display:none}      /* 상태 */
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:first-child:not([colspan]){padding-left:20px}
  :root:not(.capturing) #stockTable tbody tr:not(.grouphead) td:first-child:not([colspan])::after{
    content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:transparent}
  :root:not(.capturing) #stockTable tbody tr.lv-ok   td:first-child:not([colspan])::after{background:var(--ok)}
  :root:not(.capturing) #stockTable tbody tr.lv-warn td:first-child:not([colspan])::after{background:var(--warn)}
  :root:not(.capturing) #stockTable tbody tr.lv-bad  td:first-child:not([colspan])::after{background:var(--bad)}
  /* 상태 칸이 빠진 자리 — 숫자 칸 폭을 고르게 나눠 줄을 맞춘다 */
  :root:not(.capturing) #stockTable{table-layout:fixed}
  :root:not(.capturing) #stockTable th:first-child{width:24%}
  :root:not(.capturing) #stockTable th:nth-child(5){width:20%}     /* 재고 — 소분·PK 두 칸 품목이 들어가게 */
}
/* 두 칸 품목의 흐린 이름(placeholder)은 폰 전용 — 태블릿·PC 는 옆에 이름표(sublbl)가 이미 있다 */
@media (min-width:641px){ #stockTable .substock input.cinput::placeholder{color:transparent} }

/* ===== 재고 편집 도구: 구역(제빵/원·부재료) · ▲▼ · 삭제 (사장님 2026-09-22) ===== */
#stockTable .rowtools{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#stockTable .grp-sel{font:inherit;font-size:12px;padding:3px 4px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
#stockTable .row-mv{min-width:30px;min-height:30px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font-size:11px;cursor:pointer}
/* 폰 한 줄 배치에선 편집 도구 칸이 숨어 있어 지우거나 옮길 수 없었다 — 편집 중엔 줄 아래에 한 줄로 */
@media (max-width:640px){
  :root:not(.capturing) #stockTable.editing tbody tr:not(.grouphead):not(.expand){flex-wrap:wrap}
  :root:not(.capturing) #stockTable.editing tbody tr:not(.grouphead):not(.expand) > td.delcell{
    display:block;order:9;flex:1 1 100%;text-align:right;padding-top:4px}
}

/* ===== 생산일지 편집 — 입력칸 ===== */
#bakeTable.editing .bkin{width:56px;text-align:center;font:inherit;font-weight:700;padding:5px 4px;border:1px solid var(--grid);border-radius:7px;background:var(--card);color:var(--ink)}
#bakeTable.editing .bkmove{white-space:nowrap}
#bakeTable.editing .bkdest{font:inherit;font-size:11.5px;margin-left:4px;padding:3px 2px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
#bakeEdit.on{background:var(--ink);color:var(--paper)}
/* 폰 카드에선 이동 칸이 좁다 — 수량과 보낸 곳을 위아래로 */
@media (max-width:640px){
  #bakeTable.editing .bkmove{white-space:normal;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  #bakeTable.editing .bkdest{margin-left:0;max-width:100%}
}
/* 마감 사진(폰): 공유 시트로 '이미지 저장' — 크게 누르기 쉬운 단추 (2026-09-22) */
.shot-overlay .so-save{flex:1;min-height:44px;border:0;border-radius:10px;background:#fff;color:#111;font:inherit;font-size:15px;font-weight:800;cursor:pointer}

/* 마감 사진 — 폰에서 생산일지를 카드 모양 그대로 찍어 폭 200px 남짓의 길쭉한 사진(읽을 수 없음)이 됐다(2026-09-22 확인).
   재고 표처럼 사진 찍는 동안만 표 모양으로 되돌린다. 사진은 훑어보는 기록이지 적는 화면이 아니다. */
@media (max-width:640px){
  .capturing #bake .tbl-scroll{overflow:visible;margin:0;padding:0}
  .capturing #bake .card{width:max-content;min-width:100%}
  .capturing #bakeTable{display:table;min-width:640px}
  .capturing #bakeTable thead{display:table-header-group}
  .capturing #bakeTable tbody{display:table-row-group}
  .capturing #bakeTable tbody tr{display:table-row;background:none;border:0;border-radius:0;padding:0;margin:0}
  .capturing #bakeTable tbody td,
  .capturing #bakeTable tbody td:first-child:not([colspan]){
    display:table-cell;padding:8px 9px;text-align:center;vertical-align:middle;white-space:nowrap;
    font-size:13.5px;border-bottom:1px solid var(--line-2)!important}
  .capturing #bakeTable tbody td::before{content:none}
  .capturing #bakeTable tbody td.nm{font-size:14px;text-align:left}
}
/* 사진 찍는 칸(패널) 자체가 화면 폭(331px)이라 그보다 넓은 표(생산일지 730px·재고 520px+)의 오른쪽이 사진에서 잘렸다.
   찍는 동안만 패널을 내용 폭만큼 넓힌다 (캡처 엔진은 찍는 요소의 폭으로 그림을 자른다). */
@media (max-width:640px){
  /* max-content 로 두면 긴 글줄(특이사항 등)까지 한 줄로 펴져 재고 패널이 1600px 가 넘었다 — 표에 맞춘 폭으로 */
  .capturing #bake{width:max(100%,740px)}
  .capturing #stock{width:max(100%,910px)}
  .capturing #product{width:max(100%,600px)}
  .capturing #product .tbl-scroll{overflow:visible}
}
@media (max-width:640px){
}

/* 실시간 같이 보기 — 적는 중에 다른 기기가 고쳤을 때 알림 띠 (덮어쓰지 않는다) */
.livebar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:185;display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:600;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.livebar span{flex:1}
.livebar .lb-go{border:0;border-radius:8px;padding:8px 12px;background:var(--paper);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.livebar .lb-x{border:0;background:transparent;color:var(--paper);font:inherit;font-size:15px;cursor:pointer;padding:4px 6px}
body.kpad-on .livebar{display:none}

/* ===== 변경 기록 (2026-09-23) ===== */
.changes-card{margin-top:14px}
.chg-list{display:flex;flex-direction:column;gap:0;margin-top:6px}
.chg-row{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:7px 2px;border-top:1px solid var(--line-2);font-size:13px;line-height:1.45}
.chg-row:first-child{border-top:0}
.chg-t{color:var(--mute);font-variant-numeric:tabular-nums;padding-top:1px}
.chg-who{font-weight:700}
.chg-item{font-weight:600}
.chg-val{font-variant-numeric:tabular-nums}
.chg-val b{font-weight:800}
.chg-empty{color:var(--mute);font-size:13px;padding:8px 2px}
.capturing .changes-card{display:none !important}   /* 사진엔 안 남긴다 */