/* =====================================================================
   여울 QR 오더 — 공통 스타일
   손님 화면(body.guest)은 먹빛, 리셉션 화면(body.desk)은 밝은 업무용
   ===================================================================== */
:root{
  --char:#1F1D1B; --char-2:#2B2825; --char-3:#3A3532;
  --paper:#F3F0E9; --paper-dim:#A9A29A;

  --desk:#FBFAF8; --desk-2:#F1EEE9; --desk-rule:#DDD7CD;
  --desk-text:#221F1C; --desk-text-2:#776E63;
  --ember:#B24A28;

  --st-new:#CE3B24;  --st-new-bg:#FDEBE6;
  --st-cook:#C4820E; --st-cook-bg:#FCF2DC;
  --st-done:#3F7F5C; --st-done-bg:#E4F1E9;

  --f-display:'Song Myung','Nanum Myeongjo',Georgia,serif;
  --f-body:'IBM Plex Sans KR','Noto Sans SC',-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --r-sm:4px; --r-md:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}

/* =====================================================================
   손님 화면
   ===================================================================== */
body.guest{
  background:var(--char);color:var(--paper);
  min-height:100dvh;display:flex;flex-direction:column;
  overscroll-behavior-y:none;
}
.screen{
  flex:1;display:flex;flex-direction:column;position:relative;
  max-width:520px;width:100%;margin:0 auto;overflow:hidden;
}
.view{position:absolute;inset:0;display:none;flex-direction:column}
.view.on{display:flex}

/* 로딩 / 오류 */
.boot{
  position:fixed;inset:0;display:grid;place-items:center;text-align:center;
  background:var(--char);z-index:90;padding:30px;
}
.boot p{color:var(--paper-dim);font-size:13.5px;margin:14px 0 0;max-width:30ch}
.spin{
  width:26px;height:26px;border:2px solid var(--char-3);border-top-color:var(--paper);
  border-radius:50%;animation:sp .8s linear infinite;margin:0 auto;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* 랜딩 */
.landing{
  align-items:center;justify-content:center;text-align:center;
  padding:26px 22px;overflow-y:auto;
}
.landing h3{font-family:var(--f-display);font-size:29px;font-weight:400;letter-spacing:.06em;margin:0}
.landing .tbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--paper-dim);margin:9px 0 30px}
.landing p{font-size:12.5px;color:var(--paper-dim);margin:0 0 12px}
/* 휴대폰 언어를 자동으로 잡아 보여주는 줄 — 누르면 아래 국기가 펼쳐집니다 */
.langnow{
  display:flex;align-items:center;gap:9px;width:100%;max-width:400px;margin-bottom:10px;
  padding:11px 14px;border-radius:var(--r-md);
  background:var(--char-2);border:1px solid var(--char-3);color:var(--paper);
}
.langnow i{font-style:normal;font-size:18px;line-height:1}
.langnow b{flex:1;text-align:left;font-size:14px;font-weight:500}
.langnow u{text-decoration:none;font-size:11.5px;color:var(--paper-dim)}
.langnow.open{border-color:var(--paper-dim)}
.flags{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:400px}
.flags[hidden]{display:none}
.flags{margin-bottom:2px}
.flag{
  background:var(--char-2);border:1px solid var(--char-3);border-radius:var(--r-md);
  padding:12px 3px 10px;text-align:center;transition:background .15s,border-color .15s;
}
.flag i{display:block;font-style:normal;font-size:22px;line-height:1.15}
.flag u{display:block;text-decoration:none;font-size:10.5px;color:var(--paper-dim);margin-top:4px}
.flag.on{background:var(--paper);border-color:var(--paper);color:var(--char)}
/* 선택하면 배경이 밝아지므로 국기·나라 이름을 모두 검정으로 바꿉니다.
   윈도우처럼 국기 이모지가 없는 기기에서는 🇰🇷 가 "KR" 글자로 그려지는데,
   이때 글자색이 흰색이면 흰 배경에 묻혀 안 보입니다. */
.flag.on i{color:var(--char)}
.flag.on u{color:var(--char);font-weight:600}
.pax{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;width:100%;max-width:400px}
.paxb{
  background:var(--char-2);border:1px solid var(--char-3);border-radius:var(--r-sm);
  padding:10px 0;font-family:var(--f-mono);font-size:13.5px;color:var(--paper-dim);
}
.paxb.on{background:var(--paper);color:var(--char);border-color:var(--paper);font-weight:600}
.paxcustom{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;max-width:400px;margin-top:8px;background:var(--char-2);
  border:1px solid var(--char-3);border-radius:var(--r-md);padding:8px 10px 8px 13px;
}
.paxcustom>span{font-size:12.5px;color:var(--paper-dim);white-space:nowrap}
#paxInput{
  width:48px;text-align:center;background:var(--char);color:var(--paper);
  border:1px solid var(--char-3);border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:14px;font-weight:600;padding:5px 0;
}
.startbtn{
  width:100%;max-width:400px;margin-top:20px;background:var(--paper);color:var(--char);
  border-radius:var(--r-md);padding:14px 0;font-size:15px;font-weight:600;transition:opacity .15s;
}
.startbtn:disabled{opacity:.28;cursor:default}

/* 상단 바 */
.bar{
  display:flex;align-items:center;gap:8px;padding:12px 14px 10px;
  border-bottom:1px solid var(--char-3);flex-shrink:0;
  padding-top:max(12px,env(safe-area-inset-top));
}
.bar .who{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--paper-dim);flex:1;text-align:center;
}
.bar .who b{color:var(--paper);font-weight:500}
#v-orders .bar .who{font-size:15px}   /* 내 주문 현황 제목만 크게 (손님 의견) */
.backb{
  width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--char-3);
  background:var(--char-2);color:var(--paper);font-size:16px;line-height:1;
  display:grid;place-items:center;flex-shrink:0;
}
.langpick{
  background:var(--char-2);border:1px solid var(--char-3);color:var(--paper);
  border-radius:var(--r-sm);font-size:11.5px;padding:5px 6px;font-family:var(--f-mono);
}

/* 내 주문 띠 */
.mystrip{
  display:flex;align-items:center;gap:8px;width:100%;padding:10px 15px;
  background:var(--char-2);border-bottom:1px solid var(--char-3);
  font-size:13px;color:var(--paper);text-align:left;
}
.mystrip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.mystrip .arw{margin-left:auto;color:var(--paper-dim);font-family:var(--f-mono)}

/* 카테고리 */
.cats{
  display:flex;gap:6px;padding:11px 14px;overflow-x:auto;flex-shrink:0;
  border-bottom:1px solid var(--char-3);scrollbar-width:none;
}
.cats::-webkit-scrollbar{display:none}
.cat{
  white-space:nowrap;padding:7px 12px;border-radius:100px;font-size:15px;
  background:var(--char-2);color:var(--paper-dim);border:1px solid var(--char-3);
}
.cat.on{background:var(--paper);color:var(--char);border-color:var(--paper);font-weight:500}

/* 메뉴 목록 */
.list{flex:1;overflow-y:auto;padding-bottom:88px;-webkit-overflow-scrolling:touch}
.grp{padding:16px 15px 6px}
.grp h4{font-family:var(--f-display);font-size:19px;font-weight:400;margin:0;letter-spacing:.03em}
.grp span{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.grp span.vat{display:block;margin-top:3px;font-weight:700;color:var(--paper);letter-spacing:.06em}   /* 부가세 별도 안내: 굵게 · 한 줄 아래 */
.item{
  width:100%;text-align:left;display:flex;align-items:center;gap:12px;
  padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.055);
}
.item:active{background:var(--char-2)}
.thumb{width:62px;height:62px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--char-2)}
.item .nm{flex:1;min-width:0}
.item .nm b{display:block;font-weight:500;font-size:16px;line-height:1.35}
.item .nm em{
  display:block;font-style:normal;font-size:13.5px;color:var(--paper-dim);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.item .pr{
  font-family:var(--f-mono);font-size:15px;font-variant-numeric:tabular-nums;
  color:var(--paper);flex-shrink:0;
}
.item.sold{opacity:.42}
/* 세트 메뉴처럼 큰 칸 — 사진을 가로로 크게(4:3, 잘리지 않게), 구성 설명은 줄바꿈해서 전부 보이게.
   버튼 안에서는 flex + width:100% 가 0 으로 계산되므로 block 으로 쌓습니다. */
.item.big{display:block;padding:14px 15px 16px}
.item.big .thumb{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:10px;margin:0 0 10px}
.item.big .row{display:flex;gap:12px;align-items:flex-start}
.item.big .nm b{font-size:17.5px}
.item.big .nm em{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45;margin-top:4px}
.item.big .pr{font-size:16.5px;margin-top:2px}
.grp h4 small{font:inherit;color:var(--paper);font-weight:700;margin-left:2px}
.tag{
  display:inline-block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;
  padding:1px 5px;border-radius:2px;margin-left:5px;vertical-align:1px;
}
.tag.sig{background:#4A2A1C;color:#E9A183}
.tag.hot{background:#4A1F1A;color:#E88A76}
.tag.out{background:#4A1F1A;color:#F0A090}
.tag.n{background:var(--char-3);color:var(--paper-dim)}

/* 장바구니 바 */
.cartbar{
  position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--paper);color:var(--char);border-radius:var(--r-md);
  padding:13px 15px;display:none;align-items:center;justify-content:space-between;
  box-shadow:0 6px 22px -6px rgba(0,0,0,.55);
}
.cartbar.on{display:flex}
.cartbar .l{font-size:13px;font-weight:500}
.cartbar .l b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.cartbar .go{background:var(--char);color:var(--paper);border-radius:var(--r-sm);padding:7px 14px;font-size:13px;font-weight:500}

/* 상세 시트 */
.sheet{position:absolute;inset:0;background:rgba(15,13,12,.72);display:none;align-items:flex-end;z-index:20}
.sheet.on{display:flex}
.sheetbox{
  width:100%;background:var(--char-2);border-radius:16px 16px 0 0;
  padding:18px 16px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--char-3);max-height:92%;display:flex;flex-direction:column;
}
.shhead{display:flex;gap:13px;align-items:center}
.shimg{width:88px;height:88px;border-radius:9px;object-fit:cover;flex-shrink:0;background:var(--char)}
.sheetbox h4{font-size:19px;font-weight:600;line-height:1.3;margin:0}
.sheetbox .sub{font-size:14px;color:var(--paper-dim);margin-top:3px;line-height:1.45}
.optgrp{margin-top:15px}
.optgrp p{font-size:11.5px;color:var(--paper-dim);margin:0 0 7px}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.opt{padding:7px 12px;border-radius:100px;font-size:12.5px;border:1px solid var(--char-3);background:var(--char);color:var(--paper-dim)}
.opt.on{background:var(--paper);color:var(--char);border-color:var(--paper);font-weight:500}
.ricerow{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--char);border:1px solid var(--char-3);border-radius:var(--r-md);
  padding:8px 10px 8px 13px;
}
.ricerow>span{font-size:12.5px;color:var(--paper)}
.qtyrow{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.qty{display:flex;align-items:center;gap:14px}
.qty button{
  width:33px;height:33px;border-radius:50%;border:1px solid var(--char-3);
  background:var(--char);font-size:18px;line-height:1;display:grid;place-items:center;
}
.qty b{font-family:var(--f-mono);font-size:16px;min-width:20px;text-align:center}
.qty.sm{gap:9px}
.qty.sm button{width:26px;height:26px;font-size:14px}
.qty.sm b{font-size:13px;min-width:15px}
.addbtn{
  background:var(--paper);color:var(--char);border-radius:var(--r-sm);
  padding:13px 0;font-size:14.5px;font-weight:600;margin-top:16px;width:100%;
}
.addbtn:disabled{opacity:.45}
.ghost{background:none;color:var(--paper-dim);font-size:12.5px;margin-top:10px;width:100%;padding:6px}

/* 장바구니 */
.cartview{padding:15px;overflow-y:auto;flex:1}
.crow{display:flex;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cthumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--char-2)}
.crow .nm{flex:1;min-width:0}
.crow .nm b{font-size:13.5px;font-weight:500;display:block}
.crow .nm em{font-style:normal;font-size:11px;color:var(--paper-dim)}
.crow .pr{font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.crow .del{color:var(--paper-dim);font-size:17px;padding:0 3px;line-height:1}
.sum{margin-top:16px;font-family:var(--f-mono);font-size:12.5px}
.sum div{display:flex;justify-content:space-between;padding:4px 0;color:var(--paper-dim);font-variant-numeric:tabular-nums}
.sum div.tot{color:var(--paper);font-size:16px;font-weight:600;border-top:1px solid var(--char-3);margin-top:6px;padding-top:10px}
.noteinput{
  width:100%;margin-top:14px;background:var(--char-2);border:1px solid var(--char-3);
  color:var(--paper);border-radius:var(--r-sm);padding:10px;font-size:13px;
  font-family:var(--f-body);resize:none;
}
.noteinput::placeholder{color:#6E665F}

/* 완료 */
.done{align-items:center;justify-content:center;text-align:center;padding:30px 26px}
.tick{
  width:56px;height:56px;border-radius:50%;border:1.5px solid var(--st-done);
  display:grid;place-items:center;color:#7FC79E;font-size:26px;margin-bottom:18px;
}
.done h3{font-family:var(--f-display);font-size:22px;font-weight:400;margin:0}
.done p{font-size:13px;color:var(--paper-dim);margin:9px 0 0;max-width:28ch}
.statusbox{
  margin-top:22px;width:100%;max-width:400px;background:var(--char-2);
  border:1px solid var(--char-3);border-radius:var(--r-md);padding:14px;text-align:left;
}
.statusbox .hd{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;color:var(--paper-dim)}
.statusbox .stg{font-size:15px;font-weight:600;margin-top:8px}
.statusbox .bar2{display:flex;gap:3px;margin-top:12px}
.statusbox .bar2 i{flex:1;height:3px;border-radius:2px;background:var(--char-3)}
.statusbox .bar2 i.on{background:#7FC79E}

/* 내 주문 현황 */
.ordlist{flex:1;overflow-y:auto;padding:14px 15px 24px}
.ocard2{background:var(--char-2);border:1px solid var(--char-3);border-radius:var(--r-md);padding:13px;margin-bottom:9px}
.ocard2 .oh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ocard2 .rnd{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;background:var(--char-3);padding:2px 7px;border-radius:3px}
.ocard2 .tm{font-family:var(--f-mono);font-size:10.5px;color:var(--paper-dim)}
.ocard2 .stp{margin-left:auto;font-size:10.5px;padding:2px 9px;border-radius:100px;font-weight:500}
.stp.s-new{background:#4A2018;color:#F0A090}
.stp.s-cook{background:#4A3A12;color:#EBC46A}
.stp.s-done{background:#1D3B2A;color:#7FC79E}
.ocard2 .ol{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
.ocard2 .ol i{font-style:normal;color:var(--paper-dim);font-family:var(--f-mono);margin-right:6px}
.ocard2 .ol span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--paper-dim)}
.ocard2 .oamt{display:flex;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid var(--char-3);font-family:var(--f-mono);font-size:13px}
.ordsum{background:var(--char-2);border:1px solid var(--char-3);border-radius:var(--r-md);padding:14px;font-family:var(--f-mono);font-size:12.5px}
.ordsum div{display:flex;justify-content:space-between;padding:4px 0;color:var(--paper-dim);font-variant-numeric:tabular-nums}
.ordsum div.tot{color:var(--paper);font-size:16px;font-weight:600;border-top:1px solid var(--char-3);margin-top:6px;padding-top:10px}

.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(14px);
  background:var(--paper);color:var(--char);padding:11px 18px;border-radius:100px;
  font-size:13.5px;font-weight:500;opacity:0;pointer-events:none;transition:all .26s;z-index:60;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.6);max-width:88vw;text-align:center;
}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast.err{background:var(--st-new);color:#fff}

/* =====================================================================
   리셉션 화면
   ===================================================================== */
body.desk{background:var(--desk-2);color:var(--desk-text)}

/* 로그인 */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.loginbox{
  width:100%;max-width:360px;background:var(--desk);border:1px solid var(--desk-rule);
  border-radius:var(--r-md);padding:28px 26px;box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.loginbox h1{font-family:var(--f-display);font-size:24px;font-weight:400;margin:0 0 3px;text-align:center}
.loginbox p{text-align:center;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--desk-text-2);margin:0 0 22px}
.loginbox label{display:block;font-size:14px;color:var(--desk-text-2);margin:12px 0 4px}
.loginbox input{
  width:100%;padding:10px 11px;border:1px solid var(--desk-rule);border-radius:var(--r-sm);
  font-size:16px;font-family:var(--f-body);background:var(--desk);color:var(--desk-text);
}
.loginbox input:focus{border-color:var(--desk-text);outline:none}
.loginbox button{
  width:100%;margin-top:20px;background:var(--desk-text);color:var(--desk);
  border-radius:var(--r-sm);padding:12px 0;font-size:16px;font-weight:600;
}
.loginerr{color:var(--st-new);font-size:14.5px;margin-top:12px;text-align:center;min-height:18px}

/* 상단 */
.deskbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 18px;border-bottom:1px solid var(--desk-rule);background:var(--desk);
}
.deskbar .t{font-family:var(--f-display);font-size:19.5px}
.deskbar .t em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--desk-text-2);margin-left:8px;text-transform:uppercase}
.kpis{display:flex;margin-left:auto;flex-wrap:wrap;align-items:center}
.kpi{padding:0 17px;border-left:1px solid var(--desk-rule);line-height:1.25}
.kpi u{display:block;text-decoration:none;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.13em;color:var(--desk-text-2);text-transform:uppercase}
.kpi b{font-family:var(--f-mono);font-size:19.5px;font-variant-numeric:tabular-nums;font-weight:500}
/* 신규 숫자 칸 — 예전 이름 .alert 는 화면 전체 알림창(.alert{display:none}) 과 겹쳐 칸이 숨겨졌음 */
.kpi.knew b{color:var(--st-new)}
.iconbtn{
  margin-left:12px;border:1px solid var(--desk-rule);background:var(--desk);
  border-radius:var(--r-sm);padding:6px 11px;font-size:14px;color:var(--desk-text-2);
}
.iconbtn.on{background:var(--st-done-bg);border-color:var(--st-done);color:var(--st-done)}

.tabs{display:flex;border-bottom:1px solid var(--desk-rule);background:var(--desk)}
.tab{padding:12px 19px 11px;font-size:15.5px;color:var(--desk-text-2);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--desk-text);border-bottom-color:var(--desk-text);font-weight:600}
.tabpane{display:none}
.tabpane.on{display:block}

.deskbody{display:grid;grid-template-columns:330px 1fr;min-height:calc(100dvh - 92px)}
@media (max-width:820px){.deskbody{grid-template-columns:1fr}}
.queue{border-right:1px solid var(--desk-rule);background:var(--desk-2);padding:13px;overflow-y:auto;max-height:calc(100dvh - 92px)}
.qhead{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--desk-text-2);margin:2px 0 9px}
.empty{font-size:15px;color:var(--desk-text-2);padding:16px 2px;line-height:1.6}

.ocard{background:var(--desk);border:1px solid var(--desk-rule);border-radius:var(--r-md);
  padding:11px 12px;margin-bottom:9px;border-left-width:3px}
.ocard.s-new{border-left-color:var(--st-new);animation:pop .35s ease-out}
.ocard.s-cook{border-left-color:var(--st-cook)}
.ocard.s-done{border-left-color:var(--st-done)}
@keyframes pop{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.ocard .top{display:flex;align-items:center;gap:7px}
.ocard .tb{font-family:var(--f-mono);font-size:14px;font-weight:600;background:var(--desk-text);
  color:var(--desk);padding:2px 8px;border-radius:3px}
.ocard .nat{font-family:var(--f-mono);font-size:11.5px;color:var(--desk-text-2)}
.ocard .clk{margin-left:auto;font-family:var(--f-mono);font-size:13.5px;
  font-variant-numeric:tabular-nums;color:var(--desk-text-2)}
.pill{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;
  padding:2px 7px;border-radius:3px;margin-top:7px;text-transform:uppercase}
.pill.s-new{background:var(--st-new-bg);color:var(--st-new)}
.pill.s-cook{background:var(--st-cook-bg);color:var(--st-cook)}
.pill.s-done{background:var(--st-done-bg);color:var(--st-done)}
.olines{font-size:12.5px;margin-top:7px;line-height:1.6}
.olines i{font-style:normal;font-family:var(--f-mono);color:var(--desk-text-2);margin-right:6px}
.onote{font-size:12px;background:#FFF8E8;border:1px solid #EFE0BE;color:#7A5D14;
  border-radius:var(--r-sm);padding:6px 8px;margin-top:7px}
.ofoot{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid var(--desk-rule)}
.ofoot .amt{font-family:var(--f-mono);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.act{margin-left:auto;display:flex;gap:5px}
.btn{font-size:14px;font-weight:500;padding:7px 13px;border-radius:var(--r-sm);
  border:1px solid var(--desk-rule);background:var(--desk)}
.btn.pri{background:var(--st-new);border-color:var(--st-new);color:#fff}
.btn.ok{background:var(--st-done);border-color:var(--st-done);color:#fff}

.board{padding:15px 18px 20px;overflow-y:auto;max-height:calc(100dvh - 92px)}
.legend{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:15px}
.legend span{display:flex;align-items:center;gap:5px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--desk-text-2)}
.legend i{width:10px;height:10px;border-radius:2px;border:1px solid var(--desk-rule)}
.zone{margin-bottom:20px}
.zone h5{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--desk-text-2);margin:0 0 9px;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:9px}
.tile{border:1px solid var(--desk-rule);border-radius:var(--r-md);background:var(--desk);
  padding:15px 6px 8px;text-align:center;position:relative;transition:all .18s}
.tile b{font-family:var(--f-mono);font-size:17.5px;font-weight:600;display:block}
.tile u{display:block;text-decoration:none;font-family:var(--f-mono);font-size:11px;
  color:var(--desk-text-2);margin-top:2px;font-variant-numeric:tabular-nums;min-height:13px}
.tile .seat{position:absolute;top:4px;left:6px;font-size:10px;font-family:var(--f-mono);
  color:var(--desk-text-2);opacity:.75}
.tile .flag2{position:absolute;top:4px;right:6px;font-size:10.5px;font-family:var(--f-mono);color:var(--desk-text-2)}
.tile .over{display:inline-block;margin-top:4px;
  font-size:10px;font-family:var(--f-mono);background:var(--st-new);color:#fff;
  padding:1px 5px;border-radius:2px}
.tile .tclose{display:block;width:100%;margin-top:6px;padding:4px 0;cursor:pointer;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;
  border:1px solid var(--desk-rule);border-radius:3px;
  background:var(--desk-2);color:var(--desk-text-2);transition:all .15s}
.tile .tclose:hover{background:var(--desk-text);border-color:var(--desk-text);color:var(--desk)}
.tile.s-new{background:var(--st-new-bg);border-color:var(--st-new);animation:blink 1.4s ease-in-out infinite}
.tile.s-new b,.tile.s-new u{color:var(--st-new)}
.tile.s-cook{background:var(--st-cook-bg);border-color:var(--st-cook)}
.tile.s-cook b,.tile.s-cook u{color:#8C5C05}
.tile.s-done{background:var(--st-done-bg);border-color:var(--st-done)}
.tile.s-done b,.tile.s-done u{color:var(--st-done)}
@keyframes blink{0%,100%{box-shadow:0 0 0 0 rgba(206,59,36,.34)}50%{box-shadow:0 0 0 6px rgba(206,59,36,0)}}

/* 메뉴 관리 */
.adminhead{padding:14px 18px 12px;border-bottom:1px solid var(--desk-rule);background:var(--desk)}
.cats2{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.cat2{padding:5px 11px;border-radius:100px;font-size:14.5px;border:1px solid var(--desk-rule);
  background:var(--desk-2);color:var(--desk-text-2)}
.cat2.on{background:var(--desk-text);color:var(--desk);border-color:var(--desk-text);font-weight:500}
.hint{margin:0;font-size:14.5px;color:var(--desk-text-2);line-height:1.55}
.hint strong{color:var(--desk-text)}
.tablewrap{overflow:auto;max-height:calc(100dvh - 190px);background:var(--desk)}
.mtable{border-collapse:collapse;width:100%;font-size:15px;min-width:600px}
.mtable th{text-align:left;font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--desk-text-2);font-weight:500;padding:10px 14px;
  border-bottom:1px solid var(--desk-rule);position:sticky;top:0;background:var(--desk);z-index:2}
.mtable td{padding:8px 14px;border-bottom:1px solid var(--desk-2)}
.mtable tr.grouprow td{background:var(--desk-2);font-family:var(--f-mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--desk-text-2);padding:7px 14px}
.mtable .nm2{display:flex;align-items:center;gap:11px}
.athumb{width:38px;height:38px;border-radius:5px;object-fit:cover;flex-shrink:0;background:var(--desk-2)}
.mtable .nm2 b{font-weight:500}
.mtable .nm2 em{font-style:normal;display:block;font-size:13px;color:var(--desk-text-2);margin-top:1px}
.mtable tr.off .nm2 b{text-decoration:line-through;color:var(--desk-text-2)}
.pinput{width:112px;font-family:var(--f-mono);font-size:15px;text-align:right;padding:5px 8px;
  border:1px solid var(--desk-rule);border-radius:var(--r-sm);background:var(--desk);
  color:var(--desk-text);font-variant-numeric:tabular-nums}
.pinput.saved{border-color:var(--st-done);background:var(--st-done-bg)}
.vat{font-family:var(--f-mono);font-size:12px;color:var(--desk-text-2);white-space:nowrap}
.sw{font-size:13.5px;padding:5px 12px;border-radius:100px;border:1px solid var(--desk-rule);
  background:var(--desk);color:var(--desk-text-2);white-space:nowrap}
.sw.on{background:var(--st-new-bg);border-color:var(--st-new);color:var(--st-new);font-weight:500}
.sw.on.hide{background:var(--desk-2);border-color:var(--desk-text-2);color:var(--desk-text-2)}
/* 인기 메뉴 토글 — 품절(빨강)과 헷갈리지 않게 금색 계열로 구분합니다 */
.sw.sig{font-variant-numeric:tabular-nums}
.sw.sig.on{background:#FBF3DE;border-color:#C08A1E;color:#8C5C05;font-weight:600}
.hint.sigline{margin-top:7px;padding-top:7px;border-top:1px dashed var(--desk-rule)}
.hint.sigline b{color:var(--desk-text)}
.hint.sigline .warn{font-style:normal;color:#8C5C05;background:#FBF3DE;
  padding:1px 7px;border-radius:100px;margin-left:5px;font-size:13.5px}

/* 손님 데이터 */
.stats{padding:18px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border:1px solid var(--desk-rule);margin-bottom:16px;background:var(--desk)}
.statrow>div{padding:14px 16px;border-right:1px solid var(--desk-rule)}
.statrow>div:last-child{border-right:0}
.statrow h6{margin:0 0 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--desk-text-2);font-weight:500}
.brow{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:14.5px}
.brow .k{width:78px;flex-shrink:0}
.brow .track{flex:1;height:7px;background:var(--desk-2);border-radius:2px;overflow:hidden}
.brow .track i{display:block;height:100%;background:var(--desk-text);border-radius:2px}
.brow .v{font-family:var(--f-mono);font-size:13.5px;font-variant-numeric:tabular-nums;
  color:var(--desk-text-2);width:100px;text-align:right}

/* 영수증 */
.modal{position:fixed;inset:0;background:rgba(20,17,15,.55);display:none;
  align-items:center;justify-content:center;padding:24px;z-index:40}
.modal.on{display:flex}
/* 사진 자르기 창은 '메뉴 추가' 창 위에 떠야 합니다 (같은 z-index 면 DOM 순서상 뒤에 깔림) */
.modal.crop{z-index:60}
.ticket{background:#fff;color:#1a1a1a;width:340px;max-height:80vh;overflow-y:auto;
  padding:22px 20px;font-family:var(--f-mono);font-size:11.5px;line-height:1.72}
.ticket h6{text-align:center;font-size:14px;margin:0 0 2px;letter-spacing:.14em;font-weight:600}
.ticket .ctr{text-align:center}
.ticket hr{border:0;border-top:1px dashed #b8b8b8;margin:9px 0}
.ticket .ln{display:flex;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}
.ticket .big{font-size:14px;font-weight:600}
.ticket .dim{color:#7b7b7b}
.modalbtns{display:flex;gap:8px;justify-content:center;margin-top:14px}
.modalbtns button{background:#fff;color:#333;border:1px solid #ccc;padding:7px 18px;
  font-size:14.5px;font-family:var(--f-mono);border-radius:var(--r-sm)}
.modalbtns button.pri{background:var(--desk-text);color:#fff;border-color:var(--desk-text)}
.modalbtns button{cursor:pointer;transition:all .15s}
.modalbtns button#closeSess{border-color:var(--st-done);color:var(--st-done)}
.modalbtns button#closeSess:hover{background:var(--st-done);color:#fff}

@media print{
  body.desk *{visibility:hidden}
  .ticket, .ticket *{visibility:visible}
  .ticket{position:absolute;left:0;top:0;width:72mm;max-height:none;box-shadow:none;padding:0}
  .modalbtns{display:none}
}

body.desk .toast{background:var(--desk-text);color:var(--desk)}
body.desk .toast.err{background:var(--st-new);color:#fff}


/* ── 주문 기록 (DB 조회) ─────────────────────────────────────────── */
.logbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--desk-rule);background:var(--desk)}
.logbar .sp{margin-left:auto}
.logbar input[type=search]{flex:0 1 300px;min-width:170px;padding:6px 10px;font-size:14.5px;
  border:1px solid var(--desk-rule);border-radius:var(--r-sm);background:var(--desk-2);
  color:var(--desk-text);font-family:inherit}
.logbar .chk{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--desk-text-2);cursor:pointer}
.seg{display:inline-flex;border:1px solid var(--desk-rule);border-radius:var(--r-sm);overflow:hidden}
.seg button{padding:6px 13px;font-size:14.5px;background:var(--desk-2);color:var(--desk-text-2);
  border:0;border-right:1px solid var(--desk-rule);cursor:pointer;font-family:inherit}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--desk-text);color:var(--desk);font-weight:500}
.btn.dgr{border-color:var(--st-new);color:var(--st-new)}
.btn.dgr:hover{background:var(--st-new);color:#fff}
.logsum{margin:0;padding:9px 18px;font-size:14.5px;color:var(--desk-text-2);
  border-bottom:1px solid var(--desk-rule);background:var(--desk-2)}
.logsum b{color:var(--desk-text);font-family:var(--f-mono)}
.logsum.warn{color:#8C2F1B;background:#FBEBE4;font-weight:600}
.ltable{min-width:1000px}
.ltable td,.ltable th{white-space:nowrap}
.ltable td.items{white-space:normal;min-width:230px;font-size:14px;line-height:1.5}
.ltable td.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ltable tr.void td{opacity:.42;text-decoration:line-through}
.ltable tr.void td.act{text-decoration:none;opacity:1}
.ltable .st{font-size:12px;font-family:var(--f-mono);padding:1px 7px;border-radius:100px;
  border:1px solid var(--desk-rule);color:var(--desk-text-2)}
.ltable .st.s-new{background:var(--st-new-bg);border-color:var(--st-new);color:var(--st-new)}
.ltable .st.s-cook{background:var(--st-cook-bg);border-color:var(--st-cook);color:#8C5C05}
.ltable .st.s-done{background:var(--st-done-bg);border-color:var(--st-done);color:var(--st-done)}
.ltable .mini{padding:3px 9px;font-size:13px;border:1px solid var(--desk-rule);
  border-radius:var(--r-sm);background:var(--desk-2);color:var(--desk-text-2);cursor:pointer}
.ltable .mini:hover{background:var(--desk-text);border-color:var(--desk-text);color:var(--desk)}
.logempty{padding:38px 18px;font-size:15px;color:var(--desk-text-2);line-height:1.7}


/* ── 직원 호출 (손님 화면) ────────────────────────────────────────── */
.callb{
  width:34px;height:30px;flex:0 0 auto;font-size:15px;line-height:1;
  border:1px solid var(--char-3);border-radius:var(--r-sm);background:var(--char-2);
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.callb:active{background:var(--paper);border-color:var(--paper)}
.calls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 4px}
.callopt{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:17px 8px;border-radius:var(--r-md);
  background:var(--char-2);border:1px solid var(--char-3);
  color:var(--paper);font-size:13px;font-weight:500;line-height:1.35;text-align:center;word-break:keep-all;
  transition:all .15s;
}
.callopt i{font-style:normal;font-size:25px;line-height:1}
.callopt:active{background:var(--paper);border-color:var(--paper);color:var(--char)}
.callopt.busy{opacity:.5;pointer-events:none}
.callopt:last-child:nth-child(odd){grid-column:1/-1}   /* 버튼이 홀수면 마지막을 넓게 */
/* 쌈장 그림 (직원 호출 '쌈장·소스' — 이모지가 없어 그림으로). 손님 화면·리셉션 같이 씀 */
.ic-ssamjang{display:block;width:1em;height:1em;transform:scale(1.3);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 16C8 9 12 6.5 16 6.5S24 9 25 16Z' fill='%238A4520'/%3E%3Cpath d='M11 12.5C12.5 10 14.5 9 17 9.3' stroke='%23C27A45' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='11.5' r='2.1' fill='none' stroke='%235DA03A' stroke-width='1.4'/%3E%3Ccircle cx='13.5' cy='14' r='.9' fill='%23F4E6C4'/%3E%3Ccircle cx='17' cy='13.2' r='.9' fill='%23F4E6C4'/%3E%3Cpath d='M3 16H29A13 10 0 0 1 3 16Z' fill='%23EDE6D8'/%3E%3Cpath d='M3 16H29' stroke='%23C9BFAE' stroke-width='1.4'/%3E%3Cpath d='M11 25.2H21L20 28H12Z' fill='%23C9BFAE'/%3E%3C/svg%3E") center/contain no-repeat}
#callSheet .sheetbox h4{margin:0}
#callSheet .sheetbox .sub{margin-top:4px}

/* ── 영업 종료 안내 ──────────────────────────────────────────────── */
.closedbar{
  margin:12px 15px 0;padding:13px 15px;border-radius:var(--r-md);
  background:rgba(206,59,36,.13);border:1px solid rgba(206,59,36,.45);
  display:flex;flex-direction:column;gap:3px;
}
.closedbar b{font-size:13.5px;color:#F3AFA2}
.closedbar span{font-size:12px;color:var(--paper-dim);line-height:1.5}
body.closed .cartbar .go{opacity:.45}

/* ── 일행과 함께 쓰는 장바구니 ────────────────────────────────────── */
.sharednote{
  margin:0 0 12px;padding:9px 12px;border-radius:var(--r-sm);
  background:rgba(127,199,158,.12);border:1px solid rgba(127,199,158,.35);
  font-size:12px;color:#9FD9B8;text-align:center;
}
.crow.mates{opacity:.92}
.crow.mates .cthumb{filter:saturate(.75)}
.crow .matetag{
  display:inline-block;font-style:normal;vertical-align:2px;margin-left:6px;
  padding:1px 6px;border-radius:100px;font-size:9.5px;letter-spacing:.02em;
  background:rgba(127,199,158,.16);border:1px solid rgba(127,199,158,.4);color:#9FD9B8;
}
.crow .mateqty{
  margin-top:7px;font-family:var(--f-mono);font-size:13px;color:var(--paper-dim);
}
.crow .lock{
  width:28px;flex-shrink:0;text-align:center;font-size:11px;opacity:.35;
  align-self:center;
}

/* 일행이 담았을 때 화면 아래 잠깐 뜨는 알림 */
.mate{
  position:fixed;left:50%;transform:translate(-50%,14px);
  bottom:calc(84px + env(safe-area-inset-bottom));
  max-width:calc(100% - 36px);z-index:60;pointer-events:none;
  padding:10px 16px;border-radius:100px;
  background:rgba(63,127,92,.95);color:#EAF7EF;
  font-size:13px;font-weight:500;line-height:1.4;text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  opacity:0;transition:opacity .18s,transform .18s;
}
.mate.on{opacity:1;transform:translate(-50%,0)}

/* ── 공지 배너 (손님) ───────────────────────────────────────────── */
.noticebar{
  margin:12px 15px 0;padding:11px 14px;border-radius:var(--r-md);
  background:rgba(243,240,233,.07);border:1px solid rgba(243,240,233,.18);
  border-left:3px solid var(--st-cook);
  font-size:13px;line-height:1.55;color:var(--paper);
}

/* ── 리뷰 부탁 (손님) ───────────────────────────────────────────── */
.revbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:calc(100% - 30px);margin:12px 15px 0;padding:12px 14px;
  border-radius:var(--r-md);text-align:left;
  background:rgba(235,196,106,.13);border:1px solid rgba(235,196,106,.45);
  color:#F0D79A;font-size:13.5px;font-weight:500;
}
.revbar i{font-style:normal;font-size:14px;opacity:.6;padding:0 2px}
.revstars{font-size:19px;letter-spacing:3px;color:var(--st-cook);
  text-align:center;margin-bottom:9px}
#revSheet .sheetbox{text-align:center}
#revSheet .sub{margin:5px auto 0;max-width:34ch;line-height:1.55}
.revlinks{display:grid;gap:8px;margin-top:17px}
.revlink{
  display:block;padding:14px 12px;border-radius:var(--r-md);text-decoration:none;
  background:var(--paper);color:var(--char);font-size:14.5px;font-weight:600;
}
.revlink:active{opacity:.8}

/* ── 유입경로 설문 (손님 · 완료 화면) ──────────────────────────── */
.survey{
  width:100%;max-width:400px;margin:22px auto 0;padding:16px 15px 13px;
  border-radius:var(--r-md);text-align:center;
  background:var(--char-2);border:1px solid var(--char-3);
}
.survey h4{margin:0;font-size:14.5px;font-weight:600;color:var(--paper)}
.survey p{margin:4px 0 13px;font-size:11.5px;color:var(--paper-dim)}
.srcs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.src{
  padding:9px 13px;border-radius:100px;font-size:12.5px;
  background:var(--char);border:1px solid var(--char-3);color:var(--paper);
}
.src:active{background:var(--paper);color:var(--char)}
.survey .skip{
  display:block;width:100%;margin-top:12px;padding:6px;
  background:none;color:var(--paper-dim);font-size:12px;
}


/* ── 소리 막힘 안내 (리셉션) — 크롬이 소리를 막았을 때만 보임 ── */
.snd-lock{
  display:block;width:100%;padding:11px 18px;border:0;cursor:pointer;text-align:left;
  background:#C0392B;color:#fff;font-size:15px;font-weight:600;
  animation:sndlock 1.2s ease-in-out infinite;
}
.snd-lock[hidden]{display:none}
@keyframes sndlock{50%{background:#8E2117}}

/* ── 직원 호출 배너 (리셉션) ─────────────────────────────────────── */
.calls-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 18px;background:#FBF3DE;border-bottom:1px solid #E4D2A6;
}
.calls-bar .chead{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#8C5C05;font-weight:600;margin-right:3px;
}
.callchip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 10px;
  border:1px solid #C08A1E;border-radius:100px;background:#fff;color:#5C3D03;
  font-size:14.5px;cursor:pointer;transition:all .15s;
  animation:callpulse 1.8s ease-in-out infinite;
}
.callchip i{font-style:normal;font-size:16px;line-height:1}
.callchip b{font-family:var(--f-mono);font-size:15px;font-weight:600}
.callchip u{text-decoration:none;font-family:var(--f-mono);font-size:12px;opacity:.62;
  font-variant-numeric:tabular-nums}
.callchip em{
  font-style:normal;font-size:13px;padding:2px 8px;border-radius:100px;
  background:#8C5C05;color:#fff;margin-left:2px;
}
.callchip:hover{background:#8C5C05;color:#fff;border-color:#8C5C05}
.callchip:hover u{opacity:.8}
.callchip:hover em{background:#fff;color:#8C5C05}
.callchip:disabled{opacity:.45;animation:none;pointer-events:none}
/* 3분 넘게 처리 안 된 호출 — 빨갛게, 더 빨리 깜박 */
.calls-bar.late{background:#FBE4DE;border-bottom-color:#E7B3A5}
.calls-bar.late .chead{color:#A3281A}
.callchip.late{border-color:#C0392B;background:#C0392B;color:#fff;animation:calllate .9s ease-in-out infinite}
.callchip.late u{opacity:.9}
.callchip.late em{background:#fff;color:#A3281A}
.callchip.late:hover{background:#8E2117;border-color:#8E2117}
@keyframes calllate{
  0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.55)}
  50%{box-shadow:0 0 0 7px rgba(192,57,43,0)}
}
@keyframes callpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(192,138,30,.42)}
  50%{box-shadow:0 0 0 5px rgba(192,138,30,0)}
}

/* ── 영업중 / 주문 마감 스위치 ───────────────────────────────────── */
.iconbtn.openbtn{border-color:var(--st-done);color:var(--st-done);font-weight:500}
.iconbtn.openbtn.closed{background:var(--st-new);border-color:var(--st-new);color:#fff}

/* ── 주문 취소 버튼 ──────────────────────────────────────────────── */
.btn.vd{color:var(--desk-text-2)}
.btn.vd:hover,.btn.vd.armed{background:var(--st-new);border-color:var(--st-new);color:#fff}


/* 리셉션 상단 언어 선택 */
.iconbtn.langsel{
  appearance:none;-webkit-appearance:none;
  padding-right:26px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236B635C'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;
}
.iconbtn.langsel:focus{outline:2px solid var(--desk-rule);outline-offset:1px}


/* ── 테이블 상세 주문서 ──────────────────────────────────────────── */
.tile.has{cursor:pointer}
.tile.has:hover{border-color:var(--desk-text)}
.modal.td .tdbox{
  background:var(--desk);border-radius:var(--r-md);padding:20px 22px;
  width:min(440px,92vw);max-height:72vh;overflow:auto;color:var(--desk-text);
}
.tdhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--desk-rule)}
.tdcode{font-family:var(--f-mono);font-size:27px;font-weight:600;line-height:1}
.tdmeta{font-size:13px;color:var(--desk-text-2)}
.tdempty{font-size:14px;color:var(--desk-text-2);padding:22px 0;text-align:center;margin:0}
.tdround{margin-bottom:15px;padding-bottom:13px;border-bottom:1px dashed var(--desk-rule)}
.tdround:last-of-type{border-bottom:0}
.tdrh{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.tdrh b{font-size:14px}
.tdrh .no{font-family:var(--f-mono);font-size:12.5px;color:var(--desk-text-2)}
.tdrh .tm{margin-left:auto;font-family:var(--f-mono);font-size:12px;color:var(--desk-text-2)}
.tdline{display:flex;align-items:baseline;gap:8px;font-size:14.5px;padding:3px 0}
.tdline i{font-style:normal;font-family:var(--f-mono);color:var(--desk-text-2);min-width:26px}
.tdline span{flex:1}
.tdline u{text-decoration:none;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  color:var(--desk-text-2)}
.tdnote{margin-top:6px;font-size:13px;color:#8C5C05;background:#FBF3DE;
  padding:5px 9px;border-radius:var(--r-sm)}
.tdsum{margin-top:16px;padding-top:13px;border-top:1px solid var(--desk-rule)}
.tdsum div{display:flex;justify-content:space-between;font-size:14px;padding:3px 0;
  color:var(--desk-text-2)}
.tdsum div b{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--desk-text)}
.tdsum div.big{font-size:17px;margin-top:7px;padding-top:9px;
  border-top:1px solid var(--desk-rule);color:var(--desk-text);font-weight:600}

/* ── 관리자 / 직원 구분 ──────────────────────────────────────────── */
.iconbtn.adminlink{background:var(--desk-text);border-color:var(--desk-text);color:var(--desk);
  text-decoration:none;display:inline-flex;align-items:center}
.iconbtn.adminlink:hover{opacity:.86}
#backLink{text-decoration:none;display:inline-flex;align-items:center}
/* 지금 로그인한 계정 (읽기 전용 표시) */
.iconbtn.who{
  display:inline-flex;align-items:center;gap:5px;cursor:default;
  background:transparent;border-style:dashed;color:var(--desk-text-2);
  font-weight:600;font-family:var(--f-mono);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.iconbtn.who::before{content:"\1F464";font-family:inherit;opacity:.75}
.iconbtn.who.master{border-style:solid;border-color:var(--desk-text);color:var(--desk-text)}

/* ── 매장 설정 탭 ─────────────────────────────────────────────── */
.setwrap{padding:20px 22px 40px;max-width:900px}
.setbox{border:1px solid var(--desk-rule);border-radius:var(--r-md);
  background:var(--desk);padding:18px 20px 16px;margin-bottom:18px}
.setbox h4{margin:0 0 6px;font-size:16.5px;font-weight:600;color:var(--desk-text)}
.setbox .hint{margin:0 0 14px;font-size:13.5px;line-height:1.65;color:var(--desk-text-2)}
.setbox .hint.sub{margin:8px 0 12px;font-size:13px;
  padding:9px 12px;background:var(--desk-2);border-radius:var(--r-sm)}
.swrow{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:14.5px;font-weight:500;margin-bottom:14px;color:var(--desk-text)}
.swrow input{width:17px;height:17px;accent-color:var(--st-done);cursor:pointer}
.langgrid{display:grid;gap:9px}
.lang1{display:flex;align-items:center;gap:11px}
.lang1 u{flex:0 0 86px;text-decoration:none;font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:.06em;color:var(--desk-text-2);text-align:right}
.lang1 input,.link1 input[type=text],.link1 input[type=url]{
  flex:1;min-width:0;border:1px solid var(--desk-rule);border-radius:var(--r-sm);
  background:var(--desk);padding:8px 11px;font:inherit;font-size:14px;color:var(--desk-text)}
.lang1 input:focus,.link1 input:focus,#revWhen:focus{outline:2px solid var(--desk-rule);outline-offset:1px}
.whenrow{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--desk-text)}
#revWhen{border:1px solid var(--desk-rule);border-radius:var(--r-sm);
  background:var(--desk);padding:7px 10px;font:inherit;font-size:14px;color:var(--desk-text)}
.links{display:grid;gap:9px;margin-bottom:11px}
.link1{display:flex;align-items:center;gap:9px}
.link1 input[type=checkbox]{width:16px;height:16px;accent-color:var(--st-done);flex:0 0 auto;cursor:pointer}
.link1 .lb{flex:0 0 170px}
.link1 .x{flex:0 0 auto;border:1px solid var(--desk-rule);border-radius:var(--r-sm);
  background:var(--desk);width:30px;height:30px;color:var(--desk-text-2);font-size:13px}
.link1 .x:hover{border-color:var(--st-new);color:var(--st-new)}
.optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px}
.opt1{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;
  padding:7px 10px;border:1px solid var(--desk-rule);border-radius:var(--r-sm);color:var(--desk-text)}
.opt1 input{width:15px;height:15px;accent-color:var(--st-done);cursor:pointer}

/* ── 메뉴 사진 (관리자) ───────────────────────────────────────────── */
.athumb.pick{
  position:relative;padding:0;border:1px solid var(--desk-rule);cursor:pointer;
  background-size:cover;background-position:center;background-color:var(--desk-2);
}
.athumb.pick i{
  position:absolute;inset:auto 0 0 0;font-style:normal;font-size:9px;line-height:1.5;
  background:rgba(34,31,28,.72);color:#fff;border-radius:0 0 4px 4px;
  opacity:0;transition:opacity .15s;
}
.athumb.pick:hover i,.athumb.pick:focus-visible i{opacity:1}
.btn.newitem{margin-top:10px}

/* ── 사진 자르기 창 ───────────────────────────────────────────────── */
.modal.crop>div{max-width:100%}
.cropbox{background:var(--desk);border-radius:var(--r-md);padding:18px 20px 14px}
.cropbox h3{margin:0 0 4px;font-size:17px;font-weight:600;color:var(--desk-text)}
.cropbox .hint{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--desk-text-2);max-width:44ch}
.cropbox .hint.sub{margin:9px 0 0;font-family:var(--f-mono);font-size:12px;text-align:center}
.cropwrap{position:relative;margin:0 auto;touch-action:none;user-select:none;
  border-radius:var(--r-sm);overflow:hidden;background:var(--desk-2)}
.cropwrap canvas{display:block;width:100%;height:100%}
.cropwrap .shade{position:absolute;inset:0;background:rgba(20,17,15,.62);pointer-events:none}
.cropsel{position:absolute;box-shadow:0 0 0 1px rgba(255,255,255,.9);cursor:move}
.cropsel::before,.cropsel::after{content:"";position:absolute;inset:0;pointer-events:none}
/* 삼분할 안내선 — 음식 사진을 가운데 맞추기 쉽게 */
.cropsel::before{
  background:
    linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.35) 33.2%,rgba(255,255,255,.35) 33.5%,transparent 33.5%,
                    transparent 66.4%,rgba(255,255,255,.35) 66.4%,rgba(255,255,255,.35) 66.7%,transparent 66.7%),
    linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.35) 33.2%,rgba(255,255,255,.35) 33.5%,transparent 33.5%,
                    transparent 66.4%,rgba(255,255,255,.35) 66.4%,rgba(255,255,255,.35) 66.7%,transparent 66.7%);
}
.cropsel .ch{
  position:absolute;width:26px;height:26px;cursor:pointer;
  border:3px solid #fff;border-radius:2px;
}
.cropsel .ch.nw{left:-3px;top:-3px;border-right:0;border-bottom:0;cursor:nwse-resize}
.cropsel .ch.ne{right:-3px;top:-3px;border-left:0;border-bottom:0;cursor:nesw-resize}
.cropsel .ch.sw{left:-3px;bottom:-3px;border-right:0;border-top:0;cursor:nesw-resize}
.cropsel .ch.se{right:-3px;bottom:-3px;border-left:0;border-top:0;cursor:nwse-resize}
@media (max-width:720px){ .modal.crop{padding:12px} .cropbox{padding:14px} }

/* ── 직원 사용 설명서 ─────────────────────────────────────────────── */
.iconbtn.helpbtn{border-style:dashed}

/* QR 인쇄면 — 카드 밑에 주소를 작게 적어 잘못 만들어진 걸 눈으로 잡습니다 */
.card .addr{margin-top:5px;font-family:var(--f-mono);font-size:7.5px;
  letter-spacing:.02em;color:#A9A29A;word-break:break-all}
.note.bad{color:#8E2E18;line-height:1.8}
.modal.help>div{width:min(720px,100%)}
.helpbox{background:var(--desk);border-radius:var(--r-md);padding:0;
  max-height:80vh;overflow-y:auto}
.helphead{position:sticky;top:0;z-index:1;background:var(--desk);
  padding:20px 24px 14px;border-bottom:1px solid var(--desk-rule)}
.helphead h3{margin:0 0 5px;font-size:19px;font-weight:600;color:var(--desk-text)}
.helphead p{margin:0;font-size:13.5px;line-height:1.65;color:var(--desk-text-2)}
.hsec{padding:17px 24px;border-bottom:1px solid var(--desk-rule)}
.hsec:last-child{border-bottom:0}
.hsec h4{display:flex;align-items:center;gap:9px;margin:0 0 9px;
  font-size:16px;font-weight:600;color:var(--desk-text)}
.hsec h4 i{font-style:normal;font-size:17px}
.hnum{flex:0 0 auto;width:23px;height:23px;border-radius:50%;
  background:var(--desk-text);color:var(--desk);
  font-family:var(--f-mono);font-size:12px;font-weight:500;
  display:flex;align-items:center;justify-content:center}
.hsec ol{margin:0;padding-left:20px}
.hsec li{font-size:14.5px;line-height:1.75;color:var(--desk-text);margin-bottom:3px}
.hsec li b{font-weight:600;background:var(--desk-2);border:1px solid var(--desk-rule);
  border-radius:3px;padding:1px 5px;white-space:nowrap}
.hnote{margin:11px 0 0;padding:10px 13px;border-radius:var(--r-sm);
  background:#FCF2DC;border-left:3px solid var(--st-cook);
  font-size:13.5px;line-height:1.65;color:#5C4A16}
.hnote::before{content:"⚠ ";font-weight:600}

/* 인쇄하면 설명서만 나옵니다 (벽에 붙여두라고) */
@media print{
  body.printhelp *{visibility:hidden}
  body.printhelp .helpbox, body.printhelp .helpbox *{visibility:visible}
  body.printhelp .helpbox{position:absolute;left:0;top:0;width:100%;
    max-height:none;overflow:visible;padding:0}
  body.printhelp .helphead{position:static;border-bottom:1px solid #999}
  body.printhelp .hsec{page-break-inside:avoid;border-bottom:1px solid #ddd}
  body.printhelp .hnote{background:#f5f5f5;border-left:3px solid #999;color:#333}
  body.printhelp .modalbtns{display:none}
}
@media (max-width:720px){ .hsec{padding:15px 16px} .helphead{padding:16px} }

/* ── 메뉴 추가 창 ─────────────────────────────────────────────────── */
.modal.wide>div{width:min(560px,100%)}
.nibox{background:var(--desk);border-radius:var(--r-md);padding:20px 22px 16px;
  max-height:78vh;overflow-y:auto}
.nibox h3{margin:0 0 5px;font-size:18px;font-weight:600;color:var(--desk-text)}
.nirow{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.nirow>u{flex:0 0 96px;text-decoration:none;font-size:13.5px;color:var(--desk-text-2);text-align:right}
.nirow input[type=text],.nirow select{
  flex:1;min-width:0;border:1px solid var(--desk-rule);border-radius:var(--r-sm);
  background:var(--desk);padding:8px 11px;font:inherit;font-size:14.5px;color:var(--desk-text)}
.nirow .withunit{flex:1;display:flex;align-items:center;gap:7px}
.nirow .withunit input{flex:1;font-family:var(--f-mono);text-align:right}
.nirow .withunit em{font-style:normal;font-size:14px;color:var(--desk-text-2)}
.nirow .withunit.sm{flex:0 0 110px}
.taxnew{flex:1;display:flex;gap:9px;align-items:center}
.picbox{flex:1;display:flex;align-items:center;gap:11px}
.picbox .athumb.pick{width:60px;height:60px}
.picbox .athumb.pick i{opacity:1;font-size:8.5px}
#niCode{margin:4px 0 0;font-family:var(--f-mono);font-size:12.5px}

/* ── 메뉴 이름 · 상세설명 고치기 ── */
.mtable .edname{all:unset;cursor:pointer;display:block;border-radius:var(--r-sm)}
.mtable .edname:hover b{text-decoration:underline}
.mtable .edname:focus-visible{outline:2px solid var(--desk-text);outline-offset:2px}
.mtable .edname b{font-weight:500}
.mtable .edname em{font-style:normal;display:block;font-size:13px;color:var(--desk-text-2);margin-top:1px}
.mtable tr.off .edname b{text-decoration:line-through;color:var(--desk-text-2)}
.edlang{display:grid;grid-template-columns:96px 1fr;gap:6px 11px;margin-top:12px}
.edlang .edlb{grid-row:span 2;font-size:13.5px;color:var(--desk-text-2);text-align:right;padding-top:8px}
.edlang input,.edlang textarea{
  min-width:0;border:1px solid var(--desk-rule);border-radius:var(--r-sm);
  background:var(--desk);padding:8px 11px;font:inherit;font-size:14.5px;color:var(--desk-text)}
.edlang textarea{resize:vertical;font-size:13.5px;line-height:1.45}
@media (max-width:520px){
  .edlang{grid-template-columns:1fr}
  .edlang .edlb{grid-row:auto;text-align:left;padding-top:0}
}

/* ── 계산서: 결제수단 · 할인 ──────────────────────────────────────── */
.paybox{width:340px;margin-top:12px;background:var(--desk);border-radius:var(--r-md);
  padding:14px 16px 12px;border:1px solid var(--desk-rule)}
.payrow{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.payrow>u{flex:0 0 62px;text-decoration:none;font-size:13px;color:var(--desk-text-2);
  padding-top:6px;text-align:right}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:100px;font-size:13.5px;cursor:pointer;
  border:1px solid var(--desk-rule);background:var(--desk-2);color:var(--desk-text-2)}
.chip.on{background:var(--desk-text);border-color:var(--desk-text);color:var(--desk);font-weight:500}
.dcwrap{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.seg.sm button{padding:5px 10px;font-size:13px}
#dcInput{width:78px;border:1px solid var(--desk-rule);border-radius:var(--r-sm);
  background:var(--desk);padding:5px 9px;font-family:var(--f-mono);font-size:14px;
  text-align:right;color:var(--desk-text)}
#dcMemo{flex:1;border:1px solid var(--desk-rule);border-radius:var(--r-sm);
  background:var(--desk);padding:6px 10px;font:inherit;font-size:13.5px;color:var(--desk-text)}
.paybox .mini{padding:4px 9px;font-size:12.5px;border:1px solid var(--desk-rule);
  border-radius:var(--r-sm);background:var(--desk-2);color:var(--desk-text-2);cursor:pointer}
.paysum{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;
  padding-top:10px;border-top:1px solid var(--desk-rule);
  font-family:var(--f-mono);font-size:13px;color:var(--desk-text-2)}
.paysum .cut{color:var(--st-new)}
.paysum .due{color:var(--desk-text);font-size:15px}
.paysum b{font-weight:600}
.chip.fullchip{margin-left:auto}
.ltable .dc{color:var(--st-new)}
.ltable .dc em.free{font-size:11px;padding:1px 6px;border-radius:100px;
  background:var(--desk-2);border:1px solid var(--desk-rule);color:var(--desk-text)}
.ltable .dc em{font-style:normal;display:inline;font-size:11.5px;color:var(--desk-text-2)}
/* 할인 사유는 한 줄로만 (줄 높이가 들쭉날쭉해지지 않게) */
.ltable .dc em.memo{display:block;max-width:190px;margin-left:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ⚠️ 위쪽 공용 .act 규칙(display:flex)이 표 칸에도 걸려서 줄이 어긋났습니다.
   표 안에서는 평범한 칸으로 되돌립니다. */
.ltable td.act{display:table-cell;margin:0;text-align:right;white-space:nowrap}
@media print{ .paybox{display:none} }
@media (max-width:720px){
  .paybox{width:100%}
  .nirow{flex-wrap:wrap}
  .nirow>u{flex-basis:100%;text-align:left}
}
.setfoot{display:flex;justify-content:flex-end;margin-top:15px;
  padding-top:14px;border-top:1px solid var(--desk-rule)}
.btn.ghost{background:var(--desk);border-style:dashed;color:var(--desk-text-2)}
@media (max-width:720px){
  .setwrap{padding:16px 14px 34px}
  .lang1,.link1{flex-wrap:wrap}
  .lang1 u{flex-basis:100%;text-align:left}
  .link1 .lb{flex:1 1 100%}
}
.pread{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--desk-text-2)}
.deny{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--desk-2);text-align:center;padding:24px;z-index:60}
.deny h2{font-size:18px;font-weight:600;margin:0 0 8px;color:var(--desk-text)}
.deny p{font-size:14px;color:var(--desk-text-2);margin:0 0 18px}
.deny .btn{text-decoration:none;display:inline-block}

/* ── 창(모달) 높이 — 버튼이 화면 밖으로 밀려나지 않게 (2026-09-21) ──────
   무엇이 문제였나
     계산서 창은 영수증(.ticket)만 80vh 로 잘라두고, 그 아래에 결제수단·할인
     상자(.paybox)와 버튼(.modalbtns)을 그냥 붙여 놓았습니다. 그래서 주문 줄이
     많아지면  80vh + 결제상자 + 버튼  이 화면 높이를 넘어가
     「✓ 마감하고 테이블 비우기」 버튼이 화면 아래로 사라졌습니다.
     (1440×800 화면 · 주문 30줄에서 버튼이 화면보다 82px 아래에 있었음)

   어떻게 고쳤나
     창 전체를 세로 방향 flex 로 잡고, 창 높이가 화면을 넘지 않게 못 박습니다.
       · 길어질 수 있는 부분(영수증·주문서·설명서·메뉴추가) → 남는 공간만 쓰고
         넘치면 그 안에서만 스크롤
       · 결제 상자와 버튼 → 항상 제자리에 보이게 고정
     같은 구조인 다른 창 3개(테이블 주문서·직원 설명서·메뉴 추가)도
     주문이나 항목이 많아지면 똑같은 문제가 생기므로 함께 고칩니다.
   ------------------------------------------------------------------- */
.modal > div{
  display:flex;
  flex-direction:column;
  max-height:100%;          /* .modal 의 padding 24px 을 뺀 높이 = 화면 안 */
  min-height:0;
}
/* 길어지는 부분 — 남는 만큼만 쓰고, 넘치면 자기 안에서 스크롤 */
.modal > div > .ticket,
.modal > div > .tdbox,
.modal > div > .helpbox,
.modal > div > .nibox{
  flex:1 1 auto;
  min-height:96px;
  max-height:none;          /* 기존 80vh/78vh/72vh 제한을 flex 가 대신합니다 */
  overflow-y:auto;
}
/* 사진 자르기 창은 스크롤 대상이 아니지만, 낮은 화면에서 버튼을 밀어내지 않게 */
.modal > div > .cropbox{ flex:0 1 auto; min-height:0; overflow:auto; }
/* 항상 보여야 하는 것 */
.modal > div > .paybox,
.modal > div > .modalbtns{ flex:0 0 auto; }

@media print{
  /* 인쇄할 때는 높이 제한을 풀어 영수증 전체가 나오게 합니다 */
  .modal > div{ display:block; max-height:none; }
  .modal > div > .ticket{ overflow:visible; max-height:none; min-height:0; }
}

/* 받을 금액 줄 — 340px 안에서 「청구 / −할인 / 받을 금액」 이 글자 중간에서
   끊기지 않게. 자리가 모자라면 항목 단위로만 줄을 바꿉니다. */
.paysum{flex-wrap:wrap}
.paysum > span{white-space:nowrap}

/* ── 테이블 상세: 인원 수정 (2026-09-24) ───────────────────────────
   손님이 고른 인원이 틀렸을 때 직원이 바로 고칠 수 있게. */
.tdpax{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap }
.tdpax input{ padding:6px 8px; border:1px solid var(--line,#d9d4cb); border-radius:8px;
              font:inherit; text-align:center }

/* ── 패치노트 (사장님 전용) ────────────────────────────────────── */
.pnlist{ list-style:none; margin:10px 0 0; padding:0 }
.pnlist li{ display:flex; gap:10px; align-items:flex-start;
            padding:7px 0; line-height:1.55; border-top:1px solid rgba(0,0,0,.06) }
.pnlist li:first-child{ border-top:0 }
.pntag{ flex:0 0 auto; min-width:52px; text-align:center;
        font-size:11px; font-weight:700; letter-spacing:.02em;
        padding:3px 7px; border-radius:6px; margin-top:1px; white-space:nowrap }
.pk-new{ background:#e6f4ea; color:#1e7a3c }
.pk-imp{ background:#e8eefc; color:#2b4c9b }
.pk-fix{ background:#fdf0e3; color:#96551a }
.pk-sec{ background:#fae9e9; color:#a02b2b }
@media (prefers-color-scheme: dark){
  .pk-new{ background:#1d3a28; color:#8fd6a8 }
  .pk-imp{ background:#1f2a45; color:#9db7f0 }
  .pk-fix{ background:#3d2e1c; color:#e5b781 }
  .pk-sec{ background:#3d2020; color:#eaa0a0 }
  .pnlist li{ border-top-color:rgba(255,255,255,.08) }
}

/* ── 이상 주문 대응 (2026-09-24) ─────────────────────────────────── */
.mini.danger{ background:#b3261e; border-color:#b3261e; color:#fff }
.tdmeta.lockwarn{ color:#b3261e; font-weight:700 }
.tile.locked{ outline:2px solid #b3261e; outline-offset:-2px }
/* 시험용 TEST 자리 — 점선 테두리로 진짜 자리와 구별 (마감하면 기록이 지워짐) */
.tile.test{ border-style:dashed; border-width:2px }

/* ── 주문 잠금 안내 팝업 (2026-09-24) ──────────────────────────────
   토스트와 다르게 [확인] 을 눌러야 닫힙니다. 손님이 QR 로 들어온 즉시
   "이 테이블은 지금 주문을 받지 않는다" 를 놓치지 않고 보게 하려는 것입니다. */
.alert{
  position:absolute;inset:0;z-index:40;padding:24px;
  background:rgba(15,13,12,.84);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;
}
.alert.on{display:flex}
.alertbox{
  width:100%;max-width:330px;text-align:center;
  background:var(--char-2);border:1px solid var(--char-3);
  border-radius:16px;padding:24px 20px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.alerticon{font-size:32px;line-height:1;margin-bottom:12px}
.alertbox h4{margin:0 0 8px;font-size:16.5px;font-weight:600;line-height:1.35;color:var(--paper)}
.alertbox p{margin:0;font-size:13px;line-height:1.65;color:var(--paper-dim)}
.alertbox .addbtn{margin-top:20px}

/* 팝업을 닫은 뒤 메뉴판 위에 남는 안내줄 (영업종료 안내와 같은 모양, 색만 다름) */
.closedbar.lockbar{
  background:rgba(214,158,46,.13);border-color:rgba(214,158,46,.45);
}
.closedbar.lockbar b{color:#F0CE87}
body.locked .cartbar .go{opacity:.45}

/* ── 화면 맨 아래 배포 버전 (2026-09-24) ──────────────────────────
   "지금 어느 패치가 올라가 있는지" 를 한눈에 보려고 아주 작게 적습니다. */
.verline{
  text-align:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  opacity:.32;padding:14px 0 18px;user-select:text;
}
body.desk .verline{text-align:right;padding:10px 16px 14px;color:var(--desk-text)}
/* 패치노트 창: 번호를 앞에, 날짜를 옆에 흐리게 */
.pnlist{margin-top:6px}
.hsec h4 .pndate{
  font-style:normal;font-family:var(--f-mono);font-size:10.5px;
  opacity:.45;margin-left:8px;letter-spacing:.04em;
}

/* ── 테이블 보드: 가게 배치 그대로 (2026-09-29) ─────────────────────
   .rows   = 한 구역 전체. 좁으면 가로로 밀어서 봅니다.
   .trow   = 가게의 한 줄. 기본은 절대 접히지 않습니다.
   .tile.wide = 6인석. 기본 칸의 두 배 폭.
   body.boardwrap = [줄바꿈] 켰을 때 — 화면 폭에 맞춰 접힙니다. */
.rows{ overflow-x:auto; overflow-y:hidden; padding-bottom:4px; -webkit-overflow-scrolling:touch }
.rows::-webkit-scrollbar{ height:7px }
.rows::-webkit-scrollbar-thumb{ background:var(--desk-rule); border-radius:4px }
.trow{
  display:flex; flex-wrap:nowrap; gap:9px; margin-bottom:9px;
  width:max-content; min-width:100%;
}
.trow .tile{ flex:0 0 96px; width:96px }
.trow .tile.wide{ flex:0 0 201px; width:201px }   /* 96×2 + gap 9 */
.rowlab{
  font-size:11.5px; font-weight:500; letter-spacing:.02em;
  color:var(--desk-text-2); opacity:.85; margin:10px 0 5px;
}
.rows > .rowlab:first-child{ margin-top:2px }
/* 옆으로 더 있을 때 오른쪽 끝에 옅은 그림자 — 폰에서 "밀면 더 있다" 는 신호 */
.rows{
  background:
    linear-gradient(to right, var(--desk-2) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left,  var(--desk-2) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.13), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.13), transparent) right / 10px 100% no-repeat scroll;
}

/* [줄바꿈] 켰을 때 — 폰에서 한눈에 보기 */
body.boardwrap .rows{ overflow-x:visible }
body.boardwrap .trow{ flex-wrap:wrap; width:auto; min-width:0 }

/* 범례 줄의 전환 버튼 */
.legend{ align-items:center }
.wrapbtn{
  margin-left:auto; cursor:pointer; white-space:nowrap;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.04em;
  padding:4px 9px; border-radius:100px;
  border:1px solid var(--desk-rule); background:var(--desk); color:var(--desk-text-2);
}
.wrapbtn:hover{ border-color:var(--desk-text); color:var(--desk-text) }
.wrapbtn.on{ background:var(--desk-text); border-color:var(--desk-text); color:var(--desk) }

/* 폰: 칸을 조금 좁혀 한 화면에 더 들어오게 (비율은 그대로) */
@media (max-width:640px){
  .trow .tile{ flex-basis:78px; width:78px }
  .trow .tile.wide{ flex-basis:165px; width:165px }
}

/* ---- v1.5 · 착석(주문 전) 자리 · 비우기 · 기록 삭제 ---- */
.tile.seated{ border-style:dashed; border-color:var(--desk-text-2); background:var(--desk-2) }
.tile.seated b{ color:var(--desk-text) }
.legend i.lgseat{ background:var(--desk-2); border:1px dashed var(--desk-text-2) }
.tdclear{ text-align:center; margin:-6px 0 8px }
.tdclear .mini{ padding:6px 14px }
.tdclearnote{ font-size:12px; color:var(--desk-text-2); margin:8px auto 0; max-width:340px; line-height:1.5 }
.ltable .st.s-idle{ background:transparent; border-style:dashed; color:var(--desk-text-2) }
.ltable .mini.danger{ background:#b3261e; border-color:#b3261e; color:#fff }

/* ── 주방 티켓 인쇄 켜기/끄기 (꺼지면 눈에 띄게 빨간색) ── */
.iconbtn.kpbtn{border-color:var(--st-done);color:var(--st-done);font-weight:500}
.iconbtn.kpbtn.off{background:var(--st-new);border-color:var(--st-new);color:#fff}