/* 점주 앱 — 주문 화면(다크) + 편집 오버레이(라이트) */
#app{min-height:100%}
.screen{display:flex;min-height:100vh;background:var(--g900);color:#fff}
.aside{width:236px;flex:none;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.aside .logo{padding:24px 20px 12px;font-size:28px;font-weight:800;letter-spacing:-.03em}
.aside .store{margin:0 20px 16px;padding:8px 14px;border-radius:8px;background:var(--red-d);font-size:16px;font-weight:700;line-height:20px}
.cats{flex:1;overflow:auto;display:flex;flex-direction:column;gap:4px}
.cat{padding:14px 12px 14px 20px;font-size:22px;line-height:28px;letter-spacing:-.03em;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;text-align:left;font-weight:400}
.cat.on{margin-left:20px;background:var(--g900);border-radius:20px 0 0 20px;font-weight:700}
.cat .tools{display:none;gap:2px;flex:none} .cat.on .tools{display:flex}
.cat .tool{width:28px;height:28px;border-radius:6px} .cat .tool .icon{width:16px;height:16px}
.cat.on>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px}
.tool{width:36px;height:36px;border-radius:8px;border:0;background:var(--g800);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tool:hover{background:var(--g700)}
.aside .dashed{margin:8px 20px;height:52px;font-size:18px}
.aside .foot{height:66px;background:var(--g800);display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:700}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{padding:20px 20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tabs{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.tab{background:transparent;border:0;color:#fff;font-size:22px;font-weight:700;letter-spacing:-.03em;padding:0 0 9px;border-bottom:3px solid transparent;cursor:pointer;display:flex;align-items:center;gap:6px}
.tab.on{color:var(--red);border-bottom-color:var(--red)}
.tab .tool{width:30px;height:30px;margin-left:2px}
.tabs .dashed{height:40px;padding:0 12px;font-size:16px;margin-bottom:6px;border-radius:8px}
.crumb{display:flex;align-items:center;gap:8px;font-size:22px;color:#fff;margin-top:10px;flex-wrap:wrap}
.crumb .meta{font-size:14px;color:var(--g400);margin-left:12px}
.vbadge{min-width:140px;height:56px;border-radius:12px;background:var(--red);color:#fff;padding:6px 12px;display:flex;flex-direction:column;justify-content:center}
.vbadge small{font-size:12px;line-height:14px;font-weight:500} .vbadge b{font-size:24px;line-height:28px}
.grid{padding:24px 20px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:32px 16px;flex:1;align-content:start}
.card{display:flex;flex-direction:column;gap:8px;cursor:pointer;border:0;background:transparent;color:#fff;text-align:left;padding:0}
.card .img{height:204px;border-radius:16px;position:relative;overflow:hidden;background:var(--g800)}
.card .img img{width:100%;height:100%;object-fit:cover;display:block}
.card.sel .img{outline:3px solid var(--red)}
.card .name{font-size:22px;line-height:28px;letter-spacing:-.03em;margin-top:4px;display:flex;justify-content:space-between;gap:8px}
.card .price{font-size:28px;line-height:32px;font-weight:700;text-align:right;letter-spacing:-.02em} .card .price small{font-size:22px}
.tagtr{position:absolute;top:12px;right:12px;padding:6px 12px;border-radius:8px;background:rgba(24,24,24,.85);color:#fff;font-size:18px;font-weight:700}
.tagbl{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:8px;background:rgba(24,24,24,.85);color:#fff;font-size:16px;font-weight:700}
.soldout{position:absolute;inset:0;background:rgba(24,24,24,.72);display:flex;align-items:center;justify-content:center}
.hidden-p{opacity:.45}
.card.add{justify-content:flex-start} .card.add .img{border:2px dashed var(--g600);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:22px;font-weight:700}
.plus{width:56px;height:56px;border-radius:999px;background:var(--red);display:flex;align-items:center;justify-content:center;color:#fff}
.footer{position:sticky;bottom:0;height:66px;display:flex;align-items:stretch;gap:10px;padding:0 20px 0 0;background:var(--g900);flex:none;overflow-x:auto}
.footer .btn{height:auto;border-radius:10px}
.footer .sp{flex:1}
.empty{padding:60px 20px;color:var(--g400);font-size:20px;text-align:center}
/* PIN */
.pin{min-height:100vh;background:#fff;color:var(--g900);display:flex;flex-direction:column;align-items:center;padding:64px 24px 40px;gap:24px}
.pin .wrap{width:min(390px,100%);display:flex;flex-direction:column;gap:24px}
.pin .logo{font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--red);text-align:center}
.boxes{display:flex;gap:8px} .boxes div{flex:1;height:64px;border-radius:12px;border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700} .boxes div.on{border:2px solid var(--red)}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .keys button{height:60px;border-radius:12px;background:var(--g50);border:0;font-size:24px;font-weight:700;cursor:pointer} .keys button.ghost{background:transparent;font-size:16px;color:var(--g600)}
.err{color:var(--err);font-weight:700;text-align:center}
/* 편집 오버레이 (옵션 선택 레이아웃) */
.sheet{position:fixed;inset:0;z-index:40;background:#fff;color:var(--g900);display:flex;flex-direction:column}
.sheet .body{display:flex;flex:1;min-height:0}
.sheet .aside{height:auto;position:static;padding-top:24px;overflow:auto}
.sheet .aside h2{color:#fff;padding:0 20px 16px;margin:0}
.sitem{padding:16px 20px;color:#fff;cursor:pointer;display:flex;flex-direction:column;gap:6px;border:0;background:transparent;text-align:left;font-size:22px;line-height:28px}
.sitem.on{margin-left:20px;background:#fff;color:var(--red);border-radius:20px 0 0 20px;font-weight:700}
.sitem.on .badge-opt{background:var(--g100);color:var(--g600)} .sitem.on .badge-req{background:var(--red);color:#fff}
.sitem .badge{align-self:flex-start}
.sheet .content{flex:1;padding:30px 24px;overflow:auto;display:flex;flex-direction:column;gap:20px;min-width:0}
.sheet .side{width:330px;background:var(--g50);padding:30px 20px;overflow:auto;display:flex;flex-direction:column;gap:16px;flex:none}
.sheet .sfoot{height:96px;border-top:1px solid var(--g100);display:flex;align-items:center;padding:0 20px;gap:12px;flex:none;background:#fff}
.sheet .sfoot .btn{height:72px;border-radius:10px} .sfoot .sp{flex:1}
.f3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ocard{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--g200);border-radius:16px;background:#fff}
.oadd{min-height:120px;border:2px dashed var(--g300);border-radius:16px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--g600);font-size:18px;font-weight:700;cursor:pointer;background:transparent}
.oadd .plus{width:40px;height:40px}
.prevbox{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--g100)}
.prow{height:48px;border-radius:10px;border:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:16px}
.prow.on{border:2px solid var(--red);color:var(--red);font-weight:700}
.imgbox{width:220px;height:160px;border-radius:16px;overflow:hidden;position:relative;flex:none} .imgbox img{width:100%;height:100%;object-fit:cover;display:block}
/* 손님 시점 옵션 팝업 */
.ocards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.ocard-c{display:flex;flex-direction:column;gap:10px;cursor:pointer;border:0;background:transparent;padding:0;text-align:left;color:var(--g900)}
.ocard-c .img{height:150px;border-radius:16px;overflow:hidden;position:relative;border:3px solid transparent} .ocard-c.on .img{border-color:var(--red)}
.ocard-c .img img{width:100%;height:100%;object-fit:cover}
.ocard-c .nm{font-size:22px} .ocard-c.on .nm{color:var(--red);font-weight:700} .ocard-c .pr{font-size:24px;font-weight:700;text-align:right}
.chk{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:999px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center}
.qty{display:flex;align-items:center;border:1px solid var(--g200);border-radius:10px;background:#fff;height:56px} .qty button{width:52px;height:100%;border:0;background:transparent;font-size:24px;font-weight:700;cursor:pointer} .qty span{width:44px;text-align:center;font-size:24px;font-weight:700}
/* 버전 */
.vrow{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;border:1px solid var(--g200);background:#fff;flex-wrap:wrap}
.vrow.cur{border:2px solid var(--red)} .vrow .n{width:56px;font-size:28px;font-weight:700} .vrow.cur .n{color:var(--red)}
.vrow .info{flex:1;min-width:200px} .vrow .info input{font-size:22px;font-weight:700;border:0;border-bottom:1px dashed var(--g300);width:100%;outline:none;background:transparent;padding:2px 0}
.dline{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:12px;padding:12px 16px;border-left:6px solid var(--g900);gap:12px;font-size:16px}
.dline.add{border-left-color:var(--opt)} .dline.del{border-left-color:var(--err)}
/* 체크리스트 */
.crow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;background:var(--g50);flex-wrap:wrap}
.crow .t{font-size:18px;font-weight:700} .crow .d{font-size:14px;color:var(--g500)} .crow.error .t{color:var(--err)}
.steps{display:flex} .step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.step .ln{display:flex;align-items:center;width:100%} .step .ln i{flex:1;height:2px;background:var(--g200)} .step .dot{width:28px;height:28px;border-radius:999px;border:2px solid var(--g200);background:#fff}
.step.done .dot{background:var(--g900);border-color:var(--g900)} .step.now .dot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 6px #FDE3E3}
.step span{font-size:14px;font-weight:700;color:var(--g400)} .step.done span{color:var(--g900)} .step.now span{color:var(--red)}
.dialog{width:min(520px,100%)}
@media (max-width:900px){.aside{width:190px}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.card .img{height:150px}.sheet .side{display:none}}
@media (max-width:640px){.screen{flex-direction:column}.aside{width:100%;height:auto;position:static}.cats{flex-direction:row;overflow-x:auto}.cat.on{margin-left:0;border-radius:12px}.aside .foot{display:none}.footer{position:fixed;left:0;right:0;padding:0 8px}.sheet .aside{width:100%;height:auto;max-height:36vh}.sheet .body{flex-direction:column}}