/* 상점·보관함 공용 (테마 변수만 바꿔 재사용) — 가격·상품명은 모두 제안/예시 */
.shell{display:flex;flex-direction:column}
.hd{display:flex;align-items:center;gap:4px;padding:10px 12px 0}
.hd a.bk{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.hd a.bk:hover{background:rgba(0,0,0,.06)}
.hd .tt{font:900 1rem/1 var(--f-body);flex:1}
.hd a.vl{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:99px;font-weight:700;font-size:.875rem;background:var(--card);box-shadow:inset 0 0 0 2px var(--bg-2);text-decoration:none}
main.pg{flex:1;padding:8px 20px 36px}
.h1{font-size:1.85rem;margin:6px 0 6px}
.dummy{display:inline-block;margin:10px 0 0;padding:4px 10px;border-radius:99px;background:var(--bg-2);font-size:.75rem;font-weight:700;color:var(--ink-2)}
.who{display:flex;gap:8px;align-items:center;margin:18px 0 6px;padding:12px 14px;border-radius:var(--r-sm);background:var(--card);box-shadow:0 4px 0 var(--bg-2)}
.who b{flex:1}.who small{color:var(--ink-2)}
.prods{display:grid;gap:14px;margin-top:18px;list-style:none;padding:0}
.pd{position:relative;background:var(--card);border-radius:var(--r);box-shadow:0 6px 0 var(--bg-2);padding:18px 18px 16px}
.pd.free{background:var(--acc-bg)}
.pd .row{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.pd h3{font:400 1.3rem/1.3 var(--f-title)}
.tag{flex:none;font-size:.75rem;font-weight:900;padding:4px 10px;border-radius:99px;background:var(--bg-2);color:var(--ink)}
.tag.fr{background:var(--ink);color:#fff}.tag.hot{background:var(--pri);color:#fff}
.pd p.d{color:var(--ink-2);margin:6px 0 10px;font-size:.9375rem}
.pd ul.in{margin:0 0 12px;padding-left:18px;color:var(--ink);font-size:.875rem;line-height:1.75}
.lock{position:relative;margin:0 0 14px;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg);font-size:.875rem;line-height:1.7;overflow:hidden}
.lock .bl{filter:blur(4px);user-select:none;color:var(--ink-2)}
.lock .ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:900;font-size:.8125rem;color:var(--ink);background:linear-gradient(transparent,rgba(255,255,255,.65))}
.pr{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pr .p{font:900 1.25rem/1 var(--f-body)}.pr .p s{font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-right:6px}.pr .p small{font-size:.75rem;font-weight:500;color:var(--ink-2)}
.bundle{border:3px solid var(--pri)}
.sv{display:inline-block;margin-top:4px;font-size:.75rem;font-weight:900;color:var(--pri-d)}
.note{margin-top:22px;padding:16px;border-radius:var(--r-sm);background:var(--card);font-size:.8125rem;color:var(--ink-2);line-height:1.8}
.note h2{font:900 .9375rem/1.4 var(--f-body);color:var(--ink);margin-bottom:6px}
.note ul{margin:0;padding-left:18px}
.ref{margin-top:18px;padding:16px;border-radius:var(--r);background:var(--ink);color:#fff}
.ref h2{font:400 1.2rem/1.4 var(--f-title);margin-bottom:4px}.ref p{font-size:.875rem;opacity:.92}
.ref .btn{margin-top:12px;background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(255,255,255,.35)}
.foot{padding:12px 20px 48px;font-size:.8125rem;color:var(--ink-2);text-align:center;line-height:1.7}
/* 결제 시트 */
.dim{position:fixed;inset:0;background:rgba(20,20,30,.5);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;z-index:30}
.dim.on{opacity:1;visibility:visible;transition:opacity .2s}
.sh{position:fixed;left:50%;bottom:0;width:min(100%,var(--shell));transform:translate(-50%,105%);background:var(--card);border-radius:28px 28px 0 0;padding:18px 20px calc(20px + env(safe-area-inset-bottom));z-index:31;visibility:hidden;transition:transform .28s var(--ease),visibility 0s .28s;max-height:92dvh;overflow:auto}
.sh.on{transform:translate(-50%,0);visibility:visible;transition:transform .28s var(--ease)}
.sh .grab{width:44px;height:5px;border-radius:9px;background:var(--bg-2);margin:0 auto 12px}
.sh h2{font:400 1.4rem/1.3 var(--f-title);margin-bottom:10px}
.sum{display:grid;gap:8px;padding:14px;border-radius:var(--r-sm);background:var(--bg);font-size:.9375rem}
.sum div{display:flex;justify-content:space-between;gap:10px}.sum .tot{border-top:2px dashed var(--bg-2);padding-top:8px;font-weight:900;font-size:1.0625rem}
.sum .off{color:var(--pri-d);font-weight:700}
.sel{display:grid;gap:8px;margin:12px 0}
.sel label{display:flex;gap:10px;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 2px var(--bg-2);font-weight:700}
.sel input{width:20px;height:20px;accent-color:var(--pri)}
.agree{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:.8125rem;color:var(--ink-2);line-height:1.7}
.agree input{width:22px;height:22px;margin-top:2px;accent-color:var(--pri);flex:none}
.btn[disabled]{background:var(--ink-3);box-shadow:0 6px 0 var(--ink-2);cursor:not-allowed}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:99px;font-weight:700;font-size:.875rem;opacity:0;pointer-events:none;transition:.25s;z-index:40;max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* 보관함 */
.ppl{display:grid;gap:16px;margin-top:16px}
.pp{background:var(--card);border-radius:var(--r);box-shadow:0 6px 0 var(--bg-2);padding:16px 16px 12px}
.pp header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pp .av{width:52px;height:52px;border-radius:50%;background:var(--acc-bg);display:grid;place-items:center;flex:none;overflow:hidden}
.pp .av svg,.pp .av img{width:46px;height:46px}
.pp h3{font:400 1.2rem/1.2 var(--f-title)}.pp small{color:var(--ink-2);font-size:.8125rem}
.rp{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--bg-2)}
.rp .n{flex:1;font-weight:700}.rp .n small{display:block;font-weight:400}
.rp a.o{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:99px;background:var(--pri);color:#fff;font-weight:900;font-size:.875rem;text-decoration:none}
.rp a.l{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:99px;box-shadow:inset 0 0 0 2px var(--bg-2);font-weight:700;font-size:.875rem;text-decoration:none;color:var(--ink)}
.empty{margin-top:14px;text-align:center;color:var(--ink-2);padding:22px;border:2.5px dashed var(--ink-3);border-radius:var(--r)}
.acct{margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);background:var(--acc-bg);font-size:.875rem;line-height:1.7}
@media (prefers-reduced-motion:reduce){.sh,.dim,.toast{transition:none}}