:root { color-scheme:light; --blue:#1846e5; --blue-press:#1238c4; --tint:#eaefff; --ink:#15171a; --muted:#6b7079; --line:rgba(20,24,32,.07); --bg:#f4f5f7; --fail:#c8322d; --night:#0b0c0f;
  --spring:cubic-bezier(.34,1.56,.64,1); --firm:cubic-bezier(.2,0,0,1);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; color:var(--ink); background:var(--bg); -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
:root.dark { color-scheme:dark; background:var(--night); }
* { box-sizing:border-box; }
html,body { margin:0; }
body { min-height:100dvh; }
button { font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer; touch-action:manipulation; transition:transform .26s var(--spring),background-color .2s,opacity .2s; }
button:active:not(:disabled) { transform:scale(.96); transition-duration:.1s,.2s,.2s; transition-timing-function:ease-out; }
button:disabled { cursor:default; }
button:focus-visible { outline:3px solid rgba(24,70,229,.35); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none!important; }
@keyframes enter { from { opacity:0; transform:translateY(6px); } }
@keyframes pop { from { opacity:0; transform:scale(.94); } }
@keyframes rise { from { opacity:0; transform:translateY(10px) scale(.96); } }
@keyframes spin { to { rotate:1turn; } }
@keyframes fade { from { opacity:0; } }
@keyframes live { 70%,100% { box-shadow:0 0 0 7px rgba(91,128,255,0); } }

/* Home */
.top { width:min(100%,480px); margin:0 auto; padding:max(22px,env(safe-area-inset-top)) 22px 4px; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.view { animation:enter .22s var(--firm) both; }
.home { width:min(100%,480px); margin:0 auto; padding:14px 16px max(24px,env(safe-area-inset-bottom)); }
.phones { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.phone { display:flex; align-items:center; gap:14px; min-height:74px; padding:14px 14px 14px 16px; border-radius:20px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.05); animation:pop .24s var(--spring) both; }
.phone[data-ready=false] { background:rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px var(--line); }
.avatar { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--tint); color:var(--blue); font-size:18px; font-weight:700; }
.phone[data-ready=false] .avatar { background:#e9ebef; color:#a0a5ad; }
.info { flex:1; min-width:0; display:grid; gap:2px; }
.name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:17px; font-weight:650; letter-spacing:-.01em; }
.phone[data-ready=false] .name { color:#50555d; }
.line { display:flex; align-items:center; gap:8px; min-width:0; }
.state,.reason { font-size:14px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.state.fail { color:var(--fail); font-weight:600; }
.tag { font-size:13px; color:#a0a5ad; white-space:nowrap; animation:fade .2s ease-out both; }
.connect { position:relative; flex:none; min-width:74px; height:42px; padding:0 18px; border-radius:999px; background:var(--blue); color:#fff; font-size:16px; font-weight:650; }
.connect:hover:not(:disabled) { background:#2253f0; }
.connect:active:not(:disabled) { background:var(--blue-press); }
.connect:disabled:not([aria-busy=true]):not(.spinning) { opacity:.35; }
.connect[aria-busy=true],.connect.spinning { background:var(--tint); color:var(--blue); }
.connect.spinning span { visibility:hidden; }
.connect .ring { position:absolute; inset:0; margin:auto; display:none; }
.connect.spinning .ring { display:block; }
.ring { width:20px; height:20px; border-radius:50%; border:2.5px solid rgba(24,70,229,.18); border-top-color:var(--blue); animation:spin .8s linear infinite,fade .2s ease-out both; }
.ring.wide { display:block; width:26px; height:26px; margin:48px auto; }
.notice { margin:0; padding:56px 24px; text-align:center; font-size:16px; color:var(--muted); }
#key,#nodevices { display:grid; place-items:center; min-height:calc(100dvh - 160px); }

/* Session */
.session { position:fixed; inset:0; display:grid; grid-template-rows:auto minmax(0,1fr); background:var(--night); color:#f3f4f6;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.bar { display:flex; align-items:center; justify-content:space-between; gap:12px; width:min(100%,480px); margin:0 auto 10px; }
.who { display:flex; align-items:center; gap:9px; min-width:0; height:40px; margin:0; padding:0 16px 0 14px; border-radius:999px; background:rgba(255,255,255,.08); font-size:15px; font-weight:600; }
.who span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dot { flex:none; width:8px; height:8px; border-radius:50%; background:#5b80ff; box-shadow:0 0 0 0 rgba(91,128,255,.55); animation:live 1.8s ease-out infinite; }
.session.idle .dot { background:#5d6169; box-shadow:none; animation:none; }
#stop { flex:none; height:40px; padding:0 20px; border-radius:999px; background:#fff; color:#111; font-size:15px; font-weight:700; }
#stop:disabled { opacity:.4; }
.stage { position:relative; min-height:0; display:flex; align-items:center; justify-content:center; container-type:size; }
.stage img { display:block; width:min(100cqw,calc(100cqh * var(--ratio,1))); height:auto; max-width:100%; max-height:100%; border-radius:18px; box-shadow:0 0 0 1px rgba(255,255,255,.06); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; transition:filter .3s; }
.stage.lagging img { filter:brightness(.35) saturate(.4); }
.waiting { position:absolute; inset:0; z-index:1; width:max-content; height:max-content; margin:auto; padding:9px 16px; border-radius:999px; background:#26282e; box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.4); color:#f3f4f6; font-size:14px; font-weight:600; pointer-events:none; animation:pop .22s var(--spring) both; }

/* Toast */
.toast { position:fixed; z-index:5; left:50%; bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px)); translate:-50% 0; width:max-content; max-width:calc(100% - 32px); margin:0; padding:12px 18px; border-radius:16px; background:#1d2026; color:#fff; font-size:15px; font-weight:600; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.18); animation:rise .26s var(--spring) both; }
:root.dark .toast { background:#f3f4f6; color:#111; }

@media (min-width:700px) {
  .top { padding-top:10vh; }
}

/* Install page rendered by the server */
.install { width:min(100%,480px); margin:0 auto; padding:max(16vh,env(safe-area-inset-top)) 24px max(32px,env(safe-area-inset-bottom)); font-size:18px; line-height:1.6; word-break:keep-all; }
.install h1 { display:flex; flex-direction:column; align-items:center; gap:18px; margin:0 0 40px; font-size:30px; font-weight:750; letter-spacing:-.02em; text-align:center; }
.install h1::before { content:""; width:96px; height:96px; border-radius:24px; background:#fff url(/icon-192.png) center/cover; box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(16,24,40,.08); }
.install-button { display:flex; align-items:center; justify-content:center; min-height:72px; border-radius:22px; background:var(--blue); color:#fff; font-size:24px; font-weight:700; text-decoration:none; box-shadow:0 10px 24px rgba(24,70,229,.24); transition:transform .26s var(--spring),background-color .2s; }
.install-button:active { transform:scale(.96); background:var(--blue-press); transition-duration:.1s,.2s; transition-timing-function:ease-out; }
.install details { margin-top:28px; color:#3f444c; font-size:17px; }
.install summary { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; list-style:none; color:#4a4f57; font-weight:600; cursor:pointer; }
.install summary::-webkit-details-marker { display:none; }
.install summary::after { content:""; width:8px; height:8px; margin-top:-4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; rotate:45deg; transition:rotate .2s,margin .2s; }
.install details[open] summary::after { rotate:225deg; margin-top:4px; }
.install details p { margin:8px 0 0; padding:16px 18px; border-radius:18px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.install details p + p { margin-top:8px; }
.install b { font-weight:700; color:var(--ink); }

.touch { position:fixed; z-index:4; left:0; top:0; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; pointer-events:none; opacity:0; scale:.5; background:rgba(255,255,255,.28); box-shadow:0 0 0 2px rgba(255,255,255,.92),0 2px 10px rgba(0,0,0,.35); transition:opacity .16s,scale .22s var(--spring),background-color .25s linear; }
.touch.on { opacity:1; scale:1; }
.touch.hold { scale:1.3; background:rgba(24,70,229,.55); }
.touch.drag { scale:.72; }
.touch.off { opacity:0; scale:1.5; transition:opacity .28s var(--firm),scale .28s var(--firm); }
.touch.hold.off { scale:1.8; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:1ms!important; animation-delay:0s!important; animation-iteration-count:1!important; transition-duration:1ms!important; }
  .ring { animation:spin 1.6s linear infinite!important; }
  .dot { animation:none!important; }
}