:root{--bg:#0a0e1c;--bg2:#0b1128;--gold:#e9c46a;--gold-soft:#f2cf6b;--cream:#f6f1e6;--muted:#9aa6cc;--line:#e9c46a38;--ok:#39d59a;--danger:#ff5470;--shadow:0 24px 60px #00000080}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0}body{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;color:var(--cream);background:radial-gradient(1400px 700px at 50% -12%, #e9c46a1c, transparent 60%), radial-gradient(1100px 600px at 8% 105%, #8b6cff12, transparent 55%), radial-gradient(1100px 600px at 96% 105%, #4da6ff12, transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2));-webkit-user-select:none;user-select:none;min-height:100dvh;font-family:Pretendard,Pretendard Variable,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif;overflow-x:hidden}.wrap{flex-direction:column;max-width:min(1900px,96vw);min-height:100dvh;margin:0 auto;padding:clamp(10px,1.8vw,22px) clamp(16px,4vw,32px);display:flex}.view{flex-direction:column;flex:1;display:none}.view.active{animation:.35s fade;display:flex}@keyframes fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.gold{color:var(--gold)}.btn{appearance:none;cursor:pointer;border:none;border-radius:18px;font-weight:800;transition:transform .12s,filter .2s}.btn:active{transform:scale(.96)}.btn-lg{flex:130px;min-width:130px;max-width:220px;padding:18px 22px;font-size:clamp(16px,2.2vw,19px)}.btn-ghost{color:var(--cream);border:1px solid var(--line);background:#ffffff0d}.btn-gold{background:linear-gradient(180deg, var(--gold-soft), var(--gold));color:#1a1205}.btn-save{background:linear-gradient(180deg, #46e0a6, var(--ok));color:#04261a}.row{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;display:flex}body:has(#splash){background:var(--bg)}body:not(.app-ready) #splash{animation-play-state:paused}#splash{z-index:999;background:linear-gradient(180deg, var(--bg), var(--bg2));flex-direction:column;justify-content:center;align-items:center;gap:14px;animation:2.4s forwards splashOut;display:flex;position:fixed;inset:0}@keyframes splashOut{0%,74.99%{opacity:1;pointer-events:auto}75%{opacity:1;pointer-events:none}95.83%,to{opacity:0;pointer-events:none}}#splash .logo{filter:drop-shadow(0 10px 24px #e9c46a59);font-size:clamp(48px,10vw,72px);animation:.6s splashPop}#splash .name{letter-spacing:-.01em;color:var(--cream);font-size:clamp(26px,5vw,38px);font-weight:800}#splash .stagline{color:var(--muted);font-size:clamp(13px,2vw,16px)}#splash .sbar{background:#e9c46a33;border-radius:99px;width:190px;height:3px;margin-top:4px;display:block;overflow:hidden}#splash .sbar i{background:linear-gradient(90deg, var(--gold), var(--gold-soft));will-change:transform;border-radius:99px;width:40%;height:100%;animation:1.15s ease-in-out infinite splashBar;display:block}@keyframes splashPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){#splash .logo,#splash .sbar i{animation:none}}@keyframes splashBar{0%{transform:translate(-76px)}to{transform:translate(190px)}}.brand{text-align:center;margin:0 auto clamp(10px,1.6vw,18px)}.brand h1{letter-spacing:-.01em;margin:0;font-size:clamp(28px,5vw,48px);font-weight:800;line-height:1.05}.brand h1 .gold{background:linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);color:#0000;-webkit-background-clip:text;background-clip:text}.tagline-top{color:var(--muted);letter-spacing:.04em;border:1px solid var(--line);background:linear-gradient(160deg,#ffffff09,#ffffff03);border-radius:999px;margin:10px 0 0;padding:7px 20px;font-size:clamp(12px,1.5vw,15px);font-weight:500;display:inline-block}.enginebar{border:1px solid var(--line);max-width:520px;color:var(--muted);text-align:center;background:#ffffff08;border-radius:14px;margin:14px auto 0;padding:10px 16px;font-size:13px;display:none}.enginebar.show{display:block}.enginebar b{color:var(--gold)}.enginebar.err{background:#ff547014;border-color:#ff547066}.enginebar.err b{color:var(--danger)}.grid{flex:1;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr);gap:clamp(14px,2.3vw,24px);min-height:0;display:grid}@media (width>=760px){.grid{grid-template-rows:none;grid-template-columns:repeat(3,1fr);align-content:center}.tile{aspect-ratio:16/9}}.tile{cursor:pointer;background:#05070f;border-radius:24px;min-height:0;transition:transform .15s,box-shadow .25s;position:relative;overflow:hidden;box-shadow:0 14px 34px #0006}.tile:hover{box-shadow:0 18px 44px #0000008c, 0 0 0 2px var(--c), 0 0 48px 6px color-mix(in srgb, var(--c) 55%, transparent)}.tile:active{transform:scale(.97)}.tile:after{content:"";background:var(--c);z-index:2;width:5px;position:absolute;top:0;bottom:0;left:0}.tile-media{position:absolute;inset:0}.tile-media .thumb,.tile-media .preview{object-fit:cover;width:100%;height:100%;transition:opacity .25s,transform .3s;position:absolute;inset:0}.tile-media .preview{opacity:0}.tile-media .preview.playing{opacity:1}.tile-media:has(.preview.playing) .thumb{opacity:0}.tile:hover .tile-media .thumb,.tile:hover .tile-media .preview{transform:scale(1.05)}.tile-tint{background:var(--c);opacity:0;mix-blend-mode:overlay;z-index:1;pointer-events:none;transition:opacity .25s;position:absolute;inset:0}.tile:hover .tile-tint{opacity:.4}.tile-scrim{z-index:1;background:linear-gradient(#05070f0d 35%,#05070feb 100%);position:absolute;inset:0}.tile-body{z-index:2;flex-direction:column;gap:6px;padding:clamp(14px,2.4vw,24px);display:flex;position:absolute;bottom:0;left:0;right:0}.tile-body .gname-row{align-items:center;gap:9px;display:flex}.tile-body .ic{color:#fff;filter:drop-shadow(0 4px 10px #00000080);flex:none;display:flex}.tile-body .ic svg{width:clamp(20px,2.8vw,28px);height:clamp(20px,2.8vw,28px);display:block}.tile-body .gname{font-size:clamp(19px,2.6vw,28px);font-weight:800}.tile-body .gsub{color:var(--muted);font-size:clamp(12px,1.6vw,15px);line-height:1.4}.privacylink{color:#ffffffd1;margin:10px auto 0;font-family:Pretendard Variable,Pretendard,SUIT,Noto Sans KR,system-ui,sans-serif;font-size:11px;font-weight:600;text-decoration:none;transition:color .2s;display:inline-block}.privacylink:hover{color:var(--gold);text-decoration:underline}.topbar{align-items:center;gap:12px;margin-bottom:clamp(14px,2.5vw,22px);display:flex}.back{appearance:none;border:1px solid var(--line);color:var(--cream);cursor:pointer;background:#ffffff0a;border-radius:14px;padding:11px 16px;font-size:15px;font-weight:600}.back:active{transform:scale(.96)}.chip{border:1px solid var(--line);background:#ffffff08;border-radius:14px;align-items:center;gap:9px;margin-left:auto;padding:9px 16px;font-size:clamp(15px,2vw,18px);font-weight:700;display:inline-flex}.chip .e{font-size:20px;display:inline-flex}.chip .e svg{width:20px;height:20px;display:block}.stage{border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/9;background:#000;border-radius:20px;position:relative;overflow:hidden}.stage video{object-fit:cover;background:#000;width:100%;height:100%;display:block}.overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#070b1a8c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.count{color:var(--gold);text-shadow:0 0 50px #e9c46a80;font-size:clamp(80px,22vw,200px);font-weight:800;animation:.9s pop}@keyframes pop{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.recpill{color:#ffd7df;background:#ff547029;border:1px solid #ff547080;border-radius:999px;align-items:center;gap:9px;padding:8px 14px;font-size:14px;font-weight:700;display:inline-flex;position:absolute;top:14px;left:14px}.recpill .d{background:var(--danger);width:11px;height:11px;box-shadow:0 0 14px var(--danger);border-radius:50%;animation:1s infinite blink}@keyframes blink{50%{opacity:.25}}.progress{opacity:0;background:#ffffff14;border-radius:99px;height:7px;margin-top:14px;transition:opacity .2s;overflow:hidden}.progress.show{opacity:1}.progress>i{background:linear-gradient(90deg, var(--gold), var(--gold-soft));width:0%;height:100%;display:block}.controls{flex-direction:column;align-items:center;gap:16px;margin-top:clamp(18px,3vw,28px);display:flex}.hint{color:var(--muted);text-align:center;min-height:1.4em;font-size:clamp(14px,2vw,17px)}.btn-rec{color:#1a1205;background:radial-gradient(circle at 50% 35%, var(--gold-soft), var(--gold));border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:clamp(150px,40vw,200px);height:clamp(150px,40vw,200px);font-size:clamp(18px,2.6vw,22px);display:flex;box-shadow:0 0 0 10px #e9c46a1f,0 20px 50px #e9c46a40}.btn-rec .ic{font-size:clamp(40px,9vw,60px)}.btn-rec[disabled]{filter:grayscale(.6)brightness(.7);cursor:default}.footer{text-align:center;color:var(--muted);letter-spacing:.04em;margin-top:auto;padding-top:22px;font-size:12px}.result-card{text-align:center;width:100%;max-width:520px;margin:auto}.result-card h2{margin:6px 0;font-size:clamp(24px,4vw,34px)}.result-card p{color:var(--muted);margin:6px 0 22px;font-size:clamp(14px,2vw,17px)}.spinner{border:5px solid #e9c46a33;border-top-color:var(--gold);border-radius:50%;width:64px;height:64px;margin:0 auto 22px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.qrbox{box-shadow:var(--shadow);background:#fff;border-radius:24px;margin:10px 0 6px;padding:20px;display:inline-block}.qrbox img{width:clamp(220px,55vw,300px);height:auto;display:block}.savemode{color:var(--muted);margin-top:14px;font-size:12px}.errbox{color:#ffd7df;text-align:left;background:#ff547014;border:1px solid #ff547066;border-radius:16px;margin:18px 0;padding:18px;font-size:14px;line-height:1.6}