/* APR, 나혼자만 레벨업 — APR CI(레드·핑크) × 시스템 창 */
:root{
  --bg:#08050a; --bg2:#14070d;
  --red:#E6002A; --red-hi:#ff3a5c; --pink:#F4ABAF;
  --ink:#fff3f4; --muted:#d0b3b8; --dim:#8f7378;
  --win:rgba(26,7,13,.92); --edge:rgba(255,58,92,.70); --edge-soft:rgba(255,58,92,.22);
  --gold:#ffc44d; --gold-hi:#ffe29a;
  --display:'Black Han Sans','Noto Sans KR',system-ui,sans-serif;
  --ui:'Chakra Petch','Noto Sans KR',system-ui,sans-serif;
  --body:'Noto Sans KR',system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;word-break:keep-all;
  background:
    radial-gradient(900px 600px at 85% -5%,rgba(230,0,42,.30),transparent 60%),
    radial-gradient(700px 500px at -10% 45%,rgba(230,0,42,.14),transparent 60%),
    linear-gradient(rgba(255,58,92,.035) 1px,transparent 1px) 0 0/100% 32px,
    var(--bg);}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer;border:0}
button:disabled{opacity:.5;cursor:wait}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
[hidden]{display:none!important}
.shell{max-width:1120px;margin:0 auto;padding:0 24px}

/* 머리 */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;border-bottom:1px solid var(--edge-soft)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand .wm{height:20px;width:auto}
.brand span{font-family:var(--ui);font-size:11px;letter-spacing:3px;color:var(--muted);padding-left:10px;border-left:1px solid var(--edge-soft)}
.top nav{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--muted)}
.top nav a:hover{color:var(--ink)}
.top .go{color:var(--ink);border:1px solid var(--edge);padding:8px 14px;border-radius:3px;box-shadow:0 0 14px rgba(230,0,42,.35) inset}
.demo-strip{margin-top:14px;padding:8px 14px;font-size:13px;color:var(--pink);border:1px dashed var(--edge);border-radius:3px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.demo-strip button{background:none;color:var(--ink);text-decoration:underline;padding:0}

/* 첫 화면 */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:24px;padding:44px 0 24px}
.sys-pop{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;background:var(--win);border:1px solid var(--edge);box-shadow:0 0 18px rgba(230,0,42,.35),inset 0 0 18px rgba(230,0,42,.18);border-radius:3px;font-size:15px;line-height:1.45;animation:pop .6s ease both}
.sys-pop small{font-size:12px;color:var(--muted)}
.ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;font-family:var(--ui);font-weight:700;font-size:15px;line-height:1;color:var(--ink);text-shadow:0 0 8px var(--red-hi);box-shadow:0 0 10px rgba(255,58,92,.6)}
.hero h1{margin:22px 0 14px;font-family:var(--display);font-weight:400;line-height:1;letter-spacing:-1px}
.hero h1 .l1{display:block;font-size:clamp(36px,5vw,62px)}
.hero h1 .l2{display:block;margin-top:6px;font-size:clamp(78px,11vw,140px);color:#fff;
  text-shadow:0 0 2px #fff,0 0 18px var(--red-hi),0 0 42px var(--red),0 0 80px rgba(230,0,42,.6)}
.slogan{font-family:var(--display);font-size:clamp(20px,2.3vw,28px)}
.sub{margin-top:4px;color:var(--muted);font-size:15px}
.period{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:9px 18px;border:1px solid var(--pink);border-radius:999px;font-family:var(--ui);font-size:18px;letter-spacing:1px}
.period .k{font-size:11px;letter-spacing:3px;color:var(--pink)}
.period strong{font-weight:600}

.gate{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:1}
.gate-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gate-glow{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(230,0,42,.55) 40%,transparent 70%);will-change:opacity;animation:glowPulse 3.6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:1}}
.spin-a{animation:spin 26s linear infinite;will-change:transform}.spin-b{animation:spin 40s linear infinite reverse;will-change:transform}
.gate-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.gate-core small{font-size:13px;color:var(--pink);letter-spacing:1px}
.gate-core strong{font-family:var(--ui);font-weight:700;font-size:clamp(40px,6vw,64px);line-height:1.05;color:#fff;text-shadow:0 0 16px var(--red-hi)}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--red-hi);animation:float 5s ease-in-out infinite}
.s1{left:8%;top:22%}.s2{right:6%;top:12%;animation-delay:1s}.s3{right:12%;bottom:14%;animation-delay:2s;width:4px;height:4px}.s4{left:16%;bottom:8%;animation-delay:3s}.s5{left:48%;top:-2%;animation-delay:1.6s;width:4px;height:4px}

/* 시스템 창 */
.win{position:relative;margin-top:28px;background:var(--win);border:1px solid var(--edge);border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,58,92,.10) inset,0 0 26px rgba(230,0,42,.30),inset 0 0 50px rgba(230,0,42,.10)}
.win::before,.win::after{content:'';position:absolute;width:16px;height:16px;border:2px solid var(--pink);pointer-events:none}
.win::before{left:-3px;top:-3px;border-right:0;border-bottom:0}
.win::after{right:-3px;bottom:-3px;border-left:0;border-top:0}
.win-head{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 18px 12px}
.win-head h2{font-size:19px;font-weight:700;letter-spacing:1px;padding:4px 22px;border:1px solid rgba(255,243,244,.75);box-shadow:0 0 10px rgba(255,58,92,.45),inset 0 0 10px rgba(255,58,92,.25);text-shadow:0 0 8px var(--red-hi)}
.win-head .en{font-family:var(--ui);font-size:12px;letter-spacing:3px;color:var(--pink)}
.win-body{padding:8px 28px 26px}

/* 퀘스트 */
.q-title{text-align:center;font-size:17px;font-weight:700;margin-bottom:16px;text-shadow:0 0 8px rgba(255,58,92,.6)}
.q-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.q-row{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:18px;padding:14px 18px;border:1px solid var(--edge-soft);background:rgba(8,3,6,.45);border-radius:3px}
.q-lv{font-family:var(--display);font-size:32px;line-height:1;text-align:center;color:var(--pink);text-shadow:0 0 12px rgba(255,58,92,.7)}
.q-lv small{display:block;font-family:var(--ui);font-size:10px;letter-spacing:2px;color:var(--dim);margin-bottom:2px}
.q-goal b{display:block;font-size:15px;font-weight:500;color:var(--muted)}
.q-count{font-family:var(--ui);font-size:26px;font-weight:600;letter-spacing:.5px}
.q-count span{color:var(--dim)}
.q-bar{height:6px;background:rgba(255,58,92,.14);margin-top:6px;border-radius:1px;overflow:hidden}
.q-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--pink));box-shadow:0 0 10px var(--red-hi);transition:width .8s ease}
.q-prize{display:flex;align-items:center;gap:14px}
.q-prize img{width:84px;height:72px;object-fit:contain;flex:0 0 auto;-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 78%,transparent 100%)}
.q-prize p{font-size:15px;font-weight:700;line-height:1.4}
.q-prize small{display:inline-block;margin-top:5px;font-size:12px;font-weight:700;color:var(--ink);border:1px solid var(--edge);padding:1px 10px;border-radius:999px}
.q-row.t3{border-color:rgba(255,196,77,.55);background:linear-gradient(90deg,rgba(255,196,77,.10),rgba(8,3,6,.45))}
.q-row.t3 .q-lv{color:var(--gold-hi);text-shadow:0 0 12px rgba(255,196,77,.8)}
.q-row.t3 .q-prize p{color:var(--gold-hi)}.q-row.t3 .q-prize small{background:var(--gold);border-color:var(--gold);color:#2a1700}
.q-row.t3 .q-bar i{background:linear-gradient(90deg,#f0a01e,var(--gold-hi))}
.q-row.done .q-count{color:#fff;text-shadow:0 0 10px var(--red-hi)}
.q-row.mine{border-color:var(--pink);box-shadow:0 0 18px rgba(255,58,92,.45)}
.q-note{margin-top:16px;text-align:center;font-size:14px;color:var(--muted)}
.q-note span{color:var(--dim);font-size:13px}

/* 참여 방법 */
.how{list-style:none;margin:18px 0 0;padding:0;display:flex;align-items:center;gap:10px}
.how li{flex:1;display:flex;justify-content:center;font-size:15px;white-space:nowrap}
.how li:not(.arr){padding:9px 10px;border:1px solid var(--edge-soft);border-radius:999px;background:rgba(30,8,15,.6)}
.how li a{display:flex;align-items:center}
.how li.arr{flex:0 0 18px;height:1px;background:var(--edge)}
.how b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:var(--red);font-family:var(--ui);font-size:12px;box-shadow:0 0 10px var(--red-hi)}

/* 상태창 */
.st-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center}
.st-form label{display:block;font-family:var(--display);font-size:30px;line-height:1.2}
.st-form>p{color:var(--muted);font-size:14px;margin:6px 0 14px}
.field{display:flex;gap:8px;padding:6px;border:1px solid var(--edge);background:rgba(8,3,6,.7);border-radius:3px}
.field input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);padding:8px 10px;font-size:16px}
.field input::placeholder{color:var(--dim)}
.field input:focus{outline:none}
.field:focus-within{box-shadow:0 0 14px rgba(255,58,92,.5)}
.field button,.btn{background:var(--red);color:#fff;font-weight:700;padding:10px 22px;border-radius:2px;box-shadow:0 0 16px rgba(230,0,42,.6)}
.field button:hover,.btn:hover{background:var(--red-hi)}
.err{min-height:22px;margin-top:8px;font-size:14px;color:var(--pink)}
.st-form,.st-card{min-width:0}
.st-card{padding:18px 20px;border:1px solid var(--edge-soft);background:rgba(8,3,6,.5);border-radius:3px}
.st-top{display:flex;gap:20px;align-items:center}
.lv-box{flex:0 0 auto;width:96px;height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--pink);box-shadow:0 0 16px rgba(255,58,92,.5),inset 0 0 16px rgba(255,58,92,.3)}
.lv-box small{font-family:var(--ui);font-size:11px;letter-spacing:3px;color:var(--pink)}
.lv-box strong{font-family:var(--ui);font-size:52px;font-weight:700;line-height:1;text-shadow:0 0 14px var(--red-hi)}
.lv-box.max{border-color:var(--gold);box-shadow:0 0 18px rgba(255,196,77,.6),inset 0 0 16px rgba(255,196,77,.3)}.lv-box.max strong{color:var(--gold-hi)}
.st-dl{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin:0}
.st-dl div{min-width:0}
.st-dl dt{font-size:12px;color:var(--dim)}
.st-dl dd{margin:0;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:18px 0 8px}
.exp .seg span{display:block;height:10px;background:rgba(255,58,92,.14);overflow:hidden}
.exp .seg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--pink));box-shadow:0 0 8px var(--red-hi);transition:width .8s ease}
.exp .seg:last-child i{background:linear-gradient(90deg,#f0a01e,var(--gold-hi))}
.exp .seg em{display:block;text-align:right;font-style:normal;font-family:var(--ui);font-size:12px;color:var(--dim);margin-top:3px}
.exp .seg.full em{color:var(--pink)}
.st-goal{font-size:15px;font-weight:700}
.st-goal em{font-style:normal;color:var(--gold-hi)}

/* 직무별 코스 */
.tracks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tracks button{background:rgba(8,3,6,.6);color:var(--ink);border:1px solid var(--edge);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700}
.tracks button[aria-selected=true]{background:var(--red);border-color:var(--red);box-shadow:0 0 14px rgba(230,0,42,.7)}
.track-panel{margin-top:16px}
.track-panel ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.track-panel li a{display:flex;gap:12px;align-items:flex-start;height:100%;padding:12px 14px;border:1px solid var(--edge-soft);background:rgba(8,3,6,.5);border-radius:3px}
.track-panel li a:hover{border-color:var(--pink)}
.track-panel .n{flex:0 0 auto;font-family:var(--ui);font-weight:700;font-size:13px;color:var(--pink);border:1px solid var(--edge);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.track-panel b{display:block;font-size:14px;line-height:1.45}
.track-panel small{font-size:12px;color:var(--dim)}
.track-panel .lead{text-align:center;font-size:14px;color:var(--muted);margin-bottom:12px}

/* 랭킹 */
.rk-meta{text-align:center;font-size:13px;color:var(--muted);margin-bottom:16px}
.podium{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.podium li{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:0}
.podium .medal{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-family:var(--ui);font-weight:700;font-size:20px;border:1.5px solid var(--pink);box-shadow:0 0 12px rgba(255,58,92,.5)}
.podium .p1 .medal{width:56px;height:56px;font-size:26px;border-color:var(--gold);color:var(--gold-hi);box-shadow:0 0 22px rgba(255,196,77,.7)}
.podium .alias{font-size:14px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium .min{font-family:var(--ui);font-size:15px;color:var(--pink)}
.podium .block{width:100%;margin-top:8px;height:60px;border:1px solid var(--edge);border-bottom:0;background:linear-gradient(180deg,rgba(230,0,42,.35),transparent)}
.podium .p1 .block{height:96px;border-color:var(--gold);background:linear-gradient(180deg,rgba(255,196,77,.35),transparent)}
.podium .p2 .block{height:76px}
.podium li.me .alias{color:var(--gold-hi)}
.rk-list{max-height:360px;overflow:auto;border:1px solid var(--edge-soft)}
.rk-list table{width:100%;border-collapse:collapse;font-size:14px;white-space:nowrap}
.rk-list th{position:sticky;top:0;background:#1c0910;font-size:12px;font-weight:500;color:var(--dim);text-align:left;padding:9px 12px}
.rk-list td{padding:10px 12px;border-top:1px solid rgba(255,58,92,.10);font-variant-numeric:tabular-nums}
.rk-list .r{text-align:right;font-family:var(--ui)}
.rk-list tr.me{background:rgba(230,0,42,.28)}
.chip{font-family:var(--ui);font-size:12px;font-weight:600;border:1px solid var(--edge);padding:0 7px;border-radius:2px}
.chip.l3{border-color:var(--gold);color:var(--gold-hi)}
.you{margin-left:6px;font-size:11px;background:var(--red);padding:0 6px;border-radius:2px}
.rk-empty{text-align:center;padding:26px 10px;color:var(--muted);font-size:14px}
.rk-empty strong{display:block;font-family:var(--display);font-weight:400;font-size:24px;color:var(--ink);margin-bottom:4px}
.fine{margin-top:12px;text-align:center;font-size:12px;color:var(--dim)}

/* 안내 */
.notice ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px;color:var(--muted)}
.notice li.hl{color:var(--gold-hi);font-weight:700}
.foot{display:flex;align-items:center;gap:10px;margin-top:40px;padding:22px 0 30px;border-top:1px solid var(--edge-soft);font-size:13px;color:var(--dim)}
.foot a{margin-left:auto}

/* 레벨업 알림 */
.levelup{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,1,3,.7)}
.lu-win{width:min(100%,420px);margin:0;text-align:center;animation:pop .45s ease both}
.lu-big{font-family:var(--display);font-size:34px;line-height:1.2;text-shadow:0 0 16px var(--red-hi)}
.lu-sub{margin:8px 0 18px;color:var(--muted);font-size:15px}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-12px);opacity:.4}}
@keyframes pop{from{opacity:.0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:26px}
  .gate{order:-1;width:min(70vw,300px);margin-bottom:-6px}
  .st-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .shell{padding:0 16px}
  .top{height:64px}.brand span{display:none}.top nav a:not(.go){display:none}.top .go{font-size:13px;padding:7px 10px}
  .sys-pop{font-size:14px}
  .period{font-size:15px;padding:7px 14px}
  .win-body{padding:6px 14px 18px}
  .win-head h2{font-size:17px;padding:3px 14px}
  .q-row{grid-template-columns:52px minmax(0,1fr);gap:8px 12px;padding:12px}
  .q-lv{font-size:24px;grid-row:span 2}
  .q-count{font-size:21px}
  .q-prize img{width:64px;height:54px}
  .q-prize p{font-size:14px}
  .how{gap:6px}.how li{font-size:13px}.how li:not(.arr){padding:7px 4px}.how li.arr{display:none}.how b{width:18px;height:18px;font-size:11px;margin-right:4px}
  .st-form label{font-size:26px}
  .lv-box{width:78px;height:78px}.lv-box strong{font-size:42px}
  .st-top{gap:14px}.st-dl{gap:4px 12px}.st-dl dd{font-size:15px}
  .podium .alias{font-size:12px}.podium .block{height:44px}.podium .p1 .block{height:72px}.podium .p2 .block{height:58px}
  .rk-list table{font-size:13px}.rk-list td,.rk-list th{padding:9px 8px}
  .notice ul{font-size:14px}
}

/* ── 움직임 ─────────────────────────────────────────── */
/* 들어올 때: 게이트가 열린다 */
.intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:radial-gradient(circle at 50% 45%,#1d0510 0%,#060306 70%);transition:opacity .6s ease,visibility .6s}
.js-off .intro{display:none}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.intro-fx{position:absolute;inset:0;width:100%;height:100%}
.intro-gate{position:relative;width:min(56vw,280px);aspect-ratio:1}
.intro-gate svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 22px rgba(230,0,42,.8))}
.ig-ring{stroke-dasharray:677;stroke-dashoffset:677;transform:rotate(-90deg);animation:draw 1.3s cubic-bezier(.6,0,.2,1) .15s forwards}
.ig-a{stroke-dasharray:340;stroke-dashoffset:340;animation:draw .9s ease .8s forwards,spin 3s linear 1.2s infinite}
.ig-b{stroke-dasharray:570;stroke-dashoffset:570;animation:draw 1s ease 1s forwards,spin 4s linear 1.4s infinite reverse}
.ig-core{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ff4a6a 22%,#e6002a 45%,transparent 70%);opacity:0;transform:scale(.2);animation:core 1.2s ease 1.2s forwards}
.intro.open .intro-gate{animation:gateOpen .9s cubic-bezier(.7,0,.3,1) forwards}
.intro.open .intro-txt,.intro.open .intro-skip{opacity:0;transition:opacity .25s}
.intro-txt{position:relative;z-index:1;text-align:center;font-family:var(--ui);letter-spacing:2px}
.intro-txt p{font-family:var(--body);font-weight:700;font-size:17px;letter-spacing:1px;text-shadow:0 0 10px var(--red-hi)}
.intro-txt p::after{content:'';display:inline-block;width:1.4em;text-align:left;animation:dots 1.2s steps(4) infinite}
.intro-bar{width:220px;height:3px;margin:12px auto 6px;background:rgba(255,58,92,.18);overflow:hidden}
.intro-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--pink));box-shadow:0 0 10px var(--red-hi)}
.intro-txt small{font-size:12px;color:var(--pink)}
.intro-skip{position:absolute;right:20px;bottom:20px;z-index:2;background:none;color:var(--dim);font-size:13px;border:1px solid rgba(255,58,92,.3);padding:6px 12px;border-radius:2px}
.intro-skip:hover{color:var(--ink);border-color:var(--edge)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes core{0%{opacity:0;transform:scale(.2)}60%{opacity:.9}100%{opacity:.75;transform:scale(1)}}
@keyframes gateOpen{0%{transform:scale(1);filter:none}40%{transform:scale(1.15);filter:brightness(1.6)}100%{transform:scale(9);opacity:0;filter:brightness(3)}}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* 배경: 떠오르는 불씨 · 커서 빛 · 스캔 라인 */
.embers{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cursor-glow{will-change:transform;position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(230,0,42,.16),transparent 65%);transform:translate3d(var(--cx,-999px),var(--cy,-999px),0);transition:transform .25s ease-out}

/* 첫 화면 등장 순서 */
.hero .sys-pop,.hero h1 .l1,.hero h1 .l2,.hero .slogan,.hero .sub,.hero .period,.hero .gate{opacity:0;animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;animation-play-state:paused}
.js-off .hero *{opacity:1!important;animation-play-state:running}
.ready .hero .sys-pop,.ready .hero h1 .l1,.ready .hero h1 .l2,.ready .hero .slogan,.ready .hero .sub,.ready .hero .period,.ready .hero .gate{animation-play-state:running}
.hero .gate{animation-name:gateIn;animation-duration:1.1s}
.hero .sys-pop{animation-delay:.05s}.hero h1 .l1{animation-delay:.2s}.hero h1 .l2{animation-delay:.35s}.hero .slogan{animation-delay:.6s}.hero .sub{animation-delay:.7s}.hero .period{animation-delay:.8s}.hero .gate{animation-delay:.1s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes gateIn{from{opacity:0;transform:scale(.7) rotate(-20deg)}to{opacity:1;transform:none}}

/* '레벨업' 글자: 숨 쉬는 빛 + 가끔 지직 */
.hero h1 .l2{position:relative}
.ready .hero h1 .l2{animation:rise .8s cubic-bezier(.2,.7,.2,1) .35s forwards}
.hero h1 .l2::before,.hero h1 .l2::after{content:attr(data-text);position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.hero h1 .l2::before{color:var(--pink);text-shadow:none;animation:glitchA 6s steps(1) 2s infinite}
.hero h1 .l2::after{color:var(--red);text-shadow:none;animation:glitchB 6s steps(1) 2s infinite}
@keyframes breathe{0%,100%{text-shadow:0 0 2px #fff,0 0 18px var(--red-hi),0 0 42px var(--red),0 0 80px rgba(230,0,42,.6)}50%{text-shadow:0 0 2px #fff,0 0 26px var(--red-hi),0 0 64px var(--red),0 0 120px rgba(230,0,42,.8)}}
@keyframes glitchA{0%,93%,95.5%,100%{opacity:0;transform:none}94%{opacity:.8;transform:translate(-4px,1px);clip-path:inset(10% 0 55% 0)}94.8%{opacity:.8;transform:translate(3px,-1px);clip-path:inset(60% 0 8% 0)}}
@keyframes glitchB{0%,93%,95.5%,100%{opacity:0;transform:none}94%{opacity:.7;transform:translate(4px,-1px);clip-path:inset(45% 0 25% 0)}94.8%{opacity:.7;transform:translate(-3px,2px);clip-path:inset(5% 0 70% 0)}}

/* 게이트: 맥박 + 마우스 따라 기울기 */
.gate{transform-style:preserve-3d;transition:transform .2s ease-out}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 26px rgba(230,0,42,.5))}50%{filter:drop-shadow(0 0 48px rgba(230,0,42,.9))}}
.gate-core strong{animation:flick 4s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.6}52%{opacity:1}}

/* 스크롤하면 창이 하나씩 켜진다 */
.reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-off .reveal,.reveal.in{opacity:1;transform:none}
.win.reveal.in .win-head h2{animation:boot .9s steps(2) 1}
@keyframes boot{0%{opacity:0}30%{opacity:1}45%{opacity:.2}60%,100%{opacity:1}}
.q-row{opacity:0;transform:translateX(-14px);transition:opacity .5s ease,transform .5s ease,border-color .2s,box-shadow .2s}
.js-off .q-row,.in .q-row{opacity:1;transform:none}
.in .q-row:nth-child(2){transition-delay:.12s}.in .q-row:nth-child(3){transition-delay:.24s}

/* 마우스를 올리면 */
.win{transition:box-shadow .3s ease,border-color .3s ease}
.win:hover{box-shadow:0 0 0 1px rgba(255,58,92,.2) inset,0 0 40px rgba(230,0,42,.45),inset 0 0 60px rgba(230,0,42,.14)}
.win::before,.win::after{transition:transform .3s ease}
.win:hover::before{transform:translate(-3px,-3px)}.win:hover::after{transform:translate(3px,3px)}
.q-row{position:relative;overflow:hidden}
.q-row::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,243,244,.10),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
.q-row:hover{border-color:var(--edge);box-shadow:0 0 20px rgba(230,0,42,.35)}
.q-row:hover::after{left:120%}
.q-row:hover .q-prize img{transform:scale(1.08) rotate(-3deg)}
.q-prize img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.q-row.t3 .q-prize img{animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.field button,.btn,.top .go,.tracks button{position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease,background .2s}
.field button::after,.btn::after,.top .go::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(0) skewX(-20deg);animation:shine 3.5s ease-in-out infinite;will-change:transform}
@keyframes shine{0%,60%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(480%) skewX(-20deg)}}
.field button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 0 26px rgba(255,58,92,.9)}
.top .go:hover{box-shadow:0 0 16px rgba(230,0,42,.7),0 0 14px rgba(230,0,42,.35) inset}
.tracks button:hover{box-shadow:0 0 14px rgba(255,58,92,.6);transform:translateY(-1px)}
.how li:not(.arr){transition:border-color .2s,box-shadow .2s,transform .2s}
.how li:not(.arr):hover{border-color:var(--edge);box-shadow:0 0 14px rgba(230,0,42,.45);transform:translateY(-2px)}
.how li.arr{background:linear-gradient(90deg,transparent,var(--edge),transparent)}
@keyframes flow{from{background-position:100% 0}to{background-position:-100% 0}}
.track-panel li{animation:rise .45s ease both}
.track-panel li:nth-child(2){animation-delay:.05s}.track-panel li:nth-child(3){animation-delay:.1s}.track-panel li:nth-child(4){animation-delay:.15s}.track-panel li:nth-child(5){animation-delay:.2s}.track-panel li:nth-child(n+6){animation-delay:.25s}
.track-panel li a{transition:border-color .2s,box-shadow .2s,transform .2s}
.track-panel li a:hover{box-shadow:0 0 16px rgba(230,0,42,.45);transform:translateY(-2px)}
.podium .p1 .medal{box-shadow:0 0 26px rgba(255,196,77,.9)}
@keyframes crown{0%,100%{box-shadow:0 0 18px rgba(255,196,77,.6)}50%{box-shadow:0 0 34px rgba(255,196,77,1)}}
.podium .block{transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.7,.2,1) both}
.podium .p2 .block{animation-delay:.1s}.podium .p3 .block{animation-delay:.2s}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.rk-list tbody tr{transition:background .15s}
.rk-list tbody tr:hover{background:rgba(230,0,42,.14)}
.lv-box{transition:transform .3s}
.st-card.lit .lv-box{animation:lvPop .7s cubic-bezier(.2,.7,.2,1)}
@keyframes lvPop{0%{transform:scale(.6);filter:brightness(2)}60%{transform:scale(1.12)}100%{transform:none}}
.ico{box-shadow:0 0 12px rgba(255,58,92,.75)}
@keyframes icoPulse{0%,100%{box-shadow:0 0 8px rgba(255,58,92,.5)}50%{box-shadow:0 0 16px rgba(255,58,92,1)}}

/* 레벨업 알림: 빛 고리 */
.lu-burst{position:absolute;left:50%;top:50%;pointer-events:none}
.lu-burst i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:3px solid var(--red-hi);box-shadow:0 0 30px var(--red);opacity:0}
.levelup:not([hidden]) .lu-burst i{animation:burst 1.2s ease-out forwards}
.levelup:not([hidden]) .lu-burst i:nth-child(2){animation-delay:.15s;border-color:var(--pink)}
.levelup:not([hidden]) .lu-burst i:nth-child(3){animation-delay:.3s;border-color:var(--gold)}
@keyframes burst{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(5)}}
.lu-big{animation:boot .8s steps(2) .1s both}

@media (prefers-reduced-motion:reduce){.intro{display:none}.reveal,.q-row,.hero *{opacity:1!important;transform:none!important}body::after,.embers,.cursor-glow{display:none}}
@media (hover:none){.cursor-glow{display:none}}

/* 마우스 포인터: 붉은 단검 (끝이 클릭 지점) */
@media (hover:hover) and (pointer:fine){
  html,body{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20transform%3D%22rotate%28-45%2016%2016%29%22%3E%3Cpath%20d%3D%22M16%20-3%20L19.6%206%20L19%2020%20L13%2020%20L12.4%206%20Z%22%20fill%3D%22%2314060b%22%20stroke%3D%22%23ff3a5c%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16%200%20L16%2018%22%20stroke%3D%22%23F4ABAF%22%20stroke-width%3D%221%22%20opacity%3D%22.9%22/%3E%3Cpath%20d%3D%22M9%2020.2%20L23%2020.2%20L21.5%2022.6%20L10.5%2022.6%20Z%22%20fill%3D%22%23E6002A%22%20stroke%3D%22%2314060b%22%20stroke-width%3D%22.8%22/%3E%3Crect%20x%3D%2214.4%22%20y%3D%2222.6%22%20width%3D%223.2%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%232a0d16%22%20stroke%3D%22%23ff3a5c%22%20stroke-width%3D%22.9%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2233%22%20r%3D%221.9%22%20fill%3D%22%23E6002A%22%20stroke%3D%22%2314060b%22%20stroke-width%3D%22.7%22/%3E%3C/g%3E%3C/svg%3E") 5 5,auto}
  a,button,[role=tab],label[for],.intro{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20transform%3D%22rotate%28-45%2016%2016%29%22%3E%3Cpath%20d%3D%22M16%20-3%20L19.6%206%20L19%2020%20L13%2020%20L12.4%206%20Z%22%20fill%3D%22%2314060b%22%20stroke%3D%22%23ffd0d4%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16%200%20L16%2018%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221%22%20opacity%3D%22.9%22/%3E%3Cpath%20d%3D%22M9%2020.2%20L23%2020.2%20L21.5%2022.6%20L10.5%2022.6%20Z%22%20fill%3D%22%23ff3a5c%22%20stroke%3D%22%2314060b%22%20stroke-width%3D%22.8%22/%3E%3Crect%20x%3D%2214.4%22%20y%3D%2222.6%22%20width%3D%223.2%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%232a0d16%22%20stroke%3D%22%23ffd0d4%22%20stroke-width%3D%22.9%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2233%22%20r%3D%221.9%22%20fill%3D%22%23ff3a5c%22%20stroke%3D%22%2314060b%22%20stroke-width%3D%22.7%22/%3E%3C/g%3E%3C/svg%3E") 5 5,pointer}
  input{cursor:text}
}

/* 퀘스트 상태: 달성(CLEAR) · 진행 중 · 잠김 */
.q-tag{position:absolute;top:10px;right:12px;z-index:1;font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:1px;padding:2px 10px;border-radius:2px}
.q-tag.clear{background:var(--red);color:#fff;box-shadow:0 0 14px var(--red-hi);transform:rotate(-4deg)}
.q-tag.now{border:1px solid var(--gold);color:var(--gold-hi);box-shadow:0 0 10px rgba(255,196,77,.6)}
.q-tag.lock{border:1px solid rgba(255,243,244,.25);color:var(--dim);font-family:var(--body);font-weight:500;letter-spacing:0}
.q-row.done{background:linear-gradient(90deg,rgba(230,0,42,.38),rgba(230,0,42,.10));border-color:var(--red-hi);box-shadow:0 0 22px rgba(230,0,42,.45),inset 0 0 24px rgba(255,58,92,.25)}
.q-row.done .q-lv{color:#fff;text-shadow:0 0 14px #fff,0 0 22px var(--red-hi)}
.q-row.done .q-count{color:#fff}
.q-row.done .q-bar i{background:linear-gradient(90deg,var(--pink),#fff)}
.q-row.now{border-color:var(--gold);box-shadow:0 0 20px rgba(255,196,77,.35)}
.q-row.locked{filter:grayscale(.85) brightness(.6);border-style:dashed}
.q-row.locked:hover{filter:grayscale(.4) brightness(.8)}
.q-row.mine{outline:none}

/* 직무별 코스 카드 */
.tracks{max-height:none}
.track-panel .lead b{color:var(--ink)}

.track-panel li a{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.track-panel .thumb{position:relative;display:block;aspect-ratio:16/9;background:radial-gradient(circle at 30% 30%,rgba(230,0,42,.35),rgba(8,3,6,.9) 70%)}
.track-panel .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.track-panel li a:hover .thumb img{transform:scale(1.05)}
.track-panel .thumb .n{position:absolute;left:10px;top:10px;background:rgba(8,3,6,.8)}
.track-panel .ct{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.track-panel .ct small.by{color:var(--muted)}
.track-panel .ct em{font-style:normal;font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.track-panel .thumb.ph::after{content:'';position:absolute;right:10px;bottom:10px;width:34%;aspect-ratio:1;background:url(/img/apr-mark.svg) center/contain no-repeat;opacity:.35;filter:drop-shadow(0 0 10px var(--red))}
.track-panel .thumb.ph{background:radial-gradient(circle at 70% 70%,rgba(230,0,42,.45),rgba(8,3,6,.95) 65%)}

/* 추천 퀘스트: 직군 → 직무 → 가로로 넘기는 코스 */
.groups{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:10px}
.groups button{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--muted);border:1px solid var(--edge-soft);border-radius:2px;padding:9px 16px;font-size:15px;font-weight:700;transition:color .2s,border-color .2s,box-shadow .2s}
.groups button small{font-family:var(--ui);font-size:12px;color:var(--dim)}
.groups button:hover{color:var(--ink);border-color:var(--edge)}
.groups button[aria-selected=true]{color:#fff;border-color:var(--pink);background:rgba(230,0,42,.22);box-shadow:0 0 14px rgba(230,0,42,.45),inset 0 -2px 0 var(--red)}
.groups button[aria-selected=true] small{color:var(--pink)}
.tracks{gap:6px;margin-bottom:14px}
.tracks button{padding:6px 14px;font-size:13px}
.tk-line{margin:0 0 10px;font-size:14px;color:var(--muted)}
.tk-line b{color:var(--ink)}
.track-panel .tags{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px}
.track-panel .tag{display:inline-flex;align-items:center;height:22px;margin:0;padding:0 8px;font-size:11px;line-height:1;font-weight:700;border-radius:2px;background:rgba(8,3,6,.85);border:1px solid var(--edge);color:var(--ink);white-space:nowrap}
.track-panel .tag.ko{border-color:var(--pink);color:var(--pink)}
.tk-rail{position:relative}
.track-panel{margin-top:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--edge) transparent;padding-bottom:10px;outline:none}
.track-panel ol{display:flex;gap:12px;grid-template-columns:none}
.track-panel li{flex:0 0 clamp(230px,30%,300px);scroll-snap-align:start}
.track-panel li a{height:100%}
.rail-btn{position:absolute;top:calc(50% - 30px);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--pink);background:rgba(20,6,11,.9);color:#fff;font-size:24px;line-height:1;box-shadow:0 0 16px rgba(230,0,42,.6)}
.rail-btn.prev{left:-14px}.rail-btn.next{right:-14px}
.rail-btn:hover{background:var(--red)}
@media (max-width:600px){
  .groups{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px 8px;padding:0 14px}
  .groups button{flex:0 0 auto;font-size:14px;padding:8px 12px}
  .tracks{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px 12px;padding:0 14px}
  .tracks button{flex:0 0 auto}
  .track-panel li{flex-basis:78%}
  .rail-btn{display:none}
}

/* 강의 넘기기 버튼 ‹ › — 어느 화면에서나 보이고, 끝에 닿으면 흐려짐 */
.tk-rail .rail-btn{display:flex;align-items:center;justify-content:center;top:calc(50% - 34px);width:44px;height:44px;font-size:26px;padding-bottom:3px;transition:opacity .2s,background .2s,transform .15s}
.tk-rail .rail-btn:disabled{opacity:.25;cursor:default;box-shadow:none}
.tk-rail .rail-btn:not(:disabled):hover{transform:scale(1.08)}
.tk-rail.no-scroll .rail-btn{display:none}
@media (max-width:600px){.tk-rail .rail-btn{display:flex;width:38px;height:38px;font-size:22px}.tk-rail .rail-btn.prev{left:-6px}.tk-rail .rail-btn.next{right:-6px}.tk-rail.no-scroll .rail-btn{display:none}}

/* 참여 방법: 퀘스트 정보 창 안으로 */
#quest .how{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--edge-soft)}
#quest .how li:not(.arr){background:rgba(8,3,6,.55)}

/* 가로 스크롤 안에서 카드가 떠오를 때(마우스 오버) 위·옆 그림자가 잘리지 않게 여유를 둔다 */
.track-panel{padding:8px 10px 14px;margin:-8px -10px 0;scroll-padding-left:10px}

/* 로딩 창: 이번 창에서 이미 봤으면 처음부터 숨김 (boot.js 가 머리에서 정함) */
.no-intro .intro{display:none}
/* 안전장치: 스크립트를 못 받아도 로딩 창이 7초 뒤엔 스스로 걷힌다 */
.intro{animation:introSafety 0s linear 7s forwards}
@keyframes introSafety{to{opacity:0;visibility:hidden;pointer-events:none}}