/* ============================================================
   스마일캐셔 관리자 · 캐셔 웹 — 공통 스타일시트
   common.css  (모든 페이지 공용)
   ============================================================ */

/* ---------- 1. 디자인 토큰 ---------- */
:root{
  --white:#ffffff;
  --n50:#fafafa;  --n100:#e7e7e7; --n200:#d1d1d1; --n300:#b0b0b0;
  --n400:#888888; --n500:#6d6d6d; --n600:#5d5d5d; --n700:#4f4f4f;
  --n800:#454545; --n900:#3d3d3d; --n950:#000000;
  --o50:#fff4ed;  --o100:#ffe6d4; --o200:#ffcaa8; --o400:#ff6b2d;
  --o500:#fe4e10; --o600:#ef3408; --o700:#c62208; --o900:#7e1b10;
  --g100:#dcfce7; --g500:#22c55e; --g800:#166534;
  --r100:#fee2e2; --r500:#ef4444; --r800:#991b1b;
  --b100:#dbeafe; --b500:#3b82f6; --b800:#1e40af;
  --y100:#fef9c3; --y500:#eab308; --y800:#854d0e;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-nav:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --sp4:4px; --sp6:6px; --sp8:8px; --sp10:10px;
  --sp12:12px; --sp14:14px; --sp16:16px; --sp24:24px;
  --rd4:4px; --rd6:6px; --rd8:8px; --rd12:12px; --rd14:14px; --rd16:16px; --rdf:999px;
  --hair:1px;
  --gnb-h:52px;
  --lnb-w:210px;
}

/* ---------- 2. 리셋 / 베이스 ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--n50);color:var(--n900);
  font-family:var(--font-ui);font-size:14px;line-height:20px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* ---------- 3. 앱 셸 (GNB + LNB + CONTENT) ---------- */
.app{min-height:100vh;display:flex;flex-direction:column;}

.gnb{
  height:var(--gnb-h);flex-shrink:0;position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--sp16);background:var(--white);
  border-bottom:var(--hair) solid var(--n200);
}
.gnb .lt{display:flex;align-items:center;gap:var(--sp14);}
.gnb .logo{display:flex;align-items:center;gap:var(--sp8);font-family:var(--font-nav);font-size:13px;font-weight:600;letter-spacing:.04em;}
.gnb .mk{width:24px;height:24px;border-radius:var(--rd6);background:var(--o500);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gnb .mk i{display:block;width:10px;height:5px;border:2px solid var(--white);border-top:none;border-radius:0 0 10px 10px;}
.gnb .sel{font-size:12px;border:var(--hair) solid var(--n200);border-radius:var(--rd6);padding:5px var(--sp12);color:var(--n600);background:var(--white);cursor:pointer;}
.gnb .rt{display:flex;align-items:center;gap:var(--sp12);font-size:12px;color:var(--n500);}
.gnb .rt b{color:var(--n900);font-weight:600;}
.gnb .burger{display:none;width:30px;height:30px;border:var(--hair) solid var(--n200);border-radius:var(--rd6);background:var(--white);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.gnb .burger span{display:block;width:14px;height:1.5px;background:var(--n600);}

.shell{flex:1;min-height:0;display:flex;align-items:stretch;}

.lnb{
  width:var(--lnb-w);flex-shrink:0;background:var(--white);
  border-right:var(--hair) solid var(--n200);padding:var(--sp12) 0;
  position:sticky;top:var(--gnb-h);height:calc(100vh - var(--gnb-h));overflow:auto;
}
.lnb-g{margin-bottom:var(--sp12);}
.lnb-gt{font-family:var(--font-nav);font-size:10px;font-weight:600;color:var(--n400);letter-spacing:.06em;text-transform:uppercase;padding:var(--sp6) var(--sp16) var(--sp4);}
.lnb-i{display:block;font-family:var(--font-nav);font-size:13px;line-height:20px;color:var(--n600);padding:var(--sp8) var(--sp16);border-left:2px solid transparent;cursor:pointer;}
.lnb-i:hover{background:var(--n50);}
.lnb-i.on{color:var(--o700);background:var(--o50);border-left-color:var(--o500);font-weight:600;}

.content{
  flex:1;min-width:0;padding:var(--sp24);
  display:flex;flex-direction:column;gap:var(--sp16);
}
.content.flush{padding:var(--sp16);}

/* 인증(로그인/비밀번호 찾기) 레이아웃 */
body.auth-page .shell{align-items:center;justify-content:center;}
body.auth-page .content{align-items:center;justify-content:center;min-height:calc(100vh - var(--gnb-h));}

/* 반응형 — 1024 미만 LNB 드로어 */
@media (max-width:1024px){
  .gnb .burger{display:flex;}
  .lnb{
    position:fixed;top:var(--gnb-h);left:0;z-index:40;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 8px 30px rgba(0,0,0,.12);
  }
  .lnb.open{transform:translateX(0);}
  .lnb-backdrop{display:none;position:fixed;inset:var(--gnb-h) 0 0;background:rgba(61,61,61,.4);z-index:39;}
  .lnb-backdrop.on{display:block;}
  .content{padding:var(--sp16);}
}
@media (max-width:768px){
  .gnb .sel{display:none;}
}

/* ---------- 4. 페이지 헤더 ---------- */
.chead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp12);flex-wrap:wrap;}
.ctitle{font-size:19px;line-height:25px;font-weight:700;}
.csub{font-size:12px;line-height:17px;color:var(--n500);margin-top:3px;max-width:760px;}

/* ---------- 5. 버튼 / 배지 ---------- */
.btn{
  font-family:var(--font-ui);font-size:12.5px;font-weight:600;
  padding:var(--sp8) var(--sp14);border-radius:var(--rd8);
  border:var(--hair) solid var(--n200);background:var(--white);color:var(--n700);
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp6);
}
.btn:hover{background:var(--n50);}
.btn.pri{background:var(--o500);border-color:var(--o500);color:var(--white);}
.btn.pri:hover{background:var(--o600);border-color:var(--o600);}
.btn.dan{border-color:var(--r500);color:var(--r800);background:var(--r100);}
.btn.sm{font-size:11px;padding:var(--sp4) var(--sp10);}
.btn.block{width:100%;}

.badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:2px var(--sp8);border-radius:var(--rdf);}
.badge.br{background:var(--o50);color:var(--o700);}
.badge.gr{background:var(--g100);color:var(--g800);}
.badge.yl{background:var(--y100);color:var(--y800);}
.badge.rd{background:var(--r100);color:var(--r800);}
.badge.ne{background:var(--n100);color:var(--n600);}
.badge.bl{background:var(--b100);color:var(--b800);}

/* ---------- 6. 테이블 ---------- */
table.grid{width:100%;border-collapse:collapse;border:var(--hair) solid var(--n200);border-radius:var(--rd12);overflow:hidden;background:var(--white);}
table.grid th{text-align:left;font-size:11.5px;font-weight:600;color:var(--n500);background:var(--n50);padding:var(--sp10) var(--sp12);border-bottom:var(--hair) solid var(--n200);white-space:nowrap;}
table.grid td{font-size:12.5px;padding:var(--sp10) var(--sp12);border-bottom:var(--hair) solid var(--n200);}
table.grid tr:last-child td{border-bottom:none;}
table.grid tbody tr.clickable{cursor:pointer;}
table.grid tbody tr.clickable:hover{background:var(--o50);}
.table-wrap{width:100%;overflow-x:auto;}

/* ---------- 7. 필터 바 ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp8);align-items:center;background:var(--white);border:var(--hair) solid var(--n200);border-radius:var(--rd12);padding:var(--sp10) var(--sp12);}
.fil{font-size:12px;color:var(--n600);border:var(--hair) solid var(--n200);border-radius:var(--rd6);padding:var(--sp6) var(--sp12);background:var(--white);cursor:pointer;}
.fil.on{background:var(--o500);border-color:var(--o500);color:var(--white);font-weight:700;}

/* ---------- 8. 카드 그리드 ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp12);}
@media (max-width:1280px){ .cards{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){  .cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){  .cards{grid-template-columns:1fr;} }
.card{border:var(--hair) solid var(--n200);border-radius:var(--rd12);overflow:hidden;background:var(--white);cursor:pointer;}
.card:hover{border-color:var(--o400);}
.card .th{aspect-ratio:16/9;background:var(--n100);}
.card .bd{padding:var(--sp12);}
.card .nm{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:var(--sp6);}
.card .de{font-size:11.5px;color:var(--n500);margin-top:3px;}

/* ---------- 9. 폼 ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp14);background:var(--white);border:var(--hair) solid var(--n200);border-radius:var(--rd12);padding:var(--sp16);}
@media (max-width:1024px){ .form{grid-template-columns:1fr;} }
.field{display:flex;flex-direction:column;gap:4px;min-width:0;}
.field label{font-size:11.5px;color:var(--n500);font-weight:600;}
.inp{border:var(--hair) solid var(--n200);border-radius:var(--rd6);padding:var(--sp8) var(--sp12);font-size:13px;color:var(--n700);background:var(--white);width:100%;font-family:inherit;}
.inp:focus{outline:none;border-color:var(--o400);}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--n400) 50%),linear-gradient(135deg,var(--n400) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px;}
textarea.inp{min-height:64px;resize:vertical;}
.hint{font-size:11px;line-height:15px;color:var(--n400);}
/* 조회(읽기 전용) 표기 — 상세 화면에서 사용 */
.inp.ro{background:var(--n50);border-color:var(--n100);color:var(--n800);min-height:37px;white-space:pre-wrap;}
.inp.ro:empty:before{content:"-";color:var(--n400);}
.wide{grid-column:1/3;}
@media (max-width:1024px){ .wide{grid-column:1;} }
.footbar{display:flex;justify-content:flex-end;gap:var(--sp8);border-top:var(--hair) solid var(--n200);padding-top:var(--sp14);}

/* 업로드 */
.upl{display:flex;gap:var(--sp12);align-items:stretch;flex-wrap:wrap;}
.uplph{flex:0 0 240px;aspect-ratio:16/9;border-radius:var(--rd8);background:var(--n100);border:var(--hair) solid var(--n200);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--n400);}
.upldrop{flex:1 1 240px;min-height:120px;border:var(--hair) dashed var(--n200);border-radius:var(--rd8);background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp6);font-size:12.5px;line-height:17px;color:var(--n600);text-align:center;padding:var(--sp14);cursor:pointer;}
.upldrop:hover{border-color:var(--o400);background:var(--o50);}
/* 파일을 끌고 영역 위에 올라온 동안. 점선이 실선이 되면서 「여기에 놓으면
   된다」가 분명해집니다 — hover 와 구별되도록 더 진하게 줍니다. */
.upldrop.is-over{border-style:solid;border-width:2px;border-color:var(--o500);background:var(--o50);box-shadow:inset 0 0 0 4px var(--o100);}
.upldrop.is-over *{pointer-events:none;}
/* 「고르기만 했고 아직 안 올라갔다」를 말하는 줄. 평범한 hint 와 같은 색이면
   그냥 설명으로 읽혀서, 저장을 안 누르고 나가게 됩니다. */
.hint.pend{color:var(--o700);font-weight:600;}
.upldrop b{font-weight:600;}
.upldrop span{font-size:11px;line-height:15px;color:var(--n400);}

/* ---------- 10. 통계 / 차트 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp12);}
@media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr);} }
.stat{border:var(--hair) solid var(--n200);border-radius:var(--rd12);padding:var(--sp14) var(--sp16);background:var(--white);}
.stat .lb{font-size:11.5px;color:var(--n500);}
.stat .vl{font-size:24px;line-height:30px;font-weight:700;margin-top:3px;}
.stat .dt{font-size:11px;color:var(--g800);margin-top:2px;}
.chart{min-height:220px;border:var(--hair) solid var(--n200);border-radius:var(--rd12);padding:var(--sp16);display:flex;align-items:flex-end;gap:var(--sp10);background:var(--white);}
.bar{flex:1;background:var(--o100);border-top:3px solid var(--o500);border-radius:var(--rd4) var(--rd4) 0 0;}

/* ---------- 11. 트리 (공통코드) ---------- */
.tree{display:grid;grid-template-columns:260px 1fr;gap:var(--sp14);align-items:start;}
@media (max-width:900px){ .tree{grid-template-columns:1fr;} }
.tcol{border:var(--hair) solid var(--n200);border-radius:var(--rd12);padding:var(--sp10);background:var(--white);}
.tcol.scroll{max-height:520px;overflow:auto;}
.l1{font-size:13px;font-weight:700;padding:var(--sp6);}
.l2{font-size:12px;color:var(--n500);padding:4px var(--sp6) 4px var(--sp16);}
.l3{font-size:12px;color:var(--n600);padding:5px var(--sp6) 5px var(--sp24);border-radius:var(--rd6);cursor:pointer;}
.l3:hover{background:var(--n50);}
.l3.on{background:var(--o50);color:var(--o700);font-weight:700;}

/* ---------- 12. 듀얼 리스트 ---------- */
.dual{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp12);align-items:center;}
@media (max-width:768px){ .dual{grid-template-columns:1fr;} }
.lbox{border:var(--hair) solid var(--n200);border-radius:var(--rd12);height:200px;display:flex;flex-direction:column;overflow:hidden;background:var(--white);}
.lbox .lh{font-size:11.5px;font-weight:600;padding:var(--sp8) var(--sp12);background:var(--n50);border-bottom:var(--hair) solid var(--n200);}
.lbox .lbody{flex:1;overflow:auto;}
.lbox .li{font-size:12.5px;padding:var(--sp8) var(--sp12);border-bottom:var(--hair) solid var(--n200);cursor:pointer;}
.lbox .li.sel{background:var(--o50);color:var(--o700);font-weight:600;}
.mvb{display:flex;flex-direction:column;gap:var(--sp6);}
@media (max-width:768px){ .mvb{flex-direction:row;justify-content:center;} }

/* ---------- 13. 로그인 카드 ---------- */
.lcard{width:340px;max-width:100%;border:var(--hair) solid var(--n200);border-radius:var(--rd16);padding:var(--sp24);display:flex;flex-direction:column;gap:var(--sp10);background:var(--white);box-shadow:0 2px 16px rgba(0,0,0,.04);}
.link{font-size:12px;color:var(--o600);text-decoration:underline;text-align:center;cursor:pointer;}
.stepblk{display:none;flex-direction:column;gap:var(--sp10);}
.stepblk.on{display:flex;}
.pwsteps{display:flex;align-items:center;gap:var(--sp6);justify-content:center;margin-bottom:var(--sp6);}
.pwstep{display:flex;align-items:center;gap:var(--sp4);font-size:10.5px;font-weight:700;color:var(--n400);}
.pwstep i{width:18px;height:18px;border-radius:var(--rdf);border:var(--hair) solid var(--n200);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;}
.pwstep.on{color:var(--o700);}
.pwstep.on i{background:var(--o500);border-color:var(--o500);color:var(--white);}
.pwstep.done i{background:var(--g100);border-color:var(--g500);color:var(--g800);}
.pwsep{width:16px;height:1px;background:var(--n200);}
.donec{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp10);}
.donec .ic{width:52px;height:52px;border-radius:var(--rdf);background:var(--g100);color:var(--g800);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;}

/* ---------- 14. 캐셔 콘솔 ---------- */
body.console-page .content{padding:var(--sp14);height:calc(100vh - var(--gnb-h));overflow:hidden;}
.cc{flex:1;min-height:0;display:grid;grid-template-columns:1fr 2fr;gap:var(--sp14);}
@media (max-width:1024px){ .cc{grid-template-columns:1fr;} body.console-page .content{height:auto;overflow:visible;} .vpanel{min-height:260px;} }

.vpanel{background:var(--n900);border-radius:var(--rd14);padding:var(--sp12);display:flex;flex-direction:column;gap:var(--sp10);min-height:0;}
.vcam{flex:1;min-height:0;background:var(--n800);border-radius:var(--rd12);display:flex;align-items:center;justify-content:center;position:relative;}
.vcam .ph{width:72px;height:72px;border-radius:var(--rdf);border:2px dashed var(--n600);}
.vlive{position:absolute;top:var(--sp10);left:var(--sp10);display:inline-flex;align-items:center;gap:var(--sp4);background:var(--o500);color:var(--white);font-size:10px;font-weight:700;padding:3px var(--sp10);border-radius:var(--rdf);}
.vlive i{width:5px;height:5px;border-radius:var(--rdf);background:var(--white);}
.opind{flex-shrink:0;border-radius:var(--rd8);background:var(--n800);color:var(--n200);font-size:12px;font-weight:600;padding:var(--sp10);display:flex;align-items:center;justify-content:center;gap:var(--sp8);}
.opind i{width:7px;height:7px;border-radius:var(--rdf);background:var(--o400);}
.opind.cust{background:var(--o50);color:var(--o700);}
.opind.cust i{background:var(--o500);}

.wiz{position:relative;border:var(--hair) solid var(--n200);border-radius:var(--rd14);background:var(--white);padding:var(--sp16);display:flex;flex-direction:column;gap:var(--sp12);min-height:0;overflow:hidden;}
.wstep{display:none;flex-direction:column;gap:var(--sp12);height:100%;min-height:0;position:relative;}
.wstep.on{display:flex;}
.wlabel{flex-shrink:0;text-align:center;font-family:var(--font-nav);font-size:11px;font-weight:600;color:var(--o600);letter-spacing:.08em;text-transform:uppercase;}
.wtitle{text-align:center;font-size:17px;font-weight:700;}
.wtitle.sm{font-size:14px;}
.wfoot{flex-shrink:0;margin-top:auto;display:flex;gap:var(--sp8);}
.wfoot .btn{flex:1;}

.bgstage{flex:1;border-radius:var(--rd12);background:repeating-linear-gradient(135deg,var(--n100),var(--n100) 10px,var(--n50) 10px,var(--n50) 20px);display:flex;align-items:center;justify-content:center;position:relative;min-height:220px;}
.bgtag{position:absolute;top:var(--sp12);left:var(--sp12);font-size:11.5px;color:var(--n600);background:var(--white);border:var(--hair) solid var(--n200);padding:4px var(--sp10);border-radius:var(--rdf);}
.startbtn{background:var(--o500);color:var(--white);border:none;border-radius:var(--rd14);padding:var(--sp16) 56px;font-size:17px;font-weight:700;cursor:pointer;}

/* STEP 1 */
.sbox{border:var(--hair) solid var(--n200);border-radius:var(--rd12);padding:var(--sp12);display:flex;flex-direction:column;gap:var(--sp10);}
.ogrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp10);}
.oopt{border:var(--hair) solid var(--n200);border-radius:var(--rd12);background:var(--white);padding:var(--sp12);text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:2px;}
.oopt b{font-size:16px;line-height:22px;}
.oopt span{font-size:11px;line-height:15px;color:var(--n500);}
.oopt.sel{background:var(--o500);border-color:var(--o500);color:var(--white);}
.oopt.sel span{color:var(--o100);}
.paxoff{display:none;font-size:11.5px;line-height:17px;color:var(--o700);background:var(--o50);border:var(--hair) solid var(--o200);border-radius:var(--rd8);padding:var(--sp8) var(--sp12);text-align:center;}
.sbox.off .paxoff{display:block;}
.sbox.off .pgrid{pointer-events:none;filter:grayscale(1);opacity:.4;}
.sbox.off .wtitle{color:var(--n400);}
.pgrid{display:flex;gap:var(--sp8);justify-content:center;flex-wrap:wrap;}
.popt{width:58px;height:58px;border-radius:var(--rd12);border:var(--hair) solid var(--n200);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;cursor:pointer;}
.popt.sel{background:var(--o500);border-color:var(--o500);color:var(--white);}

/* STEP 2 */
.tgrid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:86px;gap:var(--sp10);align-content:start;padding-right:2px;}
@media (max-width:1400px){ .tgrid{grid-template-columns:repeat(2,1fr);} }
.tcard{border:var(--hair) solid var(--n200);border-radius:var(--rd12);padding:var(--sp10);background:var(--white);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;}
.tcard .r1{display:flex;align-items:center;justify-content:space-between;}
.tcard .r1 b{font-size:13.5px;}
.tcard .cap{font-size:11px;color:var(--n500);margin-top:2px;}
.tcard .ord{font-size:10.5px;color:var(--n500);border-top:var(--hair) dashed var(--n200);margin-top:auto;padding-top:var(--sp4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tcard.sel{border-color:var(--o500);background:var(--o50);}
.tcard.occ{background:var(--n50);color:var(--n400);cursor:not-allowed;}

/* STEP 3 — 카테고리 / 메뉴 그리드 */
.wstep[data-step="3"]{gap:var(--sp8);}
.cat-tabs{height:32px;flex-shrink:0;display:flex;align-items:center;gap:var(--sp6);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
.cat-tabs::-webkit-scrollbar{height:4px;}
.cat-tabs::-webkit-scrollbar-thumb{background:var(--n200);border-radius:var(--rdf);}
.cat{font-size:11.5px;line-height:16px;font-weight:600;padding:6px var(--sp12);border-radius:var(--rdf);border:var(--hair) solid var(--n200);color:var(--n600);background:var(--white);white-space:nowrap;display:flex;align-items:center;flex-shrink:0;cursor:pointer;}
.cat.on{background:var(--n900);border-color:var(--n900);color:var(--white);}

.mviewport{flex:1 1 auto;min-height:220px;overflow:hidden;position:relative;cursor:grab;touch-action:pan-y;}
.mviewport.drag{cursor:grabbing;}
.mtrack{display:flex;height:100%;}
.mtrack.anim{transition:transform .32s cubic-bezier(.22,.61,.36,1);}
.mpage{flex:0 0 100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(100px,1fr);gap:var(--sp10);overflow-y:auto;overflow-x:hidden;align-content:stretch;padding-right:var(--sp6);}
.mc{position:relative;border:var(--hair) solid var(--n200);border-radius:var(--rd12);background:var(--white);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;min-height:0;}
.mc:hover{border-color:var(--o400);}
.mc .th{flex:1;min-height:0;width:100%;object-fit:cover;display:block;background:var(--n100);}
.mc .ph{flex:1;min-height:0;background:var(--n100);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--n400);}
.mc .bd{flex-shrink:0;padding:5px var(--sp8) 6px;border-top:var(--hair) solid var(--n200);display:flex;flex-direction:column;gap:2px;}
.mc .nm{font-size:12px;line-height:15px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mc .meta{display:flex;align-items:center;gap:var(--sp4);min-height:16px;}
.mc .pr{font-size:12.5px;line-height:16px;font-weight:700;color:var(--o600);margin-left:auto;}
.mc.best{border-color:var(--o200);}
.mb{display:inline-block;font-size:8.5px;line-height:14px;font-weight:700;letter-spacing:.06em;color:var(--white);background:var(--o500);border-radius:var(--rdf);padding:0 var(--sp6);}
.mchk{position:absolute;top:6px;right:6px;z-index:2;width:19px;height:19px;border-radius:var(--rd4);border:1.5px solid var(--white);background:rgba(61,61,61,.42);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.mchk:after{content:"";display:block;width:8px;height:4px;border:1.5px solid var(--white);border-top:none;border-right:none;transform:rotate(-45deg) translateY(-1px);opacity:0;}
.mc.chk .mchk{background:var(--o500);border-color:var(--o500);}
.mc.chk .mchk:after{opacity:1;}
.mc.chk{border-color:var(--o500);}

.cpager{flex-shrink:0;height:20px;display:flex;align-items:center;justify-content:center;gap:var(--sp6);}
.cpager i{width:6px;height:6px;border-radius:var(--rdf);background:var(--n300);cursor:pointer;transition:width .25s ease;}
.cpager i.on{background:var(--o500);width:16px;}
.cpager .pg{font-size:9.5px;font-weight:700;color:var(--n500);margin-left:var(--sp8);}

/* 주문서(카트) */
.cartbox{flex-shrink:0;border:var(--hair) solid var(--n200);border-radius:var(--rd12);background:var(--n50);padding:var(--sp6) var(--sp10) var(--sp8);display:flex;flex-direction:column;gap:4px;}
.carth{display:flex;align-items:center;font-size:11.5px;font-weight:700;color:var(--n600);}
.carth b{color:var(--o700);margin:0 2px;}
.carth .sum{margin-left:auto;color:var(--o700);}
.cartlist{max-height:96px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:4px;padding-right:2px;}
.carthead,.cartrow{display:grid;grid-template-columns:1fr 44px 76px 24px;align-items:center;gap:var(--sp8);padding:4px var(--sp10);font-size:11.5px;line-height:16px;}
.carthead{color:var(--n400);font-size:10px;font-weight:700;letter-spacing:.04em;border:var(--hair) solid transparent;padding-top:0;padding-bottom:0;}
.cartrow{background:var(--white);border:var(--hair) solid var(--n200);border-radius:var(--rd6);}
.carthead>span,.cartrow>span{text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cartrow .cn{font-weight:600;}
.cartrow .cq{color:var(--n500);font-variant-numeric:tabular-nums;}
.cartrow .cp{font-weight:700;color:var(--o600);font-variant-numeric:tabular-nums;}
.carthead .hx,.cartrow .cx{text-align:center;}
.cartrow .cx{cursor:pointer;color:var(--n400);font-size:15px;line-height:1;}
.cartrow .cx:hover{color:var(--r500);}
.cartempty{font-size:11px;color:var(--n400);text-align:center;padding:var(--sp8);}

/* 메뉴 상세 오버레이 */
.ccov{position:absolute;inset:0;background:rgba(61,61,61,.5);display:flex;z-index:6;border-radius:var(--rd12);}
.ccov.hidden{display:none;}
.ccsheet{background:var(--white);border:var(--hair) solid var(--n200);border-radius:var(--rd12);width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18);}
.ccs-h{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:var(--sp12) var(--sp14) 0;}
.ccs-h .tt{font-size:16px;line-height:22px;font-weight:700;}
.ccs-b{flex:1;min-height:0;padding:var(--sp10) var(--sp14);display:flex;flex-direction:column;gap:var(--sp8);overflow:auto;}
.ccs-media{position:relative;width:100%;flex:1;min-height:140px;border-radius:var(--rd12);overflow:hidden;background:var(--n100);}
.ccs-media .d-item{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
.ccs-media .d-item.on{opacity:1;}
.ccs-media img{width:100%;height:100%;object-fit:cover;display:block;}
.ccs-dots{position:absolute;left:0;right:0;bottom:var(--sp8);display:flex;gap:var(--sp4);justify-content:center;z-index:2;}
.ccs-dots i{width:7px;height:7px;border-radius:var(--rdf);background:rgba(255,255,255,.55);cursor:pointer;transition:width .3s ease;}
.ccs-dots i.on{background:var(--white);width:18px;}
.ccs-count{position:absolute;top:var(--sp10);right:var(--sp10);z-index:2;font-size:10px;font-weight:700;color:var(--white);background:rgba(0,0,0,.45);padding:2px var(--sp8);border-radius:var(--rdf);}
.ccs-pr{font-size:15px;font-weight:700;color:var(--o600);}
.ccs-de{font-size:12px;line-height:17px;color:var(--n500);}
.ccs-chips{display:flex;gap:var(--sp4);flex-wrap:wrap;}
.ccs-chips span{font-size:10px;line-height:16px;border:var(--hair) solid var(--n200);border-radius:var(--rdf);padding:1px var(--sp8);color:var(--n600);}
.ccs-f{flex-shrink:0;border-top:var(--hair) solid var(--n200);padding:var(--sp10) var(--sp14);display:flex;align-items:center;gap:var(--sp10);}
.ccs-f .btn{flex:1;}
.ccs-f .btn.gh{flex:0 0 84px;}

.qty{display:flex;align-items:center;gap:var(--sp12);border:var(--hair) solid var(--n200);border-radius:var(--rd8);padding:var(--sp6) var(--sp12);}
.qty button{border:none;background:none;font-size:17px;font-weight:700;color:var(--o600);cursor:pointer;line-height:1;padding:0;}
.qty b{font-size:14px;min-width:20px;text-align:center;}
.qty.mini{padding:2px var(--sp10);gap:var(--sp10);flex-shrink:0;}
.qty.mini b{font-size:12px;min-width:16px;}
.qty.mini button{font-size:15px;}

/* 추천 시트 */
.recov{position:absolute;inset:0;background:rgba(61,61,61,.5);display:flex;align-items:flex-end;z-index:7;border-radius:var(--rd12);overflow:hidden;}
.recov.hidden{display:none;}
.recsheet{width:100%;max-height:90%;background:var(--white);border-radius:var(--rd16) var(--rd16) 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -10px 30px rgba(0,0,0,.20);transform:translateY(100%);transition:transform .34s cubic-bezier(.22,.61,.36,1);}
.recov.up .recsheet{transform:translateY(0);}
.recs-h{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:var(--sp12) var(--sp14) var(--sp8);}
.eyebrow{font-family:var(--font-nav);font-size:10px;font-weight:600;color:var(--o600);letter-spacing:.08em;text-transform:uppercase;}
.recs-h .x{font-size:18px;color:var(--n400);cursor:pointer;line-height:1;}
.recs-b{flex:1;min-height:0;overflow:auto;padding:0 var(--sp14) var(--sp10);display:flex;flex-direction:column;gap:var(--sp8);}
.recrow{display:flex;align-items:center;gap:var(--sp10);border:var(--hair) solid var(--n200);border-radius:var(--rd12);padding:var(--sp8);background:var(--white);}
.recrow img{width:52px;height:52px;border-radius:var(--rd8);object-fit:cover;flex-shrink:0;display:block;background:var(--n100);}
.recrow .rph{width:52px;height:52px;border-radius:var(--rd8);flex-shrink:0;background:var(--n100);}
.recrow .rb{flex:1;min-width:0;}
.recrow .nm{font-size:12.5px;line-height:16px;font-weight:700;}
.recrow .rs{font-size:10px;line-height:14px;color:var(--o600);margin-top:1px;}
.recrow .de{font-size:10px;line-height:14px;color:var(--n500);margin-top:1px;}
.recrow .rp{font-size:13px;font-weight:700;color:var(--o600);flex-shrink:0;}
.recrow.off{opacity:.45;}
.recrow.off .rp{color:var(--n400);}
.btn.pri.mute{background:var(--n200);border-color:var(--n200);color:var(--n600);}
.recs-f{flex-shrink:0;padding:var(--sp10) var(--sp14);border-top:var(--hair) solid var(--n200);display:flex;gap:var(--sp8);}
.recs-f .btn{flex:1;}

.slipnote{flex-shrink:0;font-size:12px;line-height:17px;color:var(--n500);text-align:center;border:var(--hair) dashed var(--n200);border-radius:var(--rd8);padding:var(--sp8);}
.slipnote b{color:var(--n900);font-size:14px;}
.dbadge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--white);background:var(--o500);border-radius:var(--rdf);padding:1px var(--sp8);margin-left:var(--sp6);vertical-align:middle;}
.metaline{display:flex;gap:var(--sp16);justify-content:center;font-size:12px;color:var(--n500);flex-wrap:wrap;}
.metaline b{color:var(--n900);}

/* ---------- 15. 유틸 ---------- */
.row{display:flex;gap:var(--sp8);align-items:center;flex-wrap:wrap;}
.mr-auto{margin-right:auto;}
.panel{background:var(--white);border:var(--hair) solid var(--n200);border-radius:var(--rd12);padding:var(--sp16);display:flex;flex-direction:column;gap:var(--sp12);}


/* 안내 블록 안의 목록 */
.hint ul{margin:6px 0 0;padding-left:16px;}
.hint li{margin-bottom:4px;line-height:17px;}
.hint li:last-child{margin-bottom:0;}
.sectitle{font-size:13px;font-weight:700;color:var(--n700);}

/* ---------- 이미지 폴백 ----------
   assets/images/ 에 파일이 아직 없으면 회색 자리만 남깁니다 */
img.img-missing{opacity:0;}

/* ============================================================
   캐셔 콘솔 — 키오스크 미러 (고객 화면 실시간 미리보기)
   캐셔가 조작하는 내용이 그대로 반영됩니다.
   ============================================================ */
.cc.with-mirror{grid-template-columns:230px minmax(0,1fr) 250px;}
@media (max-width:1400px){ .cc.with-mirror{grid-template-columns:190px minmax(0,1fr) 210px;} }
@media (max-width:1100px){ .cc.with-mirror{grid-template-columns:1fr;} .kmwrap{display:none;} }

.kmwrap{height:100%;min-height:0;display:flex;flex-direction:column;gap:var(--sp6);}
.kmwrap .kmlb{font-family:var(--font-nav);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);text-align:center;flex-shrink:0;}
.km{
  width:100%;height:auto;min-height:0;aspect-ratio:9/16;max-height:100%;margin:0 auto;
  background:var(--n950);border-radius:var(--rd12);overflow:hidden;position:relative;
  display:flex;flex-direction:column;box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.km-top{height:6.25%;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 6px;background:var(--white);border-bottom:var(--hair) solid var(--n200);font-size:7px;font-weight:700;color:var(--n900);}
.km-top .dot{width:4px;height:4px;border-radius:var(--rdf);background:var(--g500);display:inline-block;margin-right:3px;}
.km-cam{height:37.5%;flex-shrink:0;background:var(--n100);display:flex;align-items:center;justify-content:center;position:relative;}
.km-cam .av{width:26px;height:26px;border-radius:var(--rdf);border:1.5px dashed var(--n300);}
.km-cam .live{position:absolute;top:5px;left:5px;font-size:6px;font-weight:700;color:var(--white);background:var(--o500);padding:1px 5px;border-radius:var(--rdf);}
.km-body{height:56.25%;flex-shrink:0;position:relative;overflow:hidden;background:var(--white);}

/* 대기 화면 — 매장 메인 사진 */
.km-idle{position:absolute;inset:0;background:var(--n900) center/cover no-repeat;}
.km-idle:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.65));}
.km-idle .oh{position:absolute;left:0;right:0;top:24%;z-index:2;background:var(--o500);color:var(--white);text-align:center;padding:6px 4px;}
.km-idle .oh b{display:block;font-size:13px;line-height:15px;font-weight:800;letter-spacing:-.01em;}
.km-idle .oh span{display:block;font-size:5.5px;line-height:8px;opacity:.9;margin-top:2px;}
.km-idle .cap{position:absolute;left:8px;right:8px;bottom:10px;z-index:2;color:var(--white);}
.km-idle .cap .n{font-size:9px;font-weight:700;line-height:11px;}
.km-idle .cap .p{font-size:8px;font-weight:700;color:var(--o400);margin-top:2px;}

/* 메뉴 갤러리 */
.km-menu{position:absolute;inset:0;display:flex;flex-direction:column;padding:5px;gap:4px;}
.km-cats{height:13px;flex-shrink:0;display:flex;gap:2px;justify-content:center;overflow:hidden;}
.km-cats span{font-size:5.5px;line-height:9px;font-weight:700;padding:2px 5px;border-radius:var(--rdf);border:var(--hair) solid var(--n200);color:var(--n600);background:var(--white);white-space:nowrap;}
.km-cats span.on{background:var(--n900);border-color:var(--n900);color:var(--white);}
.km-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;}
.km-card{border:var(--hair) solid var(--n200);border-radius:5px;overflow:hidden;background:var(--white);display:flex;flex-direction:column;min-height:0;}
.km-card img{flex:1;min-height:0;width:100%;object-fit:cover;display:block;background:var(--n100);}
.km-card .b{flex-shrink:0;padding:2px 3px;border-top:var(--hair) solid var(--n200);}
.km-card .n{font-size:5px;line-height:7px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.km-card .p{font-size:5.5px;line-height:7px;font-weight:700;color:var(--o600);text-align:right;}
.km-pager{height:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:3px;}
.km-pager i{width:3px;height:3px;border-radius:var(--rdf);background:var(--n300);}
.km-pager i.on{background:var(--o500);width:9px;}

/* 하단 시트 — 메뉴 상세 · 추천 · 주문서 */
.km-sheet{position:absolute;inset:0;background:var(--white);display:flex;flex-direction:column;z-index:6;}
.km-sheet .h{flex-shrink:0;padding:5px 6px 3px;font-size:6px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--o600);}
.km-sheet .b{flex:1;min-height:0;overflow:auto;padding:0 6px 5px;display:flex;flex-direction:column;gap:4px;}
.km-sheet .f{flex-shrink:0;padding:4px 6px;border-top:var(--hair) solid var(--n200);display:flex;gap:4px;}
.km-sheet .f b{flex:1;text-align:center;background:var(--o500);color:var(--white);border-radius:5px;padding:4px;font-size:6px;font-weight:700;}
.km-hero{width:100%;height:46%;object-fit:cover;border-radius:6px;background:var(--n100);flex-shrink:0;}
.km-sheet .nm{font-size:9px;font-weight:700;line-height:11px;}
.km-sheet .pr{font-size:7.5px;font-weight:700;color:var(--o600);}
.km-sheet .de{font-size:5.5px;line-height:8px;color:var(--n500);}
.km-chips{display:flex;gap:2px;flex-wrap:wrap;}
.km-chips span{font-size:5px;line-height:8px;border:var(--hair) solid var(--n200);border-radius:var(--rdf);padding:0 4px;color:var(--n600);}
.km-chips span.tag{background:var(--o50);border-color:var(--o200);color:var(--o700);font-weight:700;}
.km-row{display:flex;align-items:center;gap:4px;border:var(--hair) solid var(--n200);border-radius:5px;padding:3px;}
.km-row img{width:20px;height:20px;border-radius:4px;object-fit:cover;background:var(--n100);flex-shrink:0;}
.km-row .t{flex:1;min-width:0;}
.km-row .t1{font-size:6px;font-weight:700;line-height:8px;}
.km-row .t2{font-size:5px;line-height:7px;color:var(--n500);}
.km-row .t3{font-size:6.5px;font-weight:700;color:var(--o600);flex-shrink:0;}
.km-sum{display:flex;align-items:center;justify-content:space-between;border-top:1.5px solid var(--n900);padding-top:4px;font-size:7px;font-weight:700;}
.km-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:8px;}
.km-done .ic{width:30px;height:30px;border-radius:8px;background:var(--o500);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.km-done .t{font-size:8px;font-weight:700;}
.km-done .s{font-size:5.5px;line-height:8px;color:var(--n500);}

/* 조작 잠금 오버레이 — 캐셔 대리 조작 중 고객 터치를 막는 투명 막 */
.km-lock{
  position:absolute;left:0;right:0;top:43.75%;bottom:0;z-index:9;
  background:rgba(254,78,16,.07);
  border-top:1.5px dashed var(--o400);
  display:flex;align-items:flex-end;justify-content:center;
}
.km-lock span{margin-bottom:4px;font-size:5.5px;font-weight:700;color:var(--white);background:rgba(198,34,8,.85);padding:1px 6px;border-radius:var(--rdf);}
.km-lock.off{display:none;}

/* 조작 주체 토글 */
.opind{cursor:pointer;user-select:none;transition:background .18s ease,color .18s ease;}
.opind.cashier{background:var(--o500);color:var(--white);}
.opind.cashier i{background:var(--white);}
.opind .sub{display:block;font-size:9px;font-weight:600;opacity:.8;margin-top:1px;}

/* ---------- 캐셔 콘솔 보조 ---------- */
.hidden{display:none !important;}
.paxmore{display:flex;align-items:center;gap:var(--sp10);flex-wrap:wrap;border-top:var(--hair) dashed var(--n200);padding-top:var(--sp10);}
.paxmore label{font-size:11.5px;font-weight:600;color:var(--n500);}
.paxmore .inp{width:96px;text-align:center;font-size:15px;font-weight:700;padding:var(--sp6) var(--sp8);}
.tcard.pickable:hover{border-color:var(--o400);}
.tcard.occ.pickable{cursor:pointer;color:var(--n600);}
.tcard.occ.pickable .cap,.tcard.occ.pickable .ord{color:var(--n500);}
.cartbox .carth{gap:var(--sp8);}
.cartbox .carth .btn{flex-shrink:0;}
.recrow .btn.sm{flex-shrink:0;}

/* GNB 매장 선택 — 권한 매장만 노출 */
select.sel{appearance:none;cursor:pointer;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--n400) 50%),linear-gradient(135deg,var(--n400) 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;background-size:5px 5px;background-repeat:no-repeat;}
select.sel:focus{outline:none;border-color:var(--o400);}

/* 테이블 잠금 — 다른 캐셔가 주문 접수 중 */
.tcard.locked{background:var(--y100);border-color:#f5e49a;}
.tcard.locked .ord{color:var(--y800);font-weight:600;}
.tcard.locked:not(.pickable){cursor:not-allowed;opacity:.85;}
.tcard.mine{background:var(--o50);border-color:var(--o400);}
.tcard.mine .ord{color:var(--o700);}

/* ============================================================
   플로팅 패널 — 요청 사항 (STEP 3·4 에서 상시 노출, 드래그 이동)
   ============================================================ */
.floatpanel{
  position:fixed;z-index:60;width:300px;
  background:var(--white);border:var(--hair) solid var(--n200);border-radius:var(--rd14);
  box-shadow:0 16px 44px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.08);
  display:flex;flex-direction:column;overflow:hidden;
}
.floatpanel.dragging{box-shadow:0 22px 60px rgba(0,0,0,.28);opacity:.96;}
.fp-h{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp8);
  padding:var(--sp10) var(--sp12);background:var(--o500);color:var(--white);
  font-size:12.5px;font-weight:700;cursor:grab;user-select:none;touch-action:none;
}
.floatpanel.dragging .fp-h{cursor:grabbing;}
.fp-h:before{content:"⠿";font-size:13px;opacity:.7;letter-spacing:-2px;margin-right:2px;}
.fp-hint{font-size:10.5px;font-weight:600;opacity:.85;}
.fp-hint.bad{color:var(--r500);opacity:1;}
.fp-b{padding:var(--sp10) var(--sp12) var(--sp12);display:flex;flex-direction:column;gap:var(--sp8);}
.fp-b textarea{
  width:100%;min-height:92px;resize:vertical;font-family:inherit;font-size:13px;line-height:19px;
  border:var(--hair) solid var(--n200);border-radius:var(--rd8);padding:var(--sp8) var(--sp10);
  color:var(--n800);background:var(--white);
}
.fp-b textarea:focus{outline:none;border-color:var(--o400);}
.fp-f{display:flex;align-items:center;gap:var(--sp8);}
.fp-f .hint{margin-left:auto;text-align:right;}

/* 키오스크 미러 — 별도 창의 주문 요청 사항 줄 */
.km-req{font-size:5.5px;line-height:8px;color:var(--o700);background:var(--o50);border:var(--hair) solid var(--o200);border-radius:4px;padding:3px 5px;}

/* ===== 서버 이식(2026-10-14) 추가분 =====================================
   퍼블리싱 원본에는 없던 것만 아래에 모읍니다. 원본 규칙을 고치지 않아야
   퍼블리싱 쪽에서 CSS 를 다시 받아도 충돌 없이 덮어쓸 수 있습니다. */

/* 폼 오류 안내 — 로그인 실패·연속 실패 잠금 문구를 그대로 띄웁니다 */
.err{
  margin:0 0 12px;padding:10px 12px;border-radius:8px;
  background:#fdecec;border:1px solid #f5bcbc;color:#a11b1b;
  font-size:13px;line-height:1.5;
}

/* 서버 연결 끊김 띠 (ADX-01) — 소켓이 끊기면 저장·전송을 막습니다 */
.ws-off{
  position:fixed;left:0;right:0;top:0;z-index:9999;
  padding:8px 12px;text-align:center;
  background:#a11b1b;color:#fff;font-size:13px;font-weight:600;
}
.ws-off.hidden{display:none;}

/* ---------- 20. 화면 안내 (? 버튼 + 다이얼로그) ----------
   2026-10-15 — 화면 제목 밑의 설명(.csub)과 화면 아래쪽 흐름 안내를
   본문에서 빼고 여기로 모았습니다. 매일 보는 사람에게는 늘 같은 문장이
   자리만 차지하고, 처음 보는 사람에게는 필요합니다. 그래서 **치우되
   한 번의 클릭 거리에** 둡니다.
   입력칸 바로 밑 도움말(.field .hint)은 옮기지 않습니다 — 그건 적는
   순간에 필요한 정보라 다이얼로그로 보내면 매번 열어봐야 합니다. */
.ctitle-row{display:flex;align-items:center;gap:var(--sp6);}
.helpbtn{
  flex:0 0 auto;width:19px;height:19px;border-radius:var(--rdf);
  border:var(--hair) solid var(--n200);background:var(--white);
  color:var(--n400);font-family:var(--font-ui);font-size:11.5px;font-weight:700;
  line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.helpbtn:hover{border-color:var(--o400);color:var(--o500);}
.helpbtn:focus-visible{outline:2px solid var(--o400);outline-offset:1px;}

.helpdlg{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.35);
         display:flex;align-items:center;justify-content:center;padding:var(--sp16);}
.helpdlg.hidden{display:none;}
.helpdlg-card{
  width:560px;max-width:100%;max-height:80vh;display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--rd12);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.helpdlg-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp12);
           padding:var(--sp16) var(--sp16) var(--sp12);border-bottom:var(--hair) solid var(--n100);}
.helpdlg-h h3{margin:0;font-size:15px;line-height:20px;font-weight:700;}
.helpdlg-x{border:0;background:none;cursor:pointer;color:var(--n400);
           font-size:18px;line-height:1;padding:2px 4px;}
.helpdlg-x:hover{color:var(--n700);}
.helpdlg-b{padding:var(--sp16);overflow:auto;font-size:13px;line-height:1.7;color:var(--n700);}
.helpdlg-b > :first-child{margin-top:0;}
.helpdlg-b > :last-child{margin-bottom:0;}
.helpdlg-b p{margin:0 0 var(--sp12);}
.helpdlg-b h4{margin:var(--sp16) 0 var(--sp6);font-size:12.5px;font-weight:700;color:var(--n900);}
.helpdlg-b ul{margin:0 0 var(--sp12);padding-left:18px;}
.helpdlg-b li{margin-bottom:var(--sp4);}
.helpdlg-b li:last-child{margin-bottom:0;}
.helpdlg-b b{color:var(--n900);}
.helpdlg-b code{font-size:12px;background:var(--n50);border:var(--hair) solid var(--n100);
                border-radius:var(--rd4);padding:1px 4px;}
.helpdlg-b .warn{border:var(--hair) solid var(--o200);background:var(--o50);
                 border-radius:var(--rd8);padding:var(--sp10) var(--sp12);margin:0 0 var(--sp12);}
.helpdlg-f{padding:var(--sp12) var(--sp16);border-top:var(--hair) solid var(--n100);
           display:flex;justify-content:flex-end;}

/* ---------- 21. 빈 화면 (등록된 정보가 없을 때) ----------
   2026-10-15 — 전에는 네 가지 상황이 전부 같은 회색 한 줄이었습니다.
     · 아직 아무것도 등록 안 함   · 필터에 걸려 결과가 없음
     · 불러오지 못함              · 불러오는 중
   사람이 할 일은 넷 다 다른데 화면이 같으면, 처음 쓰는 사람은 고장인 줄
   알고 멈추고 익숙한 사람은 필터를 의심하지 못합니다. 그래서 상황을 가르고
   **다음에 누를 것**을 함께 둡니다. */
.sc-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp8);padding:48px var(--sp16);text-align:center;color:var(--n500);
  /* 카드 그리드(.cards) 안에서는 **칸 하나가 아니라 전체 폭**을 씁니다.
     안 그러면 안내가 첫 칸에 치우쳐 서서 왼쪽으로 쏠려 보입니다. */
  grid-column:1/-1;
}
.sc-empty .ic{
  width:44px;height:44px;border-radius:var(--rdf);
  display:flex;align-items:center;justify-content:center;
  /* 흰 배경 위에서 --n50 만으로는 원이 보이지 않습니다. 테두리를 함께 둡니다. */
  background:var(--n50);border:var(--hair) solid var(--n100);
  color:var(--n400);margin-bottom:var(--sp4);
}
.sc-empty .ic svg{width:22px;height:22px;display:block;}
.sc-empty .t{font-size:13.5px;font-weight:600;color:var(--n800);line-height:19px;}
.sc-empty .d{font-size:12px;line-height:18px;color:var(--n500);max-width:380px;}
.sc-empty .btn{margin-top:var(--sp6);}

/* 불러오지 못했을 때만 색을 씁니다 — 나머지는 정상 상태라 경고가 아닙니다 */
.sc-empty.is-error .ic{background:var(--r100);border-color:var(--r100);color:var(--r500);}
.sc-empty.is-error .t{color:var(--r800);}

/* 표 안에서는 위아래 여백을 줄입니다 (행 하나 자리에 들어갑니다) */
td > .sc-empty{padding:36px var(--sp16);}

/* 불러오는 중 — 아이콘 대신 자리표시 줄. 「없음」과 **같은 모양이면 안
   됩니다**: 아직 오는 중인데 없다고 읽히면 사람이 괜히 다시 누릅니다. */
.sc-skel{
  padding:var(--sp16) 0;display:flex;flex-direction:column;gap:var(--sp10);
  grid-column:1/-1;          /* 카드 그리드에서도 전체 폭 (.sc-empty 와 같은 이유) */
}
.sc-skel i{
  display:block;height:11px;border-radius:var(--rd4);
  /* 바탕이 --n100, 지나가는 빛이 --n50 입니다. 반대로 하면 바탕이 흰색에
     가까워(#fafafa) 흰 배경 위에서 줄이 거의 보이지 않습니다. */
  background:linear-gradient(90deg,var(--n100) 25%,var(--n50) 37%,var(--n100) 63%);
  background-size:400% 100%;animation:sc-shimmer 1.3s ease-in-out infinite;
}
/* 줄 길이를 조금씩 다르게 — 길이가 같으면 표가 아니라 선 뭉치로 보입니다.
   width 대신 margin-right 를 씁니다: 어떤 컨테이너(표 칸 · 카드 그리드)에
   들어가도 **왼쪽에서 시작**합니다. */
.sc-skel i:nth-child(2){margin-right:14%;}
.sc-skel i:nth-child(3){margin-right:6%;}
.sc-skel i:nth-child(4){margin-right:22%;}
@keyframes sc-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
/* 움직임을 줄이도록 설정한 사람에게는 깜빡이지 않습니다 */
@media (prefers-reduced-motion:reduce){ .sc-skel i{animation:none;} }

/* 담당 매장이 없을 때 GNB 의 매장 셀렉트 자리 (2026-10-15).
   빈 셀렉트를 두면 고장처럼 보여서, 무엇이 빠졌는지 적어둡니다. */
.gnb .nostore{
  font-size:12px;line-height:16px;color:var(--o200);
  border:var(--hair) dashed rgba(255,255,255,.35);border-radius:var(--rd6);
  padding:var(--sp4) var(--sp10);white-space:nowrap;cursor:help;
}