/* VENUPOP Studio 부스(키오스크) 화면 — 태블릿 가로·세로 모두, 큰 버튼 */
:root { --c1:#6d28d9; --c2:#db2777; --bg:#0b0b12; --ink:#fff; --sub:rgba(255,255,255,.7); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:manipulation; overscroll-behavior:none; }
#app { position:fixed; inset:0; display:flex; flex-direction:column; }
.scr { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom)); text-align:center; }
.grad { background:linear-gradient(135deg,var(--c1),var(--c2)); }
.gtxt { background:linear-gradient(135deg,#fff,#f5d0fe); -webkit-background-clip:text; background-clip:text; color:transparent; }
h1.big { font-size:clamp(2rem,6vw,4.2rem); font-weight:900; margin:.2em 0; letter-spacing:-.03em; line-height:1.15; }
p.sub { font-size:clamp(1rem,2.6vw,1.6rem); color:var(--sub); margin:.3em 0 1.2em; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border:0; border-radius:999px; padding:1.1rem 2.2rem; font-size:clamp(1.1rem,2.6vw,1.6rem); font-weight:800; color:#fff; font-family:inherit; cursor:pointer; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 14px 40px -12px rgba(0,0,0,.6); transition:transform .12s; }
.btn:active { transform:scale(.96); }
.btn.ghost { background:rgba(255,255,255,.12); box-shadow:none; border:1px solid rgba(255,255,255,.25); }
.btn.sm { padding:.7rem 1.3rem; font-size:1rem; }
.btn[disabled] { opacity:.45; }
.row { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; align-items:center; }
.top-bar { position:absolute; top:max(14px,env(safe-area-inset-top)); left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; font-size:1rem; color:var(--sub); pointer-events:none; }
.top-bar .btn { pointer-events:auto; }

/* 대기 화면 */
.idle { background:radial-gradient(1200px 700px at 80% -10%,rgba(219,39,119,.35),transparent 60%),radial-gradient(1000px 600px at 0% 110%,rgba(109,40,217,.45),transparent 60%),var(--bg); cursor:pointer; }
.idle .logo { max-width:min(60vw,520px); max-height:30vh; object-fit:contain; margin-bottom:12px; }
.idle .tap { margin-top:28px; animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
.slides { position:absolute; inset:0; z-index:0; }
.slides img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s; }
.slides img.on { opacity:1; }
.slides + .idle-fg { position:relative; z-index:1; background:rgba(0,0,0,.45); border-radius:28px; padding:28px 36px; backdrop-filter:blur(6px); }
.pend { position:absolute; bottom:12px; right:16px; font-size:.8rem; color:var(--sub); }

/* 선택 카드 */
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; width:min(900px,92vw); }
.choice { background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.15); border-radius:28px; padding:36px 20px; font-size:1.6rem; font-weight:800; color:#fff; cursor:pointer; font-family:inherit; }
.choice i { display:block; font-size:3.2rem; margin-bottom:14px; }
.choice:active { transform:scale(.97); }
.tpls { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(30vw,200px),1fr)); gap:16px; width:min(1100px,94vw); max-height:68vh; overflow-y:auto; padding:6px; }
.tpl { background:repeating-conic-gradient(#2a2a35 0% 25%,#22222c 0% 50%) 0 0/18px 18px; border:3px solid transparent; border-radius:18px; padding:8px; cursor:pointer; color:#fff; font-family:inherit; }
.tpl img { width:100%; aspect-ratio:3/4; object-fit:contain; display:block; }
.tpl .nm { font-size:1rem; font-weight:700; margin-top:6px; }
.tpl.def { display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1.2rem; aspect-ratio:3/4.4; background:rgba(255,255,255,.08); }

/* 촬영 */
.stage { position:relative; overflow:hidden; border-radius:22px; background:#000; box-shadow:0 0 0 4px rgba(255,255,255,.15); }
.stage video, .stage canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mirror { transform:scaleX(-1); }
.count { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(6rem,22vw,14rem); font-weight:900; color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.6); pointer-events:none; }
.count.pop { animation:pop .9s ease-out; }
@keyframes pop { 0% { transform:scale(1.6); opacity:0; } 30% { transform:scale(1); opacity:1; } 100% { opacity:.2; } }
.flash { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:50; }
.flash.go { animation:fl .45s ease-out; }
@keyframes fl { 0% { opacity:.95; } 100% { opacity:0; } }
.shotlbl { font-size:1.3rem; font-weight:800; margin-bottom:12px; }
.rec { position:absolute; top:14px; left:14px; background:#dc2626; color:#fff; border-radius:999px; padding:.3rem .9rem; font-weight:800; display:flex; gap:.4rem; align-items:center; }
.rec i { animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:.2; } }
.review img { max-height:62vh; max-width:88vw; border-radius:18px; }

/* 고르기·필터 */
.picks { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(28vw,190px),1fr)); gap:12px; width:min(1000px,94vw); max-height:62vh; overflow-y:auto; }
.pick { position:relative; border:4px solid transparent; border-radius:16px; overflow:hidden; cursor:pointer; background:#000; }
.pick img { width:100%; display:block; aspect-ratio:3/4; object-fit:cover; }
.pick.on { border-color:#f0abfc; }
.pick .no { position:absolute; top:8px; left:8px; width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.3rem; }
.fl-wrap { display:flex; gap:24px; align-items:center; justify-content:center; width:100%; max-height:76vh; }
.fl-prev { max-height:70vh; max-width:52vw; border-radius:14px; box-shadow:0 20px 60px -20px #000; background:#fff; }
.fl-list { display:flex; flex-direction:column; gap:10px; }
.fl-list button { min-width:170px; }
.fl-list button.on { outline:3px solid #f0abfc; }
@media (orientation:portrait) { .fl-wrap { flex-direction:column; } .fl-prev { max-width:86vw; max-height:56vh; } .fl-list { flex-direction:row; flex-wrap:wrap; justify-content:center; } .fl-list button { min-width:auto; } }

/* QR */
.qr-wrap { display:flex; gap:40px; align-items:center; justify-content:center; flex-wrap:wrap; }
.qr { background:#fff; border-radius:24px; padding:18px; width:min(46vh,70vw,420px); }
.qr svg { width:100%; height:auto; display:block; }
.qr-res { max-height:56vh; max-width:40vw; border-radius:16px; background:#fff; }
@media (orientation:portrait) { .qr-res { max-width:70vw; max-height:34vh; } .qr { width:min(34vh,70vw); } }
.timer { font-size:1rem; color:var(--sub); margin-top:10px; }

/* 키패드 */
.pad-wrap { display:flex; gap:28px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pad { display:grid; grid-template-columns:repeat(3,88px); gap:12px; }
.pad button { height:76px; border-radius:20px; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:2rem; font-weight:800; font-family:inherit; cursor:pointer; }
.pad button:active { background:rgba(255,255,255,.3); }
.pad .ok { background:linear-gradient(135deg,var(--c1),var(--c2)); }
.disp { font-size:2.6rem; font-weight:900; letter-spacing:.3em; min-height:3.4rem; margin:6px 0 14px; font-family:ui-monospace,monospace; }
.scan { width:min(44vh,46vw,420px); aspect-ratio:1; }
.scan .box { position:absolute; inset:14%; border:4px solid rgba(255,255,255,.85); border-radius:18px; box-shadow:0 0 0 999px rgba(0,0,0,.35); }
.err { color:#fca5a5; font-weight:700; min-height:1.5em; margin-top:8px; }

/* 기타 */
.msg-box { max-width:640px; line-height:1.7; font-size:1.2rem; color:var(--sub); }
.msg-box b { color:#fff; }
.toast { position:fixed; left:50%; bottom:40px; transform:translateX(-50%); background:rgba(0,0,0,.85); color:#fff; padding:14px 26px; border-radius:999px; font-size:1.1rem; z-index:60; }
.spin { width:64px; height:64px; border-radius:50%; border:6px solid rgba(255,255,255,.2); border-top-color:#fff; animation:sp 1s linear infinite; margin:0 auto 18px; }
@keyframes sp { to { transform:rotate(360deg); } }
.hot { position:fixed; width:72px; height:72px; z-index:40; }
.hot.tr { top:0; right:0; } .hot.tl { top:0; left:0; }
input.code { font-size:2.4rem; font-weight:900; letter-spacing:.3em; text-align:center; width:min(420px,86vw); padding:14px; border-radius:18px; border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; text-transform:uppercase; font-family:ui-monospace,monospace; }
input.name { font-size:1.2rem; text-align:center; width:min(420px,86vw); padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; margin-top:10px; }
.menu { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; width:min(820px,92vw); }
.menu .btn { width:100%; }
.cams { display:flex; flex-direction:column; gap:10px; width:min(560px,90vw); }
#cam-hold { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }