html, body { height:100%; }
body { margin:0; background:#1a1a1a; color:#ddd; font-family:sans-serif; display:flex; padding:12px; box-sizing:border-box; overflow:hidden; }
#wrap { flex:1; display:flex; align-items:center; justify-content:center; min-width:0; }
canvas { background:#222; border:1px solid #444; display:block; touch-action:none; }
/* 킬 피드: 미니맵(캔버스 20%, 최소 90px) 바로 아래 */
#board { position:absolute; left:10px; top:max(106px, calc(20% + 16px)); pointer-events:none; text-shadow:0 1px 2px #000; }
/* 설정: 화면 우하단 톱니 → 위로 열리는 팝오버 */
#settings { position:fixed; right:10px; bottom:10px; z-index:15; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:6px; }
#settings summary { list-style:none; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.5); color:#bbb; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#settings summary::-webkit-details-marker { display:none; }
#settings summary:hover, #settings[open] summary { color:#fff; }
#settings summary svg { width:20px; height:20px; }
.setpanel { padding:8px 12px; border-radius:10px; background:rgba(0,0,0,.8); color:#ddd; font-size:13px; }
.setpanel label { display:flex; align-items:center; gap:6px; padding:4px 0; white-space:nowrap; }
body.excel #settings { bottom:42px; }
body.excel #board { text-shadow:none; }
#stage { position:relative; }
#bar { position:absolute; left:10px; bottom:10px; pointer-events:none; font-family:sans-serif; }
#skillbar { position:absolute; right:10px; bottom:10px; pointer-events:none; font-family:sans-serif; }
#lvbar { position:absolute; bottom:12px; pointer-events:none; font-family:sans-serif; }
#lvbar.top { bottom:auto; top:10px; }
.lvwrap { position:relative; display:flex; align-items:center; gap:8px; padding:4px 10px; border-radius:12px; background:rgba(0,0,0,.45); }
.lvnum { font-size:12px; font-weight:bold; color:#fff; white-space:nowrap; }
.lvnum small { font-size:9px; color:#9cf; margin-right:2px; letter-spacing:1px; }
.xpbar { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.xpbar i { display:block; height:100%; width:calc(var(--xp) * 100%); background:#8cf; border-radius:3px; transition:width .15s linear; }
.lvwrap .badge { position:absolute; right:-6px; top:-8px; min-width:18px; height:18px; border-radius:9px; background:#fd8; color:#321; font-size:11px; font-weight:bold; display:flex; align-items:center; justify-content:center; padding:0 5px; animation:bob 1s ease-in-out infinite; }
.lvwrap.lvup { animation:lvflash .9s ease-out 1; }
.lvwrap.lvup .lvnum { animation:lvnum .9s cubic-bezier(.2,1.6,.4,1) 1; }
@keyframes lvflash { 0% { box-shadow:0 0 0 0 rgba(255,221,136,.9); } 100% { box-shadow:0 0 0 18px rgba(255,221,136,0); } }
@keyframes lvnum { 0% { transform:scale(1); } 30% { transform:scale(1.4); color:#fd8; } 100% { transform:scale(1); } }
#skillbar .panel { padding:8px; }
.panel { pointer-events:auto; display:flex; align-items:center; gap:10px; padding:5px 8px; border-radius:10px; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.divider { width:1px; align-self:stretch; background:rgba(255,255,255,.12); margin:2px 0; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
.grp { display:flex; gap:8px; align-items:center; }
.grp.stats { flex-direction:column; gap:3px; align-items:stretch; }
.strow { position:relative; display:flex; align-items:center; gap:6px; padding:1px 2px; cursor:default; user-select:none; -webkit-tap-highlight-color:transparent; color:#8a8a8a; }
.strow .orb { position:relative; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; flex:none; transition:box-shadow .15s, border-color .15s; }
.strow .orb .ico { width:15px; height:15px; margin:0; }
.strow .gauge { display:flex; gap:2px; }
.strow .gauge i { width:8px; height:5px; border-radius:1.5px; background:rgba(255,255,255,.12); display:block; }
.strow .gauge i.on { background:#8cf; }
.strow.max .gauge i.on { background:#fd8; }
.strow.max .orb { border-color:#fd8; color:#fd8; }
.strow.can { cursor:pointer; color:#fff; }
.strow.can .orb { border-color:#8cf; background:rgba(60,120,200,.4); box-shadow:0 0 0 2px rgba(136,204,255,.25), 0 0 8px rgba(136,204,255,.7); }
.strow.can .gauge i:not(.on) { background:rgba(136,204,255,.3); }
.strow.can:active .orb { transform:scale(.9); }
.strow .plus { position:absolute; top:-5px; left:17px; width:13px; height:13px; border-radius:50%; background:#fd8; color:#321; font-size:11px; font-weight:bold; line-height:13px; text-align:center; animation:bob 1s ease-in-out infinite; }
.strow .key { position:absolute; left:-4px; top:-5px; font-size:9px; color:#bbb; background:#222; border:1px solid #555; border-radius:3px; padding:0 3px; line-height:11px; }
.strow.can .key { color:#fff; border-color:#8cf; }
.cands { display:flex; gap:6px; }
.sk.chosen { border-color:rgba(255,255,255,.35); color:#ddd; cursor:default; }
.tierdots { font-size:8px; letter-spacing:2px; color:rgba(255,255,255,.35); }
.slot:focus-visible, .strow:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.slot.empty { border-style:dashed; border-color:rgba(255,255,255,.2); background:transparent; }
.sk.cand { border-color:#fd8; color:#fff; cursor:pointer; animation:pulse 1.2s ease-in-out infinite; }
.sk.cand::before { content:''; position:absolute; top:-9px; left:50%; margin-left:-5px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:6px solid #fd8; }
.grp.skills { position:relative; min-width:52px; justify-content:center; }
.grp.skills .big { width:58px; height:58px; }
.grp.skills .big .ico { width:32px; height:32px; }
.slot { position:relative; width:46px; height:46px; border-radius:8px; background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.12); color:#9a9a9a; display:flex; align-items:center; justify-content:center; cursor:default; user-select:none; -webkit-tap-highlight-color:transparent; overflow:visible; }
.slot .ico { width:24px; height:24px; margin:0; }
.slot .key { position:absolute; top:2px; left:3px; font-size:9px; color:#888; border:1px solid #555; border-radius:2px; padding:0 2px; line-height:11px; }
.tier { position:absolute; left:4px; right:4px; bottom:3px; height:4px; display:flex; gap:2px; }
.tier i { flex:1; border-radius:2px; background:rgba(255,255,255,.15); }
.tier i.on { background:#8cf; }
.slot.max .tier i.on { background:#fd8; }
.slot.can { border-color:#8cf; color:#fff; cursor:pointer; background:rgba(60,120,200,.35); box-shadow:0 0 10px rgba(136,204,255,.6); }
.slot.can:active, .sk.ready:active, .sk.select:active { transform:scale(.92); }
.slot.max { color:#ddd; }
.slot .plus { position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; background:#fd8; color:#321; font-size:14px; font-weight:bold; line-height:18px; text-align:center; animation:bob 1s ease-in-out infinite; }
.sk.locked, .sk.off { opacity:.4; }
.sk .lock { position:absolute; right:3px; bottom:3px; width:11px; height:11px; color:#ddd; }
.sk .lock svg { width:100%; height:100%; display:block; }
.sk.cd { color:#ccc; }
.sk.cd::after { content:''; position:absolute; inset:-2px; border-radius:8px; background:conic-gradient(rgba(0,0,0,.7) calc(var(--p) * 100%), transparent 0); pointer-events:none; }
.sk .sec { position:absolute; bottom:1px; right:4px; font-size:10px; color:#fff; z-index:1; text-shadow:0 0 3px #000; }
.sk.ready { border-color:#6d6; color:#fff; cursor:pointer; background:rgba(60,160,80,.35); box-shadow:0 0 10px rgba(102,221,102,.5); }
.pv { display:none; position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); width:132px; height:80px; padding:3px; border-radius:8px; background:rgba(0,0,0,.88); border:1px solid rgba(255,255,255,.15); pointer-events:none; z-index:5; }
.pv::after { content:''; position:absolute; top:100%; left:50%; margin-left:-6px; border:6px solid transparent; border-top-color:rgba(0,0,0,.88); }
.sk:hover .pv, .sk.show .pv { display:block; }
.pv-svg { width:100%; height:100%; display:block; }
.pv-shot { animation:pvshot 1.3s ease-out infinite; }
@keyframes pvshot { 0% { transform:translateX(0); opacity:1; } 70% { transform:translateX(34px); opacity:1; } 100% { transform:translateX(38px); opacity:0; } }
.pv-head { animation:pvdash 1.4s cubic-bezier(.3,0,.2,1) infinite; }
.pv-ghost { animation:pvdash 1.4s cubic-bezier(.3,0,.2,1) infinite; opacity:.5; }
.pv-ghost.g1 { animation-delay:.06s; opacity:.45; } .pv-ghost.g2 { animation-delay:.12s; opacity:.3; } .pv-ghost.g3 { animation-delay:.18s; opacity:.15; }
@keyframes pvdash { 0% { transform:translateX(0); } 55% { transform:translateX(86px); } 75% { transform:translateX(86px); opacity:0; } 76% { transform:translateX(0); opacity:0; } 100% { transform:translateX(0); } }
.pv-ring { animation:pvring 1.6s ease-in-out infinite; transform-origin:46px 35px; }
@keyframes pvring { 0%,100% { opacity:.6; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
.pv-bullet { animation:pvbullet 1.6s linear infinite; }
@keyframes pvbullet { 0% { transform:translateX(0); opacity:1; } 55% { transform:translateX(-47px); opacity:1; } 60% { transform:translateX(-47px); opacity:0; } 100% { transform:translateX(-47px); opacity:0; } }
.pv-hit { animation:pvhit 1.6s linear infinite; transform-origin:63px 35px; opacity:0; }
@keyframes pvhit { 0%,54% { opacity:0; transform:scale(.5); } 58% { opacity:1; transform:scale(1); } 80% { opacity:0; transform:scale(2.2); } 100% { opacity:0; } }
.strow .pv { bottom:auto; left:calc(100% + 12px); top:50%; transform:translateY(-50%); }
.strow .pv::after { top:50%; left:-12px; margin:-6px 0 0 0; border-color:transparent rgba(0,0,0,.88) transparent transparent; }
.strow:hover .pv, .strow.show .pv { display:block; }
.pvs-range { animation:pvsrange 1.8s ease-in-out infinite; transform-origin:40px 35px; }
@keyframes pvsrange { 0% { transform:scale(1); opacity:.5; } 50% { transform:scale(1.8); opacity:1; } 100% { transform:scale(1.8); opacity:0; } }
.pvs-fast { animation:pvsfast .6s linear infinite; }
@keyframes pvsfast { 0% { transform:translateX(0); opacity:1; } 90% { transform:translateX(50px); opacity:1; } 100% { transform:translateX(52px); opacity:0; } }
.pvs-target { animation:pvstarget .6s linear infinite; }
@keyframes pvstarget { 0%,85% { opacity:1; } 90% { opacity:.2; } 100% { opacity:1; } }
.pvs-slow { animation:pvsmove 2s linear infinite; }
.pvs-quick { animation:pvsmove 1.1s linear infinite; }
.pvs-lines { animation:pvsmove 1.1s linear infinite; }
@keyframes pvsmove { 0% { transform:translateX(0); } 90% { transform:translateX(86px); opacity:1; } 91% { opacity:0; } 100% { transform:translateX(0); opacity:0; } }
.pvs-area { animation:pvsarea 2.2s ease-in-out infinite; transform-origin:60px 35px; }
@keyframes pvsarea { 0% { transform:scale(.5); } 60% { transform:scale(1.5); } 85% { transform:scale(1.5); opacity:1; } 100% { transform:scale(.5); opacity:0; } }
.pvs-t1 { animation:pvst 2.2s ease-in-out infinite; transform-origin:52px 27px; }
.pvs-t2 { animation:pvst 2.2s ease-in-out infinite .3s; transform-origin:68px 43px; }
@keyframes pvst { 0%,25% { transform:scale(0); opacity:0; } 40% { transform:scale(1.3); opacity:1; } 50%,85% { transform:scale(1); opacity:1; } 100% { transform:scale(0); opacity:0; } }
.pv-spawn { animation:pvspawn 2s ease-out infinite; transform-origin:66px 35px; }
@keyframes pvspawn { 0% { transform:scale(0); opacity:0; } 15% { transform:scale(1.2); opacity:1; } 25%,80% { transform:scale(1); opacity:1; } 100% { transform:scale(1); opacity:0; } }
.pv-fade { animation:pvfade 2s linear infinite; transform-origin:60px 62px; }
@keyframes pvfade { 0%,20% { transform:scaleX(1); } 95% { transform:scaleX(0); } 100% { transform:scaleX(0); } }
.pv-hop { animation:pvhop 1.6s ease-in-out infinite; }
@keyframes pvhop { 0%,15% { transform:translate(0,0); } 30% { transform:translate(18px,-26px); } 45% { transform:translate(36px,-34px); } 60% { transform:translate(54px,-26px); } 75%,85% { transform:translate(66px,0); opacity:1; } 86% { opacity:0; } 100% { transform:translate(0,0); opacity:0; } }
.pv-cell { animation:pverode 2.4s ease-in-out infinite; }
@keyframes pverode { 0%,30% { fill:#e74c3c; } 45%,85% { fill:#8cf; } 100% { fill:#e74c3c; } }
.panel.appear { animation:appear .5s cubic-bezier(.2,1.4,.4,1) 1; }
@keyframes appear { 0% { transform:translateY(24px) scale(.8); opacity:0; } 100% { transform:none; opacity:1; } }
.pvt-snipe { animation:pvtsnipe 1.6s linear infinite; }
@keyframes pvtsnipe { 0%,40% { transform:translateX(0); opacity:0; } 45% { opacity:1; } 70% { transform:translateX(85px); opacity:1; } 72%,100% { opacity:0; } }
.pvt-far { animation:pvtfar 1.6s linear infinite; }
@keyframes pvtfar { 0%,69% { opacity:1; } 72% { opacity:.1; } 100% { opacity:1; } }
.pvt-rapid { animation:pvtrapid .6s linear infinite; }
@keyframes pvtrapid { 0% { transform:translateX(0); opacity:1; } 90% { transform:translateX(33px); opacity:1; } 100% { opacity:0; } }
.pvt-trail { animation:pvttrail 1.8s linear infinite; transform-origin:20px 50px; }
@keyframes pvttrail { 0% { transform:scaleX(0); } 50% { transform:scaleX(1); opacity:1; } 60%,100% { transform:scaleX(1); opacity:0; } }
.pvt-cut { animation:pvtcut 1.8s linear infinite; }
@keyframes pvtcut { 0%,48% { opacity:0; } 52% { opacity:1; } 62%,100% { opacity:0; } }
.pop { animation:pop .45s cubic-bezier(.2,1.6,.4,1) 1; }
@keyframes pop { 0% { transform:scale(.6); } 100% { transform:scale(1); } }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 rgba(255,221,136,0); } 50% { box-shadow:0 0 12px rgba(255,221,136,.8); } }
.dim { color:#888; font-size:12px; }
.ico { display:inline-block; }
.ico svg { width:100%; height:100%; display:block; }
.mobile-only { display:none; }
/* 시작 화면 */
#start { position:absolute; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; z-index:11; font-family:sans-serif; overflow:auto; }
#start[hidden] { display:none; }
.scard { width:min(560px, 94%); max-height:96%; overflow:auto; display:flex; flex-direction:column; gap:16px; box-sizing:border-box; }
.srow { display:flex; gap:8px; margin:0; }
#nick { flex:1; min-width:0; padding:12px 14px; font-size:16px; border-radius:8px; border:1px solid #555; background:#1e1e1e; color:#fff; outline:none; }
#nick:focus { border-color:#8cf; }
.srow { align-items:center; }
#startBtn { flex:none; width:52px; height:52px; padding:0; border:none; border-radius:50%; background:#3d8bfd; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 0 rgba(61,139,253,.6); animation:playpulse 1.8s ease-out infinite; transition:transform .1s; }
#startBtn svg { width:26px; height:26px; margin-left:2px; }
#startBtn:hover { transform:scale(1.07); } #startBtn:active { transform:scale(.94); }
@keyframes playpulse { 0% { box-shadow:0 0 0 0 rgba(61,139,253,.6); } 100% { box-shadow:0 0 0 14px rgba(61,139,253,0); } }
.scard { width:min(400px, 94%); }
.stiles { display:flex; flex-direction:column; align-items:center; gap:8px; }
.cwrap { display:flex; align-items:center; gap:6px; width:100%; }
.cnav { flex:none; width:32px; height:44px; border:none; border-radius:8px; background:rgba(255,255,255,.08); color:#ccc; font-size:18px; cursor:pointer; }
.cnav:hover { background:rgba(255,255,255,.16); }
.stile { flex:1; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 10px 12px; display:flex; flex-direction:column; align-items:center; gap:6px; animation:cfade .25s ease-out 1; touch-action:pan-y; }
@keyframes cfade { 0% { opacity:0; transform:translateX(10px); } 100% { opacity:1; transform:none; } }
.stile svg { width:100%; display:block; }
.stile span { font-size:14px; color:#ddd; }
.cdots { display:flex; gap:8px; }
.cdots button { width:8px; height:8px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer; }
.cdots button.on { background:#8cf; }
body.excel .cnav { background:#f3f3f3; color:#555; border:1px solid #d4d4d4; border-radius:2px; }
body.excel .cdots button { background:#cfcfcf; } body.excel .cdots button.on { background:#217346; }
body.excel #start { background:rgba(255,255,255,.85); }
body.excel #nick { background:#fff; color:#222; border-color:#bfbfbf; border-radius:2px; }
body.excel #startBtn { background:#217346; animation:none; }
body.excel .stile { background:#fff; border-color:#d4d4d4; border-radius:2px; } body.excel .stile span { color:#333; }
/* 시작 화면 애니메이션 (3.2초 루프) */
.h1-trail { stroke-dasharray:134; animation:h1trail 3.2s linear infinite; }
@keyframes h1trail { 0% { stroke-dashoffset:134; opacity:.6; } 55% { stroke-dashoffset:0; opacity:.6; } 60%,100% { stroke-dashoffset:0; opacity:0; } }
.h1-head { offset-path:path('M40 27 H98 V45 H40'); offset-rotate:0deg; animation:h1head 3.2s linear infinite; }
@keyframes h1head { 0% { offset-distance:0%; } 55%,100% { offset-distance:100%; } }
.h1-fill { animation:h1fill 3.2s linear infinite; }
@keyframes h1fill { 0%,55% { opacity:0; } 62%,92% { opacity:.55; } 100% { opacity:0; } }
.h2-enemy { animation:h2enemy 3.2s linear infinite; }
@keyframes h2enemy { 0% { transform:translateY(0); } 80%,100% { transform:translateY(62px); } }
.h2-victim { animation:h2victim 3.2s linear infinite; }
@keyframes h2victim { 0%,38% { opacity:1; } 42% { opacity:.2; } 46% { opacity:1; } 50% { opacity:.2; } 56%,92% { opacity:0; } 100% { opacity:1; } }
.h2-spark { animation:h2spark 3.2s linear infinite; transform-origin:64px 35px; }
@keyframes h2spark { 0%,38% { opacity:0; transform:scale(.4); } 42% { opacity:1; transform:scale(1); } 56%,100% { opacity:0; transform:scale(2.2); } }
.h3-enemy { animation:h3enemy 3.2s linear infinite; }
@keyframes h3enemy { 0% { transform:translateX(0); opacity:1; } 50% { transform:translateX(-40px); opacity:1; } 64% { transform:translateX(-46px); opacity:1; } 70%,96% { transform:translateX(-46px); opacity:0; } 100% { transform:translateX(0); opacity:0; } }
.h3-shot { animation:h3shot 3.2s linear infinite; }
@keyframes h3shot { 0%,44% { transform:translateX(0); opacity:0; } 46% { opacity:1; } 64% { transform:translateX(26px); opacity:1; } 66%,100% { transform:translateX(26px); opacity:0; } }
.h4-xp { animation:h4xp 3.2s linear infinite; transform-origin:14px 17px; }
@keyframes h4xp { 0% { transform:scaleX(0); } 40%,94% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
.h4-i { animation:h4pop 3.2s cubic-bezier(.2,1.5,.4,1) infinite; transform-box:fill-box; transform-origin:center; }
.h4-i.b { animation-delay:.3s; } .h4-i.c { animation-delay:.6s; }
@keyframes h4pop { 0%,40% { transform:scale(0); opacity:0; } 50%,82% { transform:scale(1); opacity:1; } 90%,100% { transform:scale(0); opacity:0; } }
/* 사망 화면 */
#death { position:absolute; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; z-index:10; font-family:sans-serif; overflow:auto; }
#death[hidden] { display:none; }
.dcard { width:min(560px, 94%); max-height:96%; overflow:auto; background:#1e1e1e; border:1px solid #444; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:14px; color:#ddd; animation:appear .35s ease-out 1; box-sizing:border-box; }
.dbody { display:flex; gap:16px; align-items:center; }
.dinfo { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
.dcard.narrow { width:min(340px, 94%); } .dcard.narrow .dbody { flex-direction:column; }
.dtitle { font-size:20px; font-weight:bold; color:#fff; }
.dby { font-size:12px; color:#aaa; }
.dstats { display:flex; gap:14px; font-size:12px; color:#aaa; text-align:center; }
.dstats b { display:block; font-size:16px; color:#fff; text-align:center; }
.dshape { display:flex; flex-direction:column; align-items:center; gap:4px; }
.dshape img { max-width:150px; max-height:110px; border:1px solid #444; border-radius:4px; image-rendering:pixelated; }
.dshape a { color:#8cf; font-size:12px; }
#dRestart { width:100%; padding:11px; font-size:15px; font-weight:bold; border:none; border-radius:8px; background:#3d8bfd; color:#fff; cursor:pointer; }
#dRestart:disabled { background:#555; color:#999; cursor:default; }
.dad { width:300px; max-width:100%; height:250px; border:1px dashed #666; border-radius:4px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; color:#777; flex:none; }
.dad.small { height:100px; }
body.excel .dcard { background:#fff; border:1px solid #bfbfbf; border-radius:2px; color:#333; }
body.excel .dtitle { color:#217346; } body.excel .dstats b { color:#222; }
body.excel #dRestart { background:#217346; border-radius:2px; }
body.excel #death { background:rgba(255,255,255,.75); }
/* 스프레드시트 스킨: 상/하단 크롬 */
#xlTop, #xlBottom { display:none; position:fixed; left:0; right:0; z-index:20; font-family:Calibri, 'Segoe UI', 'Malgun Gothic', sans-serif; font-size:12px; color:#333; user-select:none; }
#xlTop { top:0; } #xlBottom { bottom:0; }
body.excel #xlTop, body.excel #xlBottom { display:block; }
body.excel { padding-top:142px !important; padding-bottom:34px !important; }
.xl-title { height:28px; background:#217346; color:#fff; display:flex; align-items:center; gap:10px; padding:0 10px; font-size:12px; }
.xl-logo { background:#fff; color:#217346; font-weight:bold; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:2px; }
.xl-win { margin-left:auto; letter-spacing:6px; opacity:.85; }
.xl-tabs { height:26px; background:#217346; display:flex; align-items:flex-end; gap:2px; padding:0 8px; }
.xl-tabs span { color:#e8f3ea; padding:4px 10px; font-size:12px; }
.xl-tabs span.on { background:#f3f3f3; color:#217346; border-radius:3px 3px 0 0; font-weight:bold; }
.xl-ribbon { height:62px; background:#f3f3f3; border-bottom:1px solid #d4d4d4; display:flex; gap:6px; padding:4px 8px; overflow:hidden; }
.xl-grp { display:flex; flex-direction:column; justify-content:space-between; padding:2px 8px; border-right:1px solid #ddd; min-width:60px; }
.xl-grp:last-child { border-right:none; }
.xl-lbl { font-size:10px; color:#666; text-align:center; margin-top:2px; }
.xl-big { font-size:20px; text-align:center; }
.xl-row { display:flex; gap:6px; align-items:center; font-size:12px; color:#444; }
.xl-row > span, .xl-row > b, .xl-row > i, .xl-row > u { padding:0 3px; }
.xl-sel { background:#fff; border:1px solid #c8c8c8; padding:0 6px !important; min-width:70px; display:inline-block; }
.xl-sel.sm { min-width:28px; }
.xl-btn { background:#fff; border:1px solid #c8c8c8; padding:1px 6px !important; font-size:11px; }
.xl-formula { height:24px; background:#fff; border-bottom:1px solid #d4d4d4; display:flex; align-items:center; gap:0; }
.xl-name { width:80px; border-right:1px solid #d4d4d4; padding:0 8px; height:100%; display:flex; align-items:center; }
.xl-fx { padding:0 10px; color:#666; border-right:1px solid #d4d4d4; height:100%; display:flex; align-items:center; gap:4px; }
.xl-fx i { font-family:serif; color:#333; }
.xl-input { flex:1; padding:0 8px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xl-sheets { height:18px; background:#f3f3f3; border-top:1px solid #d4d4d4; display:flex; align-items:stretch; gap:0; padding-left:8px; font-size:11px; }
.xl-sheets span { padding:0 12px; display:flex; align-items:center; color:#444; border-right:1px solid #d4d4d4; }
.xl-sheets span.on { background:#fff; color:#217346; font-weight:bold; border-bottom:2px solid #217346; }
.xl-plus { border-right:none !important; }
.xl-status { height:16px; background:#f3f3f3; display:flex; align-items:center; gap:18px; padding:0 10px; font-size:11px; color:#444; }
.xl-zoom { margin-left:auto; white-space:nowrap; }
body.excel #stage canvas { border-top:none; border-left:none; }
/* 스프레드시트 스킨 */
body.excel { background:#f3f3f3; color:#333; font-family:Calibri, 'Segoe UI', 'Malgun Gothic', sans-serif; }
body.excel canvas { border:1px solid #bfbfbf; background:#fff; }
body.excel .dim { color:#777; }
body.excel .panel { background:#fff; border:1px solid #bfbfbf; border-radius:2px; backdrop-filter:none; }
body.excel .slot { background:#f9f9f9; border:1px solid #c8c8c8; border-radius:2px; color:#666; }
body.excel .strow .orb { background:#f9f9f9; border-color:#c8c8c8; }
body.excel .strow .gauge i { background:#e1e1e1; } body.excel .strow .gauge i.on { background:#217346; }
body.excel .strow.can .orb { border-color:#217346; background:#e2efda; box-shadow:none; }
body.excel .strow.can .gauge i:not(.on) { background:#d4e6c9; }
body.excel .strow .plus, body.excel .lvwrap .badge { background:#217346; color:#fff; animation:none; }
body.excel .sk.ready { border-color:#217346; background:#e2efda; box-shadow:none; color:#217346; }
body.excel .sk.cand { border-color:#217346; animation:none; color:#217346; background:#f3f9f0; }
body.excel .sk.cand::before { border-bottom-color:#217346; }
body.excel .sk.cd::after { background:conic-gradient(rgba(0,0,0,.18) calc(var(--p) * 100%), transparent 0); }
body.excel .sk .sec { color:#333; text-shadow:none; }
body.excel .slot.empty { border-style:dashed; border-color:#c8c8c8; }
body.excel .lvwrap { background:#fff; border:1px solid #bfbfbf; border-radius:2px; }
body.excel .lvnum { color:#333; } body.excel .lvnum small { color:#217346; }
body.excel .xpbar { background:#e1e1e1; } body.excel .xpbar i { background:#217346; }
body.excel .key { color:#555; border-color:#bbb; background:#fff; }
body.excel .pv { background:#fff; border:1px solid #bfbfbf; } body.excel .pv::after { border-top-color:#fff; }
body.excel .strow .pv::after { border-color:transparent #fff transparent transparent; }
body.excel .pv-svg rect[fill="rgba(136,204,255,.15)"], body.excel .pv-svg rect[fill="rgba(136,204,255,.18)"] { fill:#e2efda; }
body.excel .divider { background:#d4d4d4; }
@media (pointer: coarse) { .slot .key, .strow .key { display:none; } }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1024px) {
body { padding:6px; }
.desktop-only { display:none; }
.mobile-only { display:block; }
.slot { width:52px; height:52px; }
.slot .ico { width:26px; height:26px; }
.strow { gap:7px; padding:2px; } .grp.stats { gap:5px; }
.strow .orb { width:32px; height:32px; } .strow .orb .ico { width:18px; height:18px; }
.strow .gauge i { width:10px; height:7px; }
#bar { left:6px; bottom:6px; }
#skillbar { right:6px; bottom:6px; }
.panel { gap:8px; padding:6px 8px; }
.dim.help { font-size:11px; }
}