*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#0c0d0f;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
#app{position:absolute;left:0;top:0;transform-origin:0 0;width:1600px;height:900px;background:radial-gradient(ellipse at 50% -10%,#30333a 0%,#111215 65%);font-family:'Inter','Noto Sans CJK KR',sans-serif;color:#e9e9eb;padding:18px 22px;overflow:hidden}
header{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.logo{font-weight:900;letter-spacing:.18em;font-size:18px} .logo b{color:#2f8cff} header small{color:#868991;letter-spacing:.12em;font-size:11px}
main{display:grid;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);gap:16px;height:832px}
.deck,.mixer{background:linear-gradient(180deg,#26282d,#18191c);border:1px solid #35383e;border-radius:12px;padding:14px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.screen{background:#050608;border:2px solid #2a2c31;border-radius:8px;padding:10px 12px 8px;color:#f2f2f2}
.sh{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.dn{width:30px;height:30px;border-radius:6px;background:#2f8cff;color:#000;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:16px}
.st{flex:1;min-width:0}.tt{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ta{font-size:11px;color:#8b8d93}
.sv{text-align:right}.sv span{display:block;font-size:8.5px;letter-spacing:.16em;color:#8b8d93}.sv b{font-size:15px;font-variant-numeric:tabular-nums}
.wz{display:block;width:100%;height:96px;background:#000;border-radius:4px}
.wo{display:block;width:100%;height:30px;margin-top:6px;background:#000;border-radius:3px}
.sf{display:flex;gap:16px;font-size:10px;letter-spacing:.1em;color:#8b8d93;margin-top:6px}.sf .pl{color:#2ee86a}.sf .on{color:#2f8cff}.sf span:last-child{margin-left:auto}
.dbody{display:grid;grid-template-columns:88px minmax(0,1fr) 88px;margin-top:10px;height:var(--bh)}
.lcol{display:flex;flex-direction:column;gap:12px;padding-bottom:4px;padding-top:10px}
.tb{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:.06em;background:#2b2d32;box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.tb.cue{border:3px solid #ff8a1f;color:#ff8a1f;box-shadow:0 0 16px color-mix(in srgb,#ff8a1f 45%,transparent)}
.tb.play{border:3px solid #2ee86a;color:#2ee86a}.tb.play.lit{box-shadow:0 0 22px color-mix(in srgb,#2ee86a 60%,transparent);background:color-mix(in srgb,#2ee86a 14%,#2b2d32)}
.jcol{display:flex;align-items:center;justify-content:center}
.jog{width:410px;height:410px;filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
.jog .ring{filter:drop-shadow(none)}
.jb{font-size:46px;font-weight:800;fill:#fff;font-variant-numeric:tabular-nums}.jbs{font-size:26px}
.jp{font-size:15px;fill:#d6d6d6}.jr{font-size:15px;fill:#4be37a;font-weight:700}.jl{font-size:10px;letter-spacing:3px;fill:#777}
.arw{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.al{font-size:12px;font-weight:800;letter-spacing:1.5px;fill:#e9e9eb}
.rcol{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:0}
.sbtn{width:80px;border-radius:6px;background:#2b2d32;border:1px solid #35383e;font-size:9px;font-weight:700;letter-spacing:.08em;text-align:center;padding:6px 0 5px;line-height:1.3;color:#868991;position:relative}
.sbtn i{display:block;width:22px;height:3px;border-radius:2px;background:#35383e;margin:0 auto 6px}
.sbtn b{display:block;font-size:13px;color:#e9e9eb;margin-top:3px}
.sbtn.on{color:#e9e9eb}.sbtn.on i{background:#ff2a2a;box-shadow:0 0 8px #ff2a2a}
.ftrack{position:relative;flex:1;width:70px;margin-top:6px}
.ftrack:before{content:"";position:absolute;left:50%;top:22px;bottom:22px;width:8px;transform:translateX(-50%);background:#0a0a0c;border-radius:4px;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.fl{position:absolute;top:0;left:0;right:0;text-align:center;font-weight:800;color:#868991}.fl.b{top:auto;bottom:0}
.scale{position:absolute;top:26px;bottom:26px;left:0;display:flex;flex-direction:column;justify-content:space-between}.scale i{display:block;height:1px;width:14px;background:#868991;opacity:.55}
.zero{position:absolute;left:0;width:18px;top:50%;height:2px;background:#2f8cff}
.fcap{position:absolute;left:50%;transform:translate(-50%,-50%);width:58px;height:30px;border-radius:5px;background:linear-gradient(180deg,#eceef1,#979ca4);box-shadow:0 4px 10px rgba(0,0,0,.45)}
.fcap:after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:#222}
.flab{font-size:10px;letter-spacing:.2em;font-weight:700;color:#868991}
.mixer{display:flex;flex-direction:column}
.lpst.on{color:#ff8a1f!important}
.ctrl{margin-top:10px}
.g3{display:grid;grid-template-columns:repeat(3,46px);gap:6px}
.cl{font-size:7.5px;font-weight:800;letter-spacing:.14em;color:#868991;text-align:right;align-self:center}
.cl2{font-size:7.5px;font-weight:800;letter-spacing:.14em;color:#868991;margin-bottom:4px}
.ctrl.stack{display:grid;grid-template-columns:44px auto;gap:6px 8px;width:max-content}
.ctrl.row{display:flex;gap:16px}
.ctrl.col{display:flex;flex-direction:column;gap:4px;margin-top:0}
.ctrl.col .g3{grid-template-columns:repeat(3,35px);gap:4px;margin-bottom:6px}
.ctrl.col .hc,.ctrl.col .lbtn{font-size:8.5px}
.ctrl.col .bt{font-size:9px}
.hc{height:24px;border-radius:4px;background:linear-gradient(180deg,#2c2e33,#202226);border:1px solid #0c0d0f;box-shadow:inset 0 0 0 1.5px #34373d,0 2px 4px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#6d7077}
.hc.set{box-shadow:inset 0 0 0 1.5px var(--hc),0 0 10px color-mix(in srgb,var(--hc) 50%,transparent);background:color-mix(in srgb,var(--hc) 30%,#202226);color:#fff}
.lbtn{height:20px;border-radius:3px;background:linear-gradient(180deg,#2c2e33,#202226);border:1px solid #0c0d0f;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;letter-spacing:.06em;color:#bfc1c6}
.lbtn.on{box-shadow:inset 0 0 0 1.5px #ff8a1f,0 0 8px rgba(255,138,31,.5);color:#ff8a1f}
.bt{height:20px;display:flex;align-items:center;justify-content:center;gap:3px;background:#050608;border:1px solid #2a2c31;border-radius:3px;font-size:11px;font-weight:800;color:#ff8a1f}.bt small{font-size:6.5px;letter-spacing:.1em;color:#8b8d93}
.lcol .sp{flex:1}
.mscreen{background:#050608;border:2px solid #2a2c31;border-radius:8px;padding:10px 12px;color:#f2f2f2;height:176px}
.mh{font-size:11px;font-weight:800;letter-spacing:.3em;color:#8b8d93;text-align:center;margin-bottom:10px}
.mm{display:flex;justify-content:space-around}.mmc{text-align:center}.mmc span{display:block;font-size:9px;letter-spacing:.14em;color:#8b8d93;margin-bottom:6px}
.hm{display:flex;flex-direction:column-reverse;gap:2px;width:22px;margin:0 auto}.hm i{height:5px;border-radius:1px;background:#1d1f24}.hm i.h{background:#2ee86a}.hm i.r{background:#ffb020}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.mc{display:flex;flex-direction:column;align-items:center;gap:8px}.chl{font-size:11px;font-weight:800;letter-spacing:.2em;color:#2f8cff}
.kn{text-align:center}.knob{width:70px;height:70px;position:relative;margin:0 auto}
.arc{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -135deg,#35383e 0 270deg,transparent 270deg);-webkit-mask:radial-gradient(circle,transparent 29px,#000 30px)}
.arc:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--s),#2f8cff 0 var(--span),transparent 0)}
.cap{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5b5f66,#1f2226);box-shadow:0 4px 10px rgba(0,0,0,.4),0 0 0 1px #35383e}
.ptr{position:absolute;inset:0}.ptr:before{content:"";position:absolute;left:50%;top:5px;width:3px;height:15px;margin-left:-1.5px;border-radius:2px;background:#fff}
.kl{font-size:11px;font-weight:800;letter-spacing:.14em;margin-top:4px}.kv{font-size:10px;color:#868991;font-variant-numeric:tabular-nums}
.faders{display:flex;justify-content:space-around;margin-top:14px;flex:1}
.cf{display:flex;gap:10px;align-items:flex-end;height:150px}
.vu{display:flex;flex-direction:column-reverse;gap:2px;width:8px}.vu i{height:6px;border-radius:1px;background:#35383e}.vu i.h{background:#2ee86a}.vu i.r{background:#ffb020}
.chf{position:relative;width:44px;height:150px}.chf:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:#0a0a0c;border-radius:3px}
.fcap2{position:absolute;left:50%;transform:translate(-50%,-50%);width:42px;height:22px;border-radius:4px;background:linear-gradient(180deg,#eceef1,#979ca4);box-shadow:0 3px 8px rgba(0,0,0,.4)}
.fcap2:after{content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;background:#222}
.xf{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;color:#868991}
.xtrack{flex:1;height:6px;border-radius:3px;background:#0a0a0c;position:relative}
.xcap{position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);width:24px;height:42px;border-radius:4px;background:linear-gradient(180deg,#eceef1,#979ca4);box-shadow:0 3px 8px rgba(0,0,0,.4)}
.xcap:after{content:"";position:absolute;top:5px;bottom:5px;left:50%;width:2px;margin-left:-1px;background:#222}
.xl{text-align:center;font-size:9.5px;letter-spacing:.2em;color:#868991;margin:22px 0 6px}
.dbody{--bh:574px;grid-template-columns:120px minmax(0,1fr) 88px}
/* ---- interactive additions ---- */
#app{background:radial-gradient(ellipse at 50% -10%,#30333a 0%,#111215 65%);font-family:'Inter','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#e9e9eb;padding:18px 22px;overflow:hidden}
header{justify-content:space-between}
header .hint{font-size:10.5px;color:#6d7077;letter-spacing:.06em}
.deck{position:relative}
button{all:unset;box-sizing:border-box;cursor:pointer}
.dn{width:auto;height:32px;padding:0 10px 0 4px;gap:8px;border-radius:7px;cursor:pointer;background:#0e1a2b;border:1.5px solid #2f8cff;color:#2f8cff}
.dn .num{width:24px;height:24px;border-radius:5px;background:#2f8cff;color:#000;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900}
.dn .lb{font-size:10px;letter-spacing:.14em;font-weight:800}
.dn:hover,.dn.active{background:#2f8cff;color:#000}.dn:hover .num,.dn.active .num{background:#000;color:#2f8cff}
canvas.wz,canvas.wo{display:block;width:100%;background:#000;border-radius:4px}
canvas.wz{height:96px}canvas.wo{height:30px;margin-top:6px;cursor:pointer}
.sf span{white-space:nowrap}
.tb,.hc,.lbtn,.bt,.sbtn{cursor:pointer}
.tb:active,.hc:active,.lbtn:active,.sbtn:active{filter:brightness(1.25)}
.tb.cue.lit{background:color-mix(in srgb,#ff8a1f 22%,#2b2d32)}
.tb.cue.blink{animation:blink .5s steps(1) infinite}
.tb.play.blink{animation:blink .5s steps(1) infinite}
@keyframes blink{50%{box-shadow:none;filter:brightness(.6)}}
.bt.on{box-shadow:inset 0 0 0 1.5px #ff8a1f}
.lbtn.armed{box-shadow:inset 0 0 0 1.5px #ff8a1f;color:#ff8a1f;animation:blink .6s steps(1) infinite}
.jog{touch-action:none}
.jog .platter{cursor:grab}.jog .platter:active{cursor:grabbing}
.jog .arw{cursor:pointer}.jog .arw.on path{fill:#2f8cff;stroke:#2f8cff}
.ftrack{cursor:ns-resize}
.knob{cursor:ns-resize}.chf{cursor:ns-resize}.xtrack{cursor:ew-resize}
.loading{color:#8b8d93!important}
/* library popup */
.dim{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:5;display:none}
.dim.show{display:block}
.lib{position:absolute;z-index:10;background:#0a0b0e;border:1.5px solid #2f3238;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(47,140,255,.25);color:#eee;overflow:hidden;display:none}
.lib.show{display:block}
.lh{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #1e2025}
.lh .tg{background:#2f8cff;color:#000;font-weight:900;font-size:12px;letter-spacing:.12em;padding:5px 10px;border-radius:5px}
.lh h3{font-size:15px;font-weight:700;flex:1}.lh .x{width:30px;height:30px;border-radius:6px;border:1px solid #2f3238;display:flex;align-items:center;justify-content:center;color:#999;cursor:pointer}
.lt{padding:12px 16px}
.srch{width:100%;height:34px;border-radius:7px;background:#16181c;border:1px solid #2a2c31;padding:0 12px;color:#ddd;font-size:12.5px;outline:none;font-family:inherit;user-select:text}
.srch:focus{border-color:#2f8cff}
.lib table{width:100%;border-collapse:collapse;font-size:12.5px}
.lib th{text-align:left;font-size:9.5px;letter-spacing:.16em;color:#6d7077;font-weight:700;padding:8px;border-bottom:1px solid #1e2025;background:#0d0e11}
.lib th.s{color:#2f8cff}
.lib td{padding:10px 8px;border-bottom:1px solid #15171b;white-space:nowrap}
.lib tr{cursor:pointer}.lib tbody tr:hover td{background:rgba(47,140,255,.10)}
.lib td.n{color:#555;width:26px;text-align:center}.lib td.t{font-weight:600}.lib td.a{color:#9a9da4}
.lib td.g span{font-size:10.5px;padding:3px 8px;border-radius:4px;background:#1a1c21;color:#c9cbd0}
.lib td.b{font-variant-numeric:tabular-nums;font-weight:700}.lib td.k{font-weight:700;color:#2ee86a}
.lib tr.cur td{background:rgba(47,140,255,.16)}.lib tr.cur td:first-child{box-shadow:inset 3px 0 0 #2f8cff}
.on2{font-size:9px;font-weight:800;letter-spacing:.1em;color:#ff8a1f;border:1px solid #ff8a1f;border-radius:4px;padding:2px 5px;margin-left:8px;vertical-align:1px}
.ld{font-size:10px;font-weight:800;letter-spacing:.1em;padding:5px 10px;border-radius:5px;border:1px solid #2f3238;color:#9a9da4;text-align:center;display:inline-block}
.ld:hover{background:#2f8cff;border-color:#2f8cff;color:#000}
.lf{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:11px;color:#6d7077;border-top:1px solid #1e2025}
.empty{padding:24px;text-align:center;color:#6d7077;font-size:12px}
.toast{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:#16181c;border:1px solid #2f3238;border-radius:8px;padding:8px 14px;font-size:12px;color:#ddd;z-index:20;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
.jog{position:relative;width:410px;height:410px;filter:none;border-radius:50%}
.jog:before{content:"";position:absolute;inset:calc(50% - 176px);border-radius:50%;box-shadow:0 16px 26px rgba(0,0,0,.45)}
.jog .jlay{position:absolute;inset:0;width:100%;height:100%}
.jog .spin{position:absolute;inset:0;will-change:transform;pointer-events:none}
.jog .top{pointer-events:none}.jog .top .arw{pointer-events:auto;cursor:pointer}
.jog .motion.hide{display:none}
.jog{cursor:grab}.jog.grab{cursor:grabbing}
.jl2{font-size:10px;letter-spacing:3px;fill:#777}
.jog .jlay .al{pointer-events:none}
/* beat align screen */
.mscreen.pa{position:relative;height:176px;padding:10px 12px 8px}
.pa .pa-on{display:none}.pa.on .pa-on{display:block}.pa.on .pa-off{display:none}
.pa .pa-off{position:absolute;inset:30px 12px 12px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.6;color:#4a4d54;letter-spacing:.04em}
.pa canvas{display:block;width:100%;height:62px;margin-top:-4px}
.pa-read{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:2px}
.pa-read .lamp{width:11px;height:11px;border-radius:50%;background:#3a3d43}
#paMs{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
#paBpm{font-size:10px;color:#8b8d93}
.pa-grade{text-align:center;font-size:15px;font-weight:900;letter-spacing:.28em;margin-top:2px}
.pa-sub{text-align:center;font-size:9.5px;color:#8b8d93;margin-top:1px;letter-spacing:.04em}
.pa-bar{position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:#1d1f24;border-radius:1px}
.pa-bar i{display:block;height:100%;background:#2f8cff;border-radius:1px}
.chk{margin:10px auto 0;width:120px;height:30px;border-radius:6px;background:linear-gradient(180deg,#2c2e33,#202226);border:1px solid #0c0d0f;box-shadow:inset 0 0 0 1.5px #2f8cff,0 3px 6px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;letter-spacing:.24em;color:#2f8cff;cursor:pointer}
.chk:active{filter:brightness(1.4)}
.mixer .mcols{margin-top:10px}
.soc{display:flex;gap:10px;align-items:center}
.soc a{display:block;width:26px;height:26px;transition:transform .15s}
.soc a:hover{transform:scale(1.12)}
.soc img{width:26px;height:26px;display:block}
.mscreen.pa .mh{color:#fff}
.pa .pa-off{color:#fff;font-size:14.3px}
.pa .pa-off{color:rgba(255,255,255,.55)}
.pa-grade{letter-spacing:.2em}
.lscroll{max-height:520px;overflow-y:auto}
.lscroll thead th{position:sticky;top:0;z-index:1}
.lscroll::-webkit-scrollbar{width:8px}.lscroll::-webkit-scrollbar-thumb{background:#2f3238;border-radius:4px}
canvas.wz{cursor:grab}canvas.wz.grab{cursor:grabbing}
/* admin */
.adm{display:flex;align-items:center;gap:14px;font-size:11px;color:#c9cbd0;letter-spacing:0}
.adm-tag{background:#ff2a2a;color:#fff;font-weight:900;font-size:10px;letter-spacing:.14em;padding:3px 7px;border-radius:4px}
.adm-d{display:flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid #2f3238;border-radius:6px}
.adm-d.edited{border-color:#ff8a1f}
.adm-d b{color:#2f8cff}.adm-v{font-variant-numeric:tabular-nums;color:#fff;min-width:56px;display:inline-block}
.adm button{font-size:10px;font-weight:800;padding:3px 7px;border-radius:4px;border:1px solid #3a3d43;background:#16181c;color:#e9e9eb;cursor:pointer}
.adm button:hover{border-color:#2f8cff;color:#2f8cff}
.adm-x{border-color:#ff8a1f!important;color:#ff8a1f!important}
.adm-modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;z-index:12;background:#0a0b0e;border:1.5px solid #2f3238;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.7);display:none;color:#eee}
.adm-modal.show{display:block}
.adm-p{font-size:12px;color:#9a9da4;margin-bottom:8px}
#admText{width:100%;height:220px;background:#16181c;border:1px solid #2a2c31;border-radius:7px;color:#ddd;font:12px ui-monospace,Menlo,monospace;padding:10px;resize:none;user-select:text}
/* header right: TEST / TIPS */
.hdr-r{display:flex;align-items:center;gap:10px}
.hbtn{height:28px;padding:0 14px;border-radius:6px;background:linear-gradient(180deg,#2c2e33,#202226);border:1px solid #0c0d0f;box-shadow:inset 0 0 0 1.5px #2f8cff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;letter-spacing:.2em;color:#2f8cff;cursor:pointer;white-space:nowrap}
.hbtn:hover{filter:brightness(1.3)}
.hbtn.on{box-shadow:inset 0 0 0 1.5px #ff8a1f;color:#ff8a1f}
.hbtn.ghost{box-shadow:inset 0 0 0 1.5px #3a3d43;color:#9a9da4}
.ovl{position:absolute;inset:0;z-index:30;background:rgba(5,6,8,.86);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.ovl.show{display:flex}
.tips-in{width:1340px;max-height:820px;overflow:auto;padding:28px 36px;background:#0a0b0e;border:1.5px solid #2f3238;border-radius:14px;color:#eee}
.tips-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.tips-h span{font-size:22px;font-weight:900;letter-spacing:.3em;color:#2f8cff}
.tips-h .x{width:34px;height:34px;border-radius:7px;border:1px solid #2f3238;display:flex;align-items:center;justify-content:center;color:#aaa;cursor:pointer}
.tips-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:40px}
.tips-cols h4{font-size:13px;letter-spacing:.24em;color:#ff8a1f;margin:6px 0 10px}
.tips-cols ul{list-style:none;margin-bottom:18px}
.tips-cols li{font-size:17px;line-height:1.45;padding:7px 0 7px 18px;border-bottom:1px solid #16181c;position:relative}
.tips-cols li:before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:#2f8cff}
.tst-in{width:560px;padding:30px 34px;background:#0a0b0e;border:1.5px solid #2f3238;border-radius:14px;color:#ddd;text-align:center}
.tst-t{font-size:24px;font-weight:900;letter-spacing:.2em;color:#2f8cff;margin-bottom:14px}.tst-t.fail{color:#ff3b3b}
.tst-in p{font-size:14.5px;line-height:1.6;margin:8px 0;color:#c9cbd0}
.tst-in .g1{color:#2ee86a}.tst-in .g2{color:#7fd8ff}
.tst-g{font-size:34px;font-weight:900;letter-spacing:.2em;margin:6px 0}
.tst-ms{font-size:14px;color:#9a9da4;margin-bottom:6px}
.tst-b{display:flex;justify-content:center;gap:10px;margin-top:18px}.tst-b .hbtn{height:36px;padding:0 22px}
.tst-in{width:640px}
.tst-tbl{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px;text-align:left}
.tst-tbl th{font-size:10px;letter-spacing:.14em;color:#6d7077;padding:7px 8px;border-bottom:1px solid #1e2025}
.tst-tbl td{padding:9px 8px;border-bottom:1px solid #15171b;color:#ddd;white-space:nowrap}
.tst-tbl td.tl{white-space:normal;font-size:12px}.tst-tbl td.tl span{color:#7a7d84;font-size:11px}
.tst-tbl td.tn{font-variant-numeric:tabular-nums;font-weight:700}
.tst-tbl tfoot td{border-bottom:none;color:#fff;font-weight:800;padding-top:12px}
#btnTest{box-shadow:inset 0 0 0 1.5px #ffd21f;color:#ffd21f}
#btnTest.on{box-shadow:inset 0 0 0 1.5px #ffd21f;color:#111;background:#ffd21f}

/* ---- home ---- */
#home{position:fixed;inset:0;z-index:1000;background:#0d0e11;color:#e9eaee;font-family:'Inter','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic','Noto Sans SC','Noto Sans JP','Segoe UI',Tahoma,sans-serif;display:grid;grid-template-columns:minmax(420px,38%) 1fr;overflow:hidden;transition:opacity .4s ease,transform .4s ease}
#home.out{opacity:0;transform:scale(1.02);pointer-events:none}
#home .hm-l{padding:clamp(28px,7.5vh,72px) 0 clamp(28px,6.5vh,60px) clamp(32px,5vw,80px);display:flex;flex-direction:column;position:relative;z-index:2}
#home .logo{font-size:22px}
#home h1{margin-top:auto;font-size:clamp(36px,3.4vw,56px);font-weight:900;line-height:1.15;letter-spacing:-.01em;color:#e9eaee}
#home h1 em{font-style:normal;color:#2f8cff}
#home p{margin-top:22px;color:#9ea2ac;font-size:17px;line-height:1.7}
.hm-btns{display:flex;flex-direction:column;gap:12px;margin-top:44px;width:340px;margin-bottom:auto}
.hm-btns button{height:58px;border-radius:12px;font-family:inherit;font-weight:800;font-size:15px;letter-spacing:.14em;display:flex;align-items:center;justify-content:center;gap:10px}
.hm-pri{background:#2f8cff;color:#fff;border:0;cursor:pointer;box-shadow:0 0 0 1px #5aa4ff inset,0 10px 30px rgba(47,140,255,.35);transition:transform .12s,box-shadow .12s}
.hm-pri:hover{transform:translateY(-1px);box-shadow:0 0 0 1px #7db8ff inset,0 14px 36px rgba(47,140,255,.5)}
.hm-sec{background:transparent;color:#6c707a;border:1.5px dashed #3a3d45;cursor:not-allowed}
.hm-sec span{font-size:10px;letter-spacing:.12em;padding:3px 7px;border-radius:5px;background:#24262c;color:#9a9ea8;font-weight:700}
.hm-soc img{width:30px;height:30px}
#home .hm-r{position:relative;overflow:hidden}
#home .hm-r img{position:absolute;left:40px;top:50%;width:min(1250px,140vh);height:auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px #2a2d33;transform:translateY(-50%) perspective(1600px) rotateY(-14deg) rotateX(4deg);transform-origin:left center}
#home .hm-r:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d0e11 0%,transparent 18%,transparent 70%,#0d0e11 100%)}
@media (max-width:900px){#home{grid-template-columns:1fr}#home .hm-r{display:none}}
/* ---- language / login icons ---- */
.hdr-r{position:relative}
.hico{position:relative;height:28px;min-width:28px;padding:0 8px;border-radius:6px;background:linear-gradient(180deg,#2c2e33,#202226);border:1px solid #0c0d0f;box-shadow:inset 0 0 0 1.5px #3a3d43;display:flex;align-items:center;justify-content:center;gap:6px;color:#c9ccd3;cursor:pointer;user-select:none}
.hico:hover{color:#fff;box-shadow:inset 0 0 0 1.5px #2f8cff}
.hico .lc{font-size:11px;font-weight:800;letter-spacing:.12em}
.hlogin{padding:0;width:28px}
.hlogin .tip{position:absolute;top:34px;right:0;white-space:nowrap;font-size:11px;padding:5px 9px;border-radius:6px;background:#16181d;border:1px solid #2f3238;color:#9a9ea8;opacity:0;pointer-events:none;transition:opacity .15s;z-index:50}
.hlogin:hover .tip{opacity:1}
.lmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;padding:6px;background:#121318;border:1px solid #2f3238;border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.6);display:none;z-index:60}
.hlang.open .lmenu{display:block}
.lmenu .li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 10px;border-radius:6px;font-size:13px;color:#d6d8dd;cursor:pointer}
.lmenu .li b{font-size:10px;letter-spacing:.12em;color:#6d7077}
.lmenu .li:hover{background:#1d2027}
.lmenu .li.on{background:rgba(47,140,255,.16);color:#fff}.lmenu .li.on b{color:#2f8cff}
.hm-soc{align-items:center}
.hm-lang{height:30px;padding:0 10px;margin-left:4px}
.hm-lang .lmenu{top:auto;bottom:calc(100% + 8px);right:auto;left:0}
#home button i{font-style:normal}
/* RTL text blocks */
[dir=rtl].tips-in .tips-cols li{padding:7px 18px 7px 0}[dir=rtl].tips-in .tips-cols li:before{left:auto;right:0}
[dir=rtl].tips-in .tips-cols h4{letter-spacing:0}
#home h1[dir=rtl],#home p[dir=rtl]{text-align:right;padding-right:40px}

#home h1{font-size:clamp(40px,4.3vw,72px);line-height:1.05;letter-spacing:-.015em}
#home p{max-width:24em;text-wrap:balance}
html:lang(ko) #home h1,html:lang(ko) #home p,html:lang(ko) .tips-in,html:lang(ko) .tst-in{word-break:keep-all}
html:lang(ja) #home p,html:lang(ja) #home h1{word-break:auto-phrase}

/* ---- premium locks ---- */
#libBody tr.lk td.t{color:#f3d27a}
#libBody tr.lk .pm{margin-left:8px;font-size:9px;font-weight:800;letter-spacing:.14em;padding:2px 6px;border-radius:4px;color:#1a1406;background:linear-gradient(180deg,#ffe08a,#e2b240);vertical-align:1px}
#libBody tr.lk .ld{color:#f3c14b;border-color:#c99a2e;background:rgba(243,193,75,.08)}
.lkwrap .lkt{display:none}
.loops-locked .lkwrap .lkt{display:inline-flex;align-items:center;gap:3px;margin-left:6px;color:#9a9ea8}
.loops-locked .lkwrap .lkt svg{width:8px;height:8px}
.loops-locked .lkwrap .lbtn,.loops-locked .lkwrap .bt{opacity:.3}
#upOvl{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}
#upOvl.show{display:flex}
#upBox{width:400px;max-width:calc(100vw - 32px);background:#121318;border:1px solid #3a3020;border-radius:16px;padding:28px 28px 20px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(243,193,75,.15);color:#e9eaee}
#upBox .up-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(243,193,75,.12);color:#f3c14b;margin-bottom:16px}
#upBox h3{font-size:19px;font-weight:800;margin:0 0 6px}
#upBox .up-s{color:#9ea2ac;font-size:13px;margin-bottom:16px;line-height:1.5}
#upBox ul{list-style:none;margin:0 0 20px;padding:0}
#upBox li{font-size:13px;color:#c9ccd3;padding:5px 0}#upBox li:before{content:"✓  ";color:#f3c14b;font-weight:800}
#upBox .up-b1{height:44px;border-radius:10px;background:linear-gradient(180deg,#ffd979,#e2ac36);color:#1a1406;font-weight:800;letter-spacing:.1em;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#upBox .up-b1:hover{filter:brightness(1.08)}
#upBox .up-b2{height:38px;margin-top:6px;color:#8b8f98;font-size:12px;display:flex;align-items:center;justify-content:center;letter-spacing:.08em;cursor:pointer}
#upBox .up-b2:hover{color:#c9ccd3}
[dir=rtl]#upBox li:before{content:"  ✓"}
html:lang(ko) #upBox{word-break:keep-all}

/* CHECK limit */
.chk-left{margin-top:10px;font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.4)}
.chk-wait{font-size:15px;font-weight:700;letter-spacing:.06em;color:#fff}
.chk-prem{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.06em;color:#f3c14b;cursor:pointer;pointer-events:auto}
.chk-prem:hover{text-decoration:underline}
.chk.lim{opacity:.4;box-shadow:inset 0 0 0 1.5px #3a3d45;color:#8b8f98}
.pa .pa-off{flex-direction:column}