/* ── OIMU 스킨 ────────────────────────────────────────────────────────────
   서체는 오이뮤 홈페이지와 같은 것을 쓴다.
     본문  english-grotesque (Adobe) → OnulDanjo → 시스템
     주석  agchoijeongho-screen (Adobe)  — `.fontCJH` · `.hint`
   Adobe 킷은 `index.html` 에서 불러온다. 킷에 이 도메인이 등록돼 있어야 한다.

   색·표·버튼 모양은 도매 발주 시스템(자동발주 프로토타입)을 그대로 쓴다.
   두 시스템을 오갈 때 같은 화면처럼 보여야 하기 때문이다.

   좌측 메뉴는 기본으로 숨어 있고, ☰ 로 펴며, 메뉴를 고르면 저절로 닫힌다. */
@font-face{
  font-family:OnulDanjo;
  font-style:normal;
  font-display:swap;
  src:url(/fonts/OnulDanjo-Regular.woff) format('woff');
}
:root{
  /* 발주 시스템 원본 값 */
  --bg:#f4f2ec; --panel:#fff; --ink:#23211c; --sub:#6f6a5f; --line:#e5e0d5;
  --accent:#2f6f4f; --accent2:#8a6d3b; --warn:#b5482f; --chip:#efeade;
  /* 단추에만 쓰는 색 — 평소엔 속을 비우고, 손이 닿으면 이 색을 띤다 */
  --btn:rgb(255,192,218);
  --free:#3a6ea5; --tax:#8a6d3b;
  /* 매장 시스템이 쓰던 이름 — 위 값으로 이어 둔다 */
  --beige:#f4f2ec; --paper:#faf8f2; --card:#fff;
  --faint:#9b968b; --line2:#d9d4c6;
  --pink:#2f6f4f; --pink-deep:#2f6f4f; --pink-soft:#e9f2ec;
  --amber:#8a6d3b; --amber-soft:#fff2d9;
  --red:#b5482f;   --red-soft:#fbeee7;
  --green:#2f6f4f; --green-soft:#e8f0e8;
  --sw:212px;                       /* 좌측 메뉴 너비 */
  --tb:46px;                        /* 상단 띠 높이 */
  /* 글자 크기는 셋뿐이다. 본문 하나로 거의 모든 글자를 적고,
     화면 제목·카드 제목·숫자만 따로 둔다.
     태그·안내·표 머리글까지 모두 `--fs` 를 쓴다 — 한 화면에 여러 크기가 섞이면
     어느 것이 중요한지 눈이 헷갈린다. 입력칸만 예외다(손전화 확대를 막느라 키운다). */
  --fs:13px; --fs-h1:20px; --fs-h2:15px; --fs-num:17px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:"english-grotesque","OnulDanjo",-apple-system,BlinkMacSystemFont,
                 "Apple SD Gothic Neo","Malgun Gothic",sans-serif;
     font-size:var(--fs);line-height:1.5;letter-spacing:0}
/* 주석에 쓰는 서체 — 화면 설명줄(.lede)·안내 띠(.banner)·보조 설명(.hint) */
.fontCJH,.hint,.lede,.banner{font-family:"agchoijeongho-screen","OnulDanjo",sans-serif}

/* ── 뼈대 ───────────────────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--tb);z-index:60;
        background:var(--ink);color:var(--bg);display:flex;align-items:center;gap:14px;padding:0 14px}
.topbar .burger{background:#3b382f;border:1px solid #4b473c;color:#e9e4d7;border-radius:8px;
        width:34px;height:30px;padding:0;font-size:15px;line-height:1;cursor:pointer;flex:0 0 auto}
.topbar .burger:hover{background:#4b473c;border-color:#5b5749}
/* 정식 워드마크 — 그림이라 글꼴을 타지 않는다. 색은 글자색을 따라간다. */
.logo{display:inline-block;line-height:0;vertical-align:-.1em}
.logo svg{height:100%;width:auto;display:block;fill:currentColor}
.topbar .brand{font-weight:700;letter-spacing:.5px;font-size:var(--fs);white-space:nowrap;
               display:flex;align-items:center;gap:7px}
.topbar .brand .sys{letter-spacing:0}
.topbar .brand small{font-weight:400;opacity:.6;margin-left:8px;letter-spacing:0;font-size:var(--fs)}
.topbar .tools{margin-left:auto;display:flex;gap:8px;align-items:center;min-width:0}
.topbar select{background:#3b382f;border:1px solid #4b473c;color:#e9e4d7;border-radius:8px}
.topbar .who{font-size:var(--fs);opacity:.75;white-space:nowrap}
.topbar .ver{font-size:var(--fs);letter-spacing:.02em;white-space:nowrap;opacity:.6;
             border:1px solid currentColor;border-radius:999px;padding:1px 7px}

.shell{min-height:100vh}
.side{position:fixed;top:var(--tb);left:0;bottom:0;width:var(--sw);z-index:40;overflow:auto;
      background:var(--panel);border-right:1px solid var(--line);padding:16px 0 24px;
      display:flex;flex-direction:column;transition:transform .18s ease}
.shell.hide .side{transform:translateX(-100%)}
.side .brand,.side .sysname{display:none}
.side nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.side nav a{display:block;padding:7px 12px;border-radius:8px;font-size:var(--fs);font-weight:500;
            color:var(--sub);text-decoration:none;cursor:pointer;transition:.12s;white-space:nowrap}
.side nav a:hover{background:#f4f2ec;color:var(--ink)}
.side nav a.on{background:var(--accent);color:#fff}
.side nav .sect{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.01em;color:var(--ink);
                padding:18px 12px 6px}
.side nav .sect:first-child{padding-top:4px}
/* 매장 이름 — 구분(본사·매장)과 화면 사이의 한 겹 */
.side nav .store{display:flex;align-items:center;justify-content:space-between;gap:8px;
                 font-size:var(--fs);font-weight:700;color:var(--btn);
                 padding:9px 8px 6px 12px;letter-spacing:-.01em;cursor:pointer;
                 border-radius:8px;user-select:none}
.side nav .store:hover{background:#f4f2ec}
/* 펴기/접기 — 테두리 없이 획 두 개로 그린다. 접혀 있으면 +, 펴면 −.
   글자를 갈아 끼우지 않고 세로 획을 눕혀서 바꾼다. */
.side nav .store .pm{flex:0 0 auto;position:relative;width:18px;height:18px;padding:0;
                     border:0;background:transparent;color:inherit;cursor:pointer}
.side nav .store .pm:hover:not(:disabled){background:transparent;border:0;color:inherit}
.side nav .store .pm i{position:absolute;left:50%;top:50%;width:11px;height:1.6px;
                       border-radius:2px;background:currentColor;
                       transform:translate(-50%,-50%);
                       transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .18s ease}
.side nav .store .pm i:last-child{transform:translate(-50%,-50%) rotate(90deg)}
.side nav .store.open .pm i:last-child{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
.side nav .subs{display:flex;flex-direction:column;gap:2px;overflow:hidden;
                max-height:420px;opacity:1;
                transition:max-height .24s cubic-bezier(.4,0,.2,1),opacity .18s ease}
.side nav .subs.hidden{max-height:0;opacity:0;pointer-events:none}
.side nav .subs a{padding-left:22px}
.side .who{margin-top:auto;padding:14px 18px 0;border-top:1px solid var(--line);
           font-size:var(--fs);color:var(--sub);line-height:1.7}
.side .who b{display:block;color:var(--ink);font-size:var(--fs)}

.scrim{display:none;position:fixed;inset:var(--tb) 0 0 0;background:rgba(20,18,14,.4);z-index:35}
/* 본문은 가로를 끝까지 쓴다. 폭을 묶어 두면 넓은 화면에서 표가 가운데 몰린다. */
.main{margin-left:var(--sw);padding:calc(var(--tb) + 22px) 24px 60px;
      min-width:0;transition:margin-left .18s ease}

/* 표가 제 안에서 스크롤하는 화면은 «한 판» 으로 만든다 —
   바깥(페이지) 스크롤을 없애고, 남은 높이를 표가 통째로 가져간다. */
.main.fit{height:100vh;overflow:hidden;padding-bottom:14px}
.main.fit > *{height:100%;display:flex;flex-direction:column;min-height:0}
.main.fit .card.tight{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-bottom:0}
.main.fit .card.tight > .scroll{flex:1 1 auto;min-height:0;max-height:none}
.shell.hide .main{margin-left:0}

@media (max-width:900px){
  .main{margin-left:0;padding-left:14px;padding-right:14px}
  .side{transform:translateX(-100%);box-shadow:0 0 24px rgba(0,0,0,.18)}
  .shell.hide .side{transform:translateX(-100%)}
  .shell.open .side{transform:none}
  .shell.open .scrim{display:block}
  .topbar .who{display:none}
}

/* ── 손전화 ─────────────────────────────────────────────────────────────
   매장 사람이 계산대 옆에서 전화기로 여는 것을 전제로 한다.

   표는 칸을 접어 세우지 않는다. 가로로 밀어 본다 —
   종이 체크표와 칸 차례가 같아야 세면서 눈이 헤매지 않기 때문이다.
   대신 손가락이 닿을 자리를 넓히고, 입력칸 글자를 키운다. */
@media (max-width:760px){
  :root{--tb:44px}
  /* 홈 막대·노치가 가리지 않게 아래·옆에 그만큼 여유를 준다 */
  .main{padding:calc(var(--tb) + 16px) max(12px,env(safe-area-inset-left))
                calc(48px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right))}
  .main.fit{height:100dvh}                 /* 손전화 주소창이 접혔다 펴져도 판이 안 흔들린다 */
  .side{width:min(84vw,268px)}
  .mast{gap:10px}
  .mast h1{font-size:18px}
  .lede{margin:8px 0 12px}
  .card{padding:13px;margin-bottom:12px;border-radius:10px}
  .card.tight{padding:0}
  .card.tight h2{padding:12px 13px 8px}
  .stats{gap:14px 18px;margin-bottom:12px}
  .stat .v{font-size:16px}
  th,td{padding:8px 7px}
  .scroll{max-height:70vh;border-radius:8px}

  /* 손가락으로 누를 자리는 넉넉하게 */
  button{padding:9px 14px}
  button.small{padding:7px 10px}
  td.act button{padding:6px 9px}
  .tabs button{padding:8px 12px}
  input[type=checkbox]{width:17px;height:17px}

  /* 손전화 브라우저는 16px 보다 작은 칸에 손이 닿으면 화면을 통째로 확대한다.
     그래서 «치는 글자» 만 키운다. 안내 글자(placeholder)는 다른 글과 같은 크기로 둔다 —
     그것은 읽는 글이지 치는 글이 아니다. */
  input,select,textarea{font-size:16px;padding:8px 10px}
  td input,td select{font-size:16px;padding:4px 7px}
  input::placeholder,textarea::placeholder{font-size:var(--fs)}
  td input.q{width:74px}

  .veil{padding:10px}
  .veil .card{max-height:94vh;padding:16px;border-radius:12px}
  .topbar{gap:10px;padding:0 10px}
  .topbar .brand small{display:none}
  .topbar select{max-width:38vw}
  #toast{left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));transform:none}
  #toast div{text-align:center}
  .linkline{flex-wrap:wrap}
  .linkline .url{white-space:normal}
  .grid2,.grid3{grid-template-columns:1fr}
}

/* 아주 좁은 화면 — 자리를 다투는 것부터 내린다 */
@media (max-width:420px){
  .mast h1{font-size:17px}
  .topbar .ver{display:none}
  .row{gap:6px}
}

.mast{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mast h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.01em;margin:0}
.rule{border:0;border-top:2px solid var(--line);margin:10px 0 0}
.lede{color:var(--sub);font-size:var(--fs);margin:10px 0 16px}

/* ── 조각 ───────────────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
      padding:16px;margin-bottom:16px}
.card h2{font-size:var(--fs-h2);font-weight:700;margin:0 0 10px;padding:0;border:0}
.card.tight{padding:0}
.card.tight h2{padding:14px 16px 10px;margin:0}

button{font:inherit;font-size:var(--fs);border-radius:8px;border:1px solid var(--line);
       background:transparent;color:var(--ink);padding:8px 14px;cursor:pointer;transition:.12s}
button:hover:not(:disabled){border-color:var(--btn);background:var(--btn);color:var(--ink)}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:transparent;border-color:var(--btn);color:var(--ink);font-weight:700}
button.primary:hover:not(:disabled){background:var(--btn);border-color:var(--btn);color:var(--ink)}
button.small{padding:5px 9px;font-size:var(--fs);border-radius:6px}
button.danger{color:var(--warn);background:transparent}
button.danger:hover:not(:disabled){background:var(--warn);border-color:var(--warn);color:#fff}
button.primary.danger{background:transparent;border-color:var(--warn);color:var(--warn)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}

/* 접속 링크 — 한 줄로 두고 끝에 복사 단추를 붙인다 */
.linkline{display:flex;align-items:center;gap:8px;background:var(--paper);
          border:1px solid var(--line);border-radius:8px;padding:7px 8px 7px 11px}
.linkline .url{min-width:0;word-break:break-all;font-size:var(--fs);color:var(--sub);white-space:nowrap}
.linkline input{flex:1;min-width:80px;border:none;background:transparent;padding:2px 0;font-size:var(--fs)}
.linkline input:focus{outline:none;box-shadow:inset 0 -1px 0 var(--btn)}
.linkline button{padding:5px 7px;border-radius:6px;line-height:0}
.linkline svg{width:15px;height:15px;display:block}

/* 운영 시간 — 요일을 가로로 눕혀 세로 길이를 줄인다 */
table.hours th,table.hours td{text-align:center;padding:6px 5px}
table.hours th:first-child,table.hours td:first-child{
  text-align:left;font-weight:700;width:52px;color:var(--sub)}
table.hours td.off input{opacity:.4}


input,select,textarea{font:inherit;font-size:var(--fs);padding:6px 8px;border:1px solid var(--line);
       border-radius:7px;background:#fff;color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input.bad,select.bad{border-color:var(--warn);background:#fbeee7}
input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent)}
label.f{display:flex;flex-direction:column;gap:3px;font-size:var(--fs);color:var(--sub);font-weight:400}
label.f input,label.f select{font-weight:400;color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}

.banner{background:#faf8f2;border:1px solid var(--line);border-left:3px solid var(--accent);
        border-radius:0 8px 8px 0;padding:10px 12px;font-size:var(--fs);margin-bottom:10px;line-height:1.7}
.banner.warn{border-left-color:var(--accent2);background:#fff8e9;border-color:#eddfc0}
.banner.bad{border-left-color:var(--warn);background:#fbeee7;border-color:#e6c3b3;color:#8d3a25}
.banner.good{border-left-color:var(--accent);background:#e9f2ec;border-color:#bcd9c6}

.stats{display:flex;gap:26px;flex-wrap:wrap;margin:2px 0 14px;align-items:center}
/* 숫자 칸 줄 오른쪽 끝에 서는 체크상자 — 줄을 따로 만들지 않는다(세로 자리를 아낀다) */
.stats > label.row{margin-left:auto}
.stat .k{font-size:var(--fs);font-weight:400;color:var(--sub)}
.stat .v{font-size:var(--fs-num);font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums}
.stat .v small{font-size:var(--fs);font-weight:400;color:var(--sub);letter-spacing:0}

table{width:100%;border-collapse:collapse;font-size:var(--fs)}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
/* 머리글은 가운데. 세로로 스크롤해도 늘 맨 위에 남는다.
   z-index 는 머리글(3) > 관리 칸(2) 이어야 한다 —
   반대면 스크롤할 때 관리 칸 셀이 머리글 위로 올라와 표가 깨져 보인다. */
th{font-size:var(--fs);color:var(--sub);font-weight:600;text-align:center;
   position:sticky;top:0;background:#faf8f2;z-index:3;white-space:nowrap}
th:hover{color:var(--ink)}
/* 이름과 갈매기표를 한 상자에 담아야 세로 가운데가 맞는다.
   inline 요소끼리 두면 글꼴 기준선(baseline)에 걸려 아래로 처진다. */
th .hd{display:inline-flex;align-items:center;justify-content:center;gap:5px;line-height:1}
th.sortable .sortmark{display:inline-flex;flex-direction:column;align-items:center;gap:4px;
                      color:#bdb6a6}
th.sortable:hover .sortmark{color:#8d8677}
.sortmark .chev{width:5px;height:5px;border-width:1.4px}
.sortmark.on{color:#bdb6a6}
.sortmark.asc  .up{color:var(--accent)}
.sortmark.desc .dn{color:var(--accent)}
tr.muted td{color:#b3ada0}
th.c,td.c{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
th.nw,td.nw{white-space:nowrap}
/* 관리 칸은 오른쪽에 붙여 둔다. 표가 넓어 가로로 밀려도 버튼이 늘 보이도록. */
th.act,td.act{white-space:nowrap;position:sticky;right:0}
td.act{text-align:right;z-index:2;background:#fff;box-shadow:-8px 0 8px -8px rgba(0,0,0,.12)}
th.act{z-index:4;background:#faf8f2;box-shadow:-8px 0 8px -8px rgba(0,0,0,.12)}
tbody tr:hover td.act{background:#faf8f2}
/* 머리글 왼쪽 첫 칸(전체 선택)도 같은 층에 둔다 */
th.c input[type=checkbox]{vertical-align:middle}
/* 칸 안의 줄은 접지 않는다 — 좁은 화면에서 «연결/재고 제외» 같은 짝이 위아래로 갈라지면
   어느 줄의 단추인지 알아보기 어렵다. 넘치면 표를 가로로 밀어 본다. */
td .row{flex-wrap:nowrap}
td.act .row{flex-wrap:nowrap;justify-content:flex-end;gap:3px}
td.act button{padding:4px 8px;font-size:var(--fs)}
td.act button.arw{padding:4px 6px;font-size:10px;line-height:1}

/* 갈매기표 — 네모의 두 변만 남겨 45° 돌린 것. 글꼴과 무관하게 늘 같은 모양이다. */
/* 검색창 — 글자가 있을 때만 오른쪽 안쪽에 지우기 단추가 뜬다 */
.searchbox{position:relative;display:inline-flex;align-items:center}
.searchbox input{padding-right:28px}
.searchbox .clr{position:absolute;right:5px;top:50%;transform:translateY(-50%);
                width:18px;height:18px;padding:0;border:0;border-radius:50%;background:none;
                color:#a9a294;font-size:15px;line-height:1;cursor:pointer;display:none;
                align-items:center;justify-content:center}
.searchbox .clr:hover:not(:disabled){background:#ece7db;border:0;color:var(--ink)}
.searchbox.on .clr{display:inline-flex}

.chev{display:inline-block;width:6px;height:6px;border-left:1.5px solid currentColor;
      border-top:1.5px solid currentColor;transform:rotate(45deg);transform-origin:center}
.chev.dn{transform:rotate(-135deg)}
/* 옵션 열 — 옵션명은 왼쪽, 자리 이동 갈매기표는 오른쪽 끝에 세로로 */
td.opt{white-space:nowrap}
td.opt .in{display:flex;align-items:center;gap:8px}
td.opt .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
td.opt .arws{flex:0 0 auto;width:16px;display:flex;flex-direction:column;
             align-items:center;justify-content:center;gap:5px}
td.opt button.arw{border:0;background:none;padding:1px 2px;line-height:0;
                  color:#a9a294;border-radius:0}
td.opt button.arw:hover:not(:disabled){background:none;border:0;color:var(--ink)}
/* «차례» 칸 — 화살표만 들어가므로 가운데로 모은다 */
td.opt.c .in{justify-content:center}
th.r,td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:hover{background:#faf8f2}
.scroll{max-height:66vh;overflow:auto;border:1px solid var(--line);border-radius:10px;
        -webkit-overflow-scrolling:touch}
.card.tight .scroll{border-radius:0 0 12px 12px;border-left:0;border-right:0;border-bottom:0}
td input,td select{padding:2px 6px;font-size:var(--fs)}
td input.q{width:64px;text-align:right}

.tag{display:inline-block;font-size:var(--fs);font-weight:400;padding:2px 8px;border-radius:20px;
     border:0;background:var(--chip);color:#5f5a4e;white-space:nowrap}
.tag.pink{background:#e6eef6;color:var(--free)}
.tag.amber{background:#fff2d9;color:var(--accent2)}
.tag.red{background:#fbeee7;color:var(--warn)}
.tag.green{background:#e8f0e8;color:var(--accent)}

.muted{color:var(--faint)}
.sub{color:var(--sub)}
.hint{font-size:var(--fs);color:rgb(170,170,170);margin-top:10px;line-height:1.75}
.hidden{display:none !important}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs);letter-spacing:.02em}
.spin{display:inline-block;width:12px;height:12px;border:2px solid #e3ddcc;border-top-color:var(--pink-deep);
      border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── 로그인 ─────────────────────────────────────────────────────────── */
.gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:30px}
.gate .box{width:100%;max-width:352px}
.gate .brand{text-align:center;display:flex;justify-content:center}
.gate .sysname{font-size:var(--fs);color:var(--sub);text-align:center;margin:4px 0 20px}
.gate .card{padding:22px 22px 20px}
/* 탭 — 성격이 다른 표를 나란히 두지 않고 갈아 끼운다.
   고른 탭은 아래 표와 한 몸으로 보여야 한다 — 사이의 선을 지우고 1px 겹쳐 앉힌다. */
.tabs{display:flex;gap:4px;margin-bottom:0;position:relative;z-index:1}
.tabs button{border-radius:8px 8px 0 0;border-bottom-color:var(--line);
             background:var(--bg);padding:8px 16px;margin-bottom:-1px}
.tabs button:hover:not(.on){background:var(--btn);border-color:var(--btn);
             border-bottom-color:var(--line);color:var(--ink)}
.tabs button.on{background:var(--panel);border-color:var(--line);
                border-bottom-color:var(--panel);color:var(--ink);font-weight:700}
.card.tabbed{border-top-left-radius:0;margin-top:0}
/* 연결 판정에서 뺀 줄은 한 걸음 물러나 보이게 */
tbody tr.muted-row td{opacity:.55}
/* 줄 안에서 «왜 안 되는지» 를 짚어 주는 한 줄 */
.warn-note{font-size:var(--fs);color:var(--warn);margin-top:3px;line-height:1.5}

.gate .tabs{display:flex;gap:4px;margin-bottom:14px}
.gate .tabs button{flex:1;border-radius:3px}
.gate .tabs button.on{background:var(--btn);border-color:var(--btn);color:var(--ink)}
.gate label.f{margin-bottom:10px}
.gate label.f input{padding:7px 10px}
.gate button.go{width:100%;padding:9px;margin-top:4px}
.gate .msg{font-size:var(--fs);color:var(--warn);margin-top:10px;min-height:19px}

/* ── 알림 ───────────────────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
       display:flex;flex-direction:column;gap:6px;align-items:center}
#toast div{background:var(--ink);color:#fff;font-size:var(--fs);
           padding:10px 18px;border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
#toast div.bad{background:var(--red)}

/* ── 겹창 ───────────────────────────────────────────────────────────── */
/* 오래 걸리는 일 — 화면을 덮어 두 번 누르는 것을 막고, 기다리는 중임을 보인다 */
.busy{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;gap:9px;
      background:rgba(244,242,236,.62);font-size:var(--fs);color:var(--sub);cursor:progress}
.veil{position:fixed;inset:0;background:rgba(20,18,14,.5);z-index:100;
      display:flex;align-items:center;justify-content:center;padding:20px}
.veil .card{background:#fff;width:100%;max-width:460px;max-height:90vh;overflow:auto;margin:0;
            border-radius:14px;padding:20px}
.veil .card.wide{max-width:860px}
/* 창 안에 다시 놓는 상자 — 위의 460px 은 «창» 의 너비다. 안쪽 상자까지 460 으로 잘리면
   두 단으로 벌린 표가 반쪽만 쓰게 된다. */
.veil .card .card{max-width:none}

/* ── 인쇄 ───────────────────────────────────────────────────────────────
   재고조사표 · 입고리스트. A4 한 장에 들어가도록 글자 크기를 재서 맞춘다.
   재고 마감 도구의 인쇄물을 그대로 옮긴 것이다. */
#printArea{display:none}
@media print{
  @page{size:A4 portrait;margin:8mm}
  body{background:#fff}
  .shell,.topbar,.side,.scrim,.gate,#toast,.veil{display:none !important}
  #printArea{display:block !important}
}
#printArea{color:#000;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
#printArea .phead{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1.4pt solid #000;padding-bottom:1.5mm;margin-bottom:2.5mm}
#printArea .phead .ttl{font-size:11pt;font-weight:700;letter-spacing:-.03em}
#printArea .phead .ttl .bd{margin-right:2.5mm;display:inline-block;vertical-align:-.5mm}
#printArea .phead .meta{font-size:8pt}
#printArea .pcols{column-count:4;column-gap:5mm}
#printArea .pgrp{break-inside:auto;margin:0 0 1.2mm}
#printArea .pgrp .gh{font-weight:700;break-after:avoid;border-bottom:.5pt solid #333;
  margin-bottom:.4mm;padding-bottom:.2mm}
#printArea .pit{display:flex;align-items:center;gap:1.5mm;border-bottom:.2pt dotted #ccc}
#printArea .pit .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#printArea .pit .q{font-variant-numeric:tabular-nums;font-weight:700;flex:0 0 auto;
  min-width:5mm;text-align:right}
#printArea .pit .ck{flex:0 0 auto;width:2.4mm;height:2.4mm;border:.5pt solid #666;
  border-radius:.3mm;margin-left:1.6mm;align-self:center}
/* 주석 — 그 제품 바로 아래 한 줄. 줄 높이는 제품 줄의 2/3(1.32 → .88) 이고 안으로 들여 쓴다.
   앞의 «─» 로 제품 줄이 아니라는 것이 한눈에 보인다. */
/* 줄 높이는 제품 줄의 2/3 — 9pt×1.32 ≈ 11.9pt 의 2/3 ≈ 7.9pt.
   글자를 .8배로 줄였으므로 line-height 는 1.07 이면 그 높이가 된다.
   1 보다 작게 잡으면 글자가 위아래로 잘린다. */
#printArea .pnt{padding-left:4mm;font-size:.8em;line-height:1.07;color:#444;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:.2pt dotted #ddd;break-before:avoid}
#printArea .pnt::before{content:'└ ';color:#999}
#printArea .pfoot{margin-top:2.5mm;border-top:1.4pt solid #000;padding-top:1mm;font-size:7.5pt;
  display:flex;justify-content:space-between}

/* ── 마감 판 ────────────────────────────────────────────────────────── */
.drop{border:1.5px dashed var(--line);border-radius:10px;background:#faf8f2;
      padding:18px;text-align:center;font-size:var(--fs);color:var(--sub);cursor:pointer;transition:.12s}
.drop:hover,.drop.over{border-color:var(--accent);background:#e9f2ec;color:var(--ink)}
tr.diff{background:#fff8e9}
tr.diff:hover{background:#fdf1d8}
/* 관리 열은 가로 스크롤에서 붙어 있느라 제 배경을 갖는다. 고친 줄에서는 함께 물들여야 한다. */
tr.diff td.act{background:#fff8e9}
tbody tr.diff:hover td.act{background:#fdf1d8}
/* 아직 저장하지 않은 줄 — 손댄 것이 눈에 남아 있어야 «저장» 을 잊지 않는다 */
tr.dirty{background:#fdeef4}
tr.dirty:hover{background:#fbe3ec}
tr.dirty td.act{background:#fdeef4}
td.rsn{min-width:150px}