:root{--bg:#0f1020;--bg-2:#181a33;--panel:#ffffff0f;--panel-border:#ffffff1a;--text:#f2f3ff;--muted:#9aa0c3;--primary:#ff4d8d;--primary-2:#ff8a3d;--danger:#ff5a5a;--ok:#3ddc97;--radius:16px}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--text);background:var(--bg);font-family:Pretendard,-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Malgun Gothic,sans-serif}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}input,select{font:inherit;color:var(--text);border:1px solid var(--panel-border);background:#0000004d;border-radius:10px;min-width:0;padding:8px 10px}input:focus,select:focus{outline:2px solid var(--primary);outline-offset:-1px}select option{background:var(--bg-2)}.app{background:radial-gradient(circle at 20% 10%, #ff4d8d2e, transparent 40%), radial-gradient(circle at 80% 90%, #5078ff2e, transparent 45%), var(--bg);min-height:100vh;padding:24px}.app--green{background:#00b140}.layout{grid-template-columns:minmax(320px,440px) minmax(0,1fr);gap:24px;max-width:1280px;min-height:calc(100vh - 48px);margin:0 auto;display:grid}.stage,.results{border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#14162dd9;border-radius:24px;padding:28px}.settings-btn{border:1px solid var(--panel-border);background:#14162dd9;border-radius:999px;padding:8px 14px;position:absolute;top:16px;right:16px}.settings-btn:hover{background:#282c50f2}.stage{flex-direction:column;align-items:center;gap:24px;display:flex;position:relative}.stage__title{text-align:center;background:linear-gradient(90deg, var(--primary), var(--primary-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;padding:0 72px;font-size:28px;font-weight:800}.stage__hint{color:var(--muted);margin:-8px 0 0;font-size:13px}.count{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.count__label{color:var(--muted);font-weight:700}.count__presets{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.count__stepper{align-items:center;gap:8px;display:flex}.count__stepper button{border:1px solid var(--panel-border);background:var(--panel);border-radius:12px;width:40px;height:40px;font-size:20px}.count__stepper input{text-align:center;width:90px;height:40px;font-size:18px;font-weight:700}.chip{border:1px solid var(--panel-border);background:var(--panel);border-radius:999px;padding:8px 16px;font-weight:600}.chip--active{background:linear-gradient(90deg, var(--primary), var(--primary-2));border-color:#0000}.open-btn{background:linear-gradient(90deg, var(--primary), var(--primary-2));border:none;border-radius:18px;width:100%;padding:18px;font-size:22px;font-weight:800;transition:transform .1s;box-shadow:0 10px 30px #ff4d8d59}.open-btn:not(:disabled):hover{transform:translateY(-2px)}.open-btn:not(:disabled):active{transform:translateY(1px)}.giftbox{background:0 0;border:none;place-items:center;width:240px;height:240px;margin:16px 0 0;padding:0;display:grid;position:relative}.giftbox__glow{opacity:0;pointer-events:none;background:radial-gradient(circle,#ffc8508c,#0000 65%);border-radius:50%;transition:opacity .4s,transform .4s;position:absolute;inset:-20px;transform:scale(.6)}.giftbox__image{object-fit:contain;max-width:100%;max-height:100%;position:relative}.giftbox__body{width:190px;height:190px;margin-top:30px;position:relative}.giftbox__base{background:linear-gradient(160deg,#ff5f9a,#c3266a);border-radius:8px 8px 16px 16px;height:130px;position:absolute;bottom:0;left:10px;right:10px;overflow:hidden;box-shadow:inset 0 -14px #00000026,0 20px 40px #0006}.giftbox__ribbon{background:linear-gradient(90deg,#ffd34d,#ffb020);width:30px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.giftbox__mark{color:#fff;text-shadow:0 4px #0003;place-items:center;font-size:64px;font-weight:900;display:grid;position:absolute;inset:0}.giftbox__lid{z-index:2;transform-origin:20% 100%;background:linear-gradient(160deg,#ff77ab,#d9317a);border-radius:10px;height:46px;transition:transform .5s cubic-bezier(.2,1.6,.4,1);position:absolute;top:18px;left:0;right:0;box-shadow:0 6px #00000026}.giftbox__lid:after{content:"";background:linear-gradient(90deg,#ffd34d,#ffb020);width:34px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.giftbox__bow{width:90px;height:40px;position:absolute;top:-34px;left:50%;transform:translate(-50%)}.giftbox__bow span{border:10px solid #ffc22e;border-radius:50% 50% 10%;width:44px;height:36px;position:absolute;bottom:0}.giftbox__bow span:first-child{left:0;transform:rotate(-20deg)}.giftbox__bow span:last-child{right:0;transform:scaleX(-1)rotate(-20deg)}.giftbox--idle{animation:2.6s ease-in-out infinite float}.giftbox--idle:hover{animation-duration:1s}.giftbox--opening{animation:.35s ease-in-out infinite shake}.giftbox--opening .giftbox__glow{opacity:.6;animation:.5s ease-in-out infinite alternate pulse;transform:scale(1)}.giftbox--done .giftbox__lid{transform:translate(-30px,-60px)rotate(-30deg)}.giftbox--done .giftbox__glow{opacity:1;transform:scale(1.1)}.giftbox--done .giftbox__image{animation:.4s ease-out pop}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{0%,to{transform:rotate(0)scale(1.02)}25%{transform:rotate(-7deg)scale(1.05)}75%{transform:rotate(7deg)scale(1.05)}}@keyframes pulse{to{transform:scale(1.2)}}@keyframes pop{50%{transform:scale(1.15)}}.results{flex-direction:column;gap:20px;min-width:0;display:flex}.results__header{align-items:baseline;gap:10px;display:flex}.results__header h2{margin:0;font-size:22px}.results__count{color:var(--muted);font-weight:700}.results__empty{min-height:240px;color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.results__empty-icon{font-size:56px}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.summary{flex-direction:column;gap:6px;display:flex}.summary__row{background:var(--panel);border-left:4px solid var(--grade);border-radius:12px;align-items:center;gap:12px;padding:8px 12px;display:flex}.summary__grade{color:var(--grade);min-width:28px;font-size:12px;font-weight:800}.summary__name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:600;overflow:hidden}.summary__count{font-size:18px;font-weight:800}.cards{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;display:grid}.card{background:linear-gradient(180deg, color-mix(in srgb, var(--grade) 25%, transparent), var(--panel));border:2px solid color-mix(in srgb, var(--grade) 70%, transparent);opacity:0;border-radius:14px;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;animation:.45s cubic-bezier(.2,1.4,.4,1) forwards reveal;display:flex}.card--legendary,.card--epic{box-shadow:0 0 18px color-mix(in srgb, var(--grade) 60%, transparent)}.card--legendary{animation:.45s cubic-bezier(.2,1.4,.4,1) forwards reveal,1.6s ease-in-out .5s infinite alternate shine}.card__name{text-align:center;word-break:keep-all;font-size:13px;font-weight:700}@keyframes reveal{0%{opacity:0;transform:translateY(16px)scale(.6)rotateY(90deg)}to{opacity:1;transform:none}}@keyframes shine{to{box-shadow:0 0 34px color-mix(in srgb, var(--grade) 90%, transparent)}}.thumb{background:color-mix(in srgb, var(--grade) 30%, #1b1d38);border-radius:12px;flex:none;place-items:center;font-weight:800;display:grid;overflow:hidden}.thumb img{object-fit:cover;width:100%;height:100%}.history{background:var(--panel);border-radius:12px;margin-top:auto;padding:12px 16px;font-size:14px}.history summary{cursor:pointer;justify-content:space-between;font-weight:700;display:flex}.history ul{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 16px;margin:12px 0 0;padding:0;list-style:none;display:grid}.history li{gap:6px;display:flex}.history li b{margin-left:auto}.btn{border:1px solid var(--panel-border);background:var(--panel);border-radius:12px;padding:10px 16px;font-weight:600}.btn--primary{background:linear-gradient(90deg, var(--primary), var(--primary-2));border:none}.btn--ghost:hover{background:#ffffff1f}.btn--danger{color:var(--danger)}.btn--small{padding:6px 12px;font-size:13px}.btn--block{width:100%}.icon-btn{background:0 0;border:none;border-radius:8px;min-width:32px;height:32px;padding:0 6px;font-size:14px}.icon-btn:hover{background:#ffffff1a}.icon-btn--danger:hover{background:#ff5a5a33}.link-btn{color:var(--muted);background:0 0;border:none;font-size:13px;text-decoration:underline}.muted{color:var(--muted)}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:var(--bg-2);border:1px solid var(--panel-border);border-radius:20px;flex-direction:column;width:min(760px,100%);max-height:calc(100vh - 32px);display:flex;overflow:hidden}.modal__header,.modal__footer{align-items:center;padding:16px 20px;display:flex}.modal__header{border-bottom:1px solid var(--panel-border);justify-content:space-between}.modal__header h2{margin:0;font-size:20px}.modal__footer{border-top:1px solid var(--panel-border);justify-content:flex-end;gap:8px}.modal__body{padding:8px 20px 20px;overflow-y:auto}.section{border:none;flex-direction:column;gap:12px;margin:0;padding:16px 0 0;display:flex}.section legend{color:var(--primary);margin-bottom:4px;padding:0;font-size:13px;font-weight:800}.field{flex-direction:column;gap:6px;display:flex}.field>span{color:var(--muted);font-size:13px}.upload{border:2px dashed var(--panel-border);cursor:pointer;border-radius:12px;place-items:center;width:64px;height:64px;font-size:28px;display:grid;overflow:hidden}.upload img{object-fit:contain;width:100%;height:100%}.items{flex-direction:column;gap:8px;display:flex}.items__head,.item-row{grid-template-columns:56px minmax(0,1fr) 84px 96px auto;align-items:center;gap:8px;display:grid}.items__head{color:var(--muted);padding:0 8px;font-size:12px}.item-row{background:var(--panel);border-radius:12px;padding:8px}.item-row__img{cursor:pointer;position:relative}.item-row__img:hover:after{content:"변경";background:#0000008c;border-radius:12px;place-items:center;width:48px;font-size:12px;display:grid;position:absolute;inset:0}.item-row__prob{text-align:right}.item-row__actions{gap:2px;display:flex}.total{border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;font-size:14px;display:flex}.total--ok{color:var(--ok);background:#3ddc971f}.total--warn{color:#ffb020;background:#ffb0201f}@media (width<=860px){.app{padding:16px}.layout{grid-template-columns:minmax(0,1fr);min-height:0}.stage,.results{padding:20px}.settings-btn{top:12px;right:12px}}@media (width<=600px){.items__head{display:none}.item-row{grid-template-columns:56px minmax(0,1fr) minmax(0,1fr)}.item-row__name{grid-column:2/4}.item-row__img{grid-row:span 2}.item-row__actions{grid-column:1/-1;justify-content:flex-end}.cards{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}}.modal__footer{flex-wrap:wrap}.usage{min-width:200px;color:var(--muted);flex-direction:column;flex:1;gap:6px;margin-right:auto;font-size:13px;display:flex}.usage b{color:var(--text)}.usage__bar{background:#ffffff1a;border-radius:999px;max-width:280px;height:6px;overflow:hidden}.usage__fill{border-radius:inherit;background:var(--ok);height:100%;transition:width .3s}.usage--warn .usage__fill{background:#ffb020}.usage--full .usage__fill{background:var(--danger)}.usage--warn .usage__note{color:#ffb020}.usage--full .usage__note{color:var(--danger)}.obs-field{flex:1;min-width:140px}.copy-field{gap:8px;display:flex}.copy-field input{flex:1;font-size:13px}.section+.section,.section+small+.section{margin-top:16px}