/* 대시 레인 게임 화면 스타일(프로토타입 <style> 원문 이식 + 설정 화면 추가분) */
:root{--bg:#fff3dc;--page:#f1dfbd;--p1:#fffaf0;--p2:#fdecc8;--p3:#f7dba8;--line:#e6cc9a;--ink:#140e20;--tx:#2b1f3f;--tx2:#5d5072;--tx3:#8e82a5;--dot:rgba(28,20,40,.05);--odd:rgba(28,20,40,.035);--okTx:#1d8a4b;--goldTx:#a3650a;--infoTx:#157f95;--badTx:#c42f3b;--hotBg:#ffe3e3;--starOff:rgba(28,20,40,.2);--bigTx:#ff5f7e;--prem:#fff0c4;--bnav:#fffaf0;--bnavTx:#8e82a5;--pink:#ff5f7e;--cyan:#4fd1e8;--yel:#ffc94a;--grn:#5fdc8f;--red:#ff5a5a;--org:#ff9147;--pur:#a77bff;--cream:#f6efe2}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--page);color:var(--tx);font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;line-height:1.5}
body{min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
.jua,h2,h3,.logo,.btn,.chip b,.sc{font-family:"Jua","Pretendard","Apple SD Gothic Neo",sans-serif;font-weight:400}
.ico{display:inline-block;width:1.25em;height:1.25em;background-size:contain;background-repeat:no-repeat;background-position:center;vertical-align:-.28em;font-style:normal}
.ico.lg{width:34px;height:34px;vertical-align:middle}
.ico.xl{width:46px;height:46px;vertical-align:middle}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:96px}
.app::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:7px 7px}
.app.wide{max-width:1080px}
header.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg);border-bottom:2px solid var(--ink)}
.logo{font-size:21px;white-space:nowrap;letter-spacing:.02em;line-height:1;color:var(--yel);text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink);transform:rotate(-2deg)}
.logo small{display:block;font-size:10px;color:var(--tx3);letter-spacing:.2em;text-shadow:none;font-family:inherit;margin-top:3px}
.cur{display:flex;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:3px 9px 3px 5px;font-size:15px;white-space:nowrap;box-shadow:2px 2px 0 var(--ink)}
.chip .plus{background:var(--grn);border:2px solid var(--ink);border-radius:99px;width:18px;height:18px;display:inline-grid;place-items:center;font-size:13px;font-weight:900;margin-left:2px;line-height:1}
.icon{background:var(--cream);border:2px solid var(--ink);border-radius:12px;width:36px;height:36px;display:grid;place-items:center;font-size:15px;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);display:grid;grid-template-columns:repeat(5,1fr);background:var(--bnav);border-top:3px solid var(--ink);z-index:10;padding:5px 4px calc(5px + env(safe-area-inset-bottom))}
.bnav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--bnavTx);gap:0;padding:3px 0;position:relative;font-weight:800}
.bnav button .ico{width:28px;height:28px;transition:transform .15s}
.bnav button.on{color:var(--ink)}
.bnav button.on .ico{transform:translateY(-3px) rotate(-6deg) scale(1.12)}
.bnav button .dot{position:absolute;top:2px;right:20%;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid var(--ink);display:none}
.bnav button .dot.on{display:block}
section.page{display:none;padding:16px;animation:fade .3s ease;position:relative}
section.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h2{font-size:24px;margin:4px 0 4px;letter-spacing:-.01em}
h3{font-size:18px;margin:0 0 8px}
.sub{color:var(--tx2);font-size:13px;margin:0 0 14px}
.card{background:var(--p1);border:2px solid var(--ink);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:3px 4px 0 var(--ink)}
.card.paper{background:var(--cream);color:var(--ink)}
.card.paper .muted,.card.paper .sub{color:#6c6080}
.btn{border:2.5px solid var(--ink);border-radius:14px;padding:10px 16px;background:var(--p3);font-size:16px;box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s;color:var(--tx)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.pri{background:var(--pink);color:#fff}
.btn.cy{background:var(--cyan);color:var(--ink)}
.btn.gr{background:var(--grn);color:var(--ink)}
.btn.gold{background:var(--yel);color:var(--ink)}
.btn.ghost{background:transparent;border-color:var(--line);box-shadow:none;color:var(--tx2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.full{width:100%}
.row{display:flex;gap:8px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bar{height:10px;background:var(--p3);border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--grn);transition:width .5s}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--p3);color:var(--tx2);font-weight:800;border:1.5px solid var(--ink)}
.muted{color:var(--tx3);font-size:12px}
.hero{position:relative;border-radius:22px;overflow:hidden;border:3px solid var(--ink);background:#120a26;box-shadow:4px 5px 0 var(--ink)}
.hero canvas{display:block;width:100%;height:240px}
.hero .ov{position:absolute;left:0;right:0;top:0;padding:12px 14px;display:flex;justify-content:space-between;align-items:flex-start}
.season{font-size:12px;font-weight:800;background:var(--cream);color:var(--ink);border:2px solid var(--ink);padding:3px 10px;border-radius:99px}
.bestbox{text-align:right;color:#fbf3e4;background:rgba(20,14,32,.72);border:2px solid var(--ink);border-radius:14px;padding:4px 10px}
.bestbox b{display:block;font-size:24px;font-family:"Jua",sans-serif;font-weight:400;line-height:1.1}
.bestbox span{font-size:11px;color:#d3c7e8}
.multb{position:absolute;left:14px;bottom:12px;background:var(--yel);color:var(--ink);border:2.5px solid var(--ink);border-radius:12px;padding:2px 12px;font-size:22px;font-family:"Jua",sans-serif;transform:rotate(-4deg);box-shadow:2px 3px 0 var(--ink)}
.multb small{font-size:10px;display:block;margin-top:-4px;font-family:inherit}
.play-btn small{display:block;font-size:13px;font-family:'Pretendard',sans-serif;font-weight:800;opacity:.9;margin-top:-2px}
.stars{display:inline-flex;gap:1px;font-size:11px;line-height:1;color:var(--starOff);font-family:sans-serif}
.stars i{font-style:normal}.stars i.on{color:var(--yel);text-shadow:1px 1px 0 var(--ink)}
.stars.big{font-size:40px;gap:6px;display:flex;justify-content:center;margin:4px 0}
.stars.big i{color:#4c3d72;-webkit-text-stroke:2px var(--ink)}.stars.big i.on{color:#4c3d72}.stars.big i.pop{color:var(--yel);animation:pop .35s}
.map{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:330px;overflow-y:auto;padding:2px 4px 6px 2px}
.map .wh{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-family:'Jua',sans-serif;font-size:16px;margin-top:4px}
.map .wh .sw{width:22px;height:10px;border-radius:99px;border:1.5px solid var(--ink)}.map .wh .muted{margin-left:auto}
.node{aspect-ratio:1;border:2.5px solid var(--ink);border-radius:14px;background:var(--p2);font-family:'Jua',sans-serif;font-size:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:2px 3px 0 var(--ink);padding:0}
.node.clear{background:var(--cream);color:var(--ink)}.node.clear .stars i{color:#cfc5b4}.node.clear .stars i.on{color:#e0a020}
.node.cur{background:var(--pink);color:#fff;animation:pulse 1.4s infinite}
.node.lock{opacity:.45;box-shadow:none}.node.boss{border-radius:50%;border-color:var(--red);border-width:3px}
.goals{display:flex;flex-direction:column;gap:5px;margin:10px 0}.goals div{background:var(--p2);border:2px solid var(--ink);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:700;color:var(--tx3)}.goals div.ok{color:var(--goldTx)}
.hud .prog{position:absolute;left:30%;right:30%;top:44px;height:12px;background:rgba(20,14,32,.6);border:2px solid var(--ink);border-radius:99px}
.hud .prog>i{display:block;height:100%;background:var(--grn);border-radius:99px}
.hud .prog>b{position:absolute;top:-6px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--yel);border:2px solid var(--ink)}
.hud .prog>span{position:absolute;right:-26px;top:-5px;font-size:12px;color:var(--cream);text-shadow:1px 1px 0 var(--ink)}
.play-btn{width:100%;font-size:30px;padding:14px;border-radius:20px;margin:16px 0 14px;animation:pulse 1.6s infinite;box-shadow:0 7px 0 var(--ink)}
@keyframes pulse{50%{transform:scale(1.02) rotate(-.6deg)}}
.themes{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
.themes button{flex:none;border:2.5px solid var(--ink);border-radius:14px;padding:8px 12px;background:var(--p2);font-size:15px;font-family:"Jua",sans-serif;min-width:120px;text-align:left;box-shadow:2px 3px 0 var(--ink)}
.themes button.on{background:var(--yel);color:var(--ink)}
.themes button small{display:block;font-size:11px;opacity:.75;font-family:"Pretendard",sans-serif;font-weight:700}
.themes .sw{display:block;height:8px;border-radius:99px;margin-bottom:6px;border:1.5px solid var(--ink)}
.mi{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:2px dashed var(--line)}
.mi:last-child{border-bottom:0}
.mi .ck{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--p3);border:2px solid var(--ink);flex:none}
.mi.done .ck{background:var(--grn)}
.mi .tx{flex:1;font-size:13.5px;font-weight:700}
.mi .tx .bar{margin-top:5px;height:9px}
.mi .pv{font-size:12px;color:var(--tx2);font-weight:800;white-space:nowrap}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.quick button{background:var(--p1);border:2px solid var(--ink);border-radius:16px;padding:10px 6px;text-align:center;font-size:12px;color:var(--tx2);box-shadow:2px 3px 0 var(--ink)}
.quick button b{display:block;font-size:17px;color:var(--tx);font-family:"Jua",sans-serif;font-weight:400}
.guide{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.guide div{display:flex;gap:8px;align-items:center;background:var(--p2);border:2px solid var(--ink);border-radius:14px;padding:8px;font-size:12.5px;color:var(--tx2)}
.guide div b{display:block;color:var(--tx);font-size:14px;font-family:"Jua",sans-serif;font-weight:400}
.dex{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.dex div{display:flex;gap:8px;align-items:center;background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:7px;font-size:11.5px;line-height:1.35}
.dex div b{display:block;font-size:14px;font-family:"Jua",sans-serif;font-weight:400}
.tips{margin:0;padding-left:20px;font-size:13.5px;color:var(--tx2)}
.tips li{margin:6px 0}.tips b{color:var(--goldTx)}
.notice{display:flex;gap:10px;align-items:center}
.notice b{font-family:"Jua",sans-serif;font-weight:400;font-size:17px;display:block}
.foot{text-align:center;color:var(--tx3);font-size:11.5px;margin:6px 0 0;line-height:1.7}
.uipick{display:grid;grid-template-columns:1fr 1fr;gap:8px}.uipick button{border:2.5px solid var(--ink);border-radius:14px;background:var(--p2);padding:8px;display:flex;align-items:center;gap:8px;font-family:'Jua',sans-serif;font-size:15px;box-shadow:2px 3px 0 var(--ink);color:var(--tx)}.uipick button.on{background:var(--yel);color:var(--ink)}
.sw2{display:inline-flex;gap:3px;padding:4px;border-radius:9px;border:2px solid var(--ink)}.sw2 i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink)}
.tabs2{display:flex;background:var(--p2);border:2px solid var(--ink);border-radius:99px;padding:3px;margin-bottom:12px}
.tabs2 button{flex:1;background:none;border:0;padding:8px;border-radius:99px;font-size:15px;color:var(--tx2);font-family:"Jua",sans-serif}
.tabs2 button.on{background:var(--yel);color:var(--ink)}
.item{display:flex;gap:12px;align-items:center;background:var(--p1);border:2px solid var(--ink);border-radius:16px;padding:10px 12px;margin-bottom:10px;box-shadow:2px 3px 0 var(--ink)}
.item canvas{flex:none;background:var(--cream);border:2px solid var(--ink);border-radius:12px}
.item .info{flex:1;min-width:0}
.item .info b{font-size:17px;font-family:"Jua",sans-serif;font-weight:400}
.item .info p{margin:2px 0 0;font-size:12px;color:var(--tx2)}
.item .ibox{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;background:var(--cream);border:2px solid var(--ink);flex:none}
.lv{display:flex;gap:3px;margin-top:6px}
.lv i{width:18px;height:8px;border-radius:9px;background:var(--p3);border:1.5px solid var(--ink)}
.lv i.on{background:var(--yel)}
.pkg{border-radius:18px;padding:16px;margin-bottom:12px;border:2.5px solid var(--ink);position:relative;overflow:hidden;box-shadow:3px 4px 0 var(--ink);background:var(--p1)}
.pkg .badge{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;font-size:12px;font-weight:900;padding:3px 9px;border-radius:99px;border:2px solid var(--ink);transform:rotate(4deg)}
.pkg h3{font-size:20px;margin:0 0 4px}
.pkg p{margin:0 0 12px;font-size:13px;color:var(--tx2)}
.tier{display:grid;grid-template-columns:1fr 54px 1fr;gap:8px;align-items:center;margin-bottom:8px}
.tier .n{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--p3);font-size:20px;font-family:"Jua",sans-serif;border:2px solid var(--ink)}
.tier.reach .n{background:var(--yel);color:var(--ink)}
.rw{border-radius:14px;padding:8px;text-align:center;font-size:12.5px;font-weight:800;border:2px solid var(--ink);background:var(--p1);min-height:58px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.rw.prem{background:var(--prem)}
.rw button{border:2px solid var(--ink);border-radius:9px;padding:3px 8px;font-size:12px;font-weight:900;background:var(--grn);color:var(--ink)}
.rw .lock{font-size:11px;color:var(--tx3)}
.rw.ok{opacity:.5}
.lg{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px}
.lg:nth-child(odd){background:var(--odd)}
.lg .r{width:28px;text-align:center;font-family:"Jua",sans-serif;color:var(--tx2);font-size:17px}
.lg .nm{flex:1;font-weight:700}
.lg .s{font-weight:900;font-variant-numeric:tabular-nums}
.lg.me{background:var(--yel);color:var(--ink);border:2px solid var(--ink)}
.lg.me .r{color:var(--ink)}
.lg.up .r{color:var(--okTx)} .lg.dn .r{color:var(--badTx)}
.zone{font-size:12px;font-weight:900;padding:4px 10px;letter-spacing:.06em}
.stage{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100vw);z-index:30;background:#000;display:none;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.stage.on{display:block}
#cv{width:100%;height:100%;display:block}
.hud{position:absolute;inset:0;pointer-events:none;font-family:"Jua",sans-serif}
.hud .hl{position:absolute;left:12px;top:10px}
.hud .sc{font-size:34px;line-height:1;color:var(--cream);text-shadow:2px 2px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),0 3px 0 var(--ink);font-variant-numeric:tabular-nums}
.hud .ml{display:flex;gap:6px;margin-top:6px}
.hud .ml span{font-size:14px;background:var(--cream);color:var(--ink);border:2px solid var(--ink);padding:0 8px;border-radius:99px}
.hud #hMult{background:var(--yel)}
.hud .hb{font-size:14px;color:var(--yel);margin-top:5px;text-shadow:1px 1px 0 var(--ink),-1px -1px 0 var(--ink)}
.hud .hr{position:absolute;right:10px;top:10px;display:flex;gap:6px;align-items:center;pointer-events:auto}
.hud .rival{position:absolute;right:10px;top:54px;font-size:11px;opacity:.85;background:rgba(20,14,32,.75);border:2px solid var(--ink);padding:3px 9px;border-radius:10px;color:#d3c7e8;text-align:right;font-family:"Pretendard",sans-serif;font-weight:700}
.hud .rival b{color:var(--cyan)}
.hud .word{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;gap:3px}
.hud .word b{width:24px;height:26px;border-radius:7px;display:grid;place-items:center;background:rgba(20,14,32,.6);border:2px solid var(--ink);color:rgba(255,255,255,.3);font-weight:400;font-size:16px}
.hud .word b.on{background:var(--cream);color:var(--pink);animation:pop .3s}
@keyframes pop{0%{transform:scale(1.5) rotate(-6deg)}100%{transform:scale(1)}}
.banner{position:absolute;left:50%;top:92px;transform:translateX(-50%) translateY(-8px);width:max-content;max-width:64%;padding:3px 12px;border-radius:12px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .18s,transform .18s;text-align:center;border:2px solid var(--ink);box-shadow:2px 3px 0 var(--ink);color:var(--ink)}
.banner.on{opacity:.94;transform:translateX(-50%)}
.banner.warn{background:var(--red);color:#fff}
.banner.fv{background:var(--pink);color:#fff;font-size:18px}
.banner.ok{background:var(--grn)}
.banner.info{background:var(--cyan)}
.banner.gold{background:var(--yel)}
.banner small{display:inline;font-size:11px;font-family:"Pretendard",sans-serif;font-weight:800;opacity:.85;margin-left:6px}
.banner small::before{content:"· "}
.hud #hCombo{background:var(--pink);color:#fff;display:none}
.hud #hCombo.on{display:inline-block}
.hud #hCombo.pop{animation:pop .25s ease}
.tick{position:absolute;left:12px;bottom:calc(72px + env(safe-area-inset-bottom));font-size:12px;background:rgba(20,14,32,.72);color:var(--cream);border:2px solid var(--ink);padding:1px 9px;border-radius:99px;opacity:0;transition:opacity .25s;font-family:"Pretendard",sans-serif;font-weight:800;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tick.on{opacity:1}
@keyframes blink{to{filter:brightness(1.3)}}
@keyframes wig{to{margin-top:-4px;filter:hue-rotate(40deg)}}
.pw{position:absolute;left:12px;top:150px;display:flex;flex-direction:column;gap:5px}
.pw div{background:var(--cream);border:2px solid var(--ink);border-radius:10px;padding:2px 7px 2px 3px;font-size:12px;display:flex;align-items:center;gap:5px;color:var(--ink)}
.pw div i.t{display:block;width:44px;height:7px;background:#d8cfbf;border-radius:9px;overflow:hidden;border:1.5px solid var(--ink)}
.pw div i.t b{display:block;height:100%}
.fever{position:absolute;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px}
.fever .fl{font-size:15px;color:var(--pink);text-shadow:1px 1px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
.fever .fb{flex:1;height:16px;background:var(--cream);border:2.5px solid var(--ink);border-radius:99px;overflow:hidden}
.fever .fb i{display:block;height:100%;width:0;background:var(--pink);border-right:2px solid var(--ink)}
.fever .fb i.full{background:repeating-linear-gradient(-45deg,var(--pink) 0 10px,var(--yel) 10px 20px);animation:mv .5s linear infinite;background-size:28px 28px}
@keyframes mv{to{background-position:28px 0}}
.chase{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,transparent 45%,rgba(220,30,50,.55));opacity:0;transition:opacity .2s}
.chasetx{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);font-size:14px;background:var(--red);color:#fff;border:2px solid var(--ink);padding:3px 12px;border-radius:99px;display:none;white-space:nowrap}
.hint{position:absolute;left:14px;right:14px;bottom:calc(96px + env(safe-area-inset-bottom));background:rgba(246,239,226,.88);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:7px 10px;text-align:center;font-size:12px;display:none;line-height:1.6;font-family:"Pretendard",sans-serif;font-weight:700}
.hint.on{display:block}
.near{position:absolute;right:12px;bottom:calc(46px + env(safe-area-inset-bottom));font-size:14px;background:var(--cream);color:var(--ink);border:2px solid var(--ink);padding:0 10px;border-radius:99px}
.mbg{position:fixed;inset:0;background:rgba(10,6,18,.72);display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.mbg.on{display:flex}
.modal{background:var(--p1);border:3px solid var(--ink);border-radius:24px;max-width:400px;width:100%;max-height:90vh;overflow:auto;padding:20px;animation:min .25s ease;box-shadow:5px 6px 0 var(--ink)}
@keyframes min{from{transform:scale(.85) rotate(-2deg);opacity:0}}
.modal h2{text-align:center}
.rv{text-align:center}
.ring{position:relative;width:120px;height:120px;margin:4px auto 6px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;font-family:"Jua",sans-serif;font-weight:400}
.hot.ok{background:rgba(95,220,143,.14)!important;border-color:var(--grn)!important;color:var(--okTx)!important}.hot.gold{background:rgba(255,201,74,.16)!important;border-color:var(--yel)!important;color:var(--goldTx)!important}.hot.info{background:rgba(79,209,232,.14)!important;border-color:var(--cyan)!important;color:var(--infoTx)!important}
.hot{background:var(--hotBg);border:2px solid var(--red);color:var(--badTx);border-radius:12px;padding:8px;font-size:13.5px;font-weight:800;margin:8px 0 14px}
.stack{display:flex;flex-direction:column;gap:10px}
.res .rt{text-align:center;font-size:18px;color:var(--tx2);font-family:"Jua",sans-serif}
.res .rt.nb{color:var(--goldTx);font-size:26px}
.res .rsc{text-align:center;font-size:52px;font-family:"Jua",sans-serif;line-height:1.05;color:var(--bigTx);text-shadow:3px 3px 0 var(--ink)}
.res .rsub{text-align:center;font-size:13px;color:var(--tx2);margin-bottom:12px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.stats div{background:var(--p2);border:2px solid var(--ink);border-radius:12px;padding:6px;text-align:center;font-size:11px;color:var(--tx3)}
.stats b{display:block;font-size:18px;color:var(--tx);font-family:"Jua",sans-serif;font-weight:400}
.box{border:3px dashed var(--yel);border-radius:18px;padding:12px;text-align:center;margin:10px 0;cursor:pointer;background:rgba(255,201,74,.07)}
.box .gift{display:inline-block}
.box.shake .gift{animation:shk .12s infinite}
@keyframes shk{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.box.open{cursor:default;border-style:solid}
.rar{font-size:14px;font-family:"Jua",sans-serif;letter-spacing:.1em}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(20px);background:var(--cream);color:var(--ink);border:2.5px solid var(--ink);padding:8px 18px;border-radius:99px;font-size:14px;font-weight:800;opacity:0;transition:.3s;z-index:80;pointer-events:none;white-space:nowrap;box-shadow:2px 3px 0 var(--ink)}
.toast.on{opacity:1;transform:translateX(-50%)}
.cf{position:fixed;top:-10px;width:10px;height:14px;z-index:90;pointer-events:none;animation:fall linear forwards;border:1.5px solid var(--ink)}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.login{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}
.login div{background:var(--p2);border:2px solid var(--ink);border-radius:12px;padding:6px 4px;text-align:center;font-size:11px;color:var(--tx3)}
.login div b{display:block;font-size:13px;color:var(--tx)}
.login div.got{opacity:.45}
.login div.today{background:var(--yel);color:var(--ink)}
.login div.today b{color:var(--ink)}
.login div.big{grid-column:span 2}
.dz h2{margin-top:18px}
.dz table{width:100%;border-collapse:collapse;font-size:13px}
.dz th,.dz td{border-bottom:1.5px dashed var(--line);padding:9px 8px;text-align:left;vertical-align:top}
.dz th{color:var(--tx3);font-size:11.5px}
.dz td b{color:var(--tx)}
.dz td{color:var(--tx2)}
.dz .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.dz .cols{grid-template-columns:1fr}}
.dz ul{margin:0;padding-left:18px;color:var(--tx2);font-size:13.5px}
.dz li{margin:4px 0}.dz li b{color:var(--tx)}
.tw{overflow-x:auto}
.sl{display:grid;grid-template-columns:130px 1fr 54px;gap:10px;align-items:center;margin:8px 0;font-size:13px}
.sl input{width:100%;accent-color:var(--pink)}
.sl b{text-align:right;font-variant-numeric:tabular-nums}
.dbar{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:6px 0}
.dbar span{width:96px;color:var(--tx2)}
.dbar i{display:block;height:14px;border-radius:6px;background:var(--pink);min-width:2px;border:1.5px solid var(--ink)}
.kpi{background:var(--p2);border:2px solid var(--ink);border-radius:14px;padding:10px}
.kpi b{display:block;font-size:22px;font-family:"Jua",sans-serif;font-weight:400}
.kpi span{font-size:12px;color:var(--tx3)}
.pill{display:inline-block;font-size:11px;font-weight:900;padding:2px 8px;border-radius:99px;border:1.5px solid var(--ink)}
.p-d{background:var(--yel);color:var(--ink)} .p-t{background:var(--red);color:#fff} .p-m{background:var(--grn);color:var(--ink)}
/* ---- 설정(⚙) 화면 추가분: 프로토타입 토큰·테두리·그림자 규칙을 그대로 따른다 ---- */
.fld{width:100%;min-width:0;border:2px solid var(--ink);border-radius:12px;background:var(--p2);color:var(--tx);padding:9px 12px;font:inherit;font-size:15px;font-weight:700}
.fld::placeholder{color:var(--tx3);font-weight:600}
.fld:focus{outline:none;background:var(--p1);box-shadow:2px 3px 0 var(--ink)}
textarea.fld{min-height:120px;resize:vertical;line-height:1.5}
select.fld{appearance:none;-webkit-appearance:none}
.btn.sm{padding:6px 12px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 var(--ink)}
.btn.sm:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.tabs2.seg{flex:none;width:118px;margin:0;padding:2px}
.tabs2.seg button{padding:4px 6px;font-size:14px}
.agree{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:700;color:var(--tx2);cursor:pointer}
.agree input{width:20px;height:20px;accent-color:var(--pink);flex:none;margin:0}
.terms summary,.diag summary{cursor:pointer;padding:4px 0}
.diag{margin-top:8px}
.diagt{width:100%;border-collapse:collapse;font-size:12.5px}
.diagt th,.diagt td{border-bottom:1.5px dashed var(--line);padding:6px 4px;text-align:left;vertical-align:top}
.diagt th{color:var(--tx3);font-weight:700;width:42%}.diagt td{color:var(--tx2)}
.set-app-icon{width:28px;height:28px;border-radius:7px;flex:none;border:2px solid var(--ink)}
.set-installed{font-family:"Jua",sans-serif;font-size:18px;color:var(--okTx);padding:0 6px}
.linkbtn{display:inline;padding:0;margin-top:2px;border:0;background:none;color:var(--tx2);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.mi.iq{cursor:pointer}
/* ⚙ 버튼 추가로 좁은 화면(≤400px)에서 헤더가 넘치지 않도록 여백만 줄임 */
@media(max-width:400px){header.top{padding-left:8px;padding-right:8px}header.top .cur{gap:3px;min-height:36px}header.top .cur .icon{width:30px;height:30px;font-size:14px;border-radius:10px}header.top .cur .chip{padding-right:7px;gap:3px}}