/* ════════════════════════════════════════════════
   가장정육점 · 손님 주문 페이지 스타일
   ════════════════════════════════════════════════ */
:root{--r:10px}
body{font-size:16px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
svg.i{width:18px;height:18px}
.wrap{max-width:560px;margin:0 auto;padding:0 16px 120px}
.hero{padding:24px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{height:46px;width:auto;display:block}
.hero-t{text-align:right}
.hero-t .store-tag{margin:0;font-size:14px;padding:2px 10px}
.hero-t p{font-size:13px;color:var(--text-3);margin-top:4px}
.mark{width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;font-size:20px;flex:none}
.hero h1{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.hero p{font-size:14px;color:var(--text-2)}
.store-tag{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 8px}

.demo{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--text-2);background:var(--warn-soft);border-radius:var(--r);padding:10px 12px;margin-bottom:12px}
.demo svg.i{color:var(--warn);width:16px;height:16px;margin-top:2px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 16px;margin-top:12px}
.card h2{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.card h2 .n{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:12px;display:grid;place-items:center;flex:none}
.card h2 em{font-style:normal;font-size:12px;font-weight:500;color:var(--danger);margin-left:auto}
.card .desc{font-size:14px;color:var(--text-2);margin-top:4px}
.field{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.lbl{font-size:14px;font-weight:600;color:var(--text-2)}
.lbl em{color:var(--danger);font-style:normal;margin-left:2px}
.inp{width:100%;height:50px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);padding:0 14px;font-size:17px}
textarea.inp{height:auto;min-height:110px;padding:12px 14px;resize:vertical;line-height:1.55}
.inp:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-color:var(--accent)}
.inp.bad{border-color:var(--danger)}
.err{font-size:13px;color:var(--danger);display:none}
.err.on{display:block}
.sub{font-size:13px;color:var(--text-3)}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.choice button{min-height:76px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;font-weight:700;font-size:17px;color:var(--text-2)}
.choice button small{font-weight:400;font-size:12px;color:var(--text-3);line-height:1.35;text-align:center}
.choice button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.choice button.on small{color:var(--accent)}

.guide{margin-top:10px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.guide summary{list-style:none;cursor:pointer;padding:10px 12px;font-size:14px;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:6px}
.guide summary::-webkit-details-marker{display:none}
.guide summary .chev{margin-left:auto;transition:.2s}
.guide[open] summary .chev{transform:rotate(180deg)}
.guide .gb{padding:0 12px 12px;font-size:14px;color:var(--text-2);display:flex;flex-direction:column;gap:8px}
.guide .ex{background:var(--sunken);border-radius:8px;padding:8px 10px;color:var(--text)}
.guide ul{padding-left:18px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{height:34px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font-size:14px;color:var(--text-2)}
.chips button:active{background:var(--sunken)}

.menu-list{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:0 12px}
.kit{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.kit:first-child{border-top:0}
.kit.picked .kn{color:var(--accent)}
.today-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--warn);background:var(--warn-soft);border-radius:5px;padding:1px 6px;margin-right:6px;vertical-align:2px}
.kit .kd{font-size:13px;color:var(--text-3)}
.kit .kn{font-weight:700}
.kit .kr{font-size:13px;color:var(--text-3)}
.kit .kr.low{color:var(--warn);font-weight:600}
.kit.out .kn{color:var(--text-3)}
.kit.out .kr{color:var(--danger);font-weight:600}
.stepper{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;margin-left:auto;flex:none}
.stepper button{width:44px;height:44px;border:0;background:var(--surface);display:grid;place-items:center}
.stepper button:disabled{color:var(--line-strong);cursor:default}
.stepper b{min-width:34px;text-align:center;font-size:17px}

.days{display:flex;gap:6px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;min-width:64px;padding:8px 10px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:0}
.day .dl{font-size:12px;color:var(--text-3)}
.day .dn{font-size:17px;font-weight:700}
.day.on{border-color:var(--accent);background:var(--accent-soft)}
.day.on .dl,.day.on .dn{color:var(--accent)}
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;overflow:visible}
.day{min-width:0}
.day .dn{font-size:15px;white-space:nowrap}
.cal-btn .dl{display:flex;align-items:center;gap:3px}
.cal-btn .dl svg.i{width:13px;height:13px}
.cal{margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:10px}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-h b{font-size:16px}
.cal-nav{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:grid;place-items:center}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-w{font-size:12px;color:var(--text-3);padding:4px 0}
.cal-w.sun,.cal-d.sun{color:var(--danger)} .cal-w.sat,.cal-d.sat{color:#2F5E9E}
.cal-d{height:42px;border:0;border-radius:10px;background:none;font-size:15px;font-weight:600}
.cal-d.today{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.cal-d.on{background:var(--accent);color:var(--on-accent)!important}
.cal-d:disabled{color:var(--line-strong)!important;cursor:default}
.tp{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px}
.tp-ap{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.tp-ap button{border:0;background:var(--surface);font-weight:700;font-size:16px;color:var(--text-2)}
.tp-ap button+button{border-left:1.5px solid var(--line-strong)}
.tp-ap button.on{background:var(--accent);color:var(--on-accent)}
.tp-s{padding:0 10px;font-weight:600;appearance:auto}
.times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.times button{height:44px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font-size:15px;font-weight:600;color:var(--text-2)}
.times button.on{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.times button:disabled{opacity:.35;cursor:default;text-decoration:line-through}
.times .sep{grid-column:1/-1;font-size:12px;color:var(--text-3);font-weight:600;margin-top:4px}
.pays{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pays button{height:46px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font-size:15px;font-weight:600;color:var(--text-2)}
.pays button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

.agree{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14px;color:var(--text-2)}
.agree input{width:22px;height:22px;accent-color:var(--accent);flex:none;margin-top:1px}
.agree details{font-size:13px;color:var(--text-3);margin-top:4px}

.bottom{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:10}
.bottom-in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.sum{font-size:13px;color:var(--text-2);text-align:center;min-height:18px}
.go{width:100%;height:56px;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.go:disabled{opacity:.6}
.go:not(:disabled):active{background:var(--accent-hover)}

.done{padding:48px 0 24px;text-align:center}
.done .ok{width:72px;height:72px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 16px}
.done .ok svg.i{width:36px;height:36px;stroke-width:2.2}
.done h1{font-size:24px;font-weight:700}
.done p{color:var(--text-2);margin-top:6px}
.receipt{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 16px;margin-top:20px;text-align:left}
.rr{display:flex;gap:12px;padding:12px 0;font-size:15px}
.rr+.rr{border-top:1px solid var(--line)}
.rr .k{flex:none;width:72px;color:var(--text-3)}
.rr .v{flex:1;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.again{margin-top:16px;height:50px;padding:0 20px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);font-weight:600}
.closed{text-align:center;padding:40px 0;color:var(--text-2)}
.again.primary{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:var(--accent);color:var(--on-accent);border:0}
.picker{display:grid;gap:8px;margin-top:18px}
.picker a{display:flex;align-items:center;justify-content:center;height:64px;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--surface);text-decoration:none;font-size:18px;font-weight:700;color:var(--text)}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(10px);opacity:0;z-index:30;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:15px;transition:.2s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.price-card summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.price-card summary::-webkit-details-marker{display:none}
.price-card summary h2 svg.i{color:var(--accent)}
.sum-r{display:flex;align-items:center;gap:2px;font-size:14px;color:var(--text-2);font-weight:600}
.sum-r .chev{transition:.2s}
.price-card details[open] .sum-r .chev{transform:rotate(180deg)}
.psec{margin-top:14px}
.psec-h{display:flex;align-items:baseline;gap:8px;padding:8px 12px;background:var(--accent);color:var(--on-accent);border-radius:10px 10px 0 0}
.psec-h b{font-size:15px}
.psec-h span{font-size:12px;opacity:.85}
.plist{border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;display:grid;grid-template-columns:1fr 1fr}
.pitem{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;border:0;border-top:1px solid var(--line);background:var(--surface);text-align:left;min-height:48px}
.pitem:nth-child(-n+2){border-top:0}
.pitem:nth-child(odd){border-right:1px solid var(--line)}
.pitem:active{background:var(--accent-soft)}
.pn{font-size:14px;font-weight:600;line-height:1.3}
.pn small{display:block;font-size:11px;font-weight:400;color:var(--text-3)}
.pp{font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap}
.pp small{font-size:11px;font-weight:500;margin-left:1px}
.pitem.so .pn{color:var(--text-3);text-decoration:line-through}
.pitem.so .pp{color:var(--danger);font-size:12px}
.plist.one{grid-template-columns:1fr}
.plist.one .pitem{border-right:0!important}
.plist.one .pitem:nth-child(2){border-top:1px solid var(--line)}
@media (max-width:360px){ .plist{grid-template-columns:1fr} .pitem:nth-child(odd){border-right:0} .pitem:nth-child(2){border-top:1px solid var(--line)} }