:root{--bg:#fff;--ink:#1c1c1c;--muted:#646a67;--line:#e6e9e7;--line-2:#f0f2f1;--soft:#f4f6f5;--brand:#184734;--brand-ink:#0f3325;--brand-tint:#eaf0ec;--brand-wash:#f5f8f6;--on-brand:#fff;--cream:#f4eedf;--lemon:#e3b53b;--lemon-ink:#6b4f00;--lemon-tint:#fbf3dc;--sage:#8ea48a;--photo:#f4f1ec;--photo-ink:#a8998a;--field:#8f9592;--control:#cfd4d1;--warn:#8f5200;--warn-bg:#fbebcf;--ok:#17573a;--ok-bg:#dcefe3;--info:#1d579f;--info-bg:#e0ebf9;--err:#b42318;--backdrop:#e8edea;--shade:#1418166b;--toast:#1c1c1c;--font:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;--serif:"Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;--t-xs:12px;--t-sm:13px;--t-ui:14px;--t-base:15px;--t-md:16px;--s-sm:18px;--s-md:20px;--s-lg:24px;--s-xl:30px;--s-2xl:40px;--s-3xl:54px;--mono:"JetBrains Mono", ui-monospace, Menlo, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{background:var(--backdrop);color:var(--ink);font-family:var(--font);font-size:var(--t-base);font-variant-numeric:tabular-nums;margin:0;line-height:1.45}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}:focus-visible{outline:2px solid var(--info);outline-offset:2px}[hidden]{display:none!important}.app{background:var(--bg);flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;display:flex;position:relative}@media (width>=520px){.app{box-shadow:0 0 0 1px var(--line), 0 12px 40px #00000014}}.body{flex-direction:column;flex:1;display:flex}.top{z-index:10;background:var(--bg);border-bottom:1px solid var(--line);grid-template-columns:44px 1fr auto;align-items:center;gap:8px;height:56px;padding:0 12px 0 6px;display:grid;position:sticky;top:0}.top-title{font-size:var(--s-md);text-align:center}.brand-top{height:64px;padding:0 16px;display:flex}.foot{z-index:10;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg);position:sticky;bottom:0}.pad{padding:16px}.pad-x{padding-left:16px;padding-right:16px}.pt{padding-top:12px}.stack-8,.stack-10,.stack-16{flex-direction:column;display:flex}.stack-8{gap:8px}.stack-10{gap:10px}.stack-16{gap:16px}.row{align-items:center;gap:12px;display:flex}.gap-8{gap:8px}.grow{flex:1;min-width:0}.row-between{justify-content:space-between;align-items:center;gap:12px;display:flex}.center{text-align:center;align-items:center}.band{background:var(--soft);height:8px}.muted{color:var(--muted)}.sm{font-size:var(--t-sm)}.normal{font-weight:400}.mono{font-family:var(--mono);font-weight:600}.brand{color:var(--brand)}.serif,.h2,.h-lg,.top-title,.sec-h,.item-name,.tc-num,.pts-num span,.amount,.total,.fs-row,.tile-t,.g-name{font-family:var(--serif);letter-spacing:0;font-variant-numeric:lining-nums tabular-nums;font-weight:600}.h2{font-size:var(--s-md);line-height:1.25}.h-lg{font-size:var(--s-xl);text-wrap:balance;line-height:1.15}.wordmark{color:var(--brand);flex-direction:column;align-items:flex-start;display:flex}.wm-name{font-family:var(--serif);font-weight:600;font-size:var(--s-md);line-height:1}.wm-sub{letter-spacing:.38em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-size:10px;font-weight:500}.wordmark.lg{text-align:center;align-items:center}.wordmark.lg .wm-name{font-size:48px}.wordmark.lg .wm-sub{font-size:var(--t-sm);letter-spacing:.5em;margin-top:10px;padding-left:.5em}.wm-mark{margin-bottom:14px}.chip{background:var(--brand-tint);height:30px;color:var(--brand);font-size:var(--t-sm);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:0 12px;font-weight:600;display:inline-flex}.status{height:26px;font-size:var(--t-sm);white-space:nowrap;border-radius:6px;align-items:center;gap:6px;padding:0 10px;font-weight:600;display:inline-flex}.status.warn{background:var(--warn-bg);color:var(--warn)}.status.ok{background:var(--ok-bg);color:var(--ok)}.status.info{background:var(--info-bg);color:var(--info)}.status.neutral{background:var(--soft);color:var(--muted)}.tag{height:22px;font-size:var(--t-xs);border-radius:6px;align-items:center;padding:0 8px;font-weight:600;display:inline-flex}.tag.warn{background:var(--warn-bg);color:var(--warn)}.tag.neutral{background:var(--soft);color:var(--muted)}.btn{width:100%;height:52px;font-size:var(--t-md);white-space:nowrap;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-weight:600;display:flex}.btn.primary{background:var(--brand);color:var(--on-brand)}.btn.primary:hover{background:var(--brand-ink)}.btn.outline{background:var(--bg);color:var(--brand);border-color:var(--brand)}.btn.ghost{background:var(--bg);height:48px;color:var(--ink);border-color:var(--control);font-weight:500;font-size:var(--t-base)}.btn.sm{width:auto;height:44px;font-size:var(--t-ui);flex:none}.btn[disabled]{background:var(--soft);color:var(--muted);border-color:var(--line);cursor:not-allowed}.btn.w172{flex:none;width:172px}.icon-btn{width:44px;height:44px;color:var(--ink);background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;display:flex}.link-btn{min-height:44px;color:var(--brand);font-weight:600;font-size:var(--t-ui);background:0 0;border:0;align-items:center;padding:0;display:inline-flex}.link-btn.sm{min-height:32px;font-size:var(--t-sm);align-self:flex-start}.link-btn[disabled]{color:var(--muted);cursor:not-allowed}.lbl,.fs-t{font-size:var(--t-base);font-weight:600}.hint{font-size:var(--t-sm);color:var(--muted);min-height:18px}.hint.err{color:var(--err)}.hint.okc{color:var(--brand)}.field{border:1px solid var(--field);background:var(--bg);border-radius:10px;align-items:center;height:48px;display:flex}.field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}.field.invalid{border-color:var(--err)}.field input{min-width:0;height:100%;font-size:var(--t-md);background:0 0;border:0;outline:none;flex:1;padding:0 12px}.field-ic{color:var(--muted);flex:none;padding-left:14px;display:flex}.field-ic+input{padding-left:10px}.area{border:1px solid var(--field);background:var(--bg);width:100%;font-size:var(--t-md);resize:none;border-radius:10px;padding:12px 14px}.area:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);outline:none}input::placeholder,textarea::placeholder{color:#767676}input[type=radio],input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand);flex:none;margin:0}.photo{background:var(--photo);width:88px;height:88px;color:var(--photo-ink);border-radius:12px;flex:none;justify-content:center;align-items:center;display:flex;position:relative}.photo.sm{width:72px;height:72px}.photo.wide{width:100%;height:96px}.badge{border:2px solid var(--bg);background:var(--lemon);min-width:24px;height:24px;color:var(--brand-ink);font-size:var(--t-xs);border-radius:999px;justify-content:center;align-items:center;padding:0 6px;font-weight:700;display:flex;position:absolute;top:-6px;left:-6px}.stepper{border:1px solid var(--control);border-radius:12px;flex:none;align-items:center;display:flex}.stepper button{width:44px;height:48px;color:var(--brand);background:0 0;border:0;justify-content:center;align-items:center;display:flex}.stepper button[disabled]{color:#b9bfbc;cursor:not-allowed}.stepper span{text-align:center;min-width:22px;font-weight:600}.stepper.sm{border-radius:10px}.stepper.sm button{width:40px;height:40px}.kv{min-height:36px;font-size:var(--t-ui);justify-content:space-between;align-items:center;gap:12px;display:flex}.kv>span:first-child{color:var(--muted)}.card{border:1px solid var(--line);text-align:left;border-radius:16px;width:100%;padding:6px 16px}.card.soft{background:var(--soft);border-color:#0000}.card.rows .kv+.kv{border-top:1px solid var(--line)}.round-ic{background:var(--brand-tint);width:80px;height:80px;color:var(--brand);border-radius:999px;justify-content:center;align-items:center;display:flex}.round-ic.ok{background:var(--ok-bg);color:var(--ok)}.round-ic.warn{background:var(--warn-bg);color:var(--warn)}.round-ic.neutral{background:var(--soft);color:var(--muted)}.demo{border:1px dashed var(--info);background:var(--info-bg);width:100%;min-height:44px;color:var(--info);font-size:var(--t-ui);border-radius:10px;padding:8px 12px;font-weight:600}.demo:before{content:"Demo · "}.demo-hint{font-size:var(--t-sm);color:var(--info)}.welcome{flex-direction:column;flex:1;justify-content:center;gap:24px;display:flex}.table-card{background:var(--brand-tint);text-align:center;border-radius:20px;padding:20px}.tc-label{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:#3f5a4b;font-weight:600}.tc-num{font-size:var(--s-3xl);color:var(--brand);line-height:1.1}.hello-phone{font-size:var(--t-md);font-weight:600}.points{background:var(--brand);color:var(--on-brand);border-radius:20px;flex-direction:column;gap:4px;padding:20px;display:flex}.pts-label,.pts-rule,.pts-next{font-size:var(--t-sm);color:var(--cream)}.pts-num{font-size:var(--t-base);color:var(--cream);font-weight:500}.pts-num span{font-size:var(--s-3xl);margin-right:4px;line-height:1}.bar{background:#ffffff40;border-radius:999px;height:6px;margin-top:10px;overflow:hidden}.bar span{background:var(--lemon);border-radius:999px;height:100%;display:block}.tiles{grid-template-columns:1fr 1fr;gap:12px;display:grid}.tile{border:1px solid var(--line);background:var(--bg);text-align:left;border-radius:16px;flex-direction:column;align-items:flex-start;gap:2px;min-height:116px;padding:16px;display:flex}.tile:hover{border-color:var(--brand)}.tile-ic{background:var(--brand-tint);width:40px;height:40px;color:var(--brand);border-radius:999px;justify-content:center;align-items:center;margin-bottom:8px;display:flex}.tile-t{font-size:var(--s-md);line-height:1.2}.tile-s{font-size:var(--t-sm);color:var(--muted)}.gift-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.gcard{flex-direction:column;gap:4px;display:flex}.g-name{font-size:var(--s-sm);line-height:1.2}.g-cost{font-size:var(--t-sm);color:var(--brand);font-weight:600}.banner{border:1px solid var(--line);background:var(--bg);border-radius:12px;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px;font-weight:600;display:flex}.tabs{z-index:9;background:var(--bg);border-bottom:1px solid var(--line);gap:24px;padding:0 16px;display:flex;position:sticky;top:56px;overflow-x:auto}.tab{height:48px;color:var(--muted);font-size:var(--t-base);white-space:nowrap;background:0 0;border:0;border-bottom:2px solid #0000;padding:0;font-weight:500}.tab[aria-pressed=true]{border-bottom-color:var(--brand);color:var(--brand);font-weight:600}.menu-sec{scroll-margin-top:112px}.sec-h{font-size:var(--s-lg);padding:22px 16px 2px;line-height:1.2}.item{border-bottom:1px solid var(--line-2);gap:14px;padding:12px 16px;display:flex}.item-body{flex-direction:column;flex:1;min-width:0;display:flex}.item-name{font-size:var(--s-sm);line-height:1.2}.item-desc{font-size:var(--t-sm);color:var(--muted);margin-top:2px}.item-foot{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.price{font-size:var(--t-base);font-weight:600}.is-out .item-name,.is-out .price{color:var(--muted)}.is-out .photo{opacity:.55}.add{background:0 0;border:0;justify-content:center;align-items:center;width:44px;height:44px;margin-right:-6px;padding:0;display:flex}.add span{background:var(--brand);width:32px;height:32px;color:var(--on-brand);border-radius:999px;justify-content:center;align-items:center;display:flex}.cartbar{background:var(--brand);width:100%;height:56px;color:var(--on-brand);font-size:var(--t-md);border-radius:12px;align-items:center;gap:12px;padding:0 16px;font-weight:600;display:flex}.cartbar .cb-t{text-align:left;flex:1}.cartbar .cb-p{font-weight:700}.item-sheet{z-index:40;background:var(--bg);flex-direction:column;width:100%;max-width:480px;margin:0 auto;animation:.18s ease-out sheet-in;display:flex;position:fixed;inset:0}.item-sheet-body{overscroll-behavior:contain;flex:1;position:relative;overflow-y:auto}@keyframes sheet-in{0%{opacity:0;transform:translateY(24px)}}.hero-photo{background:var(--photo);height:180px;color:var(--photo-ink);justify-content:center;align-items:center;display:flex}.float-close{z-index:11;background:var(--bg);position:absolute;top:12px;left:12px;box-shadow:0 2px 8px #00000029}.price-lg{font-size:var(--t-md);margin-top:6px;font-weight:600}.fs{border:0;min-width:0;margin:0;padding:12px 16px 4px}.fs-legend{float:left;width:100%;margin-bottom:4px;padding:0}.fs-legend+*{clear:both}.fs-row{font-size:var(--s-md);justify-content:space-between;align-items:center;line-height:1.25;display:flex}.fs-row .tag{font-family:var(--font)}.fs-sub{font-size:var(--t-sm);color:var(--muted);display:block}.opt-row{border-bottom:1px solid var(--line-2);cursor:pointer;align-items:center;gap:12px;min-height:48px;display:flex}.opt-row:last-child{border-bottom:0}.opt-row.dis{cursor:not-allowed;color:var(--muted)}.opt-n{font-size:var(--t-base);flex:1}.opt-p{font-size:var(--t-sm);color:var(--muted)}.opt-row:has(input:checked) .opt-n{font-weight:600}.line{border-bottom:1px solid var(--line-2);gap:12px;padding:12px 16px;display:flex}.line-body{flex-direction:column;flex:1;min-width:0;display:flex}.line-side{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.line-price{font-size:var(--t-base);font-weight:600}.sum{padding-top:6px;padding-bottom:6px}.voucher{border:1px solid var(--line);border-radius:12px;align-items:center;gap:12px;padding:10px 12px;display:flex}.voucher.on{border-color:var(--brand);background:var(--brand-wash)}.voucher.off .v-code,.voucher.off .v-t{color:var(--muted)}.v-ic{background:var(--brand-tint);width:40px;height:40px;color:var(--brand);border-radius:10px;flex:none;justify-content:center;align-items:center;display:flex}.voucher.on .v-ic{background:var(--brand);color:var(--on-brand)}.v-code{font-family:var(--mono);font-size:var(--t-ui);flex-wrap:wrap;align-items:center;gap:6px;font-weight:600;display:flex}.v-t{font-size:var(--t-ui);font-weight:600}.eyebrow-s{font-size:var(--t-sm);color:var(--muted);font-weight:600}.pay-grid{grid-template-columns:1fr 1fr;gap:10px;padding-bottom:12px;display:grid}.pay{border:1px solid var(--control);cursor:pointer;border-radius:12px;align-items:flex-start;gap:10px;padding:12px;display:flex}.pay:has(input:checked){border-color:var(--brand);background:var(--brand-wash)}.pay-t{font-weight:600;display:block}.total{font-size:var(--s-xl);line-height:1.05}.earn{font-size:var(--t-xs);color:var(--brand);font-weight:600}.amount{font-size:var(--s-2xl);line-height:1.1}.qr-wrap{flex-direction:column;align-items:center;gap:10px;display:flex}.qr{border:1px solid var(--line);width:232px;height:232px;color:var(--muted);background:#fff;border-radius:16px;justify-content:center;align-items:center;padding:12px;display:flex}.qr img{object-fit:contain;width:100%;height:100%;display:block}.qr-empty{text-align:center;font-size:var(--t-sm);flex-direction:column;align-items:center;gap:8px;display:flex}.waiting{font-size:var(--t-ui);color:var(--muted);justify-content:center;align-items:center;gap:10px;display:flex}.dot{width:8px;height:8px;box-shadow:0 0 0 4px var(--warn-bg);background:#d98a1c;border-radius:999px;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 7px var(--warn-bg)}}.timeline{border:1px solid var(--line);border-radius:16px;margin:0;padding:16px 16px 4px;list-style:none}.timeline li{gap:14px;min-height:48px;display:flex}.tl-mark{flex-direction:column;align-items:center;width:24px;display:flex}.tl-dot{border:2px solid var(--field);border-radius:999px;flex:none;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.tl-line{background:var(--line);flex:1;width:2px}.done .tl-dot{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}.done .tl-line{background:var(--brand)}.cur .tl-dot{border-color:var(--info)}.cur .tl-dot:after{content:"";background:var(--info);border-radius:999px;width:10px;height:10px}.tl-body{font-size:var(--t-base);flex:1;justify-content:space-between;gap:8px;font-weight:600;display:flex}.cur .tl-body>span:first-child{color:var(--info)}.todo .tl-body>span:first-child{color:var(--muted);font-weight:500}.tl-body small{font-size:var(--t-sm);color:var(--muted);font-weight:400}.earn-box{background:var(--brand-tint);color:var(--brand-ink);font-size:var(--t-ui);border-radius:12px;align-items:center;gap:10px;padding:12px 14px;display:flex}.oline{border-bottom:1px solid var(--line-2);font-size:var(--t-base);gap:10px;padding:10px 0;display:flex}.pts-strip{background:var(--brand-tint);font-size:var(--t-ui);justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.pts-strip b{color:var(--brand)}.otp{grid-template-columns:repeat(6,1fr);gap:8px;width:100%;max-width:320px;display:grid}.otp-box{border:1px solid var(--field);text-align:center;width:100%;height:56px;font-size:var(--s-lg);background:var(--bg);border-radius:10px;font-weight:700}.otp-box:focus{border:2px solid var(--brand);outline:none}.overlay{z-index:20;background:var(--shade);justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{width:100%;max-width:480px;padding:20px 16px calc(16px + env(safe-area-inset-bottom,0px));background:var(--bg);border-radius:20px 20px 0 0;flex-direction:column;gap:12px;display:flex}.sheet .row .btn{flex:1}.toast{z-index:30;background:var(--toast);color:#fff;width:min(448px,100% - 32px);font-size:var(--t-ui);opacity:0;pointer-events:none;border-radius:12px;padding:12px 16px;transition:opacity .2s,transform .2s;position:fixed;bottom:104px;left:50%;transform:translate(-50%,8px)}.toast.show{opacity:1;transform:translate(-50%)}.toast.is-error{background:var(--err)}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.loadbar{z-index:100;background:var(--lemon);transform-origin:0;opacity:0;pointer-events:none;height:3px;position:fixed;top:0;left:0;right:0;transform:scaleX(0)}.loadbar.on{opacity:1;animation:8s cubic-bezier(.08,.7,.2,1) forwards loadbar}@keyframes loadbar{0%{transform:scaleX(.08)}to{transform:scaleX(.92)}}.btn,.add span,.tile,.cartbar,.icon-btn,.stepper button,.link-btn,.tab,.voucher,.pay,.opt-row{transition:transform 80ms,opacity 80ms}.btn:active:not([disabled]),.add:active span,.tile:active,.cartbar:active,.icon-btn:active,.pay:active{transform:scale(.97)}.stepper button:active:not([disabled]),.link-btn:active:not([disabled]),.tab:active{opacity:.55}