/* 지페 · 화면 조각(mock): 앱·POS 화면을 HTML로 그린 장식용 조각. 컨테이너 너비(cqi)에 비례해 커지고 작아집니다. 데이터는 모두 예시. */
/* 그림 조각(vg): 컨테이너 너비(cqi)에 비례 */
.vg{width:100%;display:grid;place-items:center;font-size:clamp(13px,4.1cqi,17px);color:var(--ink)}
.vg__card{width:min(78%,19em);padding:1.4em;border-radius:1.5em;background:#fff;box-shadow:var(--sh1)}
.vg__h{display:flex;align-items:center;gap:.5em;color:var(--ink2);font-weight:800}
.vg__h i{width:.9em;height:.9em;border-radius:50%;background:#0a74da}
.vg--auth .vg__card{text-align:center}
.vg--auth .vg__h{justify-content:center}
.vg__ok{display:grid;place-items:center;margin:.9em auto .4em}
.vg__ok svg{width:4.2em;height:4.2em;fill:none;stroke:#0b8a5a;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.vg__ok circle,.vg__ok path{stroke-dasharray:1;stroke-dashoffset:1}
.in-view .vg__ok circle,.in-view .vg__ok path{animation:draw 1.1s .3s var(--out) forwards}
.vg__ok circle{stroke-width:2.6;opacity:.35}
.vg__t{font-size:1.15em;font-weight:800}
.vg__s{margin-top:.2em;color:var(--ink2);font-weight:700}
.vg--tab .vg__card ul{display:grid;gap:.55em}
.vg--tab li{display:flex;justify-content:space-between;gap:1em;font-weight:700}
.vg--tab li em{font-style:normal;font-weight:800}
.vg__sum{display:flex;justify-content:space-between;margin-top:.8em;padding-top:.8em;border-top:2px dashed #dfe3e8;color:var(--ink2);font-weight:700}
.vg__sum b{color:var(--ink);font-size:1.2em;font-weight:800}
.vg__btn{display:grid;place-items:center;height:2.9em;margin-top:1em;border-radius:.9em;background:var(--blue);color:#fff;font-weight:800}
.vg--trk{gap:1em}
.vg__push{display:flex;align-items:center;gap:.8em;width:min(88%,21em);padding:.9em 1.1em;border-radius:1.2em;background:rgba(255,255,255,.92);box-shadow:var(--sh1)}
.vg__push i{flex:none;width:2.4em;height:2.4em;border-radius:.7em;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M3 10q5-8 10 0t10 0' fill='none' stroke='%23ffd84d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat}
.vg__push b{display:block;font-size:.85em;font-weight:800}
.vg__push span{color:var(--ink2);font-size:.95em;font-weight:700}
.vg__steps{display:flex;width:min(88%,21em);padding:1.2em .8em;border-radius:1.4em;background:#fff;box-shadow:var(--sh1)}
.vg__steps li{position:relative;flex:1;display:grid;justify-items:center;gap:.5em;color:var(--ink3);font-weight:800}
.vg__steps li::before{content:"";position:absolute;left:-50%;right:50%;top:.7em;height:3px;background:#e1e5ea}
.vg__steps li:first-child::before{display:none}
.vg__steps i{position:relative;z-index:1;width:1.5em;height:1.5em;border-radius:50%;background:#e1e5ea}
.vg__steps .done{color:var(--ink)}
.vg__steps .done i{background:#0b8a5a}
.vg__steps .done::before,.vg__steps .on::before{background:#0b8a5a}
.vg__steps .on{color:var(--ink)}
.vg__steps .on i{background:#fff;box-shadow:inset 0 0 0 .3em var(--wave),0 0 0 .3em rgba(255,216,77,.35)}
.in-view .vg__steps .on i{animation:pulse2 1.8s ease-in-out infinite}
@keyframes pulse2{50%{box-shadow:inset 0 0 0 .3em var(--wave),0 0 0 .7em rgba(255,216,77,.12)}}
.vg--tbl{gap:.9em}
.vg__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55em;width:min(88%,22em)}
.vg .t{display:grid;gap:.1em;padding:.7em .8em;border-radius:1em;font-weight:700;box-shadow:0 1px 2px rgba(25,31,40,.06)}
.vg .t b{font-size:1.5em;font-weight:800;line-height:1.1}
.vg .t span{font-size:.85em;line-height:1.3}
.vg__leg{display:flex;gap:.5em}
.vg__leg i{padding:.3em .8em;border-radius:99px;font-size:.85em;font-style:normal;font-weight:800}
.vg--tkt .vg__paper{position:relative;width:min(62%,14em);padding:1.3em 1.2em 1.9em;background:#fff;box-shadow:var(--sh1);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/1em 100% repeat-x;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/1em 100% repeat-x}
.vg__tn{display:flex;justify-content:space-between;padding-bottom:.7em;border-bottom:2px dashed #cfd6df}
.vg__tn b{font-weight:800}.vg__tn span{color:var(--ink2);font-weight:700}
.vg--tkt ul{display:grid;gap:.5em;margin-top:.8em}
.vg--tkt li{display:flex;justify-content:space-between;gap:1em;font-weight:700}
.vg--tkt li em{font-style:normal;font-weight:800}
.vg--sal .vg__n{margin-top:.1em;font-size:2.2em;font-weight:800;letter-spacing:-.045em;line-height:1.15}
.vg--sal .vg__n small{margin-left:.15em;font-size:.5em}
.vg__bars{display:flex;align-items:flex-end;gap:.45em;height:4.2em;margin-top:.7em}
.vg__bars i{flex:1;height:var(--h);border-radius:.3em;background:#b9cbff;transform-origin:bottom}
.vg__bars i:nth-child(5){background:var(--blue)}
.in-view .vg__bars i{animation:grow .9s var(--out) both}
.in-view .vg__bars i:nth-child(2){animation-delay:.08s}
.in-view .vg__bars i:nth-child(3){animation-delay:.16s}
.in-view .vg__bars i:nth-child(4){animation-delay:.24s}
.in-view .vg__bars i:nth-child(5){animation-delay:.32s}
.in-view .vg__bars i:nth-child(6){animation-delay:.4s}
@keyframes grow{from{transform:scaleY(.05)}}
.vg__rank{display:grid;gap:.4em;margin-top:.9em;padding-top:.8em;border-top:2px dashed #dfe3e8}
.vg__rank li{display:flex;align-items:center;gap:.6em;font-weight:700}
.vg__rank li b{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--mist);font-size:.85em}
.vg__rank li em{margin-left:auto;color:var(--ink2);font-style:normal;font-weight:800}

/* AI 주문 조각 */
.aif{color:var(--ink)}
.aif img{flex:none;width:3.2em;height:3.2em;border-radius:.8em;object-fit:cover}
.aif b{display:block;font-weight:800}
.aif span{color:var(--ink2);font-size:.9em;font-weight:600}
.aif--reg ul{display:grid;gap:.5em;padding:1em;border-radius:1.6em;background:#fff}
.aif--reg li{display:flex;align-items:center;gap:.9em;padding:.4em}
.aif--reg li div{flex:1;min-width:0}
.aif--reg i{padding:.35em .85em;border-radius:999px;background:#e3f5ec;color:#0d7a4d;font-size:.82em;font-style:normal;font-weight:800;white-space:nowrap}
.aif--reg .aif__add{border:.12em dashed #cfd6e4;border-radius:1em;color:var(--ink2)}
.aif--reg .aif__add span:first-child{display:grid;place-items:center;flex:none;width:3.2em;height:3.2em;border-radius:.8em;background:var(--mist);color:var(--ink);font-size:1.3em;font-weight:700}
.aif--reg .aif__add b{font-size:.95em;font-weight:700}
.aif--chat{display:grid;gap:.8em}
.aif__me{justify-self:end;padding:.75em 1.1em;border-radius:1.2em 1.2em .3em 1.2em;background:var(--ai);color:#fff;font-weight:700}
.aif__ai{display:grid;gap:.6em;justify-self:start;max-width:92%;padding:1em;border-radius:1.2em 1.2em 1.2em .3em;background:#fff}
.aif__ai>p{font-weight:600;line-height:1.5}
.aif__card{display:flex;align-items:center;gap:.8em;padding:.6em;border-radius:1em;background:var(--mist)}
.aif--cart{display:grid;gap:.8em}
.aif__row{display:flex;align-items:center;gap:.9em;padding:1em;border-radius:1.4em;background:#fff}
.aif__row div{flex:1;min-width:0}
.aif__row i{padding:.35em .85em;border-radius:999px;background:var(--ink);color:#fff;font-size:.82em;font-style:normal;font-weight:800}
.aif__pay{display:grid;place-items:center;height:3.4em;border-radius:1.1em;background:var(--blue);color:#fff;font-size:1.05em;font-weight:800}

/* 컨테이너: 조각을 감싸는 상자 */
.vgbox{display:grid;place-items:center;width:100%;container-type:inline-size}
.aif{padding-top:0;font-size:clamp(13px,4cqi,17px)}
/* 다중결제 시트 (정적) */
.mpx{width:min(86%,24em);padding:1.4em 1.5em;border-radius:1.6em;background:#fff;color:var(--ink);box-shadow:var(--sh2)}
.mpx__t{display:flex;align-items:baseline;justify-content:space-between;color:var(--ink2);font-weight:800}
.mpx__t b{color:var(--ink);font-size:1.7em;letter-spacing:-.04em}
.mpx__bar{display:flex;gap:3px;height:.8em;margin:.9em 0 1em;border-radius:99px;overflow:hidden}
.mpx__bar i{width:var(--w);background:var(--c);transition:width .8s var(--out)}
.mpx ul{display:grid;gap:.7em}
.mpx li{display:flex;align-items:center;gap:.7em;font-weight:700}
.mpx .cd{flex:none;width:1.9em;height:1.25em;border-radius:.3em}
.mpx li b{margin-right:auto;white-space:nowrap}
.mpx li em{font-style:normal;font-weight:800;letter-spacing:-.02em}
.mpx__btn{display:grid;place-items:center;height:3em;margin-top:1.1em;border-radius:1em;background:var(--blue);color:#fff;font-weight:800}
/* 지도 조각 */
.vg--map .vg__map{position:relative;width:min(86%,24em);aspect-ratio:1/.92;border-radius:1.6em;background:#e4f2ea;box-shadow:var(--sh1);overflow:hidden}
.vg__map svg{position:absolute;inset:0;width:100%;height:100%}
.vg__pin{position:absolute;left:var(--x);top:var(--y);width:1.6em;height:1.6em;margin:-1.6em 0 0 -.8em;border-radius:50% 50% 50% 0;background:#ff5a4d;box-shadow:0 .4em .8em rgba(255,90,77,.4);transform:rotate(-45deg)}
.vg__pin::after{content:"";position:absolute;inset:.45em;border-radius:50%;background:#fff}
.vg__me{position:absolute;left:46%;top:50%;width:1.1em;height:1.1em;margin:-.55em;border-radius:50%;background:var(--blue);box-shadow:0 0 0 .35em rgba(30,77,216,.25)}
.vg__ring{position:absolute;left:46%;top:50%;width:62%;aspect-ratio:1;border:.14em dashed rgba(30,77,216,.55);border-radius:50%;transform:translate(-50%,-50%)}
.vg__chips{position:absolute;left:.8em;right:.8em;top:.8em;display:flex;gap:.4em;font-size:.78em;font-weight:800}
.vg__chips i{padding:.4em .85em;border-radius:99px;background:#fff;color:var(--ink2);font-style:normal;box-shadow:0 1px 3px rgba(25,31,40,.12)}
.vg__chips i:first-child{background:var(--ink);color:#fff}
.vg__sheet{position:absolute;left:0;right:0;bottom:0;padding:.9em 1em;border-radius:1.2em 1.2em 0 0;background:#fff;font-size:.86em;font-weight:700}
.vg__sheet p{display:flex;justify-content:space-between;gap:1em;padding:.25em 0}
.vg__sheet em{color:var(--ink2);font-style:normal}
/* 마일리지 · 포장 조각 */
.vg--pt .vg__n{font-size:2.4em;font-weight:800;letter-spacing:-.045em;line-height:1.1}
.vg--pt .vg__list{display:grid;gap:.5em;margin-top:.8em;padding-top:.8em;border-top:2px dashed #dfe3e8}
.vg--pt .vg__list li{display:flex;justify-content:space-between;font-weight:700}
.vg--pt .vg__list em{color:#0b8a5a;font-style:normal;font-weight:800}
.vg--take .vg__times{display:flex;gap:.5em;margin:.8em 0}
.vg--take .vg__times i{padding:.5em .9em;border-radius:99px;background:var(--mist);color:var(--ink2);font-style:normal;font-weight:800;font-size:.9em}
.vg--take .vg__times i.on{background:var(--ink);color:#fff}
.vg--take .vg__row{display:flex;align-items:center;gap:.8em;font-weight:700}
.vg--take .vg__row img{width:3em;height:3em;border-radius:.8em;object-fit:cover}
.vg--take .vg__row span{display:block;color:var(--ink2);font-size:.9em}
/* PC POS 창 */
.vg--pos .vg__win{width:min(94%,30em);border-radius:1.2em;background:#fff;box-shadow:var(--sh2);overflow:hidden}
.vg__bar{display:flex;align-items:center;gap:.5em;height:2.4em;padding:0 1em;background:#eef1f6}
.vg__bar i{width:.8em;height:.8em;border-radius:50%;background:#ff5f57}
.vg__bar i:nth-child(2){background:#febc2e}
.vg__bar i:nth-child(3){background:#28c840}
.vg__bar b{margin-left:.8em;color:var(--ink2);font-size:.9em;font-weight:800}
.vg__body{display:grid;grid-template-columns:7.2em minmax(0,1fr)}
.vg__side{display:grid;align-content:start;gap:.3em;padding:.9em .6em;background:#f7f8fa;font-size:.82em}
.vg__side li{padding:.55em .8em;border-radius:.7em;color:var(--ink2);font-weight:700}
.vg__side li.on{background:var(--ink);color:#fff}
.vg__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55em;padding:.9em}
.vg__tiles .t{font-size:.82em}

/* 상태 색 (테이블 · 범례) */
.t--new{background:#ffe9e7;color:#b02a21}
.t--cook{background:#fff3c4;color:#8a5c00}
.t--done{background:#e3f5ec;color:#0d7a4d}
.t--free{background:#eef1f5;color:#6b7684}

/* ── 실제 앱 화면(폰 틀) : 위쪽 화면이 보이고 아래는 컨테이너가 잘라냄 ── */
.vgbox--phone{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding-top:clamp(14px,2vw,34px);overflow:hidden;container-type:inline-size}
.vgbox--phone .dev{flex:none;width:min(66cqi,330px);margin:0}
.vgbox--phone .dev--sm{width:min(52cqi,230px)}
.dev--real img{aspect-ratio:560/1141;height:auto}
.duo .vgbox--phone{position:relative;inset:auto;height:clamp(300px,30vw,520px);padding-top:0}
.win--real{width:min(94%,760px);margin:auto}
.win--real img{display:block;width:100%;height:auto}
.vgbox:has(.win--real){container-type:normal}

.dev--real{padding:.5em;border-radius:2.2em}
.dev--real img{border-radius:1.7em}