: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; /* 토스 파랑 — 시간대 매출 '오늘' 라인·툴팁 점 */
--s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; /* 매장 색(홈 비중 막대·점, 시안) — BRANCHES 순서 */
/* 살짝 비치는 바탕(위쪽 머리띠·직원코드 화면). 반투명이라 --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; /* 토스 파랑(어두운 화면용, 살짝 밝게) */
--s1:#4C90F7; --s2:#F2845A; --s3:#3ECF98; --s4:#F5B83D; /* 매장 색(어두운 화면용, 살짝 밝게) */
--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; /* 토스 파랑(어두운 화면용, 살짝 밝게) */
--s1:#4C90F7; --s2:#F2845A; --s3:#3ECF98; --s4:#F5B83D; /* 매장 색(어두운 화면용, 살짝 밝게) */
--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} /* 설정 경고는 기록이 아니다 */
.capturing #manSalesCard{display:none} /* 매출 조정은 입력 칸이라 마감 사진에 안 넣는다(사장님 2026-10-18) */
.capturing #closeCheck{display:none} /* 마감 점검은 확인용 — 사진에 안 넣는다(2026-10-21) */
.capturing #recipeCmp{display:none} /* 레시피 사용량 비교는 확인용 — 마감 사진엔 직원이 적은 사용만(관리자 2026-11-09) */
/* 토스 판매 비교는 마감 사진에 넣는다(사장님 2026-10-28) — 전엔 확인용이라 뺐다 */
.pos-cmp{margin-top:16px}
.pos-cmp .pc-sum{margin:2px 0 12px;font-size:14px;line-height:1.5} .pos-cmp .pc-bad{color:var(--bad)} .pos-cmp .pc-good{color:var(--good,#1a7f5a)}
.pos-cmp table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pos-cmp th,.pos-cmp td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line);font-size:14px}
.pos-cmp th.l,.pos-cmp td.l{text-align:left} .pos-cmp thead th{font-size:12px;color:var(--mute);font-weight:600}
.pos-cmp td.sum{font-weight:800} .pos-cmp td.dif{width:80px}
.pos-cmp .pc-in{width:64px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:transparent;color:inherit;font:inherit;font-weight:800}
/* 손으로 고친 토스 판매 — 비교 카드·재고표 둘 다 노란 칸(2026-10-28) */
.pos-cmp .pc-in.posfix,#stockTable .cinput.pos.posfix{background:var(--warn-soft);color:var(--warn)}
#stockTable .posw{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
#stockTable .pos-split{font-size:10.5px;line-height:1.2;color:var(--ink-2);white-space:nowrap} /* 판매 칸 아래 기본·세트(관리자 2026-11-05) */
.pos-cmp tr.grp td{background:var(--card-2,rgba(127,127,127,.06));font-size:12px;font-weight:700;color:var(--mute);padding:6px 12px;letter-spacing:.02em}
.pos-cmp tr.grp td span{margin-left:8px;color:var(--bad)}
.pos-cmp tr.bad td{background:var(--bad-soft)} .pos-cmp tr.bad td.l{font-weight:700}
.pos-cmp tr.quiet td{color:var(--mute)}
.pos-cmp .pc-b{display:inline-block;min-width:38px;padding:2px 8px;border-radius:999px;background:var(--bad);color:#fff;font-weight:800;text-align:center}
.pos-cmp .pc-ok{color:var(--mute)}
.close-check .cc-n{font-size:12px;font-weight:700;color:var(--warn)}
.close-check .cc-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.close-check .cc-list li{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600;line-height:1.5}
.close-check .cc-list li b{font-weight:800}
.close-check .cc-foot{margin:8px 0 0}
.close-check .cc-ok{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--ok)}
/* 마감 점검 여러 곳 — 매장마다 한 묶음(2026-11-03) */
.close-check .cc-br{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.close-check .cc-br:first-of-type{border-top:0;padding-top:0}
.close-check .cc-br h4{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.close-check .cc-br>p{margin:6px 0 0;font-size:13px}
/* 마스터 전용: 지점 코드 관리 */
.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)}
/* 오버레이 자체가 세로로 스크롤된다 — 박스가 화면보다 길어도 끝까지 볼 수 있게.
내용이 늘어(제빵 채우기 등) 화면을 넘겼는데 스크롤이 없어 아래가 잘렸었다. */
/* 접속 권한 화면(#access) — 예전엔 덮는 창이었다(2026-11-03 본문 화면으로) */
.code-admin{margin-top:14px;max-width:760px}
.code-admin .ca-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px 18px}
.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);color:var(--ink);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)}
/* 접속 권한(크루 허브 코드, 2026-11-01) — 검은 단추 = 켜짐, 테두리 단추 = 꺼짐 */
.code-admin .ac-find{width:100%;box-sizing:border-box;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);color:var(--ink)}
.code-admin .ac-grp{font-size:11.5px;font-weight:800;color:var(--ink-2);background:var(--paper-2);border-radius:8px;padding:6px 10px;margin:14px 0 2px}
.code-admin .ac-grp i{font-style:normal;font-weight:500;color:var(--mute);margin-left:4px}
.code-admin .ac-row{border-top:1px solid var(--line-2);padding:10px 4px}
.code-admin .ac-grp+.ac-row{border-top:0}
.code-admin .ac-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;width:100%;appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.code-admin .ac-head:hover b{text-decoration:underline}
.code-admin .ac-who{display:flex;align-items:baseline;gap:6px;min-width:0}
.code-admin .ac-ch{font-size:10.5px;font-weight:700;color:var(--bad);border:1px solid currentColor;border-radius:999px;padding:0 6px}
.code-admin .ac-sum{margin-left:auto;font-size:12px;color:var(--ink-2);text-align:right}
.code-admin .ac-sum.no{color:var(--mute)}
.code-admin .ac-row.open .ac-sum{display:none}
.code-admin .ac-filt{margin-top:10px}
.code-admin .ac-filt .ac-btns{margin-top:6px}
.code-admin .ac-head b{font-size:14px}
.code-admin .ac-meta{font-size:11.5px;color:var(--mute);white-space:nowrap}
.code-admin .ac-code{display:none;font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.04em;padding:1px 6px;border-radius:6px;border:1px solid var(--line-2);white-space:nowrap}
.code-admin.codes-on .ac-code{display:inline-block}
.code-admin .ac-code[data-copy]{cursor:copy} .code-admin .ac-code i{font-style:normal;font-size:11px;opacity:.7}
.code-admin .ac-lab{font-size:11px;color:var(--mute);margin:8px 0 5px}
.code-admin .ac-lab.no{color:var(--pat);font-weight:700}
.code-admin .ac-btns{display:flex;flex-wrap:wrap;gap:6px}
.code-admin .ac-b{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--mute);font:inherit;font-size:12.5px;border-radius:999px;padding:6px 12px;cursor:pointer}
.code-admin .ac-b.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:700}
.code-admin .ac-b:disabled{opacity:.5;cursor:default}
.code-admin .ac-invb{appearance:none;display:block;border:1px solid var(--line-2);background:none;border-radius:8px;padding:6px 10px;margin-top:10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.code-admin .ac-inv pre{white-space:pre-wrap;word-break:break-all;font:inherit;font-size:12px;line-height:1.6;background:var(--paper-2);border-radius:8px;padding:10px 12px;margin:8px 0}
.code-admin .ac-reset{appearance:none;border:0;background:none;padding:0;margin-top:8px;font:inherit;font-size:12px;color:var(--mute);text-decoration:underline;cursor:pointer}
.code-admin .ac-err{color:var(--bad);font-size:12px;margin-top:6px}
.code-admin .ac-err:empty{display:none}
.code-admin .ac-none{color:var(--mute);font-size:12.5px;margin-top:10px}
.code-admin .ac-note{margin:12px 0 0;font-size:12px;color:var(--mute)}
.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에 묻히지 않게 */
/* 지출·매입 */
#pfTable td,#pfLoss td,#pfWeek td,#pfSplit td{padding:8px 10px;text-align:right;white-space:nowrap}
#pfTable td:first-child,#pfLoss td:first-child,#pfWeek td:first-child,#pfSplit td:first-child{text-align:left}
#pfTable tr.sum td,#pfWeek tr.sum td,#pfSplit tr.sum td{font-weight:800;border-top:1px solid var(--line)}
#pfTable tr.sub td:first-child{padding-left:24px;color:var(--mute)}
#pfTable .pc,#pfWeek .pc,#pfSplit .pc{color:var(--mute);font-size:11.5px;margin-left:6px}
#pfTable .neg,#pfWeek .neg,#pfSplit .neg,.rp-kpi .v.neg,.pf-week-head .neg{color:var(--bad)}
.pf-week-head{font-size:16px;font-weight:700;margin:4px 0 12px;line-height:1.6}
.pf-week-head b{font-size:20px;font-weight:800}
.pf-notes{margin:8px 0 0;padding-left:18px}
/* 영업이익 다듬기 (2026-10-19) — 주간 타일 · 확인할 것 · 접는 계산 방법 */
.pf-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 14px}
.pf-tile{background:var(--paper-2);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px}
.pf-tile .k{font-size:12px;color:var(--mute);font-weight:700}
.pf-tile .v{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:4px 0 1px;font-variant-numeric:tabular-nums}
.pf-tile .v.neg{color:var(--bad)}
.pf-tile .s{font-size:12px;color:var(--mute)}
.pf-alerts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pf-alerts:empty{display:none}
.pf-alert{display:flex;align-items:center;gap:10px;background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600}
.pf-alert span{flex:1}
.pf-alert button{appearance:none;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:700;border-radius:8px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.pf-month .rp-bar h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.pf-month .rp-bar h3 .eb{font-size:9.5px;letter-spacing:.16em;color:var(--mute);font-weight:700;text-transform:uppercase}
.pf-more{margin-top:10px}
.pf-more summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--mute);list-style:none}
.pf-more summary::-webkit-details-marker{display:none}
.pf-more summary::before{content:'▸ '}
.pf-more[open] summary::before{content:'▾ '}
@media (max-width:620px){ .pf-tiles{grid-template-columns:1fr} }
.pf-notes li{margin:3px 0}
#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)}
.ledger .row.sub{padding:0 0 5px 10px;font-size:12px} /* 할인 아래 '복지센터' — 할인 안에 든 금액이라 더하지 않는다 */
.ledger .row.sub b{font-weight:600;color:var(--mute)}
.ledger .row[hidden],.rp-cell .s[hidden]{display:none} /* 위 display:flex 가 hidden 을 이긴다 — 복지센터 0원인 날 줄이 그대로 보였다 */
.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)}
/* ---------- 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}
/* 근무표 자동 채우기(2026-10-22) — 기준 글·다시 채우기 단추는 조작용이라 사진에 안 넣는다 */
.capturing .sh-bar,.capturing .sh-auto,
.capturing .sh-refill{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}
.rf-why{display:block;width:100%;box-sizing:border-box;margin:0 0 4px;padding:5px 8px;font:inherit;font-size:12px;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:6px}
.rf-why:placeholder-shown{border-style:dashed}
.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}
/* 관리자 앱 생산일지(스티커·폐기 사유) — 품목 이름 아래 작은 글, 특이사항·전일재고 재사용은 표 아래 (2026-11-01) */
.bl-tag{display:block;margin-top:2px;font-size:11.5px;font-weight:500;line-height:1.35;color:var(--ink-2);white-space:normal;overflow-wrap:anywhere}
.bl-foot{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.bl-foot div+div{margin-top:4px}
.bl-foot b{margin-right:6px;color:var(--ink-2)}
.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)}
.memo-don{margin:6px 0 2px;padding:8px 10px;border-radius:8px;background:var(--warn-soft);color:var(--warn);font-size:12.5px;line-height:1.5} /* 기부는 폐기 아님(2026-11-01~) */
#soPointCheck{margin:8px 0 0} #soPointCheck.warn{color:var(--warn);font-weight:600} /* 선결제 판매 = 포인트 적립 맞춰 보기(2026-11-07) */
.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}
.sh-bar{display:flex;align-items:center;gap:8px;margin:-4px 0 8px;font-size:11px}
.sh-auto{color:var(--ink-3,#999)}
.sh-bar{flex-wrap:wrap}
.sh-pend{order:9;flex-basis:100%;color:var(--ink-3,#999)} /* 실근무 인정 전 — 회색 한 줄, 사진엔 .sh-bar 째로 빠진다(2026-11-03) */
/* 크루 허브 실근무 인정 칸(관리자 2026-11-07 B안) — 마감 사진에도 찍힌다 */
.sh-recog{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.sh-recog .rc-hd{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);padding-bottom:6px;border-bottom:1px solid var(--line)}
.sh-recog ul{list-style:none;margin:0;padding:0}
.sh-recog li{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.sh-recog li:last-child{border-bottom:0}
.sh-recog .rc-b{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.sh-recog li.wait,.sh-recog li.ab{color:var(--ink-3,#999)}
.sh-recog li.wait .rc-b{background:transparent;border:1px dashed var(--line);color:var(--ink-3,#999)}
.sh-recog li.ab .rc-b{background:transparent;color:var(--pat)}
.sh-recog .rc-h{font-size:12px;color:var(--ink-2);min-width:34px;text-align:right}
.sh-recog .rc-sub{grid-column:2/-1;display:flex;gap:8px;font-size:11px;color:var(--ink-2)}
.sh-recog .rc-is{padding:0 6px;border-radius:5px;background:var(--line)}
.sh-recog .rc-is.warn{background:var(--warn-soft);color:var(--warn)}
.capturing #memoCards .sh-recog{display:none !important} /* 매출상세 사진엔 빼고 — 실근무 인정은 한 장 따로(2026-11-07) */
.shot-recog{width:480px;padding:16px;background:var(--card)}
.shot-recog[hidden]{display:none}
.shot-recog .sh-recog{margin-top:0}
.sh-refill{margin-left:auto;border:1px solid var(--line);background:transparent;border-radius:8px;padding:3px 8px;font-size:11px;color:var(--ink-2);cursor:pointer}
.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}
.ratio-card .rrow.sub{border-top:0;margin-top:0;padding:0 0 6px 10px;font-size:12px;color:var(--mute)} /* 할인 아래 '복지센터' — 할인 안에 든 금액 */
.ratio-card .rrow.sub b{font-weight:600;color:var(--mute)}
.ratio-card .rrow[hidden]{display:none} /* display:flex 가 hidden 을 이기지 않게 */
/* 안전재고 미달은 상태 칸 글씨로만 알린다 — 줄 색·빨간불은 쓰지 않는다.
시트 기준으로는 미달 품목이 워낙 많아 빨갛게 칠하면 전부 경고처럼 보인다. */
/* 상태 칩 — 표에서 눈으로 훑을 때 걸리도록 */
.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)}
.stat.wait{background:var(--jade-softer);color:var(--ink-2);outline:1px dashed var(--line)}
.ord-cancel{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11px;color:var(--ink-2);line-height:1.4} /* 주문 취소 확인(2026-11-06) */
.ord-cancel .btn.xs{padding:2px 8px;font-size:11px;min-height:0;border-radius:999px} /* 입고 대기 — 발주는 보냈고 도착 전(2026-10-28) */
.stat[data-ord]{cursor:pointer}
/* 상태를 고르는 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.od-lot{width:64px;text-align:right} /* 발주 탭: 발주 단위 */
/* 발주 탭 골라 담기 · 개수 · 찾기 (사장님 2026-10-21) */
.od-count{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.od-count .stat{font-size:12px}
.od-count .n{font-size:12px;color:var(--mute);font-weight:600}
.od-tools{margin:12px 0 8px}
.od-tools .sync:empty{display:none}
#odTable .od-pickcol{width:34px;text-align:center}
#odTable td.od-pick{text-align:center}
#odTable input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink);cursor:pointer}
#odTable tr.off td:not(.od-pick){opacity:.45}
#odTable .cinput.od-qty{width:72px;text-align:right;font-weight:700}
#odTable td .dim-tag{font-size:11px;color:var(--mute);margin-left:4px}
/* 매출 조정 (2026-10-19 다듬음) — 줄: 항목 · 더하기/빼기 · 금액 · ✕ */
.man-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2)}
.man-row:first-child{border-top:1px solid var(--line-2)}
.man-row .minput{font-size:14px;padding:8px 10px;border-radius:9px;height:38px;box-sizing:border-box}
.man-row .man-n{flex:0 1 150px;min-width:0;font-weight:700}
.man-amt{flex:1 1 120px;display:flex;align-items:center;gap:4px;min-width:0}
.man-amt .man-a{flex:1;min-width:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.man-amt .u{font-size:13px;color:var(--mute)}
.man-amt .man-a.neg{color:var(--bad)}
.man-empty{margin:2px 0 4px;font-size:13px;color:var(--mute)}
.man-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.man-quick button{appearance:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--paper-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;cursor:pointer}
.man-quick button:hover{border-color:var(--ink)}
.man-foot{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.man-sum{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.man-sum .k{font-size:12px;font-weight:600;color:var(--mute);margin-right:6px}
.man-sum.pos .v{color:var(--ok)} .man-sum.neg .v{color:var(--bad)}
.man-status{flex:1;font-size:12px;color:var(--mute)}
.man-status.warn{color:var(--warn)}
@media (max-width:520px){ .man-row .man-n{flex-basis:118px} }
.rptgt{display:inline-flex;gap:3px}.rptgt .cinput{width:52px} /* 재고표: 발주점·목표 두 칸 한 자리에 (폰 격자는 칸 순서를 세므로 칸을 늘리지 않는다) */
.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}
.jatwrap{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px} /* 자투리(광교·신촌) — 아랫줄에 한 칸 더 */
.memo-cord{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle} /* 카드 순서 ▲▼(편집 모드) */
.memo-cord button{appearance:none;border:1px solid var(--line-2);background:transparent;color:var(--mute);font-size:10px;line-height:1;padding:3px 5px;border-radius:5px;cursor:pointer}
.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:var(--jade-softer)} /* 눈이 가로로 따라가게. 색을 박아 두면(#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}
/* ── 재고 표 다시 읽기 쉽게 (사장님 2026-10-07 "가시성이 많이 떨어진다") ──
63줄이 전부 같은 무게였다: 이름·숫자가 다 굵고 가운데, 칸마다 가로·세로 선.
① 이름은 왼쪽·숫자는 오른쪽에 세우고 세로선을 걷는다(가로로 따라 읽고 세로로 훑는다) · 줄 높이를 줄인다
② 0은 한 톤 뒤로 — 생산·사용의 0은 '확인 안 한 칸'처럼 사라지면 안 돼서 읽히는 회색으로만(z1)
③ 마감 때 직접 적는 재고·폐기 칸에 옅은 바탕
④ 문제 있는 줄만 색: 안전재고에 못 미친 재고는 빨강, 폐기가 있으면 주황
넓은 화면과 마감 사진에만 건다(html.wide 는 app.js 가 붙인다) — 폰은 줄마다 카드라 이 표가 아니다.
위쪽의 '가운데 정렬·세로줄'(2026-09) 규칙을 덮는 것이므로, 되돌리려면 이 묶음만 지우면 된다. */
/* 2026-10-29 사장님 "세로 구분선 아직 적용 안 됐다" — 넓은 화면·사진에서 오른쪽 정렬·세로선 걷기(위 ①)를 뺐다.
이제 폰·넓은 화면·마감 사진 모두 가운데 정렬 + 세로선(재고 표 위쪽 규칙). 구역 줄 이름만 왼쪽(한 칸을 가로지른다) */
:root:is(.wide,.capturing) #stockTable tr.grouphead td.l{text-align:center} /* 구역 이름 줄도 가운데(사장님 2026-10-29 "다 정렬 맞춰줘") */
:root:is(.wide,.capturing) #stockTable.edit td{padding:2px 10px}
:root:is(.wide,.capturing) #stockTable.edit td:first-child{padding-left:14px}
:root:is(.wide,.capturing) #stockTable .cinput.name{font-size:15px;font-weight:700}
:root:is(.wide,.capturing) #stockTable tr.grouphead td{font-size:12.5px;font-weight:800;color:var(--ink);background:var(--paper-2);padding-top:9px;padding-bottom:9px}
#stockTable input.cinput.z1, #stockTable .calc.z1{color:var(--mute);font-weight:400}
/* 표 안쪽 스크롤 막대 — 색을 안 정하면 어두운 화면에서 흰 띠가 선다 */
#stock .tbl-scroll{scrollbar-color:var(--grid) transparent}
:root:is(.wide,.capturing) #stockTable td:is([data-lbl="재고"],[data-lbl="폐기"]){background:var(--jade-soft)}
:root:is(.wide,.capturing) #stockTable tbody tr:hover td:is([data-lbl="재고"],[data-lbl="폐기"]){background:var(--jade-soft)}
#stockTable tr.lv-bad .cinput.stockv, #stockTable tr.lv-bad .substock input.cinput{color:var(--bad);font-weight:800}
#stockTable input.cinput.wv{color:var(--warn);font-weight:800}
/* ── 재고 골라 보기 · 구역 개수 · 넓은 화면에서도 페이지째 내리기 (사장님 2026-10-07) ── */
.sfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.sf-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto}
.sf-chip{appearance:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--card);
border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.sf-chip b{font-weight:800;color:var(--ink);margin-left:2px;font-variant-numeric:tabular-nums}
.sf-chip.none{opacity:.55} /* 해당 줄이 없는 것 — 눌러도 되지만 조용히 */
.sf-chip.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.sf-chip.on b{color:var(--on-ink)}
.sf-chip[data-sf="warn"]:not(.on):not(.none) b,.sf-chip[data-sf="waste"]:not(.on):not(.none) b{color:var(--warn)}
.sf-search{flex:0 1 220px;min-width:140px;font:inherit;font-size:16px;padding:7px 12px;border:1px solid var(--line);
border-radius:999px;background:var(--card);color:var(--ink)} /* 16px — 아이폰이 누를 때 화면을 확대하지 않게 */
.sf-search:focus{outline:none;border-color:var(--ink)}
.capturing .sfilter{display:none} /* 사진은 늘 전체 */
@media (max-width:640px){ .sf-search{flex:1 1 100%} } /* 폰에선 검색 칸이 한 줄을 통째로 */
:root:not(.capturing) #stockTable:not(.editing) tbody tr.fhide{display:none !important} /* 편집(순서 바꾸기) 중에는 다 보인다 */
#stockTable tr.grouphead .gcount{margin-left:6px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.capturing #stockTable tr.grouphead .gcount{display:none}
.sf-empty{margin:14px 0 4px;color:var(--ink-2)}
/* 넓은 화면도 표를 상자(70vh)에 가두지 않는다 — 열두 줄만 보이고 스크롤이 이중이었다. 태블릿·폰은 이미 이렇게 돈다.
머리글은 위 줄(.topbar) 바로 아래(--stick-top)에 붙어 따라온다. 1101px 부터는 표가 카드 폭에 들어가 가로로 밀 일이 없다. */
@media (min-width:1101px){
:root:not(.capturing) #stock .tbl-scroll{max-height:none;overflow:visible}
:root:not(.capturing) #stockTable thead th{top:var(--stick-top,0px)}
}
.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)}
.memo-edit .drag-handle{width:22px;height:28px;flex:none} /* 끌어서 순서 변경(2026-11-09, 재고표와 같은 손잡이) */
.memo-edit.dragging{opacity:.4}
.memo-edit.drop-before{box-shadow:inset 0 2px 0 var(--ink)}
.memo-edit.drop-after{box-shadow:inset 0 -2px 0 var(--ink)}
.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:flex-start;gap:6px;padding:4px 0} /* 글이 여러 줄로 늘어도 옆 칸이 첫 줄에 맞게 위로(2026-11-09) */
/* 영업일지 글칸 — 한 줄 textarea, 글 길이만큼 아래로 늘어난다(높이는 memoFit, 되는 브라우저는 field-sizing) */
textarea.minput{display:block;resize:none;overflow:hidden;line-height:1.45;height:auto;white-space:pre-wrap;overflow-wrap:anywhere;field-sizing:content}
.memo-row input.minput{line-height:1.45}
/* 창고 카드 — 영업일지 카드(.mini·.memo-row)를 그대로 쓰고, 이름 칸·지우기 단추만 더한다 */
.dp-name{flex:1 1 0;font-weight:700;font-size:13.5px;background:transparent;border-color:transparent;padding-left:0}
.dp-name:hover,.dp-name:focus{border-color:var(--line);padding-left:7px}
.dp-row .ml{flex:2.2 1 0} /* 폰에서 품목 이름이 잘리지 않게 — 수량·단위는 짧다 */
.dp-row .mv{flex:.9 1 0}
.dp-row .dp-u{flex:.6 1 0;min-width:0;text-align:center}
.dp-row .dp-min{flex:.7 1 0;min-width:0;text-align:center}
.dp-x{flex:none;width:26px;height:26px;border:0;background:transparent;color:var(--ink-3,#999);font-size:15px;border-radius:7px;cursor:pointer}
.dp-x:hover{background:var(--bad-soft);color:var(--bad)}
.memo-row .mr-label{flex:1.1 1 0;min-width:0;font-size:13px;line-height:1.45;padding:6px 0;color:var(--ink-2);overflow-wrap:anywhere} /* 긴 항목 이름도 줄바꿈, 옆 칸 첫 줄과 같은 높이 */
.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;text-align:left;font-weight:400} /* 특이사항 비고는 문장 — 여러 줄이면 가운데 정렬이 어지럽다 */
/* 근무 탭: 사람 줄을 펼치면 주차별·일자별이 나온다 */
.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.dp-low .minput.mv{background:var(--bad-soft);color:var(--bad);border-color:var(--bad);font-weight:700} /* 창고: 최소 수량 밑 — 위 투명 바탕 규칙보다 뒤·더 세게 */
/* 폐기 내역 – 재고 탭에서 자동으로 온 읽기전용 행 */
.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-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 #sgEmail,.staff-gate #sgPw,.staff-gate #fpEmail{letter-spacing:0;text-align:left;margin-bottom:8px}
.staff-gate #sgSignup{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.staff-gate #sgSignup input{letter-spacing:0;text-align:left;margin-bottom:8px}
.staff-gate .sg-or{margin:16px 0 10px}
.staff-gate .sg-forgot{display:inline-block;margin-top:10px;color:var(--mute);font-size:12.5px;text-decoration:underline;cursor:pointer;letter-spacing:0}
.staff-gate .sg-forgot:hover{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) 밖으로 절반이 나간다. 마감은 폰으로 하니
가로로 밀면서 숫자를 넣게 된다.
칸()은 손대지 않고 배치만 바꾼다 — 같은 data-i·data-k 를 쓰므로
저장·편집·시트 불러오기가 전부 그대로 돈다. 머리글이 사라지는 대신
각 칸 위에 이름을 붙인다(::before). */
@media (max-width:640px){
/* 헤더가 좁은 화면에서 넘쳤다: 브랜드(OKRUMONG·CLOSING) 199px + 밝기 + 지점 버튼이
한 줄에 안 들어가 지점 버튼이 19px 밖으로 나갔다. CLOSING 은 장식이라 뺀다. */
.top-inner{gap:10px}
/* 로그아웃·코드 관리·설명서 단추까지 붙으면 320px 에서 머리 줄이 넘쳐 화면 전체가 옆으로 밀렸다 — 두 줄로 접어 단추가 다 보이게(2026-11-01).
(옛 위 탭 막대는 지웠다 2026-11-03 — 지금은 위 줄(.topbar) 높이를 app.js setStickTop 이 재서 표 머리글을 붙인다) */
.top-inner{flex-wrap:wrap;height:auto;min-height:60px;row-gap:6px;padding-top:8px;padding-bottom:8px;box-sizing:border-box}
.top-inner{column-gap:6px}
.branch-btn{padding:6px 10px}
.code-admin-btn{margin-left:0;padding:6px 8px}
.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(11){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(11)::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) 메뉴 탭이 오른쪽에서 잘렸다 — 옛 위 탭 줄은 왼쪽 메뉴로 바뀌어 지웠다(2026-11-03).
2) 디톡스 판매 개수: 세부사항 칸이 없는 카드(nonote)만 숫자가 왼쪽으로 치우쳤다
→ 다른 카드와 같은 자리(가운데 칸)에 놓고, 세부사항 자리는 빈 칸으로 채운다.
3) 재고 카드 버튼 줄(서버 연동·토스 비교 숨기기·시트 불러오기·편집·저장):
글자가 두세 줄로 꺾여 높이가 제각각 → 한 줄 고정, 자리가 모자라면 버튼 단위로 다음 줄. */
@media (max-width:640px){
.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(12)::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}
#bakeTable tbody td:nth-child(12){grid-area:3/4}
#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, 가로도 넘침) 안에 들어 있어서, 손가락으로 잡으면
페이지 대신 표 속이 위아래·옆으로 따로 밀렸다. 태블릿에선 상자를 풀고 페이지째 내려가게 한다.
표가 화면 폭에 들어가도록 안전 칸을 빼고(폰 화면에서도 뺐다) 품목 칸을 조금 줄인다.
머리글은 위 줄(.topbar) 바로 아래(--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(11),
:root:not(.capturing) #stockTable td:nth-child(11){display:none} /* 안전 (기부 칸이 9번 이동 뒤에 들어와 한 칸씩 밀림, 2026-11-08) */
: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)}
/* 재고표 바깥 테두리(관리자 2026-11-06) — 시트처럼 표 둘레를 닫는다. 머리글은 고정이라 위 선은 머리글 칸에. 폰 한 줄 배치는 줄 카드라 뺀다 */
#stockTable{border:1px solid var(--grid)}
/* 두 칸·세 칸 품목 안 구분선(관리자 2026-11-06) — 해동|냉동 · 소분|PK 는 세로선, 원팩/자투리 · 소분·PK/자투리 는 가로선 */
#stockTable .substock .seg{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 0;align-self:stretch;padding:4px 6px}
#stockTable .substock .seg + .seg{border-left:1px solid var(--grid)}
/* 나뉜 칸은 칸 테두리까지 선이 닿게 — 그 칸만 안쪽 여백을 없애고 속을 칸 높이·너비 가득(td height:1px + 100% 는 표 칸 높이를 물려받는 방법) (관리자 2026-11-06 '구분선이 외곽선이랑 끝까지 연결이 안 돼') */
@media (min-width:641px){
:root:root #stockTable td:has(> .jatwrap), :root:root #stockTable td:has(> .substock .seg){padding:0;height:1px} /* :root:root — 넓은 화면 칸 여백 규칙(:root:is(.wide) #stockTable.edit td)보다 세게 */
#stockTable td > .jatwrap, #stockTable td > .substock:has(.seg){height:100%;width:100%}
#stockTable .substock:has(.seg){gap:0;align-items:stretch}
}
:root.capturing:root #stockTable td:has(> .jatwrap), :root.capturing:root #stockTable td:has(> .substock .seg){padding:0;height:1px}
.capturing #stockTable td > .jatwrap, .capturing #stockTable td > .substock:has(.seg){height:100%;width:100%}
.capturing #stockTable .substock:has(.seg){gap:0;align-items:stretch}
#stockTable .jatwrap{display:flex;flex-direction:column;align-items:stretch;gap:0}
#stockTable .jatwrap > .substock{flex:1 1 0;justify-content:center;padding:4px 6px}
#stockTable .jatwrap > .substock:has(.seg){padding:0}
#stockTable .jatwrap > .substock + .substock{border-top:1px solid var(--grid)}
/* 원팩·자투리 숫자를 세로로 맞춘다 — 이름표 너비를 같게(자투리 세 글자 기준) */
#stockTable .jatwrap > .substock > .sublbl{min-width:3.4em;text-align:right}
@media (max-width:640px){ /* 폰 한 줄 배치는 예전 그대로 — 위 나뉜 칸 모양을 되돌린다 */
:root:not(.capturing) #stockTable .substock .seg{display:contents}
:root:not(.capturing) #stockTable .jatwrap{display:inline-flex;width:auto;align-items:flex-end;gap:4px}
:root:not(.capturing) #stockTable .jatwrap > .substock{flex:none;padding:0;border-top:0}
:root:not(.capturing) #stockTable .jatwrap > .substock > .sublbl{min-width:0}
}
/* 토스 판매 비교 표 바깥 테두리 — 재고표와 같게 */
.pos-cmp table{border:1px solid var(--grid)}
#stockTable thead th{box-shadow:inset 0 1px 0 var(--grid)}
@media (max-width:640px){ :root:not(.capturing) #stockTable{border:0} :root:not(.capturing) #stockTable thead th{box-shadow:none} }
@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(13),
:root:not(.capturing) #stockTable td:nth-child(13){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 두 칸 품목이 들어가게 */
/* 나머지 숫자 칸도 폭을 준다 — 구역 줄(제빵·원부재료)이 13칸을 걸쳐 숨은 칸(토스 판매·차이·안전·단위·상태·편집)도 열로 남아,
폭 없는 그 칸들이 남는 폭을 다 가져가 표 오른쪽이 비고 숫자 칸이 찌그러졌다(관리자 2026-11-03 "창 크기 줄였을 때 찌그러짐").
편집 중엔 편집 도구 칸이 남는 폭을 써야 해서 그대로 둔다 */
:root:not(.capturing) #stockTable:not(.editing) th:not(:first-child):not(:nth-child(5)){width:11%}
}
/* 두 칸 품목의 흐린 이름(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 .lot-in{width:52px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font:inherit;font-size:12px;text-align:right}
#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 → 2026-11-09 메뉴로) ===== */
.chg-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.chg-d{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mute)}
.chg-d input,.chg-q{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card);color:var(--ink)}
.chg-q{flex:1;min-width:200px}
.chg-list{display:flex;flex-direction:column;gap:0;margin-top:6px}
.chg-day{font-size:12.5px;font-weight:800;color:var(--ink-2);padding:14px 2px 6px;border-bottom:1px solid var(--line)}
.chg-day:first-child{padding-top:4px}
.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-day+.chg-row,.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-kind{color:var(--mute)}
.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}
.chg-err{color:var(--bad);font-weight:700}
/* ---------- 계정 관리 새 창(/?accounts=1, 2026-10-15) — 사람이 많아도 찾기·묶음으로, 권한은 단추로 ---------- */
.acct-page{position:fixed;inset:0;z-index:220;background:var(--paper);overflow-y:auto;-webkit-overflow-scrolling:touch}
.acct-page .ap-wrap{max-width:760px;margin:0 auto;padding:20px 16px 48px}
.acct-page .ap-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.acct-page h1{font-size:20px;font-weight:800;margin:0}
.acct-page .ap-n{color:var(--mute);font-size:13px;font-weight:700;margin-right:auto}
.acct-page .ap-ghost{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;border-radius:999px;padding:7px 13px;cursor:pointer;text-decoration:none}
.acct-page .ap-msg{color:var(--mute);font-size:14px;line-height:1.7;padding:24px 4px}
.acct-page .ap-msg a{color:var(--ink);font-weight:700}
.acct-page .ap-q{width:100%;box-sizing:border-box;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--card);color:var(--ink)}
.acct-page .ap-chips{display:flex;gap:6px;overflow-x:auto;padding:10px 0 12px;scrollbar-width:none}
.acct-page .ap-chips::-webkit-scrollbar{display:none}
.acct-page .ap-chips button,.acct-page .ap-seg button,.crewadm-sub button{appearance:none;flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font:inherit;font-size:13px;font-weight:700;border-radius:999px;padding:7px 13px;cursor:pointer;min-height:36px}
.acct-page .ap-chips button span{color:var(--mute);font-weight:600;margin-left:2px}
.acct-page .ap-chips button[aria-pressed="true"],.acct-page .ap-seg button[aria-pressed="true"],.crewadm-sub button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.acct-page .ap-chips button[aria-pressed="true"] span{color:inherit;opacity:.75}
.acct-page .ap-seg button:disabled{opacity:.35;cursor:not-allowed}
.acct-page .ap-list{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--card)}
.acct-page .ap-row + .ap-row{border-top:1px solid var(--line-2)}
.acct-page .ap-head{appearance:none;border:0;background:none;color:inherit;font:inherit;text-align:left;width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
.acct-page .ap-head:hover{background:var(--paper-2)}
.acct-page .ap-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acct-page .ap-who b{font-size:14.5px}
.acct-page .ap-who small{color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-page .ap-me{vertical-align:2px;margin-left:4px;font-size:10.5px;font-weight:800;border:1px solid var(--line);border-radius:999px;padding:0 6px;color:var(--mute)}
.acct-page .ap-badge{align-self:flex-start;max-width:100%;margin-top:4px;font-size:12px;font-weight:700;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-page .ap-badge.mst{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.acct-page .ap-badge.wait{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.acct-page .ap-badge.none{color:var(--mute)}
.acct-page .ap-chev{color:var(--mute);font-size:18px;transition:transform .15s}
.acct-page .ap-row.open .ap-chev{transform:rotate(90deg)}
.acct-page .ap-row.open{background:var(--paper-2)}
.acct-page .ap-ed{padding:2px 14px 16px}
.acct-page .ap-lbl{font-size:12px;font-weight:800;color:var(--ink);margin:12px 0 6px}
.acct-page .ap-lbl small{font-weight:500;color:var(--mute);margin-left:6px}
.acct-page .ap-seg{display:flex;gap:6px;flex-wrap:wrap}
.acct-page .ap-prev{margin-top:14px;font-size:13px;color:var(--ink-2)}
.acct-page .ap-err{color:var(--warn);font-weight:700}
.acct-page .ap-act{display:flex;gap:8px;margin-top:12px;align-items:center}
.acct-page .ap-save{appearance:none;border:0;background:var(--ink);color:var(--on-ink);font:inherit;font-weight:800;font-size:14px;border-radius:10px;padding:10px 22px;cursor:pointer}
.acct-page .ap-save:disabled{opacity:.35;cursor:not-allowed}
.acct-page .ap-del{margin-left:auto;white-space:nowrap;appearance:none;border:1px solid var(--bad-soft);background:var(--card);color:var(--bad);font:inherit;font-size:12.5px;font-weight:700;border-radius:10px;padding:9px 13px;cursor:pointer}
.acct-page .ap-del:disabled{opacity:.35;cursor:not-allowed}
.acct-page .ap-note{margin-top:10px;font-size:12px;color:var(--mute)}
body.acct-mode{overflow:hidden} /* 밑의 대시보드가 넓어 가로 스크롤이 생기지 않게 — 계정 관리 창은 스스로 스크롤 */
.acct-page .ap-req{margin:2px 0 6px;padding:12px 14px;border-radius:12px;background:var(--warn-soft);color:var(--ink);font-size:13px;line-height:1.6} /* 크루 기록 연결 신청 — 승인할 일 */
.acct-page .ap-req small{color:var(--ink-2)}
/* 직원 관리 — 크루 허브 관리자 화면(iframe). 화면 높이에 맞춰 길게, 안에서 스크롤 */
#crewadm .section-lead{display:flex;align-items:center;gap:10px}
#crewadm .crewadm-sub{display:flex;gap:6px;margin:0 0 12px}
#crewadm .crewadm-sub[hidden]{display:none}
.acct-page.acct-inline{position:static;inset:auto;z-index:auto;background:none;overflow:visible} /* 인사 관리 › 계정 · 권한 — 패널 안에 */
.acct-page.acct-inline .ap-wrap{max-width:960px;margin:0;padding:0 0 24px}
/* ==STAFF-CSS== 직원 관리 2단계 — 크루 허브 관리자 화면 스타일을 #staffDash 아래로 가둬 옮김(크루 허브