/* 꾸밈은 언더고 청크팝(.cp-*)을 보고 새로 지었다 — 언더고 쪽 변수·클래스에 기대지 않는다 */
:root{ --ink:#f6f3ff; --dim:#a9a3d6; --bg:#0b1024; --font:Outfit, Jua, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
/* 한글은 Jua(둥근 굵은 글꼴 · 굵기 하나) — 가짜 굵게를 막아 뭉개지지 않게 */
*{ box-sizing:border-box; font-synthesis-weight:none; }
html,body{ margin:0; height:100%; background:#05060f; color:var(--ink); font-family:var(--font); overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
@media (pointer:coarse){ input,textarea,select{ font-size:16px !important; } }
.cp{ position:fixed; inset:0; margin:0 auto; max-width:480px; display:flex; flex-direction:column; background:var(--bg); padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px); overflow:hidden; }
.cp-cab{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; background:linear-gradient(180deg,#2a1d6b,#1a1446); }
.cp-marq{ display:flex; align-items:center; gap:10px; padding:8px 12px; min-height:56px; }
/* 로고 — 그림은 빛 없이, 네온 빛과 깜빡임은 여기서 씌운다 */
.cp-logo{ display:block; border:0; padding:0; background:none; cursor:pointer; line-height:0; }
.cp-logo img{ height:30px; width:auto; filter:drop-shadow(0 0 4px rgba(255,79,216,.75)) drop-shadow(0 0 10px rgba(54,224,255,.45)); animation:cpFlick 4s infinite; }
.cp.at-home .cp-logo{ visibility:hidden; }
/* 첫 화면은 꽉 채운다 — 위 띠를 걷고 소리 단추만 오른쪽 위에 띄운다 · 게임에 들어가면 띠가 돌아온다 */
.cp.at-home{ padding-top:0; }
.cp.at-home .cp-marq{ padding-top:env(safe-area-inset-top,0px); }
.cp.at-home .cp-marq{ position:absolute; top:0; left:0; right:0; z-index:5; pointer-events:none; background:none; }
.cp.at-home .cp-marq .cp-ib{ pointer-events:auto; background:rgba(0,0,0,.25); }
.cp.at-home .cp-scr{ box-shadow:none; }
.cp-home{ padding-top:calc(env(safe-area-inset-top,0px) + 30px) !important; }
.cp:not(.at-play) .cp-ib.pz{ display:none; }
.cp:not(.at-play):not(.at-end) .cp-ib.rp{ display:none; }
.cp-ib svg .f{ fill:currentColor; }
.cp-ib.rp{ color:#ffb3c0; }
/* 좁은 폰 — 위 띠에 단추 셋(제보 · 멈춤 · 소리)이 다 들어가게 */
@media (max-width:420px){
  .cp-marq{ gap:6px; padding:8px 10px; }
  .cp-ib{ width:36px; height:36px; border-radius:11px; }
  .cp-ib svg{ width:18px; height:18px; }
  .cp-logo img{ height:26px; }
  .cp-now{ gap:4px; }
  .cp-now b{ font-size:14px; padding:5px 10px; }
  .cp-now i{ display:none; }   /* 다음 동사는 판 아래 NEXT 공에 있다 */
}
/* by undergo — 큰 로고 아래 */
.cp-byug{ display:flex; align-items:center; gap:5px; margin-top:-8px; color:#dfe9ff; opacity:.9; }
.cp-byug small{ font:700 11px var(--font); color:var(--dim); }
.cp-byug svg{ width:15px; height:15px; }
.cp-byug b{ font:800 13px var(--font); letter-spacing:.02em; }
/* 📱 앱에서 열리는 월드 · 출시 알림 */
.cp-wapp{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:12px 12px 12px 14px; border-radius:16px; background:rgba(0,0,0,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.cp-wapp p{ margin:0 !important; font:800 13.5px var(--font) !important; color:#fff !important; max-width:none !important; }
.cp-wapp button, .cp-endnotify button{ flex:none; border:0; border-radius:999px; padding:9px 14px; font:900 13px var(--font); color:#3a1d00; cursor:pointer; background:linear-gradient(180deg,#fff0a8,#ffcb57); box-shadow:0 4px 0 #b55e12; }
.cp-wapp button:active, .cp-endnotify button:active{ transform:translateY(3px); box-shadow:0 1px 0 #b55e12; }
.cp-wapp .ok{ font:800 12.5px var(--font); color:#bff5d6; }
.cp-world.lock:has(.cp-wapp){ filter:none; }
.cp-world.lock:has(.cp-wapp) header{ filter:saturate(.3) brightness(.75); }
.cp-endnotify{ width:100%; max-width:420px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px 12px 14px; border-radius:16px; background:rgba(255,95,162,.14); box-shadow:inset 0 0 0 1px rgba(255,95,162,.4); }
.cp-endnotify[hidden]{ display:none; }
.cp-endnotify p{ margin:0 !important; font:800 13.5px var(--font) !important; color:#fff !important; text-align:left; }
.cp-nov{ justify-content:flex-start; padding-top:18px; }
.cp-nbox{ width:100%; max-width:400px; display:flex; flex-direction:column; align-items:stretch; gap:10px; text-align:left; }
.cp-nbox[hidden]{ display:none; }
.cp-nbox img{ align-self:center; width:96px; height:96px; animation:cpBob 1.8s ease-in-out infinite; }
.cp-nbox h3{ margin:0; font:900 21px/1.3 var(--font); color:#fff; text-align:center; }
.cp-nsub{ margin:0 auto 4px !important; text-align:center; }
.cp-chk{ display:flex; align-items:flex-start; gap:10px; font:700 13.5px/1.45 var(--font); color:#fff; cursor:pointer; }
.cp-chk input{ flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:#36e0ff; }
.cp-chk.all{ padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.08); font-weight:900; }
.cp-nfine{ margin:-4px 0 0 30px !important; font-size:12px !important; line-height:1.55 !important; max-width:none !important; }
.cp-npol{ align-self:flex-start; margin-left:30px; font:700 12.5px var(--font); color:#36e0ff; }
.cp-nerr{ margin:0 !important; color:#ff8e9a !important; font-weight:800; text-align:center; max-width:none !important; }
.cp-nerr[hidden]{ display:none; }
.cp-rpdone .cp-back{ margin-top:8px; }
/* 🎉 신청 완료 팝업 */
.cp-ncele{ position:absolute; inset:0; display:grid; place-items:center; padding:16px; background:rgba(8,6,28,.7); overflow:hidden; z-index:3; }
.cp-ncele[hidden]{ display:none; }
.cp-ncard{ position:relative; width:100%; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 20px 22px; border-radius:26px; text-align:center;
  background:linear-gradient(180deg,#3a2590,#1a1446); box-shadow:0 0 0 2px rgba(255,203,87,.6), 0 0 40px rgba(255,95,162,.45), 0 20px 50px rgba(0,0,0,.5); }
.cp-ncele.go .cp-ncard{ animation:cpBoom .6s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes cpBoom{ 0%{ transform:scale(.2) rotate(-8deg); opacity:0 } 70%{ transform:scale(1.06) rotate(1deg); opacity:1 } 100%{ transform:none } }
.cp-ncard img{ width:140px; height:140px; margin:-80px 0 -6px; filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.cp-ncele.go .cp-ncard img{ animation:cpPopIn .5s .15s cubic-bezier(.3,1.8,.5,1) both, cpHop 1.6s .7s ease-in-out infinite; transform-origin:50% 100%; }
.cp-ncard h3{ margin:0; font:900 30px var(--font); color:#fff0b3; text-shadow:0 0 12px rgba(255,203,87,.9), 0 3px 0 #8a5a0a; }
.cp-ncard p{ margin:0 0 8px !important; color:#fff !important; font-size:15px !important; }
.cp-ncard .cp-go{ min-width:160px; }
.cp-conf{ position:absolute; inset:0; pointer-events:none; }
.cp-conf i{ position:absolute; top:-20px; width:9px; height:14px; border-radius:2px; opacity:0; }
.cp-ncele.go .cp-conf i{ animation-name:cpConf; animation-timing-function:cubic-bezier(.25,.5,.5,1); animation-fill-mode:both; }
@keyframes cpConf{ 0%{ opacity:1; translate:0 0; } 100%{ opacity:.9; translate:calc((var(--x,0) * 1px)) 110vh; rotate:540deg; } }
/* 📤 공유 단추 */
.cp-share{ display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; padding:12px 20px; font:900 14.5px var(--font); color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#ff7ac6,#e23c9a); box-shadow:0 5px 0 #8e1f5e, 0 0 18px rgba(255,95,162,.4); }
.cp-share:active{ transform:translateY(4px); box-shadow:0 1px 0 #8e1f5e; }
.cp-share svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
/* 기분 좋은 순간 — 더 크게 · 숨 쉬듯 빛난다 */
.cp-shbox{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.cp-shn{ margin:0 !important; font:800 15px var(--font); color:#ffcb57 !important; text-shadow:0 0 10px rgba(255,203,87,.5); }
.cp-shn[hidden]{ display:none; }
.cp-share.hot{ padding:15px 28px; font-size:17px; animation:cpShare 1.4s ease-in-out infinite; }
.cp-share.hot svg{ width:21px; height:21px; }
@keyframes cpShare{ 0%,100%{ box-shadow:0 5px 0 #8e1f5e, 0 0 14px rgba(255,95,162,.4) } 50%{ box-shadow:0 5px 0 #8e1f5e, 0 0 30px rgba(255,95,162,.95) } }
.cp-ncard .cp-share{ margin-top:4px; }
.cp-cpov{ z-index:9; background:rgba(8,6,28,.94); }
.cp-cpov textarea{ resize:none; line-height:1.5; }
/* ⚔ 받은 도전 — 친구 점수와 나란히 */
.cp-vs{ width:100%; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 14px 12px; border-radius:18px; background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.cp-vs[hidden]{ display:none; }
.cp-vs > b{ font:900 19px var(--font); }
.cp-vs > b.win{ color:#7ef0b0; text-shadow:0 0 12px rgba(126,240,176,.6); }
.cp-vs > b.lose{ color:#ff9aa5; }
.cp-vs div{ display:flex; align-items:center; justify-content:center; gap:16px; width:100%; }
.cp-vs span{ flex:1; text-align:center; font:900 24px var(--font); color:var(--dim); font-variant-numeric:tabular-nums; }
.cp-vs span.me{ color:#fff; }
.cp-vs small{ display:block; font:800 12px var(--font); letter-spacing:.06em; color:var(--dim); }
.cp-vs i{ font:900 13px var(--font); font-style:normal; color:#ff4fd8; letter-spacing:.1em; }
/* 🚩 제보 창 */
.cp-rpov{ justify-content:flex-start; padding-top:20px; }
.cp-rpbox{ width:100%; max-width:400px; display:flex; flex-direction:column; gap:10px; text-align:left; }
.cp-rpbox[hidden]{ display:none; }
.cp-rpbox h3{ display:flex; align-items:center; gap:8px; margin:0 0 2px; font:900 22px var(--font); color:#fff; }
.cp-rpbox h3 svg{ width:24px; height:24px; fill:none; stroke:#ff8e9a; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cp-rpbox h3 svg .f{ fill:#ff8e9a; }
.cp-rpq{ margin:4px 0 0 !important; font:800 13px var(--font) !important; color:var(--dim) !important; max-width:none !important; }
.cp-rplist{ display:flex; flex-wrap:wrap; gap:6px; }
.cp-rplist button{ border:0; border-radius:999px; padding:8px 12px; font:700 14px var(--font); color:#fff; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); cursor:pointer; }
.cp-rplist button.bad{ color:#ffc2ca; background:rgba(255,107,122,.12); }
.cp-rplist button.none{ color:var(--dim); }
.cp-rplist button.on, .cp-rpwhy button.on{ background:#36e0ff; color:#0b1024; box-shadow:0 0 14px rgba(54,224,255,.5); }
.cp-rpwhy{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cp-rpwhy button{ display:flex; align-items:center; gap:8px; border:0; border-radius:14px; padding:12px; font:800 13.5px var(--font); color:#fff; text-align:left; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); cursor:pointer; }
.cp-rpwhy b{ display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:rgba(255,255,255,.14); font:900 13px var(--font); }
.cp-rpnote{ width:100%; border:0; border-radius:12px; padding:12px; font:600 15px var(--font); color:#fff; background:rgba(0,0,0,.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); -webkit-user-select:text; user-select:text; }
.cp-rpnote::placeholder{ color:rgba(169,163,214,.7); }
.cp-rpbox .cp-two{ margin-top:6px; }
.cp-go:disabled{ filter:grayscale(.8) brightness(.7); animation:none; cursor:default; }
.cp-rpdone{ margin-top:30vh; display:flex; flex-direction:column; align-items:center; gap:10px; font:800 17px var(--font); color:#bff5d6; }
.cp-rpdone[hidden]{ display:none; }
.cp-rpdone b{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#2fd0b0; color:#0b1024; font-size:32px; animation:cpPopIn .4s cubic-bezier(.3,1.6,.5,1) both; }
.cp-hlogo{ position:relative; width:min(310px,86%); height:auto; margin-top:4px;
  filter:drop-shadow(0 0 6px rgba(255,79,216,.7)) drop-shadow(0 0 16px rgba(54,224,255,.45)) drop-shadow(0 8px 10px rgba(0,0,0,.45));
  animation:cpFlick 4s infinite, cpBob 2.4s ease-in-out infinite; }
/* 화면이 손가락에 끌려 떠다니지 않게 — 바깥은 고정, 안쪽 목록만 제자리에서 굴린다 · 꾹 누름 메뉴·글자 고르기 막기 */
html,body{ position:fixed; inset:0; overflow:hidden; }
.cp, .cp *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.cp-ov{ overscroll-behavior:none; touch-action:pan-y; scrollbar-width:none; -ms-overflow-style:none; }
.cp-ov::-webkit-scrollbar, .cp ::-webkit-scrollbar{ display:none; width:0; height:0; }
/* 새 동사 딱지 — 시작 단추 위 */
.cp-newv{ display:inline-flex; align-items:center; gap:6px; margin-bottom:-4px; padding:5px 12px; border-radius:999px; font:900 11px var(--font); letter-spacing:.14em; color:#0b1024;
  background:linear-gradient(180deg,#a8fff0,#36e0ff); box-shadow:0 0 14px rgba(54,224,255,.6); animation:cpBob 1.2s ease-in-out infinite; }
.cp-newv[hidden]{ display:none; }
.cp-newv b{ font-size:14px; letter-spacing:0; }
.cp-marq{ touch-action:none; }
.cp img{ -webkit-user-drag:none; pointer-events:none; }
.cp button img{ pointer-events:none; }
@keyframes cpFlick{ 0%,92%,100%{ opacity:1 } 93%{ opacity:.55 } 95%{ opacity:1 } 96%{ opacity:.7 } }
.cp-pl{ font-size:12px; color:var(--dim); margin-top:4px; }
.cp-sp{ flex:1; }
.cp-now{ display:flex; align-items:center; gap:6px; flex:none; }
.cp-now b{ font:800 15px var(--font); color:#3a1d00; background:linear-gradient(180deg,#fff0a8,#ffcb57); border-radius:999px; padding:6px 12px; box-shadow:0 0 12px rgba(255,203,87,.55); }
.cp-now i{ font:700 12.5px var(--font); font-style:normal; color:var(--ink); background:rgba(255,255,255,.1); border-radius:999px; padding:4px 9px; }
.cp-now b:empty, .cp-now i:empty{ display:none; }
.cp-ib{ width:40px; height:40px; border-radius:12px; border:0; background:rgba(255,255,255,.08); color:var(--ink); display:grid; place-items:center; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); flex:none; }
.cp-ib svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cp-ib.pz svg rect{ fill:currentColor; stroke:none; }
.cp-ib.off{ opacity:.45; }
.cp-scr{ position:relative; flex:1; min-height:0; overflow:hidden; box-shadow:inset 0 0 26px rgba(0,0,0,.7); }
.cp-board{ position:absolute; inset:0; }
.cp-cv{ display:block; width:100%; height:100%; touch-action:none; -webkit-user-select:none; user-select:none; }
.cp-ov{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:24px; background:rgba(8,6,28,.86); overflow:auto; }
.cp-ov[hidden]{ display:none !important; }
.cp-ov h2{ margin:0; font:800 42px/1 var(--font); color:#fff; text-shadow:0 0 10px rgba(255,79,216,.9), 0 4px 0 #7a1d6a; }
.cp-ov h2.win{ color:#fff0b3; text-shadow:0 0 12px rgba(255,203,87,.9), 0 4px 0 #8a5a0a; }
.cp-ov p{ margin:0; color:var(--dim); font-size:14px; line-height:1.6; max-width:30ch; }
.cp-one{ font-size:17px !important; font-weight:800; color:#fff !important; }
.cp-pimg{ width:min(280px,80%); aspect-ratio:3/2; object-fit:cover; border-radius:16px; box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.45); }
.cp-pimg[hidden]{ display:none; }
.cp-place{ display:flex; align-items:center; gap:8px; }
.cp-place b{ font:800 15px var(--font); color:#fff; background:rgba(255,255,255,.1); border-radius:999px; padding:8px 14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.cp-shuf{ border:0; background:none; color:#36e0ff; font:700 13px var(--font); cursor:pointer; padding:8px; }
.cp-go{ border:0; border-radius:18px; background:linear-gradient(180deg,#fff0a8,#ffcb57 45%,#ff9f2e); color:#3a1d00; font:900 18px var(--font); padding:15px 40px; cursor:pointer; box-shadow:0 7px 0 #b55e12, 0 0 24px rgba(255,203,87,.55); animation:cpBob 1.6s ease-in-out infinite; }
.cp-go:active{ transform:translateY(5px); box-shadow:0 2px 0 #b55e12; animation:none; }
@keyframes cpBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
.cp-back{ border:0; border-radius:16px; background:rgba(255,255,255,.1); color:var(--ink); font:700 15px var(--font); padding:14px 22px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.cp-two{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.cp-two button{ white-space:nowrap; }
.cp-press{ font:800 13px var(--font); letter-spacing:.2em; color:#36e0ff; animation:cpBlink 1s steps(2) infinite; }
@keyframes cpBlink{ 50%{ opacity:0 } }
.cp-best{ font:800 12px var(--font); color:var(--dim); letter-spacing:.08em; }
.cp-best[hidden]{ display:none; }
.cp-best b{ color:#ffcb57; font-variant-numeric:tabular-nums; }
/* 🏆 주간 리그 — 첫 화면 카드 · 리그 표 · 끝 화면 XP 줄 · 지난주 결과 */
.cp-emb{ --tc:#d08a4e; --tc2:#7a4219; display:grid; place-items:center; width:38px; height:42px; flex:none; font:900 17px var(--font); font-style:normal; color:rgba(0,0,0,.55);
  clip-path:polygon(50% 0,100% 20%,100% 64%,50% 100%,0 64%,0 20%); background:linear-gradient(180deg, var(--tc), var(--tc2)); }
.cp-emb.big{ width:52px; height:58px; font-size:24px; } .cp-emb.huge{ width:96px; height:106px; font-size:44px; margin-top:-70px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.cp-lg{ --tc:#d08a4e; display:flex; align-items:center; gap:12px; width:100%; max-width:360px; margin-top:4px; padding:10px 16px 10px 12px; border:0; border-radius:18px; cursor:pointer; text-align:left; color:#fff;
  background:linear-gradient(90deg, color-mix(in srgb, var(--tc) 28%, transparent), rgba(255,255,255,.06)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 60%, transparent); }
.cp-lg[hidden]{ display:none; }
.cp-lg:active{ transform:translateY(2px); }
.cp-lg span{ flex:1; min-width:0; } .cp-lg b{ display:block; font:900 16px/1.2 var(--font); }
.cp-lg small{ display:block; font:700 12.5px/1.3 var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-lg em{ font:900 22px var(--font); font-style:normal; color:var(--tc); font-variant-numeric:tabular-nums; }
.cp-lg.up small{ color:#7ef0b0; } .cp-lg.down small{ color:#ff9aa5; }
.cp-lg.up{ animation:cpLgGlow 1.8s ease-in-out infinite; }
@keyframes cpLgGlow{ 50%{ box-shadow:inset 0 0 0 1.5px var(--tc), 0 0 18px color-mix(in srgb, var(--tc) 55%, transparent); } }
.cp-lgov{ z-index:8; justify-content:flex-start; padding-top:18px; background:rgba(8,6,28,.95); }
.cp-lgbox{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:10px; }
.cp-lgbox header{ display:flex; align-items:center; gap:12px; text-align:left; }
.cp-lgbox h3{ margin:0; font:900 22px var(--font); color:#fff; } .cp-lgbox header small{ font:700 13px var(--font); color:var(--dim); }
.cp-lglist{ list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:58vh; overflow:auto; scrollbar-width:none; }
.cp-lglist li{ display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:12px; background:rgba(255,255,255,.05); text-align:left; }
.cp-lglist li b{ width:26px; font:900 15px var(--font); color:var(--dim); text-align:center; font-variant-numeric:tabular-nums; }
.cp-lglist li i{ display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:rgba(255,255,255,.08); font-style:normal; overflow:hidden; }
.cp-lglist li i img{ width:30px; height:30px; object-fit:cover; } .cp-lglist li i span{ font-size:16px; }
.cp-lglist li span{ flex:1; min-width:0; font:800 15px var(--font); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-lglist li em{ font:800 14px var(--font); font-style:normal; color:var(--dim); font-variant-numeric:tabular-nums; }
.cp-lglist li.z-up b{ color:#7ef0b0; } .cp-lglist li.z-down b{ color:#ff9aa5; }
.cp-lglist li.me{ background:linear-gradient(90deg, rgba(255,203,87,.28), rgba(255,203,87,.08)); box-shadow:inset 0 0 0 1.5px #ffcb57; }
.cp-lglist li.me em, .cp-lglist li.me b{ color:#ffcb57; }
.cp-lglist li.line{ justify-content:center; padding:2px; background:none; font:900 11px var(--font); letter-spacing:.12em; }
.cp-lglist li.line.up{ color:#7ef0b0; border-top:1.5px dashed rgba(126,240,176,.5); } .cp-lglist li.line.down{ color:#ff9aa5; border-top:1.5px dashed rgba(255,154,165,.5); }
.cp-lgnote{ margin:0 !important; font:700 12px/1.45 var(--font) !important; color:var(--dim) !important; text-align:left; }
.cp-lgres{ z-index:9; }
.cp-lgres .cp-ncard{ margin-top:60px; animation:cpBoom .6s cubic-bezier(.3,1.7,.5,1) both; }
.cp-lgres.up .cp-emb.huge{ animation:cpHop 1.6s .5s ease-in-out infinite; }
.cp-exp{ margin:0; font:900 15px var(--font); color:var(--dim); font-variant-numeric:tabular-nums; }
.cp-exp[hidden]{ display:none; }
.cp-exp.up{ color:#7ef0b0; } .cp-exp.zone{ color:#ffcb57; text-shadow:0 0 12px rgba(255,203,87,.7); animation:cpPopIn .5s cubic-bezier(.3,1.8,.5,1) both; }
/* 🏆 최고 점수 — 첫 화면(모든 판 중 최고) · 끝 화면(이 판 최고 · 새 기록이면 빛남) */
.cp-best{ margin:0; }
.cp-hbest{ margin-top:2px; font-size:14px; }
.cp-best.new{ color:#ffcb57; text-shadow:0 0 10px rgba(255,203,87,.6); animation:cpPopIn .5s cubic-bezier(.3,1.8,.5,1) both; }
/* 끝 화면 */
.cp-endov{ justify-content:flex-start; padding-top:22px; gap:10px; }
.cp-esc{ font:900 30px var(--font); color:#fff; font-variant-numeric:tabular-nums; }
.cp-esc small{ display:block; font:800 10px var(--font); color:var(--dim); letter-spacing:.2em; }
.cp-endov ul{ list-style:none; margin:2px 0 0; padding:0; display:grid; gap:8px; width:100%; max-width:420px; }
.cp-endov li{ position:relative; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.07); border-radius:14px; padding:10px 12px; text-align:left; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); transition:background .2s, box-shadow .2s; }
.cp-endov li.say{ background:rgba(255,255,255,.13); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); }
.cp-endov li img{ width:34px; height:34px; flex:none; }
.cp-endov li .t{ flex:1; min-width:0; }
.cp-endov li b{ display:block; font:700 17px/1.3 var(--font); color:var(--ink); }
.cp-endov li span{ display:block; font-size:13px; color:var(--dim); }
.cp-endov li .ex{ margin-top:4px; font-size:13px; color:#bff5d6; }
.cp-endov li .ex em{ font-style:normal; color:var(--dim); }
.cp-spk{ width:34px; height:34px; border-radius:50%; border:0; display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; flex:none; cursor:pointer; }
.cp-spk svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cp-spk svg path:first-child{ fill:currentColor; }
/* 언더고로 가는 고리 — 강요하지 않는 한 줄 */
.cp-ug{ display:inline-flex; align-items:center; gap:8px; color:#cfe9f2; font:700 13.5px var(--font); text-decoration:none; padding:10px 14px; border-radius:12px; background:rgba(47,111,208,.16); box-shadow:inset 0 0 0 1px rgba(91,147,232,.35); }
.cp-ug svg{ width:18px; height:18px; flex:none; }
/* 작은 상표 */
.cp-by{ display:inline-flex; align-items:center; gap:6px; color:var(--dim); font:700 12px var(--font); text-decoration:none; opacity:.85; }
.cp-by svg{ width:16px; height:16px; }
.cp-pz h2{ font-size:34px; }
.cp-ug[hidden]{ display:none; }
.cp-dare{ font:800 15px var(--font) !important; color:#ffcb57 !important; letter-spacing:.02em; }
.cp-dare[hidden]{ display:none; }
.cp-dare b{ font-size:20px; font-variant-numeric:tabular-nums; }
.cp-masc{ width:130px; height:130px; margin-bottom:-14px; animation:cpPopIn .5s cubic-bezier(.3,1.6,.5,1) both, cpBob 1.6s .5s ease-in-out infinite; }
@keyframes cpPopIn{ from{ transform:scale(.3) rotate(-12deg); opacity:0 } to{ transform:none; opacity:1 } }

/* ── 첫 화면 — 레벨 지도 ── */
.cp-home{ justify-content:flex-start; gap:18px; padding:18px 16px 28px; background:radial-gradient(120% 60% at 50% 0%, #3a2590 0%, rgba(14,10,40,.94) 60%), rgba(8,6,28,.9); }
.cp-hero{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; padding-top:4px; }
/* 로고 뒤 빛 — 방사형 줄무늬(욱일기를 떠올릴 수 있어 2026-10-21 뺌) 대신 분홍 하늘 빛이 숨 쉬듯 번지고 작은 방울이 떠오른다 */
.cp-glow{ position:absolute; top:-40px; left:50%; width:360px; height:300px; margin-left:-180px; pointer-events:none; }
.cp-glow b{ position:absolute; inset:0; background:radial-gradient(42% 46% at 36% 46%, rgba(255,79,216,.34), transparent 70%), radial-gradient(40% 44% at 66% 52%, rgba(54,224,255,.28), transparent 70%), radial-gradient(30% 30% at 50% 40%, rgba(255,240,168,.16), transparent 70%); filter:blur(6px); animation:cpBreath 6s ease-in-out infinite; }
@keyframes cpBreath{ 0%,100%{ transform:scale(1) translateX(0); opacity:.85 } 50%{ transform:scale(1.08) translateX(6px); opacity:1 } }
.cp-glow i{ position:absolute; bottom:22%; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0 18%, rgba(143,243,255,.25) 40%, rgba(54,200,255,.08) 70%); box-shadow:inset 0 0 0 1.2px rgba(160,240,255,.55); opacity:0; animation:cpRise 7s ease-in infinite; }
.cp-glow i:nth-of-type(1){ left:14%; animation-delay:0s; }
.cp-glow i:nth-of-type(2){ left:26%; width:7px; height:7px; animation-delay:2.4s; animation-duration:6s; }
.cp-glow i:nth-of-type(3){ left:40%; width:13px; height:13px; animation-delay:4.1s; animation-duration:8s; }
.cp-glow i:nth-of-type(4){ left:61%; width:8px; height:8px; animation-delay:1.2s; }
.cp-glow i:nth-of-type(5){ left:74%; width:12px; height:12px; animation-delay:3.3s; animation-duration:7.5s; }
.cp-glow i:nth-of-type(6){ left:86%; width:6px; height:6px; animation-delay:5.2s; animation-duration:6.5s; }
.cp-glow i:nth-of-type(7){ left:52%; width:9px; height:9px; animation-delay:6s; animation-duration:9s; }
@keyframes cpRise{ 0%{ transform:translate(0,0) scale(.6); opacity:0 } 15%{ opacity:.9 } 70%{ opacity:.7 } 100%{ transform:translate(8px,-190px) scale(1.1); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .cp-glow b, .cp-glow i{ animation:none; } .cp-glow i{ display:none; } }
@keyframes cpSpin{ to{ transform:rotate(360deg) } }
.cp-nib{ position:relative; width:150px; height:150px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); animation:cpHop 2.4s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes cpHop{ 0%,60%,100%{ transform:translateY(0) scale(1,1) } 70%{ transform:translateY(0) scale(1.08,.9) } 80%{ transform:translateY(-16px) scale(.95,1.06) } 90%{ transform:translateY(0) scale(1.05,.95) } }
.cp-home .cp-one{ font-size:15px !important; opacity:.9; margin-top:-2px; }
.cp-big{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:220px; padding:14px 40px 12px; font-size:30px; letter-spacing:.06em; border-radius:22px; }
.cp-big small{ font:900 13px var(--font); letter-spacing:.12em; color:#7a3a00; }
.cp-big small:empty{ display:none; }
.cp-hrow{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.cp-daily{ display:flex; align-items:center; gap:9px; border:0; cursor:pointer; padding:9px 16px 9px 10px; border-radius:16px; color:#fff; text-align:left;
  background:linear-gradient(180deg,#ff7ac6,#e23c9a); box-shadow:0 5px 0 #8e1f5e, 0 0 18px rgba(255,95,162,.45); }
.cp-daily:active{ transform:translateY(4px); box-shadow:0 1px 0 #8e1f5e; }
.cp-daily b{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.22); font-size:18px; animation:cpSpin 8s linear infinite; }
.cp-daily em{ display:block; font:900 15px/1.1 var(--font); font-style:normal; }
.cp-daily small{ display:block; font:700 11px var(--font); opacity:.85; }
.cp-daily.done{ background:linear-gradient(180deg,#5d5a86,#3f3c66); box-shadow:0 5px 0 #24223f; }
.cp-daily.done b{ animation:none; }
.cp-tot{ display:flex; align-items:center; gap:5px; padding:9px 14px; border-radius:16px; background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); font:900 17px var(--font); font-variant-numeric:tabular-nums; }
.cp-tot b{ color:#ffcb57; text-shadow:0 0 10px rgba(255,203,87,.8); }
/* 첫 화면 공유 — 친구에게 보내기 · 링크 저장(폰 공유 창의 복사 · 메모 · 책갈피) */
.cp-hshare{ display:grid; place-items:center; width:44px; height:44px; flex:none; border:0; border-radius:16px; cursor:pointer; color:#fff;
  background:linear-gradient(180deg,#ff7ac6,#e23c9a); box-shadow:0 4px 0 #8e1f5e, 0 0 14px rgba(255,95,162,.35); }
.cp-hshare:active{ transform:translateY(3px); box-shadow:0 1px 0 #8e1f5e; }
.cp-hshare.ok{ background:linear-gradient(180deg,#7ef0b0,#2fb97a); box-shadow:0 4px 0 #1a7a4f; }
.cp-hshare.ok svg{ display:none; }
.cp-hshare.ok::after{ content:'✓'; font:900 22px var(--font); }
.cp-hshare svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.cp-worlds{ display:grid; gap:16px; width:100%; }
.cp-world{ --wc:#4f8cff; position:relative; border-radius:22px; padding:12px 12px 16px; text-align:left;
  background:linear-gradient(180deg, color-mix(in srgb, var(--wc) 34%, #120d36), #120d36 80%); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--wc) 55%, transparent), 0 8px 22px rgba(0,0,0,.35); }
.cp-world header{ display:flex; align-items:center; gap:10px; }
.cp-world header img{ width:64px; height:64px; margin:-22px 0 -6px -4px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)); animation:cpBob 2.2s ease-in-out infinite; }
.cp-world header div{ flex:1; min-width:0; }
.cp-world header small{ font:900 10.5px var(--font); letter-spacing:.2em; color:var(--wc); filter:brightness(1.5); }
.cp-world h3{ margin:0; font:900 20px/1.15 var(--font); color:#fff; }
.cp-wstar{ font:900 15px var(--font); color:#ffcb57; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cp-wstar small{ color:var(--dim); font-size:11px; }
.cp-world.lock{ filter:saturate(.25) brightness(.7); }
.cp-world.lock header img{ animation:none; }
.cp-wlock{ margin:10px 0 0 !important; font-size:13px !important; max-width:none !important; }

/* 지그재그 길 — 다섯 칸씩 네 줄 · 칸 사이 점선 */
.cp-path{ --rd:color-mix(in srgb, var(--wc) 30%, rgba(255,255,255,.08)); position:relative; display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:62px; gap:4px 0; margin-top:12px;
  background:
    linear-gradient(var(--rd),var(--rd)) 50% 28px/80% 6px no-repeat,
    linear-gradient(var(--rd),var(--rd)) 50% 94px/80% 6px no-repeat,
    linear-gradient(var(--rd),var(--rd)) 50% 160px/80% 6px no-repeat,
    linear-gradient(var(--rd),var(--rd)) 50% 226px/80% 6px no-repeat,
    linear-gradient(var(--rd),var(--rd)) calc(90% + 0px) 31px/6px 66px no-repeat,
    linear-gradient(var(--rd),var(--rd)) calc(10% + 0px) 97px/6px 66px no-repeat,
    linear-gradient(var(--rd),var(--rd)) calc(90% + 0px) 163px/6px 66px no-repeat; }
.cp-node{ position:relative; justify-self:center; align-self:center; width:48px; height:48px; border-radius:50%; border:0; padding:0; cursor:pointer; color:#fff;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wc) 60%, #fff), var(--wc) 55%, color-mix(in srgb, var(--wc) 60%, #000));
  box-shadow:0 4px 0 color-mix(in srgb, var(--wc) 45%, #000), inset 0 -3px 0 rgba(0,0,0,.18); transition:transform .12s; }
.cp-node:active{ transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb, var(--wc) 45%, #000); }
.cp-node b{ font:900 18px/48px var(--font); text-shadow:0 2px 0 rgba(0,0,0,.25); }
.cp-node i{ position:absolute; left:50%; bottom:-13px; transform:translateX(-50%); font-style:normal; font-size:12px; letter-spacing:-1px; color:#ffcb57; text-shadow:0 0 6px rgba(255,203,87,.7), 0 1px 0 #6b3d00; white-space:nowrap; }
.cp-node i u{ text-decoration:none; color:rgba(255,255,255,.22); text-shadow:none; }
.cp-node.done{ background:radial-gradient(circle at 35% 30%, #fff6c8, #ffcb57 55%, #e08a1e); color:#5a2c00; box-shadow:0 4px 0 #9a5410; }
.cp-node.done b{ text-shadow:none; }
.cp-node.lock{ cursor:default; background:#2a2552; box-shadow:0 3px 0 #17142f, inset 0 0 0 2px rgba(255,255,255,.06); }
.cp-node.lock::after{ content:''; position:absolute; inset:16px 17px 14px; border-radius:3px; background:rgba(255,255,255,.18);
  -webkit-mask:linear-gradient(#000 0 0) bottom/100% 60% no-repeat, radial-gradient(circle at 50% 40%, transparent 4px, #000 4.5px 7px, transparent 7.5px) top/100% 60% no-repeat; }
.cp-node.cur{ width:56px; height:56px; z-index:2; animation:cpPulse 1.2s ease-in-out infinite; }
.cp-node.cur b{ line-height:56px; font-size:21px; }
/* 🛤 구불구불한 세로 길 — 노드는 길 위 자리에(가운데 맞춤) · 지나온 길은 월드 색 · 닙이 지금 판 옆에 */
.cp-trail{ position:relative; width:100%; margin:4px 0 6px; }
.cp-trail svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cp-trail path{ fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.cp-trail path.bg{ stroke:rgba(255,255,255,.14); stroke-width:10; stroke-dasharray:2 14; }
.cp-trail path.on{ stroke:var(--wc); stroke-width:10; opacity:.75; filter:drop-shadow(0 0 6px var(--wc)); }
.cp-trail .cp-node{ position:absolute; transform:translate(-50%,-50%); justify-self:auto; align-self:auto; }
.cp-trail .cp-node:active{ transform:translate(-50%,-50%) translateY(3px); }
/* 접힌 판 — 작은 점(깬 판은 금색) · 눌러도 그 판으로 간다 */
.cp-trail .cp-node.far{ width:18px; height:18px; border-radius:50%; outline:0; animation:none; box-shadow:0 2px 0 rgba(0,0,0,.35); }
.cp-trail .cp-node.far::before, .cp-trail .cp-node.far::after{ display:none; }
.cp-trail .cp-node.far > *{ display:none; }
.cp-trail .cp-node.far.lock{ background:#2a2552; }
.cp-pill.trailx{ display:block; margin:2px auto 4px; font-size:12.5px; padding:7px 14px; color:var(--dim); }
/* 🧹 첫 화면 정리(2026-10-16) — 시작 아래 칩 셋(오늘의 도전 · 리그 순위 · 도감) · 로고 작게 · 공유는 위 오른쪽 아이콘 */
.cp-hlogo{ width:min(250px,70%) !important; }
.cp-hrow{ flex-wrap:wrap; justify-content:center; gap:6px; }
.cp-hrow > button{ height:44px; }
.cp-hrow .cp-daily{ padding:6px 12px 6px 6px; gap:6px; }
.cp-hrow .cp-daily b{ width:28px; height:28px; font-size:15px; }
.cp-dexc > span{ display:none; }
.cp-hrow .cp-daily small{ display:none; }
.cp-hrow .cp-daily em{ font-size:14px; }
.cp-hrow .cp-lg{ width:auto; max-width:none; margin:0; gap:6px; padding:6px 12px 6px 7px; border-radius:16px; }
.cp-hrow .cp-lg .cp-emb{ width:26px; height:29px; font-size:13px; }
.cp-hrow .cp-lg b{ font:900 15px var(--font); color:var(--tc); white-space:nowrap; }
.cp-hrow .cp-lg small, .cp-hrow .cp-lg em{ display:none; }
.cp-dexc{ display:flex; align-items:center; gap:6px; padding:6px 12px; border:0; border-radius:16px; cursor:pointer; color:#fff; font:900 14.5px var(--font);
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18); }
.cp-dexc:active, .cp-hrow .cp-lg:active{ transform:translateY(2px); }
.cp-dexc u{ text-decoration:none; padding:2px 7px; border-radius:999px; font:900 12px var(--font); color:#0b1024; background:#7ef0b0; }
.cp-dexc u[hidden]{ display:none; }
.cp-dexc.due{ box-shadow:inset 0 0 0 1.5px #7ef0b0, 0 0 14px rgba(126,240,176,.45); animation:cpBob 1.6s ease-in-out infinite; }
.cp-lgstat{ margin:0 !important; text-align:left; font:800 14px var(--font) !important; color:#7ef0b0 !important; }
.cp-lgbox .cp-hbest{ text-align:left; }
.cp-dexov .cp-pill.rev{ align-self:flex-start; }
.cp:not(.at-home) .cp-ib.sh{ display:none; }
.cp-ib.sh svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cp-ib.sh.ok{ background:#2fb97a !important; }
/* 🧭 아래 탭 넷 — 첫 화면(과 그 위 창)에서만 · 판 안과 끝 화면에선 숨는다 */
.cp-tabs{ flex:none; display:flex; justify-content:space-around; gap:2px; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); margin-bottom:calc(-1 * env(safe-area-inset-bottom,0px));
  background:#120d33; box-shadow:0 -1px 0 rgba(255,255,255,.08), 0 -8px 20px rgba(0,0,0,.35); z-index:6; }
.cp:not(.at-home) .cp-tabs{ display:none; }
.cp-tabs button{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; border:0; background:none; cursor:pointer; padding:5px 0 3px; border-radius:12px; color:var(--dim); font:800 11.5px var(--font); }
.cp-tabs button i{ font-style:normal; font-size:20px; line-height:1; filter:grayscale(.7) opacity(.75); }
.cp-tabs button.on{ color:#fff; background:rgba(255,255,255,.07); } .cp-tabs button.on i{ filter:none; }
.cp-tabs button u{ position:absolute; top:0; right:calc(50% - 30px); text-decoration:none; padding:1px 6px; border-radius:999px; font:900 10.5px var(--font); color:#0b1024; background:#7ef0b0; }
.cp-tabs button u[hidden]{ display:none; }
/* 🎮 놀이터 카드 */
.cp-arcov{ z-index:8; justify-content:flex-start; padding-top:18px; background:rgba(8,6,28,.95); }
.cp-arcbox{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:10px; text-align:left; }
.cp-arcbox h3{ margin:0; font:900 24px var(--font); color:#fff; }
.cp-arclist{ display:grid; gap:10px; }
.cp-arc{ display:flex; align-items:center; gap:12px; width:100%; border:0; border-radius:20px; padding:12px 14px; cursor:pointer; text-align:left; color:#fff;
  background:linear-gradient(135deg, rgba(91,107,255,.35), rgba(255,79,216,.18)); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2), 0 6px 18px rgba(0,0,0,.3); }
.cp-arc:active{ transform:translateY(2px); }
.cp-arc img{ width:64px; height:64px; flex:none; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.cp-arc span{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cp-arc b{ font:900 18px var(--font); } .cp-arc small{ font:700 12.5px var(--font); color:var(--dim); } .cp-arc em{ font:900 11.5px var(--font); font-style:normal; color:#36e0ff; letter-spacing:.06em; }
.cp-arc i{ flex:none; font:900 12.5px var(--font); font-style:normal; color:#0b1024; background:#ffcb57; border-radius:999px; padding:7px 11px; }
.cp-arc.day{ background:linear-gradient(135deg, rgba(255,203,87,.4), rgba(255,95,162,.22)); box-shadow:inset 0 0 0 1.5px rgba(255,203,87,.7), 0 0 20px rgba(255,203,87,.25); }
.cp-arc.day em{ color:#ffcb57; } .cp-arc.day.done i{ background:rgba(255,255,255,.18); color:#fff; }
.cp-arc.soon{ cursor:default; opacity:.6; background:rgba(255,255,255,.05); } .cp-arc.soon i{ background:rgba(255,255,255,.15); color:var(--dim); }
/* 🧩 필업(js/fill.js) — 언더고 필업 그대로(원색 타일 · 금빛 문장 칸) · 청크팝 판 자리(data-board) 안에 그린다 */
.fu{ position:absolute; inset:0; display:flex; flex-direction:column; gap:9px; padding:10px 12px 12px; color:#f3fbff; background:radial-gradient(120% 70% at 50% 0%, #1d4a5c 0%, #0a1d26 70%); }
.fu-sent{ position:relative; flex:none; border-radius:18px; padding:24px 12px 9px; background:linear-gradient(180deg,#14495a,#0e3341); box-shadow:inset 0 0 0 2px rgba(255,201,74,.35), 0 0 22px -6px rgba(255,201,74,.5); text-align:center; }
.fu-tag{ position:absolute; top:7px; left:12px; right:12px; display:flex; justify-content:space-between; font:800 11px var(--font); color:#9cc3cf; letter-spacing:.04em; }
.fu-tag b{ color:#ffc94a; font-size:13px; }
.fu-en{ min-height:42px; font:900 19px/1.6 var(--font); color:#fff1c2; text-wrap:balance; }
.fu-en .slot{ display:inline-grid; place-items:center; vertical-align:middle; margin:0 3px; width:36px; height:36px; border-radius:12px; border:2px dashed rgba(255,201,74,.85); background:color-mix(in srgb, var(--c) 30%, transparent); }
.fu-en .slot img{ width:28px; height:28px; } .fu-en .slot .em{ font-size:22px; }
.fu-en u.w{ text-decoration:none; color:#fff; background:rgba(255,201,74,.35); border-radius:7px; padding:0 6px; }
.fu-en.full{ animation:fuPop .5s cubic-bezier(.3,1.6,.5,1); }
.fu-ko{ margin-top:3px; font:800 14px var(--font); color:#9cc3cf; }
.fu-pips{ display:flex; justify-content:center; gap:6px; margin-top:7px; }
.fu-pips i{ width:22px; height:7px; border-radius:4px; background:rgba(255,255,255,.12); } .fu-pips i.on{ background:#ffc94a; box-shadow:0 0 8px rgba(255,201,74,.8); }
.fu-time{ flex:none; height:9px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.fu-time i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#2fe0a8,#7af0c8); transform-origin:left; }
.fu-time.warn i{ background:linear-gradient(90deg,#ff6b6b,#ffa07a); animation:cpBlink .5s steps(2) infinite; }
.fu-wrap{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.fu-board{ position:relative; flex:none; border-radius:18px; background:linear-gradient(180deg,#0f3542,#0a2630); box-shadow:inset 0 0 0 2px rgba(111,243,203,.18), inset 0 0 30px rgba(0,0,0,.55); touch-action:none; user-select:none; -webkit-user-select:none; overflow:hidden; }
.fu-cell{ position:absolute; border-radius:11px; background:rgba(255,255,255,.035); }
.fu-tile{ position:absolute; left:0; top:0; display:grid; place-items:center; transition:transform .17s cubic-bezier(.3,.9,.4,1); cursor:pointer; }
.fu-tile .f{ position:relative; width:90%; height:90%; border-radius:28%; display:grid; place-items:center; background:linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c));
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 color-mix(in srgb, var(--c) 55%, #000); transition:transform .15s; }
.fu-tile .f img{ width:72%; height:72%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 2px rgba(0,0,0,.28)); }
.fu-tile .f .em{ font-size:22px; }
.fu-tile.sel .f{ transform:scale(1.12); box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), 0 0 0 3px #fff, 0 0 18px var(--c); }
.fu-tile.tgt .f{ box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 color-mix(in srgb, var(--c) 55%, #000), 0 0 0 2px rgba(255,241,194,.9), 0 0 14px rgba(255,201,74,.75); }
.fu-tile.hint .f{ animation:fuWig .5s ease-in-out 3; }
.fu-tile.pop .f{ animation:fuBurst .24s ease-in forwards; }
.fu-tile .sp{ position:absolute; inset:14%; border-radius:30%; pointer-events:none; }
.fu-tile.sp-h .sp{ background:repeating-linear-gradient(0deg, transparent 0 9%, rgba(255,255,255,.55) 9% 15%, transparent 15% 24%); }
.fu-tile.sp-v .sp{ background:repeating-linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.55) 9% 15%, transparent 15% 24%); }
.fu-beam{ position:absolute; pointer-events:none; border-radius:999px; background:linear-gradient(90deg, transparent, #fff, transparent); animation:fuFade .35s ease-out forwards; } .fu-beam.v{ background:linear-gradient(180deg, transparent, #fff, transparent); }
.fu-spark{ position:absolute; width:8px; height:8px; border-radius:50%; pointer-events:none; animation:fuSpark .55s ease-out forwards; }
.fu-big{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); pointer-events:none; text-align:center; z-index:5; font:900 38px/1 var(--font); color:#fff1c2; text-shadow:0 0 14px rgba(255,201,74,.9), 0 4px 0 #8a5a0a; animation:fuBig .9s ease-out forwards; white-space:nowrap; }
.fu-big small{ display:block; margin-top:6px; font:900 16px var(--font); color:#6ff3cb; text-shadow:0 0 10px rgba(47,224,168,.9), 0 2px 0 #0b6b52; }
.fu-foot{ flex:none; display:flex; align-items:baseline; justify-content:center; gap:8px; font:900 22px var(--font); font-variant-numeric:tabular-nums; }
.fu-foot small{ font:800 10.5px var(--font); color:#9cc3cf; letter-spacing:.16em; }
@keyframes fuPop{ 0%{ transform:scale(.6) } 70%{ transform:scale(1.08) } 100%{ transform:none } }
@keyframes fuWig{ 0%,100%{ transform:none } 30%{ transform:rotate(-9deg) scale(1.06) } 70%{ transform:rotate(9deg) scale(1.06) } }
@keyframes fuBurst{ to{ transform:scale(1.35); opacity:0 } }
@keyframes fuFade{ to{ opacity:0 } }
@keyframes fuSpark{ to{ transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0 } }
@keyframes fuBig{ 0%{ transform:translate(-50%,-50%) scale(.4); opacity:0 } 20%{ transform:translate(-50%,-50%) scale(1.1); opacity:1 } 75%{ opacity:1 } 100%{ transform:translate(-50%,-60%) scale(1); opacity:0 } }
/* ↔ 첫 화면은 세로로만 움직인다(위아래로 내릴 때 좌우로 흔들리던 것) — 넘치는 꾸밈은 잘라 낸다 */
.cp-ov{ overflow-x:hidden; overscroll-behavior-x:none; }
/* 범인 — 로고 뒤 빛살(320px 네모)이 돌면서 대각선일 때 화면보다 넓어져 가로 폭이 수시로 바뀌었다 → 빛살이 있는 머리 영역 안에서만 */
/* 좌우만 자른다(돌아가는 빛이 가로 스크롤을 흔들지 않게) · 위아래는 열어 둬 빛이 상태 표시줄 밑까지 자연스럽게 번진다 */
.cp-hero{ overflow-x:clip; overflow-y:visible; }
.cp-world{ overflow:hidden; }
html, body{ overflow-x:hidden; }
.cp-nibw{ position:absolute; width:58px; height:58px; margin:-36px 0 0 -29px; pointer-events:none; z-index:3; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));
  transition:left .9s cubic-bezier(.4,1.4,.5,1), top .9s cubic-bezier(.4,1.4,.5,1); animation:cpHop 2.2s ease-in-out infinite; transform-origin:50% 100%; }
.cp-nibw.jump{ animation:cpNibJump .9s ease-in-out 1, cpHop 2.2s .9s ease-in-out infinite; }
@keyframes cpNibJump{ 0%{ translate:0 0 } 40%{ translate:0 -46px } 100%{ translate:0 0 } }
/* 🧠 익힘 링 — 노드 둘레가 익힌 만큼 찬다 · 다 차면 금색 · 🔁 다시 볼 때 */
.mxr{ position:absolute; inset:-7px; border-radius:50%; pointer-events:none; --rc:#7ef0b0;
  background:conic-gradient(var(--rc) var(--p), rgba(255,255,255,.13) 0); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
.mxr.full{ --rc:#ffcb57; filter:drop-shadow(0 0 6px rgba(255,203,87,.9)); }
.cp-node .dueb{ position:absolute; bottom:-8px; right:-12px; z-index:3; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; text-decoration:none; font-size:12px;
  background:#1a1640; box-shadow:0 0 0 2px #7ef0b0, 0 0 10px rgba(126,240,176,.6); animation:cpBob 1.2s ease-in-out infinite; }
/* 🔁 다시 볼 짝 · 📖 도감 단추 · 끝 화면 익힘 줄 · 헷갈린 짝만 다시 */
.cp-mxrow{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:100%; max-width:360px; }
.cp-pill{ border:0; border-radius:999px; padding:9px 14px; cursor:pointer; font:900 13.5px var(--font); color:#fff; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2); }
.cp-pill[hidden]{ display:none; }
.cp-pill:active{ transform:translateY(2px); }
.cp-pill.rev{ color:#0b1024; background:linear-gradient(180deg,#b6ffd8,#5fe0a0); box-shadow:0 4px 0 #2a8a5e, 0 0 14px rgba(126,240,176,.5); animation:cpBob 1.6s ease-in-out infinite; }
.cp-pill.retry{ color:#0b1024; background:linear-gradient(180deg,#b6ffd8,#5fe0a0); box-shadow:0 4px 0 #2a8a5e; padding:11px 18px; font-size:15px; }
.cp-mx{ margin:0; font:900 15px var(--font); color:#7ef0b0; font-variant-numeric:tabular-nums; } .cp-mx[hidden]{ display:none; } .cp-mx.full{ color:#ffcb57; text-shadow:0 0 10px rgba(255,203,87,.6); }
.cp-endov li .tag{ display:inline-block; margin-top:3px; padding:2px 8px; border-radius:999px; font:800 11px var(--font); font-style:normal; }
.cp-endov li .tag.ok{ color:#7ef0b0; background:rgba(126,240,176,.12); } .cp-endov li .tag.sh{ color:#ffb36b; background:rgba(255,179,107,.14); }
.cp-endov li.shaky{ box-shadow:inset 0 0 0 1px rgba(255,179,107,.35); }
.cp-dex{ max-height:58vh; overflow:auto; scrollbar-width:none; text-align:left; }
.cp-dex h3.dexsec{ margin:14px 2px 4px; font:900 15px var(--font); color:#fff; } .cp-dex h3.dexsec b{ color:#7ef0b0; } .cp-dex h3.dexsec:first-child{ margin-top:4px; }
.cp-dex .dc.fill{ max-width:100%; background:rgba(255,201,74,.1); box-shadow:inset 0 0 0 1.5px rgba(255,201,74,.45); }
.cp-dex h4{ margin:10px 2px 6px; font:900 12px var(--font); letter-spacing:.1em; color:var(--dim); }
.cp-dex > div > div, .cp-dex div{ display:flex; flex-wrap:wrap; gap:6px; }
.cp-dex .dc{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; border:0; border-radius:12px; padding:7px 10px; text-align:left; cursor:pointer; color:#fff; background:rgba(126,240,176,.12); box-shadow:inset 0 0 0 1.5px rgba(126,240,176,.45); }
.cp-dex .dc b{ font:800 14px var(--font); } .cp-dex .dc small{ font:700 11px var(--font); color:var(--dim); } .cp-dex .dc em{ font:800 10.5px var(--font); font-style:normal; color:#7ef0b0; }
.cp-dex .dc.due{ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1.5px rgba(126,240,176,.3); opacity:.8; }
.cp-dex .dc.seen{ background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); opacity:.6; }
.cp-dex .dc.new{ cursor:default; color:rgba(255,255,255,.25); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); font:900 13px var(--font); letter-spacing:.2em; }
/* ⭐ 특별 판 — 둥근 네모 · 색 테두리 · 오른쪽 위 딱지(🔁 ⚡ 🔥 👑) · 월드 보스는 더 크게 */
.cp-node.sp{ --sc:#ffcb57; border-radius:16px; outline:2.5px solid var(--sc); outline-offset:2px; }
.cp-node.sp-review{ --sc:#7ef0b0; } .cp-node.sp-rush{ --sc:#ff6b7a; } .cp-node.sp-combo{ --sc:#ff4fd8; } .cp-node.sp-boss{ --sc:#ffcb57; width:56px; height:56px; }
.cp-node.sp-boss b{ line-height:56px; }
.cp-node.sp.lock{ outline-color:color-mix(in srgb, var(--sc) 45%, transparent); }
.cp-node .tyb{ position:absolute; top:-10px; right:-10px; z-index:3; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; text-decoration:none; font-size:13px;
  background:#1a1640; box-shadow:0 0 0 2px var(--sc), 0 0 10px color-mix(in srgb, var(--sc) 60%, transparent); }
.cp-goal{ margin:0; font:900 15px var(--font); color:#ff9ad9; font-variant-numeric:tabular-nums; } .cp-goal[hidden]{ display:none; } .cp-goal.ok{ color:#ffcb57; text-shadow:0 0 10px rgba(255,203,87,.6); }
.cp-node.cur::before{ content:'▼'; position:absolute; top:-22px; left:50%; transform:translateX(-50%); color:#fff; font-size:14px; text-shadow:0 0 8px var(--wc); animation:cpBob .8s ease-in-out infinite; }
@keyframes cpPulse{ 0%,100%{ box-shadow:0 4px 0 color-mix(in srgb, var(--wc) 45%, #000), 0 0 0 0 color-mix(in srgb, var(--wc) 70%, transparent) } 50%{ box-shadow:0 4px 0 color-mix(in srgb, var(--wc) 45%, #000), 0 0 0 10px transparent } }

/* ── 끝 화면 — 별 셋 ── */
.cp-endlv{ font:900 12px var(--font); letter-spacing:.22em; color:#36e0ff; }
.cp-stars{ display:flex; gap:6px; align-items:flex-end; margin:-2px 0 2px; }
.cp-stars[hidden]{ display:none; }
.cp-stars i{ width:46px; height:46px; background:rgba(255,255,255,.12); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.cp-stars i:nth-child(2){ width:58px; height:58px; }
.cp-stars i.on{ background:linear-gradient(180deg,#fff6c8,#ffcb57 50%,#ff9f2e); filter:drop-shadow(0 0 8px rgba(255,203,87,.9)); animation:cpStar .45s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes cpStar{ from{ transform:scale(2.2) rotate(-40deg); opacity:0 } to{ transform:none; opacity:1 } }
.cp-endov{ background:radial-gradient(90% 50% at 50% 18%, rgba(70,40,160,.9), rgba(8,6,28,.95) 70%); }
.cp-endov .cp-two{ margin:4px 0 6px; }
.cp-endov .cp-two .cp-back{ padding:12px 18px; font-size:14px; }
.cp-endov .cp-two .cp-go:not([hidden]) ~ .cp-back{ padding:10px 14px; }
.cp-endov .cp-two .cp-go{ padding:14px 30px; }
.cp-endov li .pic{ width:34px; height:34px; flex:none; }
.cp-endov li .pic.vb{ display:grid; place-items:center; border-radius:50%; background:linear-gradient(180deg,#5b6bff,#3a2bb0); font:900 10px var(--font); color:#fff; letter-spacing:-.2px; overflow:hidden; }
/* 그림 단추 셋 — [레벨 지도] [▶ 주인공] [↻ 다시] · 가운데가 크다 */
.cp-acts{ display:flex; align-items:flex-end; justify-content:center; gap:18px; margin:6px 0 8px; }
.cp-act{ display:flex; flex-direction:column; align-items:center; gap:7px; border:0; background:none; padding:0; cursor:pointer; color:var(--ink); font:800 13px var(--font); }
.cp-act[hidden]{ display:none; }
.cp-act i{ display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22), 0 4px 0 rgba(0,0,0,.35); }
.cp-act svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cp-act svg .f{ fill:currentColor; stroke:none; }
.cp-act:active i{ transform:translateY(3px); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22), 0 1px 0 rgba(0,0,0,.35); }
.cp-act.main{ color:#3a1d00; }
.cp-act.main span{ color:#fff0b3; font-size:15px; }
.cp-act.main i{ width:84px; height:84px; background:linear-gradient(180deg,#fff0a8,#ffcb57 45%,#ff9f2e); box-shadow:0 6px 0 #b55e12, 0 0 24px rgba(255,203,87,.55); animation:cpBob 1.6s ease-in-out infinite; }
.cp-act.main svg{ width:40px; height:40px; fill:currentColor; stroke:none; }
.cp-act.main:active i{ transform:translateY(5px); box-shadow:0 1px 0 #b55e12; animation:none; }
.cp-act[data-again].main svg, .cp-act[data-again].main svg path{ fill:none; stroke:currentColor; stroke-width:2.8; }
/* 틀린 것 + 「이거 맞는데요?」 */
.cp-endov ul.cp-wrong{ margin-top:2px; }
.cp-endov ul.cp-wrong[hidden]{ display:none; }
.cp-endov .cp-wrong li{ cursor:default; background:rgba(255,107,122,.08); box-shadow:inset 0 0 0 1px rgba(255,107,122,.25); padding:8px 10px; }
.cp-endov .cp-wrong .x{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(255,107,122,.2); color:#ff8e9a; font:900 13px var(--font); flex:none; }
.cp-endov .cp-wrong b{ font-size:15px; color:#d9d4ff; }
.cp-flag{ flex:none; border:0; border-radius:999px; padding:7px 11px; font:800 12px var(--font); color:#fff; cursor:pointer; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); white-space:nowrap; }
.cp-flag.done{ background:rgba(126,240,176,.18); color:#bff5d6; box-shadow:none; cursor:default; }
.cp-link{ border:0; background:none; color:var(--dim); font:700 14px var(--font); cursor:pointer; padding:8px; text-decoration:underline; text-underline-offset:3px; }
.cp-by:not([href]){ cursor:default; }

/* 🧊 큐브 상자(옛 도감 · js/cubes.js) — 시안 docs/mockups/cube-patterns.html */
.cb-sum{ display:flex; gap:8px; margin:4px 0 0; }
.cb-sum div{ flex:1; border-radius:16px; padding:9px 8px 8px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); text-align:center; }
.cb-sum b{ display:block; font:900 21px var(--font); font-variant-numeric:tabular-nums; color:#fff; } .cb-sum small{ font:700 11px var(--font); color:var(--dim); }
.cb-sum .g b{ color:#ffcb57; text-shadow:0 0 12px rgba(255,203,87,.6); } .cb-sum .d b{ color:#7ef0b0; }
.cb-daily{ display:flex; align-items:center; gap:12px; width:100%; margin:10px 0 0; padding:12px 14px; border:0; border-radius:20px; cursor:pointer; text-align:left; color:#fff; background:linear-gradient(90deg, rgba(126,240,176,.25), rgba(126,240,176,.06)); box-shadow:inset 0 0 0 1.5px rgba(126,240,176,.6), 0 0 18px rgba(126,240,176,.15); }
.cb-daily .t b{ display:block; font:900 15px var(--font); } .cb-daily .t small{ font:700 12px var(--font); color:#c9fff0; }
.cb-daily .go{ margin-left:auto; padding:9px 14px; border-radius:999px; background:#7ef0b0; color:#0b1024; font:900 13.5px var(--font); box-shadow:0 4px 0 #2a8a5e; white-space:nowrap; }
.cb-daily.off{ cursor:default; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); } .cb-daily.off .go{ display:none; } .cb-daily.off .t small{ color:var(--dim); }
.cp-dex .cb-how{ display:flex; flex-wrap:nowrap; align-items:flex-end; justify-content:space-between; gap:0; margin:12px 0 0; padding:10px 12px 8px; border-radius:16px; background:rgba(0,0,0,.25); }
.cb-how .st{ display:flex; flex-direction:column; align-items:center; gap:4px; font:800 10.5px var(--font); color:var(--dim); text-align:center; }
.cb-how .st .cb{ width:30px; height:30px; } .cb-how .st b{ color:#fff; font-size:11px; }
.cb-how .ar{ color:rgba(255,255,255,.25); font-size:10px; padding-bottom:20px; }
.cp-dex h3.dexsec small{ font:700 11.5px var(--font); color:var(--dim); margin-left:4px; }
.cp-dex .cb-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px 6px; }
.cb-grid .pc{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; border:0; padding:4px 0; background:none; color:#fff; cursor:pointer; font-family:var(--font); min-width:0; }
.cb-grid .pc:active{ transform:translateY(2px); }
.cb-grid .pc .cb{ width:52px; height:52px; } .cb-grid .pc b{ font:900 13.5px var(--font); overflow-wrap:anywhere; } .cb-grid .pc small{ font:700 10.5px var(--font); color:var(--dim); font-variant-numeric:tabular-nums; }
.cb-grid .pc em, .cb-frames em{ font:800 9.5px var(--font); font-style:normal; padding:1px 6px; border-radius:999px; }
.e0{ color:#9fa6d8; background:rgba(255,255,255,.07); } .e1{ color:#bfe3ff; background:rgba(79,140,255,.18); } .e2{ color:#7ef0b0; background:rgba(126,240,176,.15); } .e3{ color:#3a1d00; background:#ffcb57; }
.cb-grid .lock{ cursor:default; } .cb-grid .lock .cb{ opacity:.35; } .cb-grid .lock b{ color:var(--dim); }
.cp-dex .cb-frames{ display:grid; gap:8px; }
.cb-frames .fr{ display:flex; align-items:center; gap:12px; width:100%; padding:9px 12px; border:0; border-radius:16px; cursor:pointer; text-align:left; color:#fff; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); font-family:var(--font); }
.cb-frames .fr .cb{ width:40px; height:40px; } .cb-frames .tx{ min-width:0; } .cb-frames b{ font:900 15px var(--font); } .cb-frames b u, .cb-sbox h2 u{ text-decoration:none; color:#2fd0b0; }
.cb-frames .tx small{ display:block; font:700 11px var(--font); color:var(--dim); }
.cb-frames .n{ margin-left:auto; text-align:right; font:900 13px var(--font); font-variant-numeric:tabular-nums; white-space:nowrap; } .cb-frames .n small{ display:block; font:700 10px var(--font); color:var(--dim); }

/* 큐브 한 칸 — 아래부터 젤리가 --lv 만큼 찬다 · 단단은 눈 · 금빛은 웃는 눈 */
.cb{ --c:#4f8cff; --c2:#2e5fd1; --lv:0%; position:relative; flex:none; display:inline-block; }
.cb .body{ position:absolute; inset:0; border-radius:30% 30% 34% 34%; -webkit-mask:radial-gradient(circle at 92% 6%, transparent 15%, #000 15.5%); mask:radial-gradient(circle at 92% 6%, transparent 15%, #000 15.5%);
  background:linear-gradient(0deg, var(--c2) 0%, var(--c) calc(var(--lv) - 8%), color-mix(in srgb, var(--c) 65%, #fff) var(--lv), rgba(255,255,255,.07) calc(var(--lv) + .5%));
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent); }
.cb .body::before{ content:''; position:absolute; left:16%; right:30%; top:9%; height:18%; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.cb.gold{ --c:#ffcb57; --c2:#d98a12; } .cb.gold .body{ background:radial-gradient(120% 90% at 30% 15%, #fff6c8 0%, #ffcb57 45%, #d98a12 100%); box-shadow:inset 0 -5px 0 rgba(0,0,0,.15), 0 4px 0 #8a5a0a, 0 0 18px rgba(255,203,87,.65); }
.cb.gold::after{ content:'✦'; position:absolute; right:-7px; top:-9px; font-size:13px; color:#fff6c8; text-shadow:0 0 8px #ffcb57; animation:cbTw 1.6s ease-in-out infinite; } @keyframes cbTw{ 50%{ opacity:.25; transform:scale(.7) } }
.cb .eyes{ position:absolute; left:20%; right:22%; top:40%; height:30%; display:none; justify-content:space-between; align-items:flex-start; }
.cb .eyes i{ width:36%; aspect-ratio:1; border-radius:50%; background:#fff; position:relative; box-shadow:0 1px 0 rgba(0,0,0,.25); }
.cb .eyes i::after{ content:''; position:absolute; width:52%; height:52%; left:26%; top:18%; border-radius:50%; background:#1b1a2e; }
.cb .eyes i::before{ content:''; position:absolute; width:20%; height:20%; left:40%; top:22%; border-radius:50%; background:#fff; z-index:1; }
.cb.eyed .eyes, .cb.gold .eyes{ display:flex; }
.cb.gold .eyes{ top:46%; } .cb.gold .eyes i{ background:none; box-shadow:none; height:30%; aspect-ratio:auto; border-top:3px solid #5a3200; border-radius:50% 50% 0 0; } .cb.gold .eyes i::after, .cb.gold .eyes i::before{ display:none; }
.cb .due{ position:absolute; right:-6px; bottom:-4px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; background:#1a1640; box-shadow:0 0 0 2px #7ef0b0; }
.cb.sent{ --c:#2fd0b0; --c2:#16917c; } .cb.sent.gold{ --c:#ffcb57; --c2:#d98a12; }
.cb.big{ width:76px; height:76px; }

/* 큐브를 누르면 — 아래에서 올라오는 판 */
.cb-sheet{ position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; background:rgba(5,4,20,.6); }
.cb-sheet[hidden]{ display:none; }
.cb-sbox{ width:100%; max-width:480px; margin:0 auto; max-height:86%; overflow:auto; scrollbar-width:none; text-align:left; padding:20px 18px 22px; border-radius:28px 28px 0 0; background:linear-gradient(180deg,#2a1f6e,#171148); box-shadow:0 -10px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.cb-sbox .grab{ width:44px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); margin:-8px auto 14px; }
.cb-sbox .top{ display:flex; gap:14px; align-items:center; }
.cb-sbox h2{ margin:0; font:900 26px var(--font); color:#fff; text-shadow:none; overflow-wrap:anywhere; } .cb-sbox h2 small{ display:block; font:700 13px var(--font); color:var(--dim); margin-top:2px; }
.cb-sbox .goal{ margin:14px 0 4px; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.25); font:800 12.5px var(--font); color:var(--dim); }
.cb-sbox .goal .row{ display:flex; justify-content:space-between; gap:8px; margin-top:6px; }
.cb-sbox .goal .bar{ height:8px; border-radius:5px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:4px; } .cb-sbox .goal .bar i{ display:block; height:100%; background:linear-gradient(90deg,#7ef0b0,#ffcb57); }
.cb-sbox .place{ margin-top:12px; } .cb-sbox .place h4{ margin:0 0 6px; font:900 12.5px var(--font); color:var(--dim); letter-spacing:.04em; }
.cb-sbox .chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cb-sbox .chip{ border:0; cursor:pointer; padding:6px 10px; border-radius:12px; font:800 13px var(--font); color:#fff; background:rgba(126,240,176,.12); box-shadow:inset 0 0 0 1.5px rgba(126,240,176,.45); text-align:left; }
.cb-sbox .chip.due{ background:rgba(255,179,107,.12); box-shadow:inset 0 0 0 1.5px rgba(255,179,107,.55); } .cb-sbox .chip.due::before{ content:'🔁 '; }
.cb-sbox .chip.weak{ background:rgba(255,107,122,.12); box-shadow:inset 0 0 0 1.5px rgba(255,107,122,.55); } .cb-sbox .chip.weak::before{ content:'⚠ '; }
.cb-sbox .chip.new{ background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); color:var(--dim); }
.cb-sbox .btn{ display:block; width:100%; border:0; cursor:pointer; text-align:center; margin-top:16px; padding:14px; border-radius:18px; font:900 15px var(--font); background:linear-gradient(180deg,#fff0a8,#ffcb57 45%,#ff9f2e); color:#3a1d00; box-shadow:0 5px 0 #b55e12; }
.cb-sbox .btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #b55e12; }
.cb-sbox .note{ margin:10px 0 0; max-width:none; font:700 11.5px/1.5 var(--font); color:var(--dim); }
.cb-sbox .cp-go{ display:block; margin:12px auto 0; }
.cp-dexov{ background:radial-gradient(120% 55% at 50% 0%, #3a2590 0%, #120d33 55%, #0b0a24 100%); }
/* 아래 탭 3D 이모지(emoji/ · Fluent 3D) — 꺼진 탭은 살짝 흐리게 · 켜진 탭은 또렷하고 톡 튀게 */
.cp-tabs button i img{ display:block; width:26px; height:26px; margin:0 auto; transition:transform .15s; }
.cp-tabs button.on i img{ transform:scale(1.12) translateY(-1px); }
.cp-tabs button i{ filter:grayscale(.4) opacity(.8); }

/* ⚙ 설정 — 첫 화면엔 소리 대신 톱니(소리는 설정 안과 판 안 위 띠에) */
.cp.at-home .cp-ib[data-snd]{ display:none; }
.cp:not(.at-home) .cp-ib.set{ display:none; }
.cp-ib.set svg{ fill:none; }
/* 설정 시트 — 꾸밈은 덜고 줄과 간격으로 정리한다(묶음 목록 · 스위치 · 나눔 단추) */
.st-ov{ position:absolute; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center; background:rgba(4,3,16,0); transition:background .18s; }
.st-ov[hidden]{ display:none; }
.st-ov.in{ background:rgba(4,3,16,.62); }
.st-sheet{ width:100%; max-width:480px; max-height:calc(100% - 48px); display:flex; flex-direction:column; background:#161236; border-radius:20px 20px 0 0; box-shadow:0 -1px 0 rgba(255,255,255,.08);
  transform:translateY(24px); opacity:0; transition:transform .2s cubic-bezier(.2,.8,.2,1), opacity .15s; padding-bottom:env(safe-area-inset-bottom,0px); }
.st-ov.in .st-sheet{ transform:none; opacity:1; }
.st-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 12px 6px 20px; }
.st-head h2{ margin:0; font:800 20px/1.2 var(--font); color:#fff; letter-spacing:-.01em; }
.st-x{ width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--dim); cursor:pointer; }
.st-x svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.st-x:active{ background:rgba(255,255,255,.08); }
.st-body{ overflow:auto; scrollbar-width:none; padding:4px 16px 20px; overscroll-behavior:contain; }
.st-cap{ margin:18px 4px 8px; max-width:none; font:700 13px/1 var(--font); color:var(--dim); text-align:left; }
.st-note{ margin:8px 4px 0; max-width:none; font:600 12px/1.45 var(--font); color:rgba(169,163,214,.75); text-align:left; }
.st-grp{ border-radius:14px; background:#211b4a; overflow:hidden; }
.st-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; padding:0 16px; border:0; background:none; color:#fff; font:700 15.5px var(--font); text-align:left; text-decoration:none; cursor:pointer; box-sizing:border-box; }
.st-row + .st-row{ border-top:1px solid rgba(255,255,255,.07); }
.st-row.dim span{ color:rgba(255,255,255,.38); }
.st-row i{ font-style:normal; font-size:20px; line-height:1; color:rgba(255,255,255,.3); }
button.st-row:active, a.st-row:active{ background:rgba(255,255,255,.05); }
.st-row.warn{ color:#ff7a8a; }
.st-me{ display:flex; align-items:center; gap:12px; padding:10px 14px; }
.st-me img{ width:40px; height:40px; flex:none; border-radius:12px; background:#2b2460; object-fit:contain; }
.st-me input{ flex:1; min-width:0; height:40px; border:0; outline:0; background:none; color:#fff; font:700 17px var(--font); caret-color:#7ef0b0; }
.st-me input::placeholder{ color:rgba(255,255,255,.3); }
.st-me:focus-within{ box-shadow:inset 0 0 0 1.5px rgba(126,240,176,.55); border-radius:14px; }
/* 스위치 */
.st-sw{ appearance:none; -webkit-appearance:none; flex:none; position:relative; width:50px; height:30px; margin:0; border-radius:15px; background:#3a335f; cursor:pointer; transition:background .18s; }
.st-sw::after{ content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .18s cubic-bezier(.2,.8,.2,1); }
.st-sw:checked{ background:#3ec98a; } .st-sw:checked::after{ transform:translateX(20px); }
.st-sw:disabled{ opacity:.4; cursor:default; }
.st-sw:focus-visible{ outline:2px solid #7ef0b0; outline-offset:2px; }
/* 나눔 단추(언어) */
.st-seg{ display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:3px; border-radius:12px; background:#211b4a; }
.st-seg button{ height:40px; border:0; border-radius:9px; background:none; color:var(--dim); font:700 15px var(--font); cursor:pointer; }
.st-seg button.on{ background:#3a3275; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.st-links{ margin-top:28px; }
.st-ver{ margin:16px 0 0; max-width:none; text-align:center; font:600 12px var(--font); color:rgba(169,163,214,.55); }
@media (prefers-reduced-motion:reduce){ .st-sheet, .st-ov, .st-sw, .st-sw::after{ transition:none; } }
/* 아래 탭 창(놀이터 · 큐브 · 리그) — 첫 화면은 위 여백을 걷어 내므로 창마다 상태 표시줄(노치) 아래에서 시작한다 · 뒤 화면이 비치지 않게 불투명 */
.cp-lgov, .cp-arcov{ padding-top:calc(env(safe-area-inset-top,0px) + 18px); background:radial-gradient(120% 55% at 50% 0%, #3a2590 0%, #120d33 55%, #0b0a24 100%); }
.cp.at-home .cp-ov:not(.cp-home):not(.cp-lgov):not(.cp-arcov){ padding-top:max(24px, calc(env(safe-area-inset-top,0px) + 12px)); }

/* 🎰 스핀톡(js/spin.js) — 시안 docs/mockups/spintalk.html · 장난감 뽑기 기계(카지노 불빛 없음) */
.sp{ position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; padding:10px 12px 14px; color:#f6f3ff; background:radial-gradient(120% 70% at 50% 0%, #3a2590 0%, #120d33 62%, #0b0a24 100%); overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.sp-hud{ flex:none; display:flex; align-items:center; gap:10px; font:800 12px var(--font); color:var(--dim); }
.sp-hud .sc b{ display:block; margin-top:1px; font:900 22px var(--font); color:#fff; font-variant-numeric:tabular-nums; } .sp-hud .sc small{ font:800 10px var(--font); letter-spacing:.16em; }
.sp-hud .cb{ margin-left:auto; font:900 15px var(--font); color:#ff6fd8; text-shadow:0 0 10px rgba(255,79,216,.6); }
.sp-hud .dn{ margin-left:auto; } .sp-hud .cb:not(:empty) + .dn{ margin-left:10px; } .sp-hud .dn b{ color:#7ef0b0; font:900 16px var(--font); }
.sp-time{ flex:none; height:9px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.sp-time i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#7ef0b0,#36e0ff); transform-origin:left; }
.sp-time.warn i{ background:linear-gradient(90deg,#ff6b6b,#ffa07a); animation:cpBlink .5s steps(2) infinite; }
.sp-mach{ position:relative; flex:none; margin:58px 0 0; padding:24px 10px 14px; border-radius:30px; background:linear-gradient(180deg,#4b3bd0,#2a1f84); box-shadow:inset 0 3px 0 rgba(255,255,255,.25), inset 0 -6px 0 rgba(0,0,0,.25), 0 14px 30px rgba(0,0,0,.45); transition:box-shadow .2s; }
.sp-mach.hit{ box-shadow:inset 0 3px 0 rgba(255,255,255,.25), inset 0 -6px 0 rgba(0,0,0,.25), 0 0 0 3px #7ef0b0, 0 0 34px rgba(126,240,176,.5); }
.sp-mach.miss{ animation:spShake .32s; }
@keyframes spShake{ 20%{ transform:translateX(-6px) } 45%{ transform:translateX(5px) } 70%{ transform:translateX(-3px) } }
.sp-mach .nib{ position:absolute; left:50%; top:-74px; width:84px; margin-left:-42px; z-index:2; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)); animation:cpBob 1.6s ease-in-out infinite; pointer-events:none; }
.sp-mach .lbl{ position:absolute; left:14px; top:-12px; padding:4px 12px; border-radius:999px; background:#120d33; box-shadow:0 0 0 2px #6e5cf0; font:900 11px var(--font); letter-spacing:.12em; color:#cfc6ff; }
.sp-reels, .sp-btns{ display:grid; grid-template-columns:1.25fr 1.2fr .95fr; gap:6px; }
.sp-reel{ position:relative; height:174px; border-radius:18px; overflow:hidden; background:#0f0b2c; box-shadow:inset 0 0 0 2px rgba(255,255,255,.08); cursor:pointer; }
.sp-reel::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(15,11,44,.95), rgba(15,11,44,0) 34%, rgba(15,11,44,0) 66%, rgba(15,11,44,.95)); }
.sp-reel .win{ position:absolute; left:4px; right:4px; top:calc(50% - 29px); height:58px; border-radius:12px; z-index:3; pointer-events:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); transition:box-shadow .15s; }
.sp-reel.r0 .win{ box-shadow:inset 0 0 0 2px rgba(255,79,216,.75), 0 0 14px rgba(255,79,216,.3); }
.sp-mach.hit .sp-reel .win{ box-shadow:inset 0 0 0 2.5px #7ef0b0, 0 0 18px rgba(126,240,176,.45); }
.sp-reel .strip{ position:absolute; left:0; right:0; top:calc(50% - 29px); height:58px; }
.sp-reel .strip.blur .cell{ filter:blur(1.2px); }
.sp-reel .cell{ position:absolute; left:0; right:0; top:0; height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:0 5px; text-align:center; color:rgba(255,255,255,.5); font:800 14px/1.12 var(--font); will-change:transform; }
.sp-reel .cell img{ width:22px; height:22px; } .sp-reel .cell span{ overflow-wrap:anywhere; }
.sp-reel .cell.on{ color:#fff; font-size:15px; }
.sp-reel .tag{ position:absolute; left:0; right:0; bottom:5px; z-index:4; text-align:center; font:800 9.5px var(--font); letter-spacing:.06em; color:rgba(255,255,255,.4); pointer-events:none; }
.sp-btns{ margin-top:10px; }
.sp-stop{ height:52px; border:0; border-radius:16px; font:900 15px var(--font); letter-spacing:.06em; color:rgba(255,255,255,.45); background:rgba(0,0,0,.22); cursor:pointer; }
.sp-stop.done{ color:#0b1024; background:#7ce9ff; opacity:.5; }
.sp-stop.go{ color:#3a1d00; background:linear-gradient(180deg,#fff0a8,#ffcb57 45%,#ff9f2e); box-shadow:0 5px 0 #b55e12, 0 0 18px rgba(255,203,87,.45); animation:spGo .9s ease-in-out infinite; }
.sp-stop.go:active{ transform:translateY(3px); box-shadow:0 2px 0 #b55e12; }
@keyframes spGo{ 50%{ transform:scale(1.04) } }
.sp-stop[data-stop="0"]{ font-size:11.5px; letter-spacing:0; }
.sp-big{ position:absolute; left:50%; top:-30px; transform:translate(-50%,0) rotate(-4deg); z-index:6; pointer-events:none; text-align:center; font:900 40px/1 var(--font); white-space:nowrap; opacity:0; }
.sp-big small{ display:block; margin-top:4px; font:900 13px var(--font); letter-spacing:.04em; }
.sp-big.show{ animation:spBig .9s ease-out forwards; }
.sp-big.ok{ color:#eafff4; text-shadow:0 0 14px rgba(126,240,176,.85), 0 4px 0 #1d6b4a; } .sp-big.ok small{ color:#7ef0b0; text-shadow:none; }
.sp-big.no{ color:#ffd9e0; font-size:30px; text-shadow:0 3px 0 #7a1d3a; }
.sp-big:not(.ok):not(.no){ color:#fff1c2; text-shadow:0 0 14px rgba(255,201,74,.9), 0 4px 0 #8a5a0a; top:40%; }
@keyframes spBig{ 0%{ opacity:0; transform:translate(-50%,10px) rotate(-4deg) scale(.6) } 20%{ opacity:1; transform:translate(-50%,0) rotate(-4deg) scale(1.08) } 75%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,-14px) rotate(-4deg) } }
.sp-out{ flex:none; min-height:78px; margin-top:4px; padding:12px 14px; border-radius:18px; text-align:center; background:rgba(0,0,0,.22); opacity:0; transition:opacity .2s; }
.sp-out.show{ opacity:1; }
.sp-out.ok{ background:linear-gradient(180deg, rgba(126,240,176,.18), rgba(126,240,176,.05)); box-shadow:inset 0 0 0 1.5px rgba(126,240,176,.55); }
.sp-out b{ display:block; font:900 19px/1.25 var(--font); color:#fff; } .sp-out small{ display:block; margin-top:5px; font:700 13px var(--font); color:#c9fff0; }
.sp-out.no b{ display:inline; font-size:15px; color:#cfc6ff; } .sp-out.no b.mine{ display:block; margin-bottom:4px; font-size:13px; color:var(--dim); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.3); } .sp-out.no i{ font-style:normal; font:800 12px var(--font); color:var(--dim); margin-right:4px; }
@media (max-height:640px){ .sp-mach{ margin-top:50px; } .sp-reel{ height:150px; } .sp-out{ min-height:64px; } }
@media (prefers-reduced-motion:reduce){ .sp-stop.go, .sp-mach .nib{ animation:none; } }
/* 첫 화면 로고 아래 「by undergo」 — 일단 뺌(2026-10-21 대표님 · 되살리려면 이 줄만 지운다) */
.cp-byug{ display:none; }
/* 아래 탭 — 홈 표시줄(아이폰 아래 막대) 자리만 조금 남기고 여백을 줄인다 */
.cp-tabs{ padding-bottom:calc(4px + env(safe-area-inset-bottom,0px) * .4); }
/* 스핀톡 — 키 큰 화면에선 기계를 가운데로 · 릴도 조금 크게 */
.sp-mach{ margin-top:auto; } .sp-out{ margin-bottom:auto; }
@media (min-height:700px){ .sp-reel{ height:196px; } .sp-reel .cell{ font-size:15px; } .sp-reel .cell.on{ font-size:16.5px; } }
.sp-big.ok, .sp-big.no{ top:36%; } .sp-big.ok{ font-size:46px; }
.sp-reel.r0 .cell{ font-size:13.5px; letter-spacing:-.01em; } .sp-reel.r0 .cell.on{ font-size:14.5px; }
/* 한국어 줄바꿈 — 낱말 가운데서 끊지 않는다(긴 영어 낱말만 넘치면 끊는다) */
.cp, .st-ov, .st-ask{ word-break:keep-all; overflow-wrap:anywhere; }
/* 글자 기울이기 빼기 — 폰에서 계단처럼 깨진다(언더튠에서 겪음) */
.sp-big{ transform:translate(-50%,0); }
@keyframes spBig{ 0%{ opacity:0; transform:translate(-50%,10px) scale(.6) } 20%{ opacity:1; transform:translate(-50%,0) scale(1.08) } 75%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,-14px) } }
/* 설정 — 사업자 정보 펼침 · 저작권 줄 · 앱 안 확인 창 */
.st-row.open i{ transform:rotate(90deg); }
.st-row i{ transition:transform .15s; }
.st-biz{ display:flex; flex-direction:column; gap:3px; padding:2px 16px 14px; font:600 13px/1.5 var(--font); color:var(--dim); }
.st-biz[hidden]{ display:none; } .st-biz a{ color:#8ff0ff; text-decoration:none; }
.st-copy{ margin:4px 0 0; max-width:none; text-align:center; font:600 11px var(--font); color:rgba(169,163,214,.45); }
.st-ask{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(4,3,16,.66); }
.st-ask[hidden]{ display:none; }
.st-askbox{ width:100%; max-width:340px; padding:22px 20px 18px; border-radius:20px; background:#211b4a; box-shadow:0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); text-align:left; }
.st-askbox h3{ margin:0 0 8px; font:800 18px var(--font); color:#fff; } .st-askbox p{ margin:0; max-width:none; font:600 14px/1.55 var(--font); color:#cfc9ee; }
.st-askbtns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
.st-askbtns button{ height:46px; border:0; border-radius:12px; font:800 15px var(--font); cursor:pointer; }
.st-no{ background:rgba(255,255,255,.08); color:#fff; } .st-yes{ background:#e5485f; color:#fff; }
.st-askbtns button:active{ transform:translateY(1px); }

/* 🗺 도전 단계 — 장소 지도(필업 · 스핀톡) · 같은 꼴을 청크팝 레벨 목록도 쓴다(.stg) · 시안 docs/mockups/stages-home.html */
.cp-stgov{ z-index:9; }
.stg-head{ display:flex; align-items:center; gap:10px; }
.stg-back{ width:38px; height:38px; flex:none; border:0; border-radius:12px; background:rgba(255,255,255,.08); color:#fff; font:900 22px/1 var(--font); cursor:pointer; }
.stg-head b{ display:block; font:900 22px var(--font); color:#fff; } .stg-head small{ display:block; font:700 12px var(--font); color:var(--dim); }
.stg-prog{ margin:14px 0 0; padding:12px 14px; border-radius:18px; background:rgba(0,0,0,.25); text-align:left; }
.stg-prog .row{ display:flex; justify-content:space-between; font:800 12.5px var(--font); color:var(--dim); } .stg-prog .row b{ color:#fff; font-size:15px; }
.stg-prog .bar{ height:8px; border-radius:5px; background:rgba(255,255,255,.1); overflow:hidden; margin:8px 0 6px; } .stg-prog .bar i{ display:block; height:100%; background:linear-gradient(90deg,#7ef0b0,#36e0ff); }
.stg-path{ position:relative; margin-top:14px; display:flex; flex-direction:column; gap:10px; text-align:left; }
.stg-path::before{ content:''; position:absolute; left:33px; top:24px; bottom:24px; width:4px; border-radius:2px; background:linear-gradient(180deg, #7ef0b0, rgba(255,255,255,.1) 55%); }
.stg{ position:relative; display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border:0; border-radius:20px; cursor:pointer; text-align:left; color:#fff; font-family:var(--font); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.stg:active{ transform:translateY(1px); }
.stg .no{ position:relative; z-index:1; width:46px; height:46px; flex:none; border-radius:16px; overflow:hidden; display:grid; place-items:center; background:#1b1546; box-shadow:inset 0 0 0 2px rgba(255,255,255,.12); font:900 16px var(--font); }
.stg .no img{ width:100%; height:100%; object-fit:cover; }
.stg .tx{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px; } .stg .tx b{ font:900 15.5px var(--font); } .stg .tx small{ font:700 11.5px var(--font); color:var(--dim); }
.stg .sts{ font-size:13px; letter-spacing:1px; color:#ffcb57; line-height:1.2; } .stg .sts u{ text-decoration:none; color:rgba(255,255,255,.18); }
.stg .chip{ display:inline-block; margin-top:3px; padding:1px 7px; border-radius:999px; font:800 10px var(--font); font-style:normal; background:rgba(54,224,255,.14); color:#9ff2ff; }
.stg .chip.t1{ background:rgba(255,203,87,.14); color:#ffe39a; } .stg .chip.t2{ background:rgba(255,95,162,.16); color:#ffb3d6; }
.stg .r{ text-align:right; font:900 12.5px var(--font); color:#7ef0b0; white-space:nowrap; } .stg .r small{ display:block; font:700 10.5px var(--font); color:var(--dim); }
.stg .go{ padding:8px 12px; border-radius:999px; background:#7ef0b0; color:#0b1024; font:900 12.5px var(--font); box-shadow:0 3px 0 #2a8a5e; white-space:nowrap; }
.stg.gold{ background:linear-gradient(90deg, rgba(255,203,87,.18), rgba(255,203,87,.04)); box-shadow:inset 0 0 0 1.5px rgba(255,203,87,.55); } .stg.gold .no{ box-shadow:inset 0 0 0 2px #ffcb57, 0 0 14px rgba(255,203,87,.4); } .stg.gold .r{ color:#ffcb57; }
.stg.cur{ background:linear-gradient(90deg, rgba(126,240,176,.2), rgba(126,240,176,.04)); box-shadow:inset 0 0 0 2px #7ef0b0, 0 0 18px rgba(126,240,176,.25); } .stg.cur .no{ box-shadow:inset 0 0 0 2px #7ef0b0; }
.stg.lock, .stg:disabled{ opacity:.5; cursor:default; } .stg.lock .no{ filter:grayscale(1); }
.cb-sbox .stg-img{ width:64px; height:64px; flex:none; border-radius:18px; object-fit:cover; }
.stg-goals{ margin-top:14px; display:grid; gap:8px; }
.stg-goals .goal{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.05); font:800 13.5px var(--font); color:#fff; }
.stg-goals .goal i{ font-style:normal; font-size:18px; color:#ffcb57; } .stg-goals .goal.off i{ color:rgba(255,255,255,.2); } .stg-goals .goal span{ flex:1; } .stg-goals .goal small{ color:var(--dim); font:700 11.5px var(--font); }
.stg-goals .goal.off span{ color:var(--dim); }
.cb-sbox .chip.q{ cursor:default; color:rgba(255,255,255,.28); letter-spacing:.12em; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.cb-sbox .btn small{ display:block; margin-top:2px; font:800 11.5px var(--font); color:#7a4a10; }
/* 첫 화면 오른쪽 위 공유 단추 — 뺌(2026-10-21 대표님 · 바이럴은 나중에 별도 웹으로 · docs/viral-archive.md) */
.cp-ib.sh{ display:none !important; }

/* 🏠 큐레이션 홈(2026-10-21 · 시안 docs/mockups/stages-home.html) — 인사 · 바로가기 타일 · 이어서 하기 · 선반 · 레벨 목록 */
.cp-home{ padding-top:calc(env(safe-area-inset-top,0px) + 14px) !important; gap:10px; }
.cp-hero.hm{ align-items:stretch; text-align:left; gap:12px; padding-top:0; }
.hm .cp-glow{ top:-60px; }
.hm-top{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-right:96px; }
.hm-logo{ height:44px; width:auto; filter:drop-shadow(0 0 8px rgba(255,79,216,.35)); }
.hm-hi b{ display:block; font:900 22px/1.2 var(--font); color:#fff; } .hm-hi small{ display:block; margin-top:2px; font:700 12.5px var(--font); color:var(--dim); }
.hm .cp-one{ margin:0; max-width:none; text-align:left; font-size:13px; }
.hm-quick{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hm-quick .hq{ position:relative; display:flex; align-items:center; gap:9px; height:56px; min-width:0; padding:0 10px 0 0; border:0; border-radius:12px; overflow:hidden; cursor:pointer; text-align:left; color:#fff; background:rgba(255,255,255,.08); box-shadow:none; animation:none; font-family:var(--font); }
.hm-quick .hq[hidden]{ display:none; }
.hm-quick .hq:active{ transform:translateY(1px); background:rgba(255,255,255,.12); }
.hm-quick .hq > b{ width:56px; height:56px; flex:none; display:grid; place-items:center; border-radius:0; background:rgba(255,255,255,.07); font-size:24px; }
.hm-quick .hq > b img{ width:34px; height:34px; } .hm-quick .hq > b.c img{ width:44px; height:44px; margin-top:6px; }
.hm-quick .hq > span{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.hm-quick .hq em{ font:800 13px/1.2 var(--font); font-style:normal; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-quick .hq small{ font:700 10.5px/1.25 var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-quick .hq.done > b{ filter:grayscale(.6); } .hm-quick .hq.hot{ box-shadow:inset 0 0 0 1.5px rgba(126,240,176,.55); }
/* 리그 타일 — 원래 리그 단추를 타일 꼴로 */
.hm-quick .cp-lg b{ font:800 13px var(--font); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hm-quick .cp-lg small{ display:none; }
.hm-quick .cp-lg em{ font:700 10.5px var(--font); font-style:normal; color:var(--dim); }
/* 이어서 하기 큰 카드 */
.hm-cont.cp-go.cp-big{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:132px; margin:4px 0 0; padding:16px 16px 14px; border-radius:24px; overflow:hidden; text-align:left; color:#fff; background:linear-gradient(135deg,#4f8cff 0%, #6b4dff 60%, #ff4fd8 130%); box-shadow:0 12px 26px rgba(0,0,0,.4); animation:none; }
.hm-cont .k{ font:900 11px var(--font); font-style:normal; letter-spacing:.16em; color:rgba(255,255,255,.78); }
.hm-cont > b{ font:900 23px/1.2 var(--font); padding-right:96px; } .hm-cont > small{ font:700 12.5px var(--font); color:rgba(255,255,255,.88); letter-spacing:0; padding-right:96px; }
.hm-cont .cp-newv{ position:static; margin-top:4px; transform:none; }
.hm-cont .go{ display:inline-flex; align-items:center; gap:4px; margin-top:10px; padding:9px 16px; border-radius:999px; background:#fff; color:#2b1a7a; font:900 14px var(--font); }
.hm-cont img{ position:absolute; right:-8px; bottom:-12px; width:118px; filter:drop-shadow(0 8px 12px rgba(0,0,0,.35)); pointer-events:none; }
/* 선반 */
.hm-shelf h4, .hm-sec{ display:flex; justify-content:space-between; align-items:baseline; margin:8px 2px 0; font:900 17px var(--font); color:#fff; text-align:left; }
.hm-shelf h4 small{ font:800 12px var(--font); color:var(--dim); }
.hm-row{ display:flex; gap:10px; margin-top:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.hm-row::-webkit-scrollbar{ display:none; }
.hc{ flex:none; width:132px; border:0; padding:0; background:none; text-align:left; color:#fff; cursor:pointer; font-family:var(--font); }
.hc .art{ position:relative; display:grid; place-items:center; height:132px; border-radius:18px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.hc .art img{ width:84px; height:84px; object-fit:contain; } .hc .art em{ position:absolute; left:8px; bottom:8px; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.4); font:800 10.5px var(--font); font-style:normal; }
.hc b{ display:block; margin-top:7px; font:900 13.5px var(--font); } .hc small{ display:block; font:700 11px var(--font); color:var(--dim); }
.hc:active .art{ transform:scale(.98); }
/* 레벨 목록 — 월드 머리를 눌러 펼치고 접는다 · 판은 도전 단계와 같은 카드 */
.cp-world header[data-wx]{ cursor:pointer; } .cp-world .wchev{ font-style:normal; margin-left:8px; color:var(--dim); font-size:14px; }
.cp-world .lvp{ margin:10px 0 0; }
.cp-world .lvp::before{ background:linear-gradient(180deg, var(--wc), rgba(255,255,255,.1) 70%); }
.stg.lv .no{ border-radius:50%; background:color-mix(in srgb, var(--wc) 35%, #1b1546); font:900 17px var(--font); color:#fff; }
.stg.lv.lock .no{ background:#1b1546; color:var(--dim); }
.stg.lv.ty-review .no{ box-shadow:inset 0 0 0 2px #7ef0b0; } .stg.lv.ty-rush .no{ box-shadow:inset 0 0 0 2px #ff6b7a; } .stg.lv.ty-combo .no{ box-shadow:inset 0 0 0 2px #ff4fd8; } .stg.lv.ty-boss .no{ box-shadow:inset 0 0 0 2px #ffcb57; }
.stg .dueb{ position:absolute; left:42px; top:4px; z-index:2; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; text-decoration:none; background:#1a1640; box-shadow:0 0 0 2px #7ef0b0; }
.hm-quick .cp-lg{ display:flex; align-items:center; gap:9px; }
.hm-quick .cp-lg b{ flex:1; min-width:0; } .hm-quick .cp-lg em{ margin-left:auto; padding-right:2px; font:900 13px var(--font); color:#ffcb57; }

.hm-quick .cp-lg .cp-emb{ width:38px; height:42px; margin:0 0 0 9px; font-size:17px; }
.hm-quick .cp-lg > b{ width:auto; height:auto; flex:1; display:block; background:none; text-align:left; font:800 13px var(--font); color:#fff; }
/* 점검 고침(2026-10-21) — 선반은 세 칸에 딱 맞게(가로로 안 넘친다) · 장소 시트 「도전하기」는 아래에 붙여 늘 보이게 · 리그 표는 목록만 줄고 닫기는 늘 보이게 · 좁은 화면 리그 타일 */
.hm-row{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); overflow:visible; }
.hc{ width:auto; min-width:0; } .hc .art{ height:auto; aspect-ratio:1; } .hc .art img{ width:62%; height:62%; } .hc b, .hc small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-sbox [data-stggo]{ position:sticky; bottom:6px; z-index:2; }
[data-lgov] .cp-lgbox{ flex:1; min-height:0; } [data-lgov] .cp-lglist{ flex:1; min-height:120px; max-height:none; }
[data-lgov]{ overflow:hidden; }
.hm-quick .cp-lg > b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hm-quick .cp-lg em{ flex:none; }
.cb-sbox .stg-goals .goal{ margin:0; }
.hm-quick .cp-daily > b{ animation:none; border-radius:0; width:56px; height:56px; background:rgba(255,255,255,.07); }
/* 홈 소개 한 줄(첫 판 전까지) — 브랜드 문구 「단어 말고, 통으로」 · 작고 한 줄로 */
.hm .cp-one{ font:700 13px/1.5 var(--font); color:var(--dim); } .hm .cp-one b{ font-weight:900; color:#fff; }
/* 리그 타일 — 다른 타일과 같은 꼴(왼쪽 그림 칸 + 제목 + 작은 글) */
.hm-quick .hq.cp-lg{ display:grid; grid-template-columns:56px minmax(0,1fr); grid-template-rows:auto auto; column-gap:9px; row-gap:1px; align-content:center; padding:0 10px 0 0;
  background:linear-gradient(90deg, rgba(255,255,255,.15) 0 56px, rgba(255,255,255,.08) 56px); }
.hm-quick .hq.cp-lg .cp-emb{ grid-column:1; grid-row:1 / span 2; justify-self:center; align-self:center; width:30px; height:34px; margin:0; font-size:14px; }
.hm-quick .hq.cp-lg > b{ grid-column:2; grid-row:1; align-self:end; font:800 13px/1.2 var(--font); }
.hm-quick .hq.cp-lg > small{ display:block; grid-column:2; grid-row:2; align-self:start; font:700 10.5px/1.25 var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-quick .hq.cp-lg > em{ display:none; }
/* 놀이터 청크팝 지도 — 월드 머리(눌러 펼치고 접기) */
.pm-w{ display:flex; flex-direction:column; gap:10px; }
.pm-h{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 14px 10px 10px; border:0; border-radius:20px; cursor:pointer; text-align:left; color:#fff; font-family:var(--font);
  background:linear-gradient(90deg, color-mix(in srgb, var(--wc) 30%, transparent), rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.pm-h img{ width:48px; height:48px; } .pm-h span{ flex:1; min-width:0; } .pm-h small{ display:block; font:900 10.5px var(--font); letter-spacing:.14em; color:var(--wc); } .pm-h b{ font:900 17px var(--font); }
.pm-h em{ font:900 14px var(--font); font-style:normal; color:#ffcb57; } .pm-h em small{ display:inline; color:var(--dim); letter-spacing:0; } .pm-h i{ font-style:normal; color:var(--dim); }
.pm-w.lock .pm-h{ opacity:.55; cursor:default; }
.stg-path:has(.pm-w)::before{ display:none; }
.pm-w .lvp{ margin:0 0 6px; }

/* 🧩 스냅톡(js/spin.js · 2026-10-22) — 슬롯 느낌을 뺀 말 블록 맞추기: 미션 카드 · 가로 레일 셋 · 가운데 홈 · 젤리 블록 · 딸깍 단추 · 기계 틀과 번쩍임 없음 */
.sp.snap{ gap:10px; background:radial-gradient(120% 70% at 50% 0%, #2b2a78 0%, #141238 62%, #0b0a24 100%); }
.sn-mis{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:18px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1.5px rgba(126,240,176,.4); }
.sn-mis .nib{ width:48px; height:48px; flex:none; animation:cpBob 1.8s ease-in-out infinite; }
.sn-mis .tx{ min-width:0; } .sn-mis small{ display:block; font:900 10.5px var(--font); letter-spacing:.16em; color:#7ef0b0; text-transform:uppercase; }
.sn-mis b{ display:flex; align-items:center; gap:6px; font:800 16px/1.3 var(--font); color:#fff; } .sn-mis b img{ width:24px; height:24px; flex:none; }
.sn-mis.new{ animation:snMis .5s cubic-bezier(.3,1.5,.5,1); } @keyframes snMis{ 0%{ transform:scale(.92); opacity:.4 } 100%{ transform:none; opacity:1 } }
.sn-rails{ position:relative; display:flex; flex-direction:column; gap:10px; margin-top:auto; padding:12px 0; }
.sn-row{ position:relative; display:grid; grid-template-columns:44px 1fr; align-items:center; gap:6px; transition:opacity .2s; }
.sn-row .tag{ font:900 9.5px var(--font); letter-spacing:.06em; color:rgba(255,255,255,.45); text-align:right; }
.sn-row.cur .tag{ color:#fff; }
.sn-track{ position:relative; height:66px; border-radius:20px; overflow:hidden; background:rgba(0,0,0,.25); box-shadow:inset 0 2px 8px rgba(0,0,0,.35);
  -webkit-mask:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.sn-sock{ position:absolute; top:5px; bottom:5px; left:50%; width:calc(var(--bw,150px) - 6px); margin-left:calc(var(--bw,150px) / -2 + 3px); border-radius:16px; border:2px dashed rgba(255,255,255,.28); z-index:0; }
.sn-row.cur .sn-sock{ border-color:#ffcb57; box-shadow:0 0 14px rgba(255,203,87,.35); animation:snSock 1s ease-in-out infinite; } @keyframes snSock{ 50%{ border-color:rgba(255,203,87,.45) } }
.sn-strip{ position:absolute; left:50%; top:0; bottom:0; width:0; z-index:1; }
/* 블록 — 청크 큐브(젤리) 결 · 줄마다 색 */
.sn-blk{ position:absolute; top:8px; height:50px; left:calc(var(--bw,150px) / -2 + 5px); width:calc(var(--bw,150px) - 10px); display:flex; align-items:center; justify-content:center; gap:5px; padding:0 8px; border-radius:15px;
  font:800 14px/1.1 var(--font); color:#fff; text-align:center; will-change:transform; --c:#ff6fd8; --c2:#b42f9a;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 55%, var(--c2)); box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.45), 0 4px 10px rgba(0,0,0,.3); opacity:.8; }
.sn-blk img{ width:24px; height:24px; flex:none; } .sn-blk span{ overflow-wrap:anywhere; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.sn-blk.b1{ --c:#36c8ff; --c2:#1e6fd9; } .sn-blk.b2{ --c:#3ec98a; --c2:#17845a; }
.sn-row.r0 .sn-blk span{ font-size:13.5px; }
.sn-blk.on{ opacity:1; animation:snSnap .3s cubic-bezier(.3,1.6,.5,1); } @keyframes snSnap{ 0%{ scale:1.14 } 100%{ scale:1 } }
.sn-row.done .sn-blk:not(.on){ opacity:.35; }
/* 셋이 맞으면 블록이 붙는다 · 어색하면 살짝 흔들린다 */
.sn-rails.joined .sn-blk.on{ box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.45), 0 0 0 3px #fff6c8, 0 0 22px rgba(126,240,176,.6); }
.sn-rails.miss{ animation:spShake .32s; }
.sn-btn{ height:58px; border:0; border-radius:20px; cursor:pointer; font:900 19px var(--font); letter-spacing:.04em; color:#3a1d00; background:linear-gradient(180deg,#fff0a8,#ffcb57 45%,#ff9f2e); box-shadow:0 6px 0 #b55e12; }
.sn-btn:disabled{ filter:grayscale(.5) brightness(.75); box-shadow:0 3px 0 #7a4410; cursor:default; }
.sn-btn.go:active{ transform:translateY(3px); box-shadow:0 3px 0 #b55e12; }
.sp.snap .sp-big{ top:44%; transform:translate(-50%,0); } .sp.snap .sp-big.ok{ font-size:42px; } .sp.snap .sp-big.m{ color:#fff6c8; text-shadow:0 0 14px rgba(255,203,87,.8), 0 4px 0 #8a5a0a; font-size:34px; }
.sp.snap .sp-out{ margin-bottom:auto; }
@media (max-height:660px){ .sn-track{ height:58px; } .sn-blk{ top:6px; height:46px; } .sn-mis .nib{ width:40px; height:40px; } .sn-btn{ height:52px; } }
@media (prefers-reduced-motion:reduce){ .sn-row.cur .sn-sock, .sn-mis .nib{ animation:none; } }
.sp.snap.ended .sn-strip{ display:none; }