/* ---- 보상·결과 발표·연속 승차·첫 안내 (js/eki-engage.js). #stage 와 같은 어두운 전체 화면 ---- */
#eov{position:absolute;inset:0;z-index:45;background:#141414;color:#F2F2F2;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .4s ease}
#eov.on{opacity:1;pointer-events:auto}
#eov .pattern{color:#F2F2F2;--pat:.1}
#eov:not(.on) .pattern{animation-play-state:paused}
#eov .eo-in{position:relative;z-index:1;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 28px calc(32px + env(safe-area-inset-bottom))}
#eov .eo-in>*{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
#eov.go .eo-in>*{opacity:1;transform:none}
#eov.go .eo-in>*:nth-child(2){transition-delay:.08s}#eov.go .eo-in>*:nth-child(3){transition-delay:.16s}#eov.go .eo-in>*:nth-child(4){transition-delay:.24s}
#eov.go .eo-in>*:nth-child(5){transition-delay:.32s}#eov.go .eo-in>*:nth-child(6){transition-delay:.4s}#eov.go .eo-in>*:nth-child(n+7){transition-delay:.48s}
#eov h3{margin:14px 0 0;font:900 28px/1.2 var(--display)}
.eo-kick{margin:0;font:700 12px var(--sign);letter-spacing:.16em;text-transform:uppercase;color:rgba(242,242,242,.6)}
.eo-note{margin:10px 0 0;max-width:300px;font:500 14px/1.6 var(--kr);color:rgba(242,242,242,.7)}
.eo-btn{margin-top:26px;width:100%;max-width:320px;height:50px;border-radius:0;background:#F2F2F2;color:#141414;font:700 15px var(--kr)}
.eo-btn.ghost{margin-top:10px;background:none;color:rgba(242,242,242,.75);height:42px}
.eo-btn:focus-visible,.eq-row:focus-visible,.eq-claim:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* 연속 승차 링: 노선 색 원 + 숫자 */
.eo-ring{position:relative;width:132px;height:132px;margin-top:18px;display:grid;place-items:center}
.eo-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.eo-ring circle{fill:none;stroke-width:12}
.eo-ring .bg{stroke:rgba(242,242,242,.12)}
.eo-ring .fg{stroke:var(--line);stroke-dasharray:314.2;stroke-dashoffset:314.2;transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1) .25s}
#eov.go .eo-ring .fg,.eo-ring.still .fg{stroke-dashoffset:0}
.eo-ring b{position:relative;font:800 46px/1 var(--ui);font-variant-numeric:tabular-nums}
.eo-ring.bump b{animation:eoBump .5s cubic-bezier(.3,1.6,.5,1) 1.15s both}
@keyframes eoBump{0%{transform:scale(1)}40%{transform:scale(1.28);color:var(--yellow)}100%{transform:scale(1)}}
.tk{width:26px;height:26px;fill:rgba(242,242,242,.2)}
.tk.on{fill:var(--yellow)}

/* 보상 */
.rw-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:340px;margin-top:26px;border-top:1px solid rgba(242,242,242,.16);border-bottom:1px solid rgba(242,242,242,.16)}
.rw-stats>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:16px 4px}
.rw-stats>div+div{border-left:1px solid rgba(242,242,242,.16)}
.rw-stats b{font:700 30px/1 var(--sign);font-variant-numeric:tabular-nums}
.rw-stats b i{font-style:normal;font-size:16px;margin-left:2px}
.rw-stats small{font:500 11px/1.3 var(--kr);color:rgba(242,242,242,.6)}
.rw-xp{color:var(--act)}
.rw-pass{display:flex;gap:2px;height:30px;align-items:center}
.eo-gift{margin:16px 0 0;max-width:300px;padding:10px 14px;background:rgba(245,196,0,.14);color:var(--yellow);font:600 13px/1.5 var(--kr)}

/* 오늘의 퀘스트 카드 (Today) */
#v-today .eq{display:flex;flex-direction:column;gap:2px}
.eq-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.eq-h b{font:700 13px var(--sign);letter-spacing:.14em;text-transform:uppercase}
.eq-h small{font:500 12px var(--kr);color:var(--ink2)}
.eq-row{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--ink3);text-align:left;color:var(--ink);background:none}
.eq-ck{width:22px;height:22px;border:3px solid var(--ink3);border-radius:50%;box-sizing:border-box;position:relative}
.eq-row.done .eq-ck{border-color:var(--act);background:var(--act)}
.eq-row.done .eq-ck::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #1B1B1B;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.eq-t{display:flex;flex-direction:column;gap:7px;min-width:0}
.eq-t b{font:600 14px var(--kr)}
.eq-row.done .eq-t b{color:var(--ink2)}
.eq-bar{display:block;height:6px;background:var(--cloud);overflow:hidden}
.eq-bar i{display:block;height:100%;background:var(--act);transition:width .6s cubic-bezier(.3,.7,.2,1)}
.eq-n{font:700 15px var(--sign);font-variant-numeric:tabular-nums;color:var(--ink2)}
.eq-claim{margin-top:10px;height:46px;border-radius:0;background:var(--act);color:#1B1B1B;font:700 14px var(--kr)}
.eq-claim:disabled{background:var(--cloud);color:var(--ink2)}
.eo-tap{cursor:pointer}

/* 연속 승차 상세 */
.sk-mile{width:100%;max-width:340px;margin-top:24px;text-align:left}
.sk-mh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font:500 12px var(--kr);color:rgba(242,242,242,.6)}
.sk-mh b{font:700 18px var(--sign);color:#F2F2F2}
.sk-mile .eq-bar{background:rgba(242,242,242,.12)}
.sk-mile .eq-bar i{background:var(--line)}
.sk-mile small{display:block;margin-top:6px;font:500 12px var(--kr);color:rgba(242,242,242,.6)}
.sk-cal{width:100%;max-width:340px;margin-top:22px}
.sk-wd,.sk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.sk-wd span{font:600 11px var(--kr);color:rgba(242,242,242,.5);padding-bottom:4px}
.sk-grid span{aspect-ratio:1;display:grid;place-items:center;font:600 12px var(--ui);color:rgba(242,242,242,.55);background:rgba(242,242,242,.05)}
.sk-grid span.ride{background:var(--line);color:#fff}
.sk-grid span.pass{background:var(--yellow);color:#1B1B1B}
.sk-grid span.today{outline:2px solid #F2F2F2;outline-offset:-2px}
.sk-grid span.fut{opacity:.35}
.sk-lg{display:flex;gap:16px;justify-content:center;margin-top:10px;font:500 11px var(--kr);color:rgba(242,242,242,.6)}
.sk-lg i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.sk-lg i.ride{background:var(--line)}.sk-lg i.pass{background:var(--yellow)}
.sk-pass{width:100%;max-width:340px;margin-top:22px;padding:14px 16px;background:rgba(242,242,242,.06);text-align:left}
.sk-ph{display:flex;align-items:center;gap:4px}
.sk-ph b{margin-left:8px;font:700 14px var(--kr)}
.sk-pass p{margin:8px 0 0;font:500 12px/1.6 var(--kr);color:rgba(242,242,242,.65)}

/* 주간 결과 발표 */
.rs-pod{display:grid;grid-template-columns:1fr 1.18fr 1fr;align-items:end;gap:10px;width:100%;max-width:360px;margin-top:24px}
.rs-p{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:translateY(24px)}
#eov.go .rs-p{animation:rsIn .6s cubic-bezier(.2,.9,.3,1.2) var(--d) both}
@keyframes rsIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rs-art{width:100%;aspect-ratio:1;overflow:hidden;background:#262626;display:grid;place-items:center;outline:3px solid transparent;outline-offset:-3px}
.rs-art>*{width:100%;height:100%;display:block;object-fit:cover}
.rs-art svg{width:100%;height:100%}
.rs-p.r1 .rs-art{outline-color:var(--yellow)}
.rs-p.mine .rs-art{outline-color:var(--act)}
.rs-rk{width:28px;height:28px;margin-top:-20px;position:relative;display:grid;place-items:center;border-radius:50%;background:#F2F2F2;color:#141414;font:800 14px var(--ui)}
.rs-p.r1 .rs-rk{background:var(--yellow)}
.rs-p b{font:700 13px var(--kr);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-p small{font:600 12px var(--sign);color:rgba(242,242,242,.6)}
.rs-blank{display:grid!important;place-items:center;padding:8px;font:600 12px var(--kr);color:rgba(242,242,242,.6)}
.rs-me{display:flex;width:100%;max-width:360px;margin-top:22px;border-top:1px solid rgba(242,242,242,.16);border-bottom:1px solid rgba(242,242,242,.16);opacity:0}
#eov.go .rs-me{animation:rsIn .5s ease var(--d) both}
.rs-me>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 6px}
.rs-me>div+div{border-left:1px solid rgba(242,242,242,.16)}
.rs-me b{font:700 30px/1 var(--sign)}
.rs-me b i{font-style:normal;font-size:16px;margin-left:2px}
.rs-me small{font:500 11px/1.4 var(--kr);color:rgba(242,242,242,.6)}
.rs-me .lg-up b{color:var(--act)}.rs-me .lg-down b{color:var(--red)}

/* 첫 안내 */
.ob-skip{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;padding:8px 10px;background:none;color:rgba(242,242,242,.6);font:600 13px var(--kr)}
.ob-fig{min-height:140px;display:grid;place-items:center;width:100%}
.ob-line{position:relative;display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:320px}
.ob-line::before{content:"";position:absolute;left:16%;right:16%;top:11px;height:6px;background:var(--line)}
.ob-line span{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px var(--kr);color:rgba(242,242,242,.6)}
.ob-line i{width:28px;height:28px;border-radius:50%;background:#141414;border:6px solid var(--line);box-sizing:border-box}
.ob-line span.on i{background:#F2F2F2}
.ob-line b{font:700 15px var(--kr);color:#F2F2F2}
.ob-word{font:900 64px/1 var(--display);letter-spacing:.02em}
.ob-dots{display:flex;gap:8px;margin-top:24px}
.ob-dots i{width:8px;height:8px;background:rgba(242,242,242,.25)}
.ob-dots i.on{background:#F2F2F2;width:22px}

@media (prefers-reduced-motion: reduce){#eov .eo-in>*,#eov.go .rs-p,#eov.go .rs-me,.eo-ring .fg{transition:none!important;animation:none!important;opacity:1!important;transform:none!important}}