:root{
  --bg:#0E1020; --surface:#171B33; --line:#2B315C; --text:#F3F4FA; --muted:#A9B0CF;
  --amber:#FFC83D; --s:#FFC83D; --a:#B9A0FF; --b:#62D6C6; --danger:#FF7A8A;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans KR',system-ui,sans-serif;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
#app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:8px;padding:12px 16px;position:sticky;top:0;background:var(--bg);z-index:5}
.top h1{margin:0;font-size:18px;font-weight:900;letter-spacing:-.5px;flex:1}
.top .back{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:22px;margin-left:-8px}
.top .who{font-size:13px;color:var(--muted)}
.btn-sm{min-height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px;font-weight:700}
main{flex:1;padding:8px 16px 110px;display:flex;flex-direction:column;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card h2{margin:0;font-size:16px;font-weight:900}
.muted{color:var(--muted);font-size:12px;line-height:1.6}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.box-item{display:flex;flex-direction:column;gap:10px}
.box-item .name{font-size:17px;font-weight:900}
.box-item.has-img{position:relative;display:block;padding:0;min-height:380px;overflow:hidden;background:radial-gradient(120% 80% at 50% 28%,#2A2F66 0%,var(--surface) 55%,var(--bg) 100%)}
.box-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.box-body{position:absolute;left:0;right:0;bottom:0;padding:56px 18px 18px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(to top,rgba(14,16,32,.96) 55%,rgba(14,16,32,0))}
.box-body .name{font-size:22px}
.hero-price{font-size:22px;font-weight:900;color:var(--amber)}
.hero-price small{font-size:12px;font-weight:700;color:var(--muted);margin-right:4px}
.pill{font-size:11px;font-weight:900;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pill.on{color:#1B1400;background:var(--amber);border-color:var(--amber)}
.bar{height:6px;border-radius:999px;background:var(--bg);overflow:hidden}
.bar i{display:block;height:100%;background:var(--amber)}
.tier{display:flex;align-items:center;gap:10px;font-size:15px}
.tier b{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#0E1020;font-weight:900}
.t-S{background:var(--s)}.t-A{background:var(--a)}.t-B{background:var(--b)}
.tier span.n{margin-left:auto;color:var(--muted)}
.primary{display:flex;align-items:center;justify-content:center;min-height:56px;width:100%;border:0;border-radius:14px;background:var(--amber);color:#1B1400;font-size:18px;font-weight:900}
.primary[disabled],.primary.off{background:var(--line);color:var(--muted)}
.ghost{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:15px;font-weight:700}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number]{min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 14px;font-size:16px;font-family:inherit;width:100%}
.err{color:var(--danger);font-size:13px;min-height:18px}
.chk{display:flex;align-items:flex-start;gap:12px;background:transparent;border:0;color:var(--text);text-align:left;padding:0;font-size:14px;line-height:1.5}
.chk i{width:22px;height:22px;flex:none;border-radius:6px;border:2px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:14px;color:#1B1400}
.chk.on i{background:var(--amber);border-color:var(--amber)}
.chk strong{color:var(--amber)}
.links{display:flex;gap:2px 12px;flex-wrap:wrap;line-height:1.6;font-size:12px;color:var(--muted);text-decoration:underline}
.sticky{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;background:var(--surface);border-top:1px solid var(--line);border-radius:24px 24px 0 0;padding:4px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;z-index:6}
.tabs{display:flex}
.tabs button{flex:1;padding:12px 0 10px;border:0;background:transparent;color:var(--muted);font-size:16px;font-weight:500;border-bottom:3px solid transparent}
.tabs button.on{color:var(--text);font-weight:900;border-bottom-color:var(--amber)}
.step{display:flex;align-items:center;justify-content:space-between}
.step button{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:22px}
.step button[disabled]{color:#3A4070}
.step .c{font-size:24px;font-weight:900}
.sum{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.sum .r{display:flex;justify-content:space-between}
.sum .t{padding-top:6px;border-top:1px solid var(--line);color:var(--text);font-weight:700}
.sum .t span:last-child{font-size:20px;font-weight:900}
.method{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 12px 0 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.badge{min-width:40px;height:24px;padding:0 8px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#0E1020;font-size:11px;font-weight:900}
.sheet-wrap{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.sheet-wrap .dim{position:absolute;inset:0;background:rgba(5,6,14,.7);border:0}
.sheet{position:relative;width:100%;max-width:480px;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;padding:14px 16px 28px;display:flex;flex-direction:column;gap:16px}
.sheet h3{margin:0;text-align:center;font-size:17px;font-weight:900}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid3 button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:88px;padding:10px 6px;border-radius:14px;background:var(--bg);color:var(--text);border:1px solid var(--line);font-size:13px;font-weight:700}
.grid3 button.on{border:2px solid var(--amber)}
.pts{display:flex;gap:8px}
.pts input{text-align:right}
.won{display:flex;align-items:center;gap:12px}
.won .nm{flex:1;font-size:15px;font-weight:700}
.won .v{font-size:12px;color:var(--muted)}
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:4}
.nav a{flex:1;text-align:center;padding:12px 0;font-size:12px;color:var(--muted);font-weight:700}
.nav a.on{color:var(--amber)}
.biz{font-size:11px;line-height:1.7;color:var(--muted);padding:8px 0 0}
.seq{display:flex;gap:10px;align-items:center;font-size:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.seq .no{width:44px;color:var(--muted);font-size:12px}
.seq .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seq .who{color:var(--muted);font-size:12px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stats div{background:var(--bg);border-radius:12px;padding:10px 4px}
.stats b{display:block;font-size:18px}
.stats span{font-size:11px;color:var(--muted)}
.draw{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.draw:last-child{border-bottom:0}
.thumb{width:44px;height:58px;object-fit:contain;flex:none}
.doc h3{font-size:14px;margin:0}
.doc p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
#toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%);background:#0b0d1c;border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;max-width:90%;text-align:center}
#toast.show{opacity:1}

/* 실시간 검색 중 버튼 모션 */
.live-btn { position: relative; overflow: hidden; animation: livePulse 1.4s ease-in-out infinite; }
.live-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: liveShine 1.6s linear infinite; }
.live-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #fff; animation: liveBlink 1s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 50% { box-shadow: 0 0 0 10px rgba(229,72,77,0); } }
@keyframes liveShine { from { left: -60%; } to { left: 120%; } }
@keyframes liveBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* 선택된 위치 방식 아이콘 모션 */
.sel-ico { display: inline-block; animation: selBounce 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes selBounce { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-4px) scale(1.15); } 55% { transform: translateY(0) scale(.95); } }

/* 실행 중인 위치 방식: 초록 굵은 체크 */
.sel-check { display: inline-block; margin-right: 6px; color: #00c853; font-size: 22px; font-weight: 900; line-height: 1; -webkit-text-stroke: 1.5px #00c853; text-shadow: 0 0 0 #00c853, 0 1px 2px rgba(0,0,0,.35); animation: checkPop .35s ease-out; }
@keyframes checkPop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* 재고 찾기 카드 상단 작은 버튼 (한 줄 유지) */
.btn-sm.tb { white-space: nowrap; padding-left: 9px; padding-right: 9px; font-size: 12px; }