/* AI 태블릿 주문 화면 (058) — 목업 v0.2 팔레트. 모바일 퍼스트: 세로로 쌓이고 900px 이상에서 대화 | 주문표 두 칸.
   고정 px 폭 없음 · 터치 44px · 글자 최소 12px · 한글 keep-all */
:root{--kg:#2E4A37;--kg2:#496B54;--ks:#DFE6D8;--ks2:#EDF1E8;--kp:#F5F2E8;--kl:#CFC6AC;--kc:#A2743F;--kt:#241F17;--kt2:#6E6554;--kti:#F7F5EE;--kstamp:#A9402C;--kr:14px;
 --ksans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;--kserif:"Noto Serif KR",serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
.k-body{font-family:var(--ksans);background:var(--kp);color:var(--kt);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
button{font-family:inherit;cursor:pointer}
.k-visually{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 상단 바 */
.k-top{background:var(--kg);color:var(--kti);display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px}
.k-store{min-width:0;flex:1 1 180px}
.k-store b{display:block;font-size:15px;font-weight:700}
.k-store span{display:block;font-size:12px;color:#A9C0AE;margin-top:2px}
.k-ctl{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.k-btn{min-height:44px;padding:10px 14px;font-size:14px;font-weight:600;color:#D8E4D6;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:8px}
.k-btn.on{background:var(--kti);color:var(--kg);border-color:var(--kti);font-weight:700}
.k-btn.call{color:#F3D9B4;border-color:rgba(243,217,180,.45);background:rgba(243,217,180,.12)}
.k-btn.dark{color:#fff;background:var(--kg);border-color:var(--kg)}
.k-btn[aria-pressed="true"]{outline:2px solid #F3D9B4;outline-offset:1px}

.k-wrap{flex:1;display:flex;flex-direction:column;min-height:0}

/* 대화 칸 */
.k-talk{padding:22px 18px 18px;display:flex;flex-direction:column;gap:14px;background:radial-gradient(700px 480px at 20% 0%,var(--ks2) 0%,transparent 70%),var(--ks)}
.k-heard{min-height:24px;font-size:14px;color:var(--kt2);line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.k-heard b{flex:none;font-size:12px;font-weight:700;color:var(--kg2);padding-top:2px}
.k-heard i{font-style:normal;border-bottom:1px dashed #A9B5A2;padding-bottom:2px}
.k-saidwrap{display:flex;flex-direction:column;justify-content:center;gap:14px}
.k-said{font-family:var(--kserif);font-size:clamp(1.45rem,4.5vw,2.5rem);line-height:1.42;letter-spacing:-.015em;color:#1C2A21}
.k-said b{font-weight:700;color:var(--kc)}
.k-said .k-small{display:block;font-family:var(--ksans);font-size:clamp(.95rem,2.4vw,1.35rem);color:#5F6D5C;margin-top:12px;line-height:1.55}
.big .k-said{font-size:clamp(1.7rem,5.2vw,2.95rem)}
.big .k-said .k-small{font-size:clamp(1.05rem,2.8vw,1.55rem)}
.big .k-heard{font-size:17px}

.k-picks{display:flex;flex-wrap:wrap;gap:10px}
.k-pick{flex:1 1 150px;max-width:100%;min-height:56px;text-align:left;background:#fff;border:1px solid #C5D2BE;border-radius:var(--kr);padding:14px 16px;color:var(--kt)}
.k-pick:hover,.k-pick:focus-visible{background:#F4F8F1;border-color:var(--kg2);outline:none}
.k-pick b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--kg)}
.k-pick span{display:block;font-size:13px;color:var(--kt2);margin-top:3px}
.big .k-pick b{font-size:23px}

/* 마이크 · 글 입력 */
.k-mic{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto}
.k-micbtn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:10px 18px;background:#fff;border:1px solid #C5D2BE;border-radius:999px;font-size:15px;font-weight:700;color:#7C8878}
.k-micbtn.k-hold{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.k-micbtn[aria-pressed="true"]{color:var(--kg);border-color:var(--kg2);background:#F4F8F1}
.k-wave{display:flex;align-items:flex-end;gap:3px;height:22px}
.k-wave i{display:block;width:4px;border-radius:2px;background:var(--kg2);height:7px}
.listening .k-wave i{animation:kw .9s ease-in-out infinite}
.k-wave i:nth-child(2){animation-delay:.1s}.k-wave i:nth-child(3){animation-delay:.2s}.k-wave i:nth-child(4){animation-delay:.3s}.k-wave i:nth-child(5){animation-delay:.4s}.k-wave i:nth-child(6){animation-delay:.5s}.k-wave i:nth-child(7){animation-delay:.6s}
@keyframes kw{0%,100%{height:6px}50%{height:22px}}
@media (prefers-reduced-motion:reduce){.k-wave i{animation:none!important}}
.k-type{display:flex;flex:1 1 220px;gap:8px;min-width:0}
.k-type input{flex:1 1 120px;min-width:44px;min-height:48px;padding:10px 14px;font-size:15px;font-family:inherit;border:1px solid #C5D2BE;border-radius:10px;background:#fff;color:var(--kt)}
.k-type button{flex:0 1 auto;max-width:45%;overflow-wrap:anywhere}
.k-type input:focus{outline:2px solid var(--kg2);outline-offset:1px}

/* 주문표 칸 */
.k-slip{background:#FBFAF5;display:flex;flex-direction:column;border-top:1px solid #D9E0D3}
.k-pnlhd{padding:14px 16px 12px;border-bottom:1px solid #E4E8DE}
.k-ptabs{display:flex;gap:7px}
.k-ptabs button{flex:1;min-height:46px;font-size:15px;font-weight:700;background:#fff;border:1px solid #D2D9CA;color:var(--kt2);border-radius:10px;padding:10px 8px}
.k-ptabs button.on{background:var(--kg);border-color:var(--kg);color:var(--kti)}
.k-ptabs i{font-style:normal;font-size:13px;margin-left:6px;opacity:.85}
.k-rbadge{display:flex;align-items:center;gap:8px;margin-top:10px}
.k-rbadge b{flex:1;min-width:0;font-size:14px;font-weight:800;color:var(--kg);letter-spacing:-.02em}
.k-rbadge.none b{color:#8A9080;font-weight:600}
.k-rbadge button{min-height:44px;min-width:64px;font-size:13px;font-weight:600;color:var(--kt2);background:#fff;border:1px solid #D4DACB;border-radius:8px;padding:8px 12px}
.k-pnlbody{flex:1;min-height:0;overflow-y:auto}

.k-guide{padding:20px 16px}
.k-guide.off{display:none}
.k-guide h3{font-family:var(--kserif);font-size:22px;font-weight:700;color:var(--kg);margin:0;letter-spacing:-.02em}
.k-lead{font-size:13.5px;color:var(--kt2);margin:8px 0 0;line-height:1.6}
.k-says{list-style:none;margin:14px 0 0;padding:0}
.k-says li{font-family:var(--kserif);font-size:17px;line-height:1.45;color:#22301F;padding:10px 0 10px 20px;border-bottom:1px solid #EAEDE4;position:relative}
.k-says li::before{content:"“";position:absolute;left:0;top:8px;color:var(--kc);font-size:20px;font-family:var(--kserif)}
.k-ghint{font-size:13px;color:var(--kt2);line-height:1.65;margin:14px 0 0}
.k-ghint b{color:var(--kg)}
.k-staff{background:#F3F5EE;border-left:3px solid var(--kc);padding:10px 12px;border-radius:8px;color:#443E33}
.big .k-says li{font-size:20px}

.k-items{display:none;padding:4px 16px}
.k-items.on{display:block}
.k-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #EFF1EA}
.k-item:last-child{border-bottom:none}
.k-item .nm{flex:1;min-width:0;font-size:17px;font-weight:700;letter-spacing:-.02em}
.k-item .nm em{display:block;font-style:normal;font-size:12.5px;font-weight:500;color:var(--kt2);margin-top:3px}
.k-item .qt{display:flex;align-items:center;gap:2px}
.k-item .qt button{width:44px;height:44px;border-radius:10px;border:1px solid #D2D9CA;background:#fff;font-size:20px;font-weight:700;color:var(--kg)}
.k-item .qt span{min-width:28px;text-align:center;font-size:16px;font-weight:700;color:var(--kt2)}
.k-item .pr{font-size:16px;font-weight:700;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.k-item.new{animation:kpop .32s ease}
@keyframes kpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.k-menuview{display:none}
.k-menuview.on{display:block}
.k-mcats{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px 8px;position:sticky;top:0;background:#FBFAF5;z-index:2}
.k-mcats button{min-height:44px;font-size:13.5px;font-weight:700;background:#fff;border:1px solid #D2D9CA;color:var(--kt2);border-radius:99px;padding:8px 14px}
.k-mcats button.on{background:var(--kc);border-color:var(--kc);color:#fff}
.k-mrows{padding:0 16px 12px}
.k-mrow{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:none;border-bottom:1px solid #EFF1EA;padding:12px 0;min-height:56px}
.k-mrow:hover{background:#F3F7F0}
.k-mrow .n{flex:1;min-width:0;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--kt)}
.k-mrow .n em{display:block;font-style:normal;font-size:12.5px;font-weight:500;color:var(--kt2);margin-top:3px}
.k-mrow .p{font-size:15px;font-weight:700;color:var(--kc);font-variant-numeric:tabular-nums;white-space:nowrap}
.k-mrow .add{flex:none;width:44px;height:44px;border-radius:10px;background:var(--kg);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:700}
.k-mrow.sold{cursor:default;opacity:.6}
.k-mrow.sold .p{color:var(--kt2);font-size:12.5px}
.k-mrow.sold .add{display:none}
.k-mhead{font-size:12.5px;font-weight:800;color:var(--kg);letter-spacing:.05em;margin:14px 0 2px;padding-bottom:6px;border-bottom:1px solid #DCE2D5}
.k-mfoot{padding:12px 16px;font-size:13px;color:var(--kt2);line-height:1.6;background:#F3F5EE;border-top:1px solid #E4E8DE}
.big .k-mrow .n{font-size:19px}

.k-pnlfoot{border-top:1px solid #E2E7DC;background:#F5F6F0}
.k-sum{padding:14px 16px 2px}
.k-rowline{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--kt2);padding:2px 0}
.k-tot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:6px}
.k-tot span{font-size:15px;font-weight:700;color:var(--kg)}
.k-tot b{font-size:clamp(1.6rem,4vw,2rem);font-weight:800;letter-spacing:-.03em;color:var(--kg);font-variant-numeric:tabular-nums}
.k-phint{font-size:12.5px;color:var(--kt2);margin-top:5px;padding-bottom:4px;min-height:1em}
.k-phint b{color:var(--kstamp)}
.k-slipact{padding:10px 16px 16px}
.k-go{width:100%;min-height:56px;font-size:19px;font-weight:700;letter-spacing:-.02em;background:var(--kg);color:#F7F5EE;border:none;border-radius:12px;padding:14px}
.k-go:disabled{background:#C4C8BC;color:#EFF0EA;cursor:default}
.k-go.pay{background:var(--kc)}
.k-helper{font-size:12.5px;color:var(--kt2);text-align:center;margin-top:8px;line-height:1.5}
.k-helper button{min-height:44px;font-size:13px;font-weight:700;color:var(--kg);background:none;border:1px solid #C5D2BE;border-radius:8px;padding:8px 14px;margin-top:6px}
.k-steps{padding:12px 16px 16px;border-top:1px dashed var(--kl)}
.k-step{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13.5px;color:#A79F8E}
.k-dot{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--kl);display:grid;place-items:center;font-size:10px;color:transparent}
.k-step.on{color:var(--kt);font-weight:700}
.k-step.on .k-dot{border-color:var(--kg);background:var(--kg);color:#fff}
.k-step.cur{color:var(--kt);font-weight:700}
.k-step.cur .k-dot{border-color:var(--kt);border-style:dashed}

/* 결제 · 완료 */
.k-pays{display:flex;gap:12px;flex-wrap:wrap}
.k-pay{flex:1 1 180px;text-align:left;color:var(--kt);background:#fff;border:1px solid #C5D2BE;border-radius:var(--kr);padding:18px 20px;min-height:56px}
.k-pay:hover,.k-pay:focus-visible{background:#F4F8F1;border-color:var(--kg2);outline:none}
.k-pay .ico{font-size:24px;line-height:1;margin-bottom:10px;display:block;color:var(--kc)}
.k-pay b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--kg)}
.k-pay span{display:block;font-size:13.5px;color:var(--kt2);margin-top:5px;line-height:1.45}
.k-done{text-align:center;padding:8px 0}
.k-stamp{display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--kstamp);color:var(--kstamp);border-radius:50%;width:96px;height:96px;font-family:var(--kserif);font-size:26px;font-weight:700;letter-spacing:.06em;transform:rotate(-11deg);margin-bottom:18px}
.k-done h3{font-family:var(--kserif);font-size:clamp(1.5rem,4vw,2.4rem);font-weight:700;letter-spacing:-.02em;color:var(--kg);margin:0}
.k-done .no{font-size:clamp(3.5rem,12vw,5.5rem);font-weight:800;letter-spacing:-.04em;margin:6px 0 4px;color:var(--kc);font-variant-numeric:tabular-nums;line-height:1.1}
.k-done p{font-size:clamp(1rem,2.6vw,1.15rem);color:var(--kt2);line-height:1.6;margin:8px 0 0}
.k-done .k-reset{margin-top:20px}
.k-demo-band{background:#F3D9B4;color:#6B4A15;font-size:13px;font-weight:700;text-align:center;padding:10px 14px}

/* 900px 이상 — 대화 | 주문표 두 칸(태블릿 가로) */
@media (min-width:900px){
 .k-top{padding:0 20px;min-height:56px;flex-wrap:nowrap}
 .k-wrap{flex-direction:row}
 .k-talk{flex:1;min-width:0;padding:32px 36px 26px}
 .k-slip{flex:none;width:40%;max-width:432px;border-top:none;border-left:1px solid #D9E0D3;min-height:0;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);position:sticky;top:0}
 .k-saidwrap{flex:1}
 .k-pnlbody{overflow-y:auto}
 .k-pick{flex:0 1 auto;min-width:172px}
}

/* 카드 단말 진행 상자 */
.k-term{margin-top:8px;border:1px solid #C5D2BE;border-radius:var(--kr);background:#fff;padding:18px 20px;max-width:100%}
.k-term .lab{font-size:13px;color:var(--kt2);font-weight:600}
.k-term .amt{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin:6px 0 14px;font-variant-numeric:tabular-nums;color:var(--kg)}
.k-term .prog{height:6px;border-radius:3px;background:#E0E6DB;overflow:hidden}
.k-term .prog i{display:block;height:100%;width:38%;background:var(--kg2);border-radius:3px;animation:ksl 1.15s ease-in-out infinite}
@keyframes ksl{0%{margin-left:-38%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.k-term .prog i{animation:none;width:100%}}
.k-term .st{font-size:14px;color:var(--kt2);margin-top:12px;line-height:1.6}
.k-term .st b{color:var(--kc)}