/* 던전 클린 — 택티컬 UI (확정 시안: docs/mockups/mock-ef3.webp HUD · mock-tac-modal.webp 모달 · mock-tac-equip.webp 장비)
 * 순서: ui.css → ui-tac-auto.css(tools/darktheme.py tac 자동 생성: 양피지/갈색 → 연회색/차콜) → ui-tac.css(이 파일)
 * 팔레트: 오프화이트 판 + 차콜 패널 + 신호 노랑 하나. 금장·보석·둥근 젤리 금지. */
:root {
  --t-bg: #efefea; --t-bg2: #e4e4df; --t-plate: #f6f6f2; --t-line: #c9c9c3; --t-ink: #1e1f22; --t-mute: #6b6c70;
  --t-dark: rgba(28, 29, 32, .9); --t-dark2: #2a2b2f; --t-y: #ffd400; --t-red: #e2453c; --t-blue: #2f7be0;
  --t-mono: 'Consolas', 'Menlo', monospace;
  --cut: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  --cut-s: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  --outl: 0 0 2px #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}
/* 선 아이콘: 마스크로 색을 입힌다 (<i class="li" style="--li:url(assets/final/ui/li/NAME.webp)">) */
.li { display: inline-block; width: 32px; height: 32px; background: currentColor; -webkit-mask: var(--li) center / contain no-repeat; mask: var(--li) center / contain no-repeat; flex: 0 0 auto; }

/* ───────────── HUD 공통 정리 ───────────── */
.trialcard, #huntBtn, .plaque > .arrow, .lvbadge, .stats .ts:empty, .plaque::before, .questcard::before { display: none !important; }
.hudframe { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.hudframe .c { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(255,255,255,.85); }
.hudframe .tl { left: 10px; top: 10px; border-left-width: 2px; border-top-width: 2px; } .hudframe .tr { right: 10px; top: 10px; border-right-width: 2px; border-top-width: 2px; }
.hudframe .bl { left: 10px; bottom: 10px; border-left-width: 2px; border-bottom-width: 2px; } .hudframe .br { right: 10px; bottom: 10px; border-right-width: 2px; border-bottom-width: 2px; }
.hudframe .code { position: absolute; bottom: 16px; font: 400 10.5px var(--t-mono); color: rgba(255,255,255,.75); letter-spacing: .5px; display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 1px #000; }
.hudframe .code.l { left: 44px; } .hudframe .code.r { right: 44px; }
.bc { display: inline-block; width: 46px; height: 11px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 1px, transparent 1px 3px, rgba(255,255,255,.85) 3px 5px, transparent 5px 6px, rgba(255,255,255,.85) 6px 7px, transparent 7px 9px); }
.bc.dark { background: repeating-linear-gradient(90deg, #1e1f22 0 1px, transparent 1px 3px, #1e1f22 3px 5px, transparent 5px 6px, #1e1f22 6px 7px, transparent 7px 9px); }

/* 프로필 (차콜 패널, 우상단 사선) */
.herocard, .herocard:hover { position: relative; display: flex !important; align-items: center; gap: 12px; width: 352px !important; height: 116px !important; padding: 10px 18px 10px 12px !important; background: var(--t-dark) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.herocard::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.14); clip-path: inherit; pointer-events: none; }
.portrait { width: 92px !important; height: 92px !important; border-radius: 50% !important; border: 3px solid #3c3d42 !important; box-shadow: 0 0 0 2px #121316, inset 0 0 0 2px rgba(255,255,255,.08) !important; background: radial-gradient(circle at 50% 40%, #f4f4f0, #c9c9c3) !important; overflow: hidden; flex: 0 0 auto; }
.portrait canvas { width: 86px !important; height: 86px !important; }
.heroinfo { flex: 1 1 auto !important; width: auto !important; display: grid; gap: 5px; }
.namerow { font: 400 19px/1.1 var(--disp) !important; color: #fff !important; text-shadow: none !important; display: flex; gap: 6px; align-items: baseline; }
.namerow .lvtxt, .namerow b { color: #fff !important; } .namerow .titletag { color: var(--t-y) !important; font-size: 12px; }
.heroinfo .bar { height: 15px !important; border: 0 !important; border-radius: 1px !important; background: #121316 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; position: relative; overflow: visible; }
.heroinfo .bar i { border-radius: 1px !important; }
.heroinfo .bar.hp i { background: var(--t-red) !important; } .heroinfo .bar.mp i { background: var(--t-blue) !important; }
.heroinfo .bar span { font: 400 11px/15px var(--t-mono) !important; color: #fff !important; text-align: right; padding-right: 5px; text-shadow: 0 1px 1px #000; }
.heroinfo .bar.xp { height: 7px !important; margin-left: 26px; margin-top: 3px; }
.heroinfo .bar.xp i { background: var(--t-y) !important; }
.heroinfo .bar.xp::before { content: "XP"; position: absolute; left: -26px; top: -4px; font: 400 11px var(--t-mono); color: #fff; }
.heroinfo .bar.xp span { position: absolute; right: auto; left: -2px; top: -4px; transform: translateX(-100%); display: none; }
.heroinfo .bar.mp span { display: none; }
/* 재화 (판 없이 외곽선 글자) */
.stats { display: grid !important; gap: 4px !important; margin: 10px 0 0 8px !important; }
.stat { font: 400 18px var(--disp) !important; color: #fff !important; text-shadow: var(--outl) !important; gap: 8px !important; }
.stat .ico { width: 22px !important; height: 22px !important; }
.stat .lbl { font-size: 15px; margin-right: 2px; }
.stat.gem .plus { width: 20px; height: 20px; border-radius: 50% !important; background: transparent !important; border: 2px solid var(--t-y) !important; color: var(--t-y) !important; font: 700 14px/16px sans-serif !important; text-shadow: none !important; }

/* 층 플라크 (오프화이트, 모서리 눈금) */
.plaque { background: var(--t-plate) !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)) !important; padding: 12px 26px 12px !important; min-width: 250px; clip-path: var(--cut); }
.plaque::after { content: ""; position: absolute; inset: 5px; pointer-events: none; background:
  linear-gradient(var(--t-ink), var(--t-ink)) left top / 10px 1.5px no-repeat, linear-gradient(var(--t-ink), var(--t-ink)) left top / 1.5px 10px no-repeat,
  linear-gradient(var(--t-ink), var(--t-ink)) right top / 10px 1.5px no-repeat, linear-gradient(var(--t-ink), var(--t-ink)) right top / 1.5px 10px no-repeat,
  linear-gradient(var(--t-ink), var(--t-ink)) left bottom / 10px 1.5px no-repeat, linear-gradient(var(--t-ink), var(--t-ink)) left bottom / 1.5px 10px no-repeat,
  linear-gradient(var(--t-ink), var(--t-ink)) right bottom / 10px 1.5px no-repeat, linear-gradient(var(--t-ink), var(--t-ink)) right bottom / 1.5px 10px no-repeat; }
.plaquebody b, #stage { color: var(--t-ink) !important; text-shadow: none !important; font: 400 21px var(--disp) !important; }
.plaquebody small, #stageSub { color: var(--t-ink) !important; font: 400 19px var(--disp) !important; display: inline-flex !important; align-items: center; gap: 8px; justify-content: center; }
#stageSub::before { content: ""; width: 22px; height: 22px; background: var(--t-ink); -webkit-mask: url(../assets/final/ui/li/skull.webp) center / contain no-repeat; mask: url(../assets/final/ui/li/skull.webp) center / contain no-repeat; }
.plaquebtns { margin-top: 4px; } .plaquebtns .gbtn { clip-path: var(--cut-s); }

/* 상단 메뉴 (오프화이트 판, 4칸) */
.topmenu { background: var(--t-plate) !important; border: 0 !important; border-radius: 0 !important; padding: 8px 10px !important; display: flex !important; gap: 0 !important; max-width: none !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); clip-path: var(--cut); }
.tm { width: 78px !important; display: grid !important; justify-items: center; gap: 3px; padding: 2px 0 !important; position: relative; color: var(--t-ink) !important; background: none !important; border: 0 !important; }
.tm + .tm { border-left: 1px solid var(--t-line) !important; }
.tm .li { width: 36px; height: 36px; }
.tm span:not(.circ) { font: 400 14px var(--disp) !important; color: var(--t-ink) !important; text-shadow: none !important; }
.tm .circ { display: none !important; }
.tm.dot .li + span::after, .tm .dot { display: none; }
.tm.dot::after { content: ""; position: absolute; top: 2px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--t-y); box-shadow: 0 0 0 1.5px var(--t-ink); }

/* 퀘스트 띠 (차콜) */
.questcard { position: fixed !important; top: 128px !important; right: 18px !important; bottom: auto !important; left: auto !important; transform: none !important; width: 352px !important; min-height: 78px; display: grid !important; grid-template-columns: 52px 1fr auto; grid-template-areas: "ic t t" "ic p n" "btn btn btn"; column-gap: 12px; row-gap: 6px; align-items: center; padding: 12px 16px !important; background: var(--t-dark) !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; clip-path: var(--cut); color: #fff; }
.questcard::after { content: ""; grid-area: ic; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: center / 30px no-repeat; -webkit-mask: none; position: relative; }
.questcard .qico { grid-area: ic; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); display: grid; place-items: center; color: #fff; }
.questcard .qico .li { width: 30px; height: 30px; }
.questcard::after { display: none; }
.questcard small { display: none !important; }
.questcard > b { grid-area: t; font: 400 17px/1.2 var(--disp) !important; color: #fff !important; text-shadow: none !important; margin: 0 !important; }
.questcard .prog { grid-area: p; height: 8px !important; border: 0 !important; border-image: none !important; background: #121316 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); position: relative; border-radius: 0 !important; }
.questcard .prog i { position: static !important; display: block; height: 100%; border-radius: 0 !important; background: var(--t-y) !important; box-shadow: none !important; max-width: 100%; }
.questcard .reward { grid-area: n; display: contents !important; }
.questcard .reward span { grid-area: p; order: -1; font: 400 14px var(--t-mono); color: #fff; margin-right: 8px; justify-self: start; display: none; }
.questcard .reward b { grid-area: n; font: 400 13px var(--disp) !important; color: #fff !important; }
.questcard .qnum { grid-area: n; font: 400 15px var(--t-mono); color: #fff; }
.questcard .gbtn { grid-area: btn; }
.questcard.done { filter: none !important; box-shadow: none !important; outline: 0; background: linear-gradient(90deg, rgba(255,212,0,.25), transparent 60%), var(--t-dark) !important; }
.questcard.done::before { display: block !important; content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--t-y); }
/* 버프 칩: 퀘스트 띠 아래 */
.rightcol .buffs { position: fixed; right: 18px; top: 216px; margin: 0 !important; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.buff { background: var(--t-dark) !important; border: 0 !important; border-image: none !important; border-left: 3px solid var(--bc, var(--t-y)) !important; border-radius: 0 !important; padding: 3px 8px !important; filter: none !important; font: 400 11.5px var(--disp) !important; color: #fff !important; text-shadow: none !important; }
.buff i { background: #121316 !important; border: 0 !important; } .buff i b { background: var(--t-y) !important; box-shadow: none !important; } .buff em { color: #fff !important; }

/* 좌우 퀵 타일 (오프화이트) */
.sidecol { gap: 10px !important; }
.sideb { width: 96px !important; min-height: 84px; padding: 9px 4px 7px !important; background: var(--t-plate) !important; clip-path: var(--cut-s); color: var(--t-ink) !important; display: grid !important; justify-items: center; align-content: center; gap: 3px !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.sideb .li { width: 38px; height: 38px; }
.sideb b { font: 400 14px var(--disp) !important; color: var(--t-ink) !important; text-shadow: none !important; margin: 0 !important; }
.sideb small { font: 400 10.5px var(--t-mono) !important; color: #fff !important; background: var(--t-ink) !important; border-radius: 0 !important; padding: 1px 5px !important; margin: 0 !important; }
.sideb.dot::after { top: 6px !important; right: 7px !important; width: 9px !important; height: 9px !important; background: var(--t-y) !important; border: 0 !important; box-shadow: 0 0 0 1.5px var(--t-ink) !important; }

/* 계기판 (FEVER / COMBO) */
.gauge { position: fixed; bottom: 20px; width: 236px; height: 140px; z-index: 3; pointer-events: none; }
.gauge.fever { left: 34px; } .gauge.combo { right: 34px; }
.gauge .plate { position: absolute; inset: 0; background: rgba(246,246,242,.9); clip-path: polygon(16% 0, 84% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gauge .needle { transition: transform .35s cubic-bezier(.3,1.4,.5,1); transform-box: view-box; transform-origin: 150px 124px; }
.gauge.hot .plate { background: rgba(255,248,214,.94); }
.gauge.hot .redline { animation: gaugehot .4s ease-in-out infinite alternate; } @keyframes gaugehot { to { opacity: .45; } }

/* 하단 메뉴 (오프화이트 바) */
.dock { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; bottom: 20px !important; width: min(830px, calc(100vw - 580px)) !important; min-width: 520px; height: 90px; display: flex !important; padding: 0 12px !important; background: var(--t-plate) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); gap: 0 !important; }
.mi { flex: 1 1 0; display: grid !important; justify-items: center; align-content: center; gap: 4px; color: var(--t-ink) !important; background: none !important; border: 0 !important; position: relative; padding: 0 !important; }
.mi + .mi::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--t-line); }
.mi .circ { display: none !important; } .mi .li { width: 40px; height: 40px; }
.mi span:not(.circ) { font: 400 16px var(--disp) !important; color: var(--t-ink) !important; text-shadow: none !important; }
.mi em { display: none !important; }
.mi.locked { color: #9a9b9f !important; } .mi.locked span:not(.circ) { color: #9a9b9f !important; }
.mi.locked em { display: block !important; position: absolute; top: 6px; right: 8px; font: 400 9.5px var(--t-mono); font-style: normal; color: #9a9b9f; }
.mi.on::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 4px; background: var(--t-y); }
.mi.on .li { color: var(--t-ink); }
.mi.dot .circ::after, .mi .dot { display: none !important; }
.mi.dot::after { content: ""; position: absolute; top: 14px; right: 26%; width: 9px; height: 9px; border-radius: 50%; background: var(--t-y); box-shadow: 0 0 0 1.5px var(--t-ink); }
.mi.on.dot::after { top: auto; }

/* 스킬 (차콜 원 + 노랑 쿨 링) */
.hud.bottom { pointer-events: none; }
.hud.bottom > * { pointer-events: auto; }
.skillcluster { position: fixed !important; left: 50% !important; transform: translateX(-50%); bottom: 126px !important; width: auto !important; height: auto !important; display: grid !important; grid-template-columns: repeat(5, 84px); grid-auto-rows: 84px; gap: 12px 22px !important; margin: 0 !important; justify-content: center; }
.skillcluster .sk, .skillcluster .sk[data-i], .skillcluster .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .dashbtn { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; }
.skillcluster .sk { width: 84px !important; height: 84px !important; border-radius: 50% !important; background: radial-gradient(circle at 50% 35%, #34353a, #1b1c1f 70%) !important; border: 3px solid #44454a !important; box-shadow: 0 0 0 2px #121316, 0 3px 6px rgba(0,0,0,.45) !important; display: grid; place-items: center; overflow: visible; }
.skillcluster .sk .ico { width: 54px !important; height: 54px !important; }
.skillcluster .sk .cd { inset: -6px !important; border-radius: 50%; background: conic-gradient(var(--t-y) calc((100 - var(--cd, 0)) * 1%), transparent 0) !important; -webkit-mask: radial-gradient(circle, transparent 46px, #000 47px); mask: radial-gradient(circle, transparent 46px, #000 47px); }
.skillcluster .sk:not(.cooling) .cd { background: none !important; }
.skillcluster .sk .cdt { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font: 700 17px var(--disp) !important; color: #fff !important; text-shadow: var(--outl) !important; background: none !important; }
.skillcluster .sk .num { left: 50% !important; top: auto !important; bottom: 2px !important; transform: translateX(-50%); font: 400 15px var(--disp) !important; color: #fff !important; text-shadow: var(--outl) !important; }
.skillcluster .sk.cooling .num { display: none; }
.skillcluster .sk.ready { border-color: #66676d !important; box-shadow: 0 0 0 2px #121316, 0 0 0 4px rgba(255,212,0,.6), 0 3px 6px rgba(0,0,0,.45) !important; }
.skillcluster .sk.react { animation: none !important; box-shadow: 0 0 0 2px #121316, 0 0 0 5px var(--t-y), 0 0 18px var(--t-y) !important; }
.skillcluster .sk.off { opacity: .5; }
.skillcluster #autoB { grid-row: 2; grid-column: 2; } .skillcluster #dashBtn { grid-row: 2; grid-column: 3; } .skillcluster #autoS { grid-row: 2; grid-column: 4; }
.skillcluster .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .dashbtn { width: 84px !important; height: 84px !important; border-radius: 50% !important; background: radial-gradient(circle at 50% 35%, #34353a, #1b1c1f 70%) !important; border: 3px solid #44454a !important; box-shadow: 0 0 0 2px #121316, 0 3px 6px rgba(0,0,0,.45) !important; color: #fff !important; display: grid !important; place-items: center; align-content: center; gap: 0; padding: 0 !important; font: 400 16px/1.15 var(--disp) !important; text-shadow: none !important; }
.skillcluster .autobtn .aico, .skillcluster .autobtn .led { display: none !important; }
.skillcluster .autobtn span { font: 400 16px var(--disp) !important; margin: 0 !important; color: #fff !important; }
.skillcluster .autobtn small { font: 400 15px var(--disp) !important; color: #fff !important; }
.skillcluster .autobtn.on { background: radial-gradient(circle at 50% 35%, #34353a, #1b1c1f 70%) !important; border-color: #66676d !important; color: #fff !important; }
.skillcluster .autobtn.on::after { content: ""; position: absolute; top: 4px; right: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--t-y); box-shadow: 0 0 0 2px #121316; }
.skillcluster .dashbtn .cd { inset: -6px !important; background: conic-gradient(var(--t-y) calc((100 - var(--cd, 0)) * 1%), transparent 0) !important; -webkit-mask: radial-gradient(circle, transparent 46px, #000 47px); mask: radial-gradient(circle, transparent 46px, #000 47px); }
.skillcluster .dashbtn.ready .cd { background: none !important; }
.skillcluster .dashbtn .li { width: 34px; height: 34px; color: #fff; }
.skillcluster .dashbtn span { font: 400 15px var(--disp) !important; color: #fff !important; }
.skillcluster .bombbtn { grid-row: 2; grid-column: 3; }
.cleanmode .skillcluster .dashbtn { display: none !important; }

/* 보스 바 · 돌파 · 피드 · 보고서 · 토스트 · 배너 */
#bossBar { top: 122px !important; width: min(520px, 46vw) !important; }
#bossBar .skull { width: 46px !important; height: 46px !important; border-radius: 0 !important; transform: rotate(45deg); background: var(--t-dark) !important; border: 2px solid rgba(255,255,255,.8) !important; box-shadow: none !important; }
#bossBar .skull .ico { transform: rotate(-45deg); }
#bossBar b { color: #fff !important; font: 400 15px var(--disp) !important; text-shadow: var(--outl) !important; }
#bossBar .bar { height: 14px !important; border: 0 !important; border-radius: 0 !important; background: #121316 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
#bossBar .bar i { background: var(--t-red) !important; border-radius: 0 !important; }
#bossBar .bar span { font: 400 10.5px/14px var(--t-mono) !important; }
.breakbtn { top: 124px !important; width: auto !important; height: auto !important; border-radius: 0 !important; padding: 10px 22px 10px 46px !important; background: var(--t-y) !important; box-shadow: 0 3px 8px rgba(0,0,0,.45) !important; animation: none !important; clip-path: var(--cut-s); color: var(--t-ink) !important; }
.breakbtn i { display: none !important; } .breakbtn::before { display: block !important; content: "" !important; position: absolute; left: 14px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); background: var(--t-ink) !important; -webkit-mask: url(../assets/final/ui/li/challenge.webp) center / contain no-repeat; mask: url(../assets/final/ui/li/challenge.webp) center / contain no-repeat; }
.breakbtn span { margin: 0 !important; font: 400 17px var(--disp) !important; color: var(--t-ink) !important; text-shadow: none !important; }
.breakbtn span::after { content: " 보스 도전"; }
.breakbtn.auto::after { content: "AUTO" !important; position: absolute; right: -2px; bottom: -16px; font: 400 10px var(--t-mono) !important; color: #fff !important; text-shadow: var(--outl) !important; }
.feed { right: 26px !important; bottom: 214px !important; }
.report { left: 26px !important; bottom: 214px !important; background: var(--t-dark) !important; border: 0 !important; border-left: 4px solid var(--t-y) !important; border-radius: 0 !important; clip-path: var(--cut-s); }
.report small { color: var(--t-y) !important; font-family: var(--t-mono) !important; } .report em { color: var(--t-y) !important; }
#toast { background: var(--t-dark) !important; border: 0 !important; border-left: 4px solid var(--t-y) !important; border-radius: 0 !important; color: #fff !important; }
#gateBanner { background: var(--t-dark) !important; border: 0 !important; border-left: 5px solid var(--t-y) !important; border-radius: 0 !important; clip-path: var(--cut); }
#gateBanner em { background: var(--t-y) !important; color: var(--t-ink) !important; border: 0 !important; border-radius: 0 !important; }
#gateBanner b { color: #fff !important; } #gateBanner span { color: #c9c9c3 !important; }
.discover { background: var(--t-dark) !important; border: 0 !important; border-left: 4px solid var(--t-y) !important; border-radius: 0 !important; box-shadow: 0 6px 18px rgba(0,0,0,.5) !important; clip-path: var(--cut-s); }
.discover small { color: var(--t-y) !important; font-family: var(--t-mono) !important; } .discover span { color: #c9c9c3 !important; }
.perkoffer { background: var(--t-bg) !important; border: 0 !important; border-radius: 0 !important; clip-path: var(--cut); box-shadow: 0 10px 30px rgba(0,0,0,.6) !important; }
.perkhead b { color: var(--t-ink) !important; text-shadow: none !important; } .perkhead small { color: var(--t-mute) !important; }
.perk { background: var(--t-plate) !important; border: 1px solid var(--t-line) !important; border-radius: 0 !important; color: var(--t-ink) !important; clip-path: var(--cut-s); }
.perk:hover { border-color: var(--t-ink) !important; box-shadow: inset 4px 0 0 var(--t-y) !important; }
.perk span { color: var(--t-mute) !important; } .perktimer { background: #d3d3cd !important; border-radius: 0 !important; } .perktimer i { background: var(--t-y) !important; }
.story .sbox { border: 0 !important; border-image: none !important; background: var(--t-dark) !important; clip-path: var(--cut); border-left: 5px solid var(--t-y) !important; padding: 18px 22px 12px !important; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.story .sbox b { position: static !important; display: inline-block; background: var(--t-y); color: var(--t-ink) !important; text-shadow: none !important; padding: 2px 10px; font: 400 14px var(--disp) !important; }
.story.villain .sbox { border-left-color: var(--t-red) !important; } .story.villain .sbox b { background: var(--t-red); color: #fff !important; }
.story .sbox p { text-shadow: none !important; }
.story .sbox small { color: #9a9b9f !important; font-family: var(--t-mono) !important; }

/* 결과 창 */
.resultbox { background: var(--t-bg) !important; border: 0 !important; border-radius: 0 !important; box-shadow: 0 12px 40px rgba(0,0,0,.6) !important; clip-path: var(--cut); color: var(--t-ink) !important; }
.rhead { background: var(--t-dark) !important; border: 0 !important; border-radius: 0 !important; color: #fff !important; }
.rhead.win { border-left: 6px solid var(--t-y) !important; } .rhead.lose { border-left: 6px solid var(--t-red) !important; }
.rhead b, .rhead small { color: #fff !important; text-shadow: none !important; }
.ritem { background: var(--t-plate) !important; border: 1px solid var(--t-line) !important; border-radius: 0 !important; color: var(--t-ink) !important; }

/* ───────────── 버튼 · 모달 (택티컬 라이트) ───────────── */
.gbtn { background: var(--t-ink) !important; color: #fff !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; clip-path: var(--cut-s); padding: 8px 14px !important; min-height: 40px; }
.gbtn small { color: inherit !important; opacity: .8; }
.gbtn.green, .gbtn.gold, .gbtn.primary { background: var(--t-y) !important; color: var(--t-ink) !important; }
.gbtn.red { background: var(--t-red) !important; color: #fff !important; }
.gbtn.grey { background: #dcdcd6 !important; color: var(--t-ink) !important; }
.gbtn.blue, .gbtn.purple { background: var(--t-dark2) !important; color: #fff !important; }
.gbtn.small { min-height: 32px; padding: 5px 11px !important; }
.gbtn:disabled { opacity: .38 !important; filter: grayscale(1) !important; }
.gbtn:active { transform: translateY(1px); }
.overlay.show { background: rgba(14,15,17,.55) !important; }
.sheet { --paper: #f4f4f1; --paper2: #e7e7e2; --paper3: #dcdcd6; --ink: #1e1f22; --mute: #6b6c70; --wood: #1e1f22; background: var(--t-bg) !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; box-shadow: 0 20px 60px rgba(0,0,0,.5) !important; filter: none !important; color: var(--t-ink) !important; overflow: hidden !important; }
.sheet::before { content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 5; background:
  linear-gradient(var(--t-ink), var(--t-ink)) left top / 22px 2px no-repeat, linear-gradient(var(--t-ink), var(--t-ink)) left top / 2px 22px no-repeat,
  linear-gradient(var(--t-ink), var(--t-ink)) right top / 22px 2px no-repeat, linear-gradient(var(--t-ink), var(--t-ink)) right top / 2px 22px no-repeat,
  linear-gradient(var(--t-ink), var(--t-ink)) left bottom / 22px 2px no-repeat, linear-gradient(var(--t-ink), var(--t-ink)) left bottom / 2px 22px no-repeat,
  linear-gradient(var(--t-ink), var(--t-ink)) right bottom / 22px 2px no-repeat, linear-gradient(var(--t-ink), var(--t-ink)) right bottom / 2px 22px no-repeat; }
.sheethead { background: none !important; border: 0 !important; margin: 0 !important; padding: 22px 28px 8px !important; min-height: 0 !important; justify-content: flex-start !important; align-items: center !important; gap: 14px !important; color: var(--t-ink) !important; position: relative; }
.sheethead h3 { flex: 0 0 auto !important; min-width: 0 !important; text-align: left !important; border: 0 !important; border-image: none !important; background: var(--t-plate) !important; color: var(--t-ink) !important; text-shadow: none !important; font: 400 24px var(--disp) !important; padding: 8px 40px 8px 18px !important; box-shadow: inset 4px 0 0 var(--t-ink), inset 0 0 0 1px var(--t-line) !important; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); display: inline-flex; align-items: center; gap: 10px; }
.sheethead h3::before { content: ""; width: 24px; height: 24px; background: var(--t-ink); -webkit-mask: url(../assets/final/ui/li/target.webp) center / contain no-repeat; mask: url(../assets/final/ui/li/target.webp) center / contain no-repeat; }
.sheethead .sheetcode { font: 400 10.5px/1.5 var(--t-mono); color: var(--t-mute); margin-left: 20px; }
.sheethead .curmini { position: static !important; transform: none !important; margin-left: auto !important; display: flex !important; gap: 8px !important; }
.curmini span { background: var(--t-ink) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; padding: 6px 12px 6px 8px !important; font: 400 16px var(--disp) !important; min-width: 110px; justify-content: space-between; clip-path: var(--cut-s); }
.sheethead .close { position: static !important; width: 46px !important; height: 46px !important; border-radius: 0 !important; background: var(--t-ink) !important; border: 0 !important; color: #fff !important; font: 400 22px/1 sans-serif !important; box-shadow: none !important; filter: none !important; flex: 0 0 auto; }
.sheethead .close::after { content: ""; position: absolute; }
.sheet .tabs { background: none !important; border: 0 !important; padding: 4px 28px 8px !important; gap: 4px !important; }
.sheet .tab { background: var(--t-bg2) !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; color: var(--t-mute) !important; text-shadow: none !important; padding: 9px 20px !important; margin: 0 !important; font: 400 15px var(--disp) !important; min-height: 0 !important; box-shadow: inset 0 0 0 1px var(--t-line); }
.sheet .tab[aria-selected="true"] { background: var(--t-ink) !important; color: #fff !important; box-shadow: inset 0 -4px 0 var(--t-y) !important; }
.sheet .tab .dot { background: var(--t-y) !important; border: 1.5px solid var(--t-ink) !important; }
.sheet .sheetbody { background: none !important; border: 0 !important; border-image: none !important; padding: 8px 28px 26px !important; }
.sheet .row, .sheet .goldrow, .sheet .petcard, .sheet .track, .sheet .streak, .sheet .petcol, .sheet .lrow, .sheet .pcell, .sheet .jgate, .sheet .pack, .sheet .chcard, .sheet .dgcard, .sheet .stagecard { background: var(--t-plate) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--t-line) !important; color: var(--t-ink) !important; clip-path: var(--cut-s); }
.sheet .row.done, .sheet .lrow.me, .sheet .petcard.on, .sheet .stagecard.cur, .sheet .dgcard.on { box-shadow: inset 4px 0 0 var(--t-y), inset 0 0 0 1px var(--t-ink) !important; }
.sheet .row b, .sheet .row .info b, .sheet .lrow b, .sheet .jgate b, .sheet .trackhead b, .sheet .streak b, .sheet .petcol b, .sheet .evcoin b { color: var(--t-ink) !important; text-shadow: none !important; }
.sheet .row small, .sheet .lead, .sheet p.lead, .sheet .trackhead small, .sheet .streak small, .sheet .petcol span, .sheet .jgate small { color: var(--t-mute) !important; }
.sheet h3.sec { color: var(--t-ink) !important; text-shadow: none !important; border-bottom: 1px solid var(--t-line) !important; font: 400 16px var(--disp) !important; display: flex; align-items: center; gap: 8px; }
.sheet h3.sec::before { content: "//"; font: 700 12px var(--t-mono); color: var(--t-y); background: var(--t-ink); padding: 0 4px; }
.sheet .note { background: var(--t-bg2) !important; border: 0 !important; border-left: 3px solid var(--t-ink) !important; border-radius: 0 !important; color: var(--t-mute) !important; }
.sheet .bar { background: #d3d3cd !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.sheet .bar i { background: var(--t-ink) !important; border-radius: 0 !important; }
.sheet .bar span { color: #fff !important; text-shadow: 0 0 2px #000 !important; font-family: var(--t-mono) !important; }
.sheet .seg button { background: var(--t-bg2) !important; color: var(--t-mute) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--t-line); }
.sheet .seg button[aria-selected="true"] { background: var(--t-ink) !important; color: #fff !important; box-shadow: inset 0 -3px 0 var(--t-y); }
/* 아이템 칸: 연회색 타일 + 등급 다이아(아래) */
.sheet .item { background: #e6e6e1 !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px #cfcfca !important; filter: none !important; color: var(--t-ink) !important; clip-path: var(--cut-s); padding: 8px 6px 18px !important; position: relative; }
.sheet .item::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); height: 7px; width: calc(var(--pips, 1) * 12px); background: repeating-linear-gradient(90deg, var(--rc, #9a9ca1) 0 7px, transparent 7px 12px); -webkit-mask: none; clip-path: none; }
.sheet .item.t0 { --rc: #9a9ca1; --pips: 1; } .sheet .item.t1 { --rc: #4fbf5a; --pips: 2; } .sheet .item.t2 { --rc: #3a8ee6; --pips: 3; } .sheet .item.t3 { --rc: #9b5ce6; --pips: 4; } .sheet .item.t4 { --rc: #ffb000; --pips: 5; }
.sheet .item.t3, .sheet .item.t4 { box-shadow: inset 0 0 0 1px #cfcfca, inset 0 -3px 0 var(--rc) !important; }
.sheet .item b { color: var(--t-ink) !important; text-shadow: none !important; } .sheet .item small { color: var(--t-mute) !important; text-shadow: none !important; }
.sheet .item .iconbox { background: none !important; border: 0 !important; box-shadow: none !important; }
.sheet .item em { background: var(--t-ink) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; }
.sheet .item em.new { background: var(--t-y) !important; color: var(--t-ink) !important; }
.sheet .item.sel, .sheet .item.on { outline: 0 !important; box-shadow: inset 0 0 0 2px var(--t-ink), inset 0 -4px 0 var(--t-y) !important; }
.sheet .item.dim, .sheet .item.locked { opacity: .45; filter: grayscale(1) !important; }
.sheet .slot { background: var(--t-plate) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--t-line) !important; clip-path: var(--cut-s); color: var(--t-ink) !important; }
.sheet .slot.sel { box-shadow: inset 0 0 0 2px var(--t-ink), inset 0 -4px 0 var(--t-y) !important; }
.sheet .kv span { background: var(--t-plate) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--t-line); color: var(--t-ink) !important; }
.sheet .petbig { background: var(--t-plate) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--t-line) !important; clip-path: var(--cut-s); color: var(--t-ink) !important; }
.sheet .petbig.main { box-shadow: inset 0 0 0 2px var(--t-ink), inset 0 -4px 0 var(--t-y) !important; }
.sheet .petbig small, .sheet .petbig .petskill span { color: var(--t-mute) !important; text-shadow: none !important; }
.sheet .petname b { color: var(--t-ink) !important; text-shadow: none !important; }
.sheet .petart { border: 1px solid var(--t-line) !important; border-radius: 50% !important; background: radial-gradient(circle at 50% 40%, #fff, #dcdcd6) !important; }
.sheet .petart .tag { background: var(--t-y) !important; color: var(--t-ink) !important; border: 0 !important; border-radius: 0 !important; }
.sheet .petart .tag.sub { background: var(--t-ink) !important; color: #fff !important; }
.sheet .petskill { background: var(--t-bg2) !important; } .sheet .petskill b { color: var(--t-ink) !important; }
.sheet .stars { color: var(--t-y) !important; text-shadow: 0 0 1px #000; } .sheet .stars span { color: #c9c9c3 !important; text-shadow: none; }
.sheet .artcol { border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--t-line) !important; clip-path: var(--cut); }
.sheet .artcol::after { background: linear-gradient(transparent 40%, rgba(20,21,24,.92)) !important; }
.sheet .artstat, .sheet .artcol .rows > div { border-radius: 0 !important; }
/* 상점: 왼쪽 세로 탭 + 차콜 배너 */
.sheet .vtabs { gap: 0 !important; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); align-self: start; }
.sheet .vtab { position: relative; display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 14px !important; min-height: 86px; padding: 0 18px !important; background: var(--t-plate) !important; border: 0 !important; border-image: none !important; border-bottom: 1px solid var(--t-line) !important; border-radius: 0 !important; color: var(--t-ink) !important; font: 400 19px var(--disp) !important; text-align: left; box-shadow: none !important; }
.sheet .vtab .circ { display: none !important; }
.sheet .vtab::before { content: ""; width: 44px; height: 44px; background: var(--t-ink); -webkit-mask: var(--li) center / contain no-repeat; mask: var(--li) center / contain no-repeat; flex: 0 0 auto; }
.sheet .vtab[data-t="gacha"] { --li: url(../assets/final/ui/li/journey.webp); } .sheet .vtab[data-t="relic"] { --li: url(../assets/final/ui/li/target.webp); } .sheet .vtab[data-t="pet"] { --li: url(../assets/final/ui/li/pet.webp); } .sheet .vtab[data-t="gem"] { --li: url(../assets/final/ui/li/plus.webp); } .sheet .vtab[data-t="pack"] { --li: url(../assets/final/ui/li/event.webp); } .sheet .vtab[data-t="event"] { --li: url(../assets/final/ui/li/hotdeal.webp); }
.sheet .vtab span { color: var(--t-ink) !important; text-shadow: none !important; font: inherit !important; }
.sheet .vtab.on { background: #fff !important; box-shadow: inset 7px 0 0 var(--t-y) !important; }
.sheet .vtab.on::after { content: ""; position: absolute; right: -1px; top: 50%; width: 14px; height: 22px; transform: translateY(-50%); background: var(--t-y); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.sheet .bigbanner { background: var(--t-ink) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px #3a3b3f !important; clip-path: polygon(0 0, 46% 0, 50% 14px, calc(100% - 14px) 14px, 100% 28px, 100% 100%, 0 100%); padding-top: 14px; }
.sheet .bigbanner .bnart { background: var(--img) right center / auto 100% no-repeat !important; -webkit-mask: linear-gradient(90deg, transparent 0, #000 42%); mask: linear-gradient(90deg, transparent 0, #000 42%); opacity: 1 !important; }
.sheet .bntitle small { font: 400 11px var(--t-mono) !important; color: #c9c9c3 !important; background: none !important; border: 0 !important; letter-spacing: .5px; }
.sheet .bntitle b { font: 400 40px/1.1 var(--disp) !important; color: #fff !important; text-shadow: none !important; padding-bottom: 10px; border-bottom: 2px solid #fff; display: inline-block; }
.sheet .bntitle span { color: #e2e2dc !important; font-size: 14px !important; text-shadow: none !important; }
.sheet .bnside .gbtn { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6) !important; color: #fff !important; }
.sheet .bnside .gbtn.red { background: var(--t-y) !important; color: var(--t-ink) !important; box-shadow: none !important; }
.sheet .ratebox { position: relative; z-index: 2; width: 170px; margin: 0 0 0 4px; padding: 8px 10px; border: 1px solid #5a5b60; font: 400 11.5px/1.65 var(--t-mono); color: #e2e2dc; background: rgba(20,21,24,.6); }
.sheet .ratebox small { display: block; color: #9a9b9f; font-size: 10px; letter-spacing: .5px; }
.sheet .ratebox div { display: flex; justify-content: space-between; } .sheet .ratebox i { font-style: normal; color: var(--rc); }
.sheet .buyrow { background: #121316 !important; border-top: 1px solid #3a3b3f !important; padding: 12px 16px !important; gap: 14px !important; }
.sheet .buyrow .glvbar .bar { background: #2a2b2f !important; } .sheet .buyrow .glvbar .bar i { background: var(--t-y) !important; }
.sheet .buyrow .gbtn.buy { background: var(--t-ink) !important; box-shadow: inset 0 0 0 1px #6a6b70 !important; color: #fff !important; font: 400 19px var(--disp) !important; min-height: 64px; }
.sheet .buyrow .gbtn.buy[data-n="10"] { background: var(--t-y) !important; color: var(--t-ink) !important; box-shadow: none !important; }
.sheet .buyrow .gbtn.buy small { font: 400 15px var(--disp) !important; }
.sheet .ratepanel { background: var(--t-plate) !important; border-radius: 0 !important; color: var(--t-ink) !important; }
.sheet .shopfoot { display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; font: 400 10px/1.4 var(--t-mono); color: var(--t-mute); }

/* ───────────── 장비 개요 (mock-tac-equip) ───────────── */
.sheet[data-p="equip"] .sheetbody { padding: 0 !important; }
.eqview { display: grid; grid-template-columns: minmax(260px, 34%) minmax(0, 1fr) 300px; height: 100%; min-height: 0; background: var(--t-bg); }
.eqart { position: relative; overflow: hidden; background: radial-gradient(ellipse at 45% 55%, #fbfbf8 0%, #e6e6e1 70%); border-right: 1px solid var(--t-line); }
.eqart::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 30% 120%, transparent 0 120px, rgba(30,31,34,.05) 120px 121px); }
.eqart img { position: absolute; left: 50%; bottom: 8%; height: 84%; max-width: 100%; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); }
.eqart .skins { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; gap: 10px; z-index: 2; }
.eqart .skins button { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #b9b9b3; background: radial-gradient(circle at 50% 40%, #fff, #d8d8d2); padding: 0; display: grid; place-items: center; overflow: hidden; }
.eqart .skins button.on { border: 3px solid var(--t-y); box-shadow: 0 0 0 2px var(--t-ink); }
.eqart .skins button.lock { filter: grayscale(1); opacity: .5; }
.eqart .unit { position: absolute; left: 0; bottom: 0; width: 210px; padding: 12px 16px 14px; background: var(--t-ink); color: #c9c9c3; font: 400 11px/1.7 var(--t-mono); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.eqart .unit b { display: block; color: #fff; font: 400 10px var(--t-mono); letter-spacing: 1px; margin-bottom: 4px; }
.eqgrid { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.eqhead { display: flex; align-items: center; gap: 10px; font: 400 20px var(--disp); color: var(--t-ink); }
.eqhead::before { content: "//"; font: 700 14px var(--t-mono); color: var(--t-ink); }
.eqhead .ln { flex: 1; height: 1px; background: linear-gradient(90deg, var(--t-y) 0 18px, var(--t-line) 18px); }
.eqhead em { font: 400 14px var(--t-mono); font-style: normal; color: var(--t-mute); }
.eqtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.eqtile { position: relative; aspect-ratio: 1 / 1.08; background: #e9e9e4; box-shadow: inset 0 0 0 1px #cfcfca; clip-path: var(--cut-s); display: grid; place-items: center; cursor: pointer; padding: 10px 6px 22px; color: var(--t-ink); }
.eqtile:hover { box-shadow: inset 0 0 0 2px var(--t-ink); }
.eqtile.sel { box-shadow: inset 0 0 0 2px var(--t-y), inset 0 0 0 3px var(--t-ink); }
.eqtile .ico { width: 70% !important; height: auto !important; aspect-ratio: 1; }
.eqtile .ty { position: absolute; left: 6px; top: 6px; width: 26px; height: 26px; background: var(--t-ink); display: grid; place-items: center; color: #fff; }
.eqtile .ty .li { width: 17px; height: 17px; }
.eqtile .nm { position: absolute; left: 4px; right: 4px; bottom: 20px; font: 400 11.5px var(--disp); text-align: center; color: var(--t-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqtile .lv { position: absolute; right: 6px; top: 7px; font: 400 11px var(--t-mono); color: var(--t-mute); }
.eqtile .pips { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); display: flex; gap: 4px; }
.eqtile .pips i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--rc, #9a9ca1); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.eqtile .pips i.off { background: #c9c9c3; }
.eqtile.empty { background: transparent; box-shadow: inset 0 0 0 1.5px #c9c9c3; } .eqtile.empty::after { content: "+"; font: 200 54px/1 sans-serif; color: #b5b5af; }
.eqtile.empty .nm { color: #9a9b9f; }
.eqstat { background: var(--t-ink); color: #fff; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.eqstat h4 { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 18px var(--disp); color: #fff; }
.eqstat h4::before { content: "//"; font: 700 13px var(--t-mono); color: var(--t-y); }
.eqstat h4::after { content: ""; flex: 1; height: 1px; background: #3a3b3f; }
.eqstat .st { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: #2a2b2f; box-shadow: inset 0 0 0 1px #3a3b3f; font: 400 17px var(--disp); }
.eqstat .st .li { width: 22px; height: 22px; color: #c9c9c3; }
.eqstat .st b { font: 400 19px var(--t-mono); color: #fff; }
.eqstat .set { padding: 12px 14px; box-shadow: inset 0 0 0 1px #3a3b3f; font: 400 14px/1.5 var(--disp); color: #e2e2dc; }
.eqstat .set b { color: #fff; } .eqstat .set .y { color: var(--t-y); }
.eqstat .set .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.eqstat .set .hd em { font-style: normal; background: var(--t-y); color: var(--t-ink); padding: 0 6px; font: 400 12px var(--t-mono); }
.eqstat .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font: 400 10px var(--t-mono); color: #6b6c70; }
.eqstat .gbtn { width: 100%; }

/* ───────────── PC 배치 (확정 시안 좌표, 1536×1024 기준을 화면에 맞춤) ───────────── */
@media (min-width: 701px) {
  .hud.top { position: fixed; inset: 0; pointer-events: none; }
  .hud.top > * { pointer-events: auto; }
  .leftcol { position: fixed !important; left: 22px !important; top: 22px !important; display: block !important; }
  .plaque { position: fixed !important; left: 50% !important; top: 22px !important; transform: translateX(-50%) !important; margin: 0 !important; display: grid !important; justify-items: center; }
  .rightcol { position: fixed !important; right: 18px !important; top: 22px !important; display: block !important; }
  .sidecol.left { left: 22px !important; top: 232px !important; } .sidecol.right { right: 22px !important; top: 300px !important; }
  .sheet { width: calc(100vw - 32px) !important; max-width: none !important; height: calc(100vh - 32px) !important; max-height: none !important; }
  .overlay { padding: 16px !important; }
  .sheet .shopfull { grid-template-columns: 300px minmax(0, 1fr) !important; gap: 22px !important; }
  .sheet .sheetbody.split { grid-template-columns: 300px minmax(0, 1fr) !important; }
  .sheet[data-p="equip"] { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) !important; }
  .sheet[data-p="equip"] .sheethead { grid-column: 1 / -1; grid-row: 1; }
  .sheet[data-p="equip"] .tabs { grid-column: 1; grid-row: 2; flex-direction: column; flex-wrap: nowrap; padding: 0 !important; gap: 0 !important; background: var(--t-ink) !important; align-content: start; }
  .sheet[data-p="equip"] .tab { background: transparent !important; color: #c9c9c3 !important; box-shadow: none !important; display: grid !important; justify-items: center; gap: 6px; padding: 20px 6px !important; font-size: 17px !important; }
  .sheet[data-p="equip"] .tab::before { content: ""; width: 38px; height: 38px; background: currentColor; -webkit-mask: var(--li) center / contain no-repeat; mask: var(--li) center / contain no-repeat; }
  .sheet[data-p="equip"] .tab[data-t="over"] { --li: url(../assets/final/ui/li/target.webp); } .sheet[data-p="equip"] .tab[data-t="tools"] { --li: url(../assets/final/ui/li/journey.webp); } .sheet[data-p="equip"] .tab[data-t="armor"] { --li: url(../assets/final/ui/li/equip.webp); } .sheet[data-p="equip"] .tab[data-t="merge"] { --li: url(../assets/final/ui/li/plus.webp); } .sheet[data-p="equip"] .tab[data-t="legend"] { --li: url(../assets/final/ui/li/pass.webp); }
  .sheet[data-p="equip"] .tab[aria-selected="true"] { background: #2a2b2f !important; color: var(--t-y) !important; box-shadow: inset 4px 0 0 var(--t-y) !important; }
  .sheet[data-p="equip"] .sheetbody { grid-column: 2; grid-row: 2; }
}
/* 높이가 낮은 PC 화면: 전체 축소 */
@media (min-width: 701px) and (max-height: 860px) {
  .herocard { transform: scale(.88); transform-origin: left top; } .stats { margin-top: -6px !important; }
  .gauge { transform: scale(.82); transform-origin: left bottom; } .gauge.combo { transform-origin: right bottom; }
  .skillcluster { grid-template-columns: repeat(5, 74px); grid-auto-rows: 74px; gap: 10px 18px !important; bottom: 116px !important; }
  .skillcluster .sk, .skillcluster .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .dashbtn { width: 74px !important; height: 74px !important; }
  .skillcluster .sk .ico { width: 46px !important; height: 46px !important; }
  .skillcluster .sk .cd, .skillcluster .dashbtn .cd { -webkit-mask: radial-gradient(circle, transparent 41px, #000 42px); mask: radial-gradient(circle, transparent 41px, #000 42px); }
  .dock { height: 82px; } .mi .li { width: 34px; height: 34px; }
  .sideb { width: 86px !important; min-height: 74px; } .sideb .li { width: 32px; height: 32px; }
  .sidecol.left { top: 214px !important; } .sidecol.right { top: 270px !important; }
}

/* ───────────── 모바일 ───────────── */
@media (max-width: 700px) {
  .hudframe .code { display: none; } .hudframe .c { width: 20px; height: 20px; }
  .herocard, .herocard:hover { width: 214px !important; height: 72px !important; padding: 6px 12px 6px 6px !important; gap: 8px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .portrait { width: 58px !important; height: 58px !important; } .portrait canvas { width: 54px !important; height: 54px !important; }
  .namerow { font-size: 14px !important; } .heroinfo .bar { height: 10px !important; } .heroinfo .bar span { font-size: 8.5px !important; line-height: 10px !important; } .heroinfo .bar.xp { height: 5px !important; }
  .stats { margin: 6px 0 0 4px !important; } .stat { font-size: 14px !important; } .stat .ico { width: 17px !important; height: 17px !important; }
  .plaque { top: 104px !important; min-width: 0; padding: 6px 16px !important; } .plaquebody b, #stage { font-size: 15px !important; } .plaquebody small, #stageSub { font-size: 13px !important; } #stageSub::before { width: 15px; height: 15px; }
  .topmenu { padding: 4px 2px !important; } .tm { width: 46px !important; } .tm .li { width: 24px; height: 24px; } .tm span:not(.circ) { font-size: 10.5px !important; } .tm.dot::after { right: 6px; }
  .questcard { top: auto !important; bottom: 236px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(66vw, 280px) !important; min-height: 0; padding: 7px 10px !important; grid-template-columns: 30px 1fr auto; column-gap: 8px; row-gap: 3px; }
  .questcard .qico { width: 30px; height: 30px; } .questcard .qico .li { width: 19px; height: 19px; }
  .questcard > b { font-size: 13px !important; } .questcard .qnum { font-size: 12px; }
  .rightcol .buffs { top: auto; bottom: 300px; right: 8px; }
  .sidecol { gap: 6px !important; } .sidecol.left { top: 168px !important; left: 8px !important; } .sidecol.right { top: 168px !important; right: 8px !important; }
  .sideb { width: 54px !important; min-height: 50px; padding: 5px 2px 4px !important; } .sideb .li { width: 22px; height: 22px; } .sideb b { font-size: 9.5px !important; } .sideb small { font-size: 8px !important; padding: 0 3px !important; }
  .gauge { width: 112px; height: 66px; bottom: 82px; } .gauge.fever { left: 6px; } .gauge.combo { right: 6px; }
  .dock { width: 100vw !important; min-width: 0; left: 0 !important; transform: none !important; bottom: 0 !important; height: 70px; clip-path: none; padding: 0 4px env(safe-area-inset-bottom) !important; }
  .mi .li { width: 26px; height: 26px; } .mi span:not(.circ) { font-size: 12px !important; } .mi.dot::after { top: 8px; right: 22%; }
  .skillcluster { bottom: 82px !important; grid-template-columns: repeat(5, 44px); grid-auto-rows: 44px; gap: 6px 8px !important; }
  .skillcluster .sk, .skillcluster .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .dashbtn { width: 44px !important; height: 44px !important; border-width: 2px !important; }
  .skillcluster .sk .ico { width: 28px !important; height: 28px !important; }
  .skillcluster .sk .cd, .skillcluster .dashbtn .cd { inset: -4px !important; -webkit-mask: radial-gradient(circle, transparent 24px, #000 25px); mask: radial-gradient(circle, transparent 24px, #000 25px); }
  .skillcluster .autobtn span, .skillcluster .autobtn small, .skillcluster .dashbtn span { font-size: 10px !important; } .skillcluster .dashbtn .li { width: 18px; height: 18px; }
  .skillcluster .sk .cdt, .skillcluster .sk .num { font-size: 11px !important; }
  .skillcluster .autobtn.on::after { width: 8px; height: 8px; top: 1px; right: 2px; }
  #bossBar { top: 150px !important; width: 86vw !important; }
  .breakbtn { top: 150px !important; padding: 6px 14px 6px 34px !important; } .breakbtn span { font-size: 13px !important; } .breakbtn::before { width: 17px; height: 17px; left: 10px; }
  .feed { right: 66px !important; bottom: 300px !important; } .report { bottom: 300px !important; }
  .sheet { --cut: none; }
  .sheethead { padding: 10px 14px 6px !important; } .sheethead h3 { font-size: 18px !important; padding: 6px 30px 6px 12px !important; }
  .sheethead .curmini { display: none !important; } .sheethead .close { width: 38px !important; height: 38px !important; }
  .sheet .tabs { padding: 2px 12px 6px !important; } .sheet .tab { padding: 7px 12px !important; font-size: 13px !important; }
  .sheet .sheetbody { padding: 6px 12px 16px !important; }
  .sheet .vtab { min-height: 54px; padding: 0 8px !important; font-size: 13px !important; gap: 6px !important; flex-direction: column !important; justify-content: center !important; } .sheet .vtab::before { width: 24px; height: 24px; }
  .sheet .bntitle b { font-size: 26px !important; }
  .eqview { grid-template-columns: 1fr; grid-template-rows: 220px auto auto; height: auto; }
  .eqart img { height: 92%; bottom: 0; } .eqart .unit { display: none; } .eqart .skins button { width: 40px; height: 40px; }
  .eqtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .eqtile .nm { font-size: 9.5px; }
  .eqstat { padding: 12px; }
}

/* v1.1 시안 맞춤 */
.mi.locked { opacity: 1 !important; } .mi.locked .li { opacity: .35; }
.mi.locked em { display: block !important; top: 8px; right: 50%; transform: translateX(50%); background: none; }
.tm.dot::after { right: 18px; }
.questcard .qnum { white-space: nowrap; }
.questcard { grid-template-columns: 52px 1fr; grid-template-areas: "ic t" "ic p" "ic n" "btn btn"; row-gap: 5px; }
.questcard .qnum { display: none; }
.questcard .reward { grid-area: n; display: flex !important; justify-content: space-between; align-items: center; }
.questcard .reward span { display: inline !important; grid-area: auto; font: 400 14px var(--t-mono) !important; color: #fff !important; }
.questcard .reward b { display: inline-flex !important; align-items: center; gap: 4px; font: 400 14px var(--disp) !important; color: #fff !important; }
@media (max-width: 700px) { .questcard { grid-template-columns: 30px 1fr; row-gap: 2px; } .questcard .reward span, .questcard .reward b { font-size: 11px !important; } }
/* 패널 머리 배너: 택티컬에선 장비 개요에서 숨기고, 나머지는 차콜 띠로 */
.sheet[data-p="equip"] .phead { display: none !important; }
.sheet .phead { height: 64px !important; border: 0 !important; border-radius: 0 !important; background: var(--t-ink) !important; clip-path: var(--cut-s); box-shadow: inset 4px 0 0 var(--t-y) !important; }
.sheet .phead .pheadart { opacity: .35; -webkit-mask: linear-gradient(90deg, transparent 30%, #000); mask: linear-gradient(90deg, transparent 30%, #000); }
.sheet .phead .pheadart::after { display: none !important; }
.sheet .phead b { color: #fff !important; text-shadow: none !important; } .sheet .phead small, .sheet .phead span { color: #c9c9c3 !important; text-shadow: none !important; }

/* ───── 장비 계열 공통 틀 (도구·방어구·합성·전설) ───── */
.eqshell { display: grid; grid-template-columns: minmax(0, 1fr) 330px; height: 100%; min-height: 0; background: var(--t-bg); }
.eqshell .eqgrid { padding: 18px 22px 24px; }
.eqtiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .eqtiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eqtiles.big .eqtile { aspect-ratio: 1 / 1.15; }
.eqtile .ty:not(.dark) { width: 10px; height: 10px; left: 8px; top: 8px; transform: rotate(45deg); }
.eqtile .ty.dark { background: var(--t-ink); }
.eqtile .eqb { position: absolute; right: 6px; top: 6px; font: 400 11px var(--disp); background: var(--t-ink); color: #fff; padding: 1px 6px; }
.eqtile .eqb.y { background: var(--t-y); color: var(--t-ink); } .eqtile .eqb + .eqb { top: 26px; }
.eqtile.dim { opacity: .42; filter: grayscale(1); }
.eqtile .nm { font-size: 12.5px !important; font-weight: 700; }
.eqhead .tiertag { width: 12px; height: 12px; background: var(--rc); transform: rotate(45deg); display: inline-block; margin-right: 2px; }
.synrow { display: flex; flex-wrap: wrap; gap: 6px; }
.synrow span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); font: 400 14px var(--disp); color: var(--t-ink); }
.synrow span i { width: 10px; height: 10px; transform: rotate(45deg); } .synrow b { font-family: var(--t-mono); }
.set.light { background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); color: var(--t-ink); padding: 10px 14px; font: 400 14px/1.5 var(--disp); }
.recipes { display: grid; gap: 8px; }
.recipe { display: grid; grid-template-columns: 96px 20px 96px 20px 96px auto; gap: 8px; align-items: center; padding: 8px 12px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); }
.recipe > b { font: 400 22px var(--disp); color: var(--t-ink); text-align: center; } .recipe .eqtile { aspect-ratio: 1; padding-bottom: 18px; }
.eqstat .dart { height: 170px; display: grid; place-items: center; background: radial-gradient(circle, #3a3b40, #1e1f22 70%); box-shadow: inset 0 0 0 1px #3a3b3f; }
.eqstat .dart.t3 { background: radial-gradient(circle, rgba(155,92,230,.5), #1e1f22 70%); } .eqstat .dart.t4 { background: radial-gradient(circle, rgba(255,176,0,.45), #1e1f22 70%); }
.eqstat .dart .ico { width: 120px !important; height: 120px !important; }
.eqstat .dname { display: grid; gap: 4px; justify-items: start; } .eqstat .dname b { font: 400 22px var(--disp); color: #fff; } .eqstat .dname span { font: 400 13px var(--disp); color: #c9c9c3; } .eqstat .dname i { font-style: normal; }
.eqstat .dname .pips { position: static; transform: none; }
.eqstat .dbtns { display: grid; gap: 8px; margin-top: 4px; } .eqstat .dbtns .gbtn { min-height: 48px; font-size: 16px !important; }
.eqstat .st .gbtn { min-height: 28px; }
.mergeprev { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 8px; background: radial-gradient(circle, #3a3b40, #1e1f22 70%); }
.mergeprev b { font: 400 20px var(--disp); color: var(--t-y); } .mergeprev span { font: 400 28px var(--disp); color: #fff; }
@media (max-width: 700px) {
  .eqshell { grid-template-columns: 1fr; height: auto; }
  .eqtiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .eqtile .nm { font-size: 9px !important; } .eqtile .eqb { font-size: 9px; padding: 0 3px; }
  .recipe { grid-template-columns: 56px 14px 56px 14px 56px 1fr; padding: 6px; gap: 4px; }
  .eqstat .dart { height: 120px; }
}
/* ───── 모바일 창: 전체 화면 (성장 창만 바텀 시트 유지) ───── */
@media (max-width: 700px) {
  .overlay:not(.result) { pointer-events: auto; background: rgba(14,15,17,.55); }
  .overlay:not(.result) .sheet { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100% !important; max-height: none !important; bottom: 0 !important; border-radius: 0 !important; animation: sheetfull .2s ease-out !important; }
  @keyframes sheetfull { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
  .overlay:not(.result) .sheet[data-p="growth"] { inset: auto 0 70px 0 !important; height: 56vh !important; box-shadow: 0 -6px 24px rgba(0,0,0,.5) !important; }
  body.panelopen:not(.growthopen) .dock, body.panelopen:not(.growthopen) .gauge, body.panelopen:not(.growthopen) .sidecol { display: none !important; }
  .sheet::before { inset: 6px; }
  .sheet[data-p="equip"] .tabs { padding: 0 8px 6px !important; }
  .eqview { overflow-y: auto; }
  .sheet .shopfull { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr); }
  .sheet .vtabs { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: minmax(0, 1fr); }
  .sheet .vtab.on { box-shadow: inset 0 -5px 0 var(--t-y) !important; } .sheet .vtab.on::after { display: none; }
  .sheet .ratebox { display: none; }
}
/* ───── 가독성: 패널 안 작은 글자 키우기, 회색 글자 진하게 ───── */
.sheet { font-size: 14px; }
.sheet small, .sheet .row small, .sheet .info small { font-size: 12.5px !important; color: #4e4f53 !important; }
.sheet .eqstat small, .sheet .eqstat .set, .sheet .bigbanner small { color: #e2e2dc !important; }
.sheet .row .info b, .sheet .goldrow .title, .sheet .statrow b { font-size: 15.5px !important; color: var(--t-ink) !important; }
.sheet .lead { font-size: 14px !important; color: #3a3b3f !important; }
.sheet .note { color: #3a3b3f !important; font-size: 13.5px !important; }
.sheet .cnt { color: var(--t-ink) !important; background: var(--t-y) !important; padding: 0 5px; border-radius: 0 !important; }
.sheet b[style*="color"] { text-shadow: 0 0 1px rgba(0,0,0,.35); }

/* ═════ 화면 재구성 (2026-11-04 시안) ═════ */
/* 성장 · 스탯 */
.gpts { display: flex; align-items: center; gap: 12px; background: var(--t-ink); color: #fff; padding: 12px 18px; clip-path: var(--cut-s); }
.gpts .pp { width: 30px; height: 30px; display: grid; place-items: center; background: var(--t-y); color: var(--t-ink); font: 700 18px var(--disp); }
.gpts b { font: 400 19px var(--disp); flex: 1; } .gpts em { font: 400 34px var(--disp); font-style: normal; color: var(--t-y); }
.gstat { display: grid; grid-template-columns: 56px 92px minmax(0, 1fr) 96px auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut-s); }
.gstat .gi { width: 52px; height: 52px; display: grid; place-items: center; background: var(--t-ink); color: #fff; clip-path: var(--cut-s); } .gstat .gi .li { width: 30px; height: 30px; }
.gstat .gn { font: 400 18px var(--disp); color: var(--t-ink); } .gstat .gv { font: 400 30px var(--disp); color: var(--t-ink); white-space: nowrap; }
.gstat .ge { font: 400 18px var(--disp); color: var(--t-ink); border-left: 1px solid var(--t-line); padding-left: 12px; } .gstat .ge small { display: block; font-size: 11px !important; color: var(--t-mute) !important; }
.gstat .gb { display: flex; gap: 6px; } .gstat .gb .gbtn { min-width: 64px; min-height: 48px; font-size: 18px !important; }
.gpower { display: flex; align-items: center; gap: 14px; background: var(--t-ink); color: #fff; padding: 14px 20px; clip-path: var(--cut); position: relative; }
.gpower .li { width: 40px; height: 40px; } .gpower small { font: 400 18px var(--disp); color: #fff !important; } .gpower b { font: 400 40px var(--disp); color: var(--t-y); flex: 1; } .gpower .bc { filter: invert(1); width: 90px; height: 26px; }
/* 스킬 */
.skwrap { display: grid; grid-template-columns: minmax(200px, 38%) minmax(0, 1fr); gap: 12px; }
.skart { position: relative; background: radial-gradient(circle at 50% 60%, #fff, #e3e3de); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut); overflow: hidden; min-height: 300px; }
.skart img { position: absolute; left: 50%; bottom: 0; height: 96%; transform: translateX(-50%); object-fit: contain; }
.sklist { display: grid; gap: 8px; }
.skrow { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 30px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut-s); cursor: pointer; }
.skrow.sel { box-shadow: inset 0 0 0 2px var(--t-ink), inset 5px 0 0 var(--t-y); }
.skrow .sn, .skdetail .sn { position: absolute; left: 0; top: 0; background: var(--t-ink); color: #fff; font: 400 12px var(--t-mono); padding: 3px 6px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.skdetail .sn { background: var(--t-y); color: var(--t-ink); }
.sic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 4px var(--ec), 0 0 0 6px #fff, 0 0 0 7px var(--t-line); }
.sic .ico { width: 70% !important; height: 70% !important; } .sic.big { width: 104px; height: 104px; }
.sinfo b { display: block; font: 400 19px var(--disp); color: var(--t-ink); } .sinfo b em { font: 400 12px var(--disp); font-style: normal; color: #fff; padding: 1px 7px; margin-left: 4px; vertical-align: 2px; }
.sinfo span { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font: 400 14px var(--disp); color: #3a3b3f; } .sinfo .li { width: 15px; height: 15px; }
.slv { display: grid; justify-items: end; gap: 4px; } .slv b { font: 400 16px var(--disp); color: var(--t-ink); }
.dia { display: flex; gap: 5px; } .dia i { width: 11px; height: 11px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px var(--t-ink); } .dia i.on { background: var(--t-ink); }
.skrow.empty { grid-template-columns: 1fr; color: var(--t-mute); font: 400 16px var(--disp); }
.skdetail { position: relative; background: var(--t-ink); color: #fff; padding: 22px 20px 18px; clip-path: var(--cut); display: grid; gap: 12px; }
.sdh { display: flex; gap: 18px; align-items: center; } .sdh b { font: 400 26px var(--disp); color: #fff; } .sdh b em { font: 400 14px var(--disp); font-style: normal; color: var(--t-y); border: 1px solid var(--t-y); padding: 0 8px; margin-left: 6px; } .sdh p { margin: 6px 0 0; font: 400 15px/1.5 var(--disp); color: #e2e2dc; }
.sdstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sdstats div { background: #2a2b2f; box-shadow: inset 0 0 0 1px #3a3b3f; padding: 10px 14px; } .sdstats small { display: block; font-size: 13px !important; color: #c9c9c3 !important; } .sdstats b { font: 400 28px var(--disp); color: var(--t-y); }
.skdetail h4 { margin: 4px 0 0; font: 400 15px var(--disp); color: #c9c9c3; } .skdetail h4::before { content: "// "; color: var(--t-y); }
.sdlv { display: flex; align-items: center; gap: 14px; background: var(--t-plate); color: var(--t-ink); padding: 10px 16px; } .sdlv i { width: 40px; height: 40px; display: grid; place-items: center; transform: rotate(45deg); background: var(--t-ink); color: #fff; font: 400 18px var(--disp); font-style: normal; } .sdlv i.y { background: var(--t-y); color: var(--t-ink); }
.sdlv span { font: 400 22px var(--disp); color: var(--t-mute); } .sdlv p { margin: 0 0 0 10px; font: 400 15px var(--disp); color: var(--t-ink); }
.sdmat { display: flex; gap: 12px; align-items: stretch; } .sdmat .mt { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--t-plate); color: var(--t-ink); padding: 10px 16px; font: 400 16px var(--disp); }
.sdmat .mt .li { width: 30px; height: 30px; } .sdmat .mt span { flex: 1; } .sdmat .mt b { font: 400 22px var(--disp); } .sdmat .mt b.ok { color: #2f8f22; } .sdmat .mt b.no { color: var(--t-red); }
.sdmat .gbtn.big { min-width: 200px; font-size: 22px !important; min-height: 64px; }
.sdfoot { font: 400 13px var(--disp); color: #c9c9c3; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sdfoot .gbtn { background: #3a3b3f !important; }
/* 임무 */
.mrow { display: grid; grid-template-columns: 74px minmax(0, 1fr) 110px; gap: 14px; align-items: center; padding: 8px 10px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut-s); }
.mrow .mic { width: 74px; height: 64px; display: grid; place-items: center; background: var(--t-ink); color: #fff; clip-path: var(--cut-s); } .mrow .mic .li { width: 34px; height: 34px; }
.minfo b { display: block; font: 400 19px var(--disp); color: var(--t-ink); margin-bottom: 6px; }
.mbar { position: relative; height: 24px; background: var(--t-ink); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); } .mbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--t-y); }
.mbar span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 15px var(--disp); color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.mrw { height: 64px; border: 0; display: grid; place-items: center; align-content: center; background: var(--t-ink); color: #fff; font: 400 24px var(--disp); clip-path: var(--cut-s); cursor: pointer; }
.mrw .ico { width: 22px !important; height: 22px !important; vertical-align: -3px; } .mrw small { font: 400 11px var(--disp) !important; color: #c9c9c3 !important; }
.mrw.y { background: var(--t-y); color: var(--t-ink); } .mrw.y small { color: var(--t-ink) !important; } .mrw.done { background: #dcdcd6; color: var(--t-mute); font-size: 16px; } .mrw:disabled { opacity: .5; }
.mrow.done { opacity: .6; } .mrow.ready { box-shadow: inset 0 0 0 2px var(--t-ink), inset 5px 0 0 var(--t-y); }
.track { padding: 14px 18px 36px !important; } .tnode { width: 40px !important; height: 40px !important; border-radius: 0 !important; transform: translate(-50%, -50%) rotate(45deg) !important; background: var(--t-ink) !important; border: 2px solid #fff !important; box-shadow: 0 0 0 1px var(--t-ink) !important; }
.tnode span { display: inline-block; transform: rotate(-45deg); color: #fff !important; font-size: 13px !important; } .tnode em { transform: translateX(-50%) rotate(-45deg) !important; top: 44px !important; left: 70% !important; font-size: 12.5px !important; color: var(--t-ink) !important; }
.tnode.ready { background: var(--t-y) !important; } .tnode.ready span { color: var(--t-ink) !important; } .tnode.got { background: #9a9b9f !important; }
.trackbar { background: var(--t-line) !important; height: 8px !important; border-radius: 0 !important; } .trackbar > i { background: var(--t-y) !important; border-radius: 0 !important; }

/* ═════ PC: 오른쪽 도킹 (전투는 왼쪽 40%에 계속 보임) ═════ */
@media (min-width: 701px) {
  .overlay:not(.result) { background: transparent !important; pointer-events: none; padding: 0 !important; display: none; }
  .overlay.show:not(.result) { display: block; }
  .overlay:not(.result) .sheet { pointer-events: auto; position: fixed !important; top: 14px !important; right: 14px !important; bottom: 14px !important; left: auto !important; width: 58vw !important; height: auto !important; max-height: none !important; animation: dockin .22s cubic-bezier(.2,.9,.3,1) !important; box-shadow: -12px 0 40px rgba(0,0,0,.45) !important; }
  @keyframes dockin { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  body.panelopen .rightcol, body.panelopen .questcard, body.panelopen .sidecol.right, body.panelopen .gauge.combo, body.panelopen .plaque, body.panelopen .dock, body.panelopen .feed, body.panelopen .breakbtn, body.panelopen #bossBar, body.panelopen .hudframe .tr, body.panelopen .hudframe .br, body.panelopen .hudframe .code.r { display: none !important; }
  body.panelopen .skillcluster { left: calc(21vw + 60px) !important; bottom: 28px !important; transform: translateX(-50%) !important; grid-template-columns: repeat(5, 60px) !important; grid-auto-rows: 60px !important; gap: 8px 10px !important; }
  body.panelopen .skillcluster .sk, body.panelopen .skillcluster .autobtn, body.panelopen .skillcluster .autobtn.big, body.panelopen .skillcluster #autoS, body.panelopen .skillcluster .dashbtn { width: 60px !important; height: 60px !important; }
  body.panelopen .skillcluster .sk .ico { width: 38px !important; height: 38px !important; }
  body.panelopen .skillcluster .sk .cd, body.panelopen .skillcluster .dashbtn .cd { -webkit-mask: radial-gradient(circle, transparent 34px, #000 35px); mask: radial-gradient(circle, transparent 34px, #000 35px); }
  body.panelopen .skillcluster .autobtn span, body.panelopen .skillcluster .autobtn small, body.panelopen .skillcluster .dashbtn span { font-size: 12px !important; }
  body.panelopen .gauge.fever { transform: scale(.7); transform-origin: left bottom; bottom: 170px; }
  .sheet[data-p="equip"] { grid-template-columns: 120px minmax(0, 1fr); }
  .sheet .eqview { grid-template-columns: minmax(200px, 30%) minmax(0, 1fr) 260px; }
  .sheet .eqshell { grid-template-columns: minmax(0, 1fr) 280px; }
  .sheet .shopfull { grid-template-columns: 220px minmax(0, 1fr) !important; }
  .sheet .gstat { grid-template-columns: 50px 80px minmax(0, 1fr) 84px auto; }
  .sheet .sheetbody.split { grid-template-columns: 220px minmax(0, 1fr) !important; }
}
/* ═════ 모바일: 도구 화면 조정 — 탭은 위 가로줄, 선택 도구 상세가 위, 격자가 아래 ═════ */
@media (max-width: 700px) {
  .sheet[data-p="equip"] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) !important; }
  .sheet[data-p="equip"] .tabs { flex-direction: row !important; background: none !important; }
  .eqshell { display: flex; flex-direction: column-reverse; }
  .eqshell .eqstat { display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-auto-rows: auto; gap: 6px 12px; padding: 12px; }
  .eqshell .eqstat .dart { grid-row: span 3; height: 110px; } .eqshell .eqstat .dart .ico { width: 84px !important; height: 84px !important; }
  .eqshell .eqstat .dname b { font-size: 18px; } .eqshell .eqstat h4, .eqshell .eqstat .set, .eqshell .eqstat .st:nth-of-type(n+3) { display: none; }
  .eqshell .eqstat .st { padding: 6px 10px; font-size: 14px; } .eqshell .eqstat .dbtns { grid-column: 1 / -1; }
  .eqshell .eqgrid { padding: 10px; }
  .eqtiles.five { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .gstat { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "i n b" "i v b"; padding: 8px 10px; gap: 2px 10px; }
  .gstat .gi { grid-area: i; width: 40px; height: 40px; } .gstat .gn { grid-area: n; font-size: 15px; } .gstat .gv { grid-area: v; font-size: 20px; } .gstat .ge { display: none; } .gstat .gb { grid-area: b; } .gstat .gb .gbtn { min-width: 44px; min-height: 40px; font-size: 14px !important; }
  .gpower b { font-size: 28px; } .gpts em { font-size: 26px; }
  .skwrap { grid-template-columns: 1fr; } .skart { min-height: 200px; } .skrow { grid-template-columns: 56px minmax(0, 1fr) auto; padding-left: 24px; } .sic { width: 56px; height: 56px; } .sinfo b { font-size: 16px; } .sinfo span { font-size: 12px; margin-right: 8px; }
  .sdstats b { font-size: 20px; } .sdmat { flex-direction: column; } .sdmat .gbtn.big { min-width: 0; }
  .mrow { grid-template-columns: 54px minmax(0, 1fr) 76px; gap: 8px; } .mrow .mic { width: 54px; height: 50px; } .minfo b { font-size: 15px; } .mrw { height: 52px; font-size: 18px; }
}
/* 도킹 창 정리: 예전 일러스트 열 제거, 장비 개요 3열, 배너 숨김 */
.sheet .artcol { display: none !important; }
.sheet .sheetbody.split { grid-template-columns: minmax(0, 1fr) !important; }
.sheet .sheetbody.split .contentcol { justify-content: flex-start !important; align-content: start !important; }
body.panelopen #gateBanner { display: none !important; }
@media (min-width: 701px) {
  .sheet .eqview { grid-template-columns: 210px minmax(0, 1fr) 236px !important; }
  .sheet .eqview .eqtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sheet .eqview .eqart .unit { width: 170px; }
}
.eqart .skins { flex-wrap: wrap; gap: 6px; } .eqart .skins button { width: 42px; height: 42px; }
.sheet .contentcol { justify-content: flex-start !important; margin: 0 !important; height: 100%; overflow-y: auto; }
.sheet .contentcol > :first-child { margin-top: 0 !important; }
@media (max-width: 700px) { .sheethead .close { margin-left: auto !important; } }

/* 펫 (mod-mob-pet) */
.ptop { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, 1.2fr); gap: 10px; }
.pmain { position: relative; background: radial-gradient(circle at 50% 55%, #fff, #dcdcd6 80%); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut); display: grid; justify-items: center; align-content: end; padding: 34px 10px 10px; min-height: 360px; }
.pmain.on { box-shadow: inset 0 0 0 2px var(--t-ink), inset 0 -5px 0 var(--t-y); }
.pmain .ico { width: 82% !important; height: auto !important; aspect-ratio: 1; max-width: 260px; }
.ptag { position: absolute; left: 10px; top: 10px; background: var(--t-ink); color: #fff; font: 400 14px var(--disp); font-style: normal; padding: 4px 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.pstage { background: var(--t-ink); color: #fff; font: 400 13px var(--disp); padding: 2px 10px; margin-top: -26px; position: relative; }
.pstars { display: flex; gap: 2px; margin: 4px 0; } .pstars i { font-style: normal; font-size: 20px; color: #c9c9c3; } .pstars i.on { color: var(--t-y); text-shadow: 0 0 1px #000; }
.pname { display: flex; align-items: center; gap: 10px; width: 100%; background: #fff; padding: 6px 10px; box-shadow: inset 0 0 0 1px var(--t-line); }
.pname b { flex: 1; text-align: center; font: 400 24px var(--disp); color: var(--t-ink); } .pname i { font-style: normal; font: 400 12px var(--disp); background: var(--ec); color: #fff; padding: 1px 8px; }
.pname button { width: 32px; height: 32px; border: 0; background: var(--t-ink); color: #fff; font: 400 20px var(--disp); }
.psubs { display: grid; gap: 10px; }
.psub { position: relative; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut-s); display: grid; justify-items: center; align-content: center; padding: 26px 6px 8px; cursor: pointer; }
.psub em { position: absolute; left: 0; top: 0; background: var(--t-ink); color: #fff; font: 400 12px var(--disp); font-style: normal; padding: 2px 8px; } .psub .ico { width: 80% !important; height: auto !important; aspect-ratio: 1; max-width: 120px; }
.psub.empty span { font: 200 48px/1 sans-serif; color: #b5b5af; }
.pside { background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.pside h4 { margin: 4px 0 0; font: 400 15px var(--disp); color: var(--t-ink); } .pside h4::before { content: "// "; }
.prow { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #e2e2dc; font: 400 14.5px var(--disp); color: var(--t-ink); } .prow .li { width: 18px; height: 18px; } .prow b { font: 400 16px var(--disp); }
.pskill { background: #fff; box-shadow: inset 0 0 0 1px var(--t-line); padding: 8px 10px; display: grid; gap: 3px; } .pskill b { font: 400 17px var(--disp); color: var(--t-ink); } .pskill b em { font-style: normal; font-size: 11px; background: var(--t-y); padding: 0 6px; margin-left: 4px; } .pskill span { font: 400 13.5px/1.4 var(--disp); color: #3a3b3f; } .pskill small { display: flex; align-items: center; gap: 4px; } .pskill .li { width: 14px; height: 14px; }
.plv { display: flex; align-items: baseline; gap: 8px; } .plv b { font: 400 24px var(--disp); color: var(--t-ink); } .plv span { font: 400 14px var(--disp); color: var(--t-mute); flex: 1; } .plv em { font-style: normal; font: 400 14px var(--disp); color: var(--t-ink); }
.plvbar { height: 8px; background: var(--t-ink); } .plvbar i { display: block; height: 100%; background: var(--t-y); }
.pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; } .pbtns .gbtn:first-child { grid-column: 1 / -1; min-height: 52px; font-size: 19px !important; }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pcard { position: relative; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut-s); display: grid; justify-items: center; padding: 24px 6px 8px; cursor: pointer; }
.pcard.sel { box-shadow: inset 0 0 0 2px var(--t-y), inset 0 0 0 3px var(--t-ink); } .pcard.lock { filter: grayscale(1); opacity: .45; cursor: default; }
.pcard .ico { width: 78% !important; height: auto !important; aspect-ratio: 1; max-width: 120px; }
.pcard .rk { position: absolute; left: 6px; top: 6px; font: 400 11px var(--disp); font-style: normal; color: #fff; background: #3a8ee6; padding: 1px 6px; } .pcard .rk.sup { background: #9b5ce6; }
.pcard .eqm { position: absolute; right: 6px; top: 6px; font: 400 11px var(--disp); font-style: normal; background: var(--t-y); color: var(--t-ink); padding: 1px 6px; } .pcard .eqm.s { background: var(--t-ink); color: #fff; }
.pcard .pn { font: 400 15px var(--disp); color: var(--t-ink); } .pcard .pn small { font-size: 11px !important; } .pcard .pstage { margin-top: -22px; font-size: 11px; } .pcard .pstars i { font-size: 15px; }
.pfoot { display: flex; gap: 10px; align-items: stretch; } .pown { display: flex; align-items: center; gap: 10px; background: var(--t-ink); color: #fff; padding: 8px 16px; font: 400 15px var(--disp); } .pown b { font: 400 22px var(--disp); } .pfoot .gbtn { flex: 1; min-height: 56px; font-size: 18px !important; }
@media (max-width: 700px) {
  .ptop { grid-template-columns: 1.3fr .8fr; } .pside { grid-column: 1 / -1; } .pmain { min-height: 280px; } .pname b { font-size: 20px; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sheet .sheetbody.split { display: flex !important; flex-direction: column; } .sheet .sheetbody.split > .contentcol { flex: 1 1 auto; }
.sheet .contentcol::before { display: none !important; } .sheet .contentcol::after { flex: 0 0 0 !important; }

/* ═════ 계기판: 투명 배경 + 세그먼트 점등 ═════ */
.gauge .plate { display: none !important; }
.gauge { width: 250px !important; height: 150px !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.gauge .seg { fill: rgba(30,31,34,.55); stroke: rgba(255,255,255,.55); stroke-width: 1; transition: fill .18s; }
.gauge .seg.lit { fill: #ffd400; stroke: #fff6c0; }
.gauge .seg.red.lit { fill: #ff7a1a; }
.gauge.high .seg.lit { filter: url(#gglow); }
.gauge.hot .seg.lit { animation: segflash .35s ease-in-out infinite alternate; } @keyframes segflash { to { fill: #fff3a0; } }
.gauge .gnum { font: 400 14px Jua, sans-serif; fill: #fff; stroke: #1e1f22; stroke-width: 3px; paint-order: stroke; text-anchor: middle; }
.gauge .glabel { font: 400 17px Jua, sans-serif; fill: #fff; stroke: #1e1f22; stroke-width: 4px; paint-order: stroke; text-anchor: middle; letter-spacing: 1px; }
.gauge .nd { stroke: #1e1f22; stroke-width: 8; stroke-linecap: round; } .gauge .nd2 { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.gauge.high .nd2 { stroke: #ffd400; }
.gauge .hub { fill: #1e1f22; stroke: #ffd400; stroke-width: 3; }
.gauge .vbox { fill: rgba(30,31,34,.85); stroke: rgba(255,255,255,.5); }
.gauge .val { font: 400 30px Jua, sans-serif; fill: #ffd400; text-anchor: middle; }
.gauge .needle { transition: transform .28s cubic-bezier(.25,1.6,.45,1) !important; }
.gauge.bump .val { animation: valbump .25s ease-out; transform-box: fill-box; transform-origin: center; } @keyframes valbump { 40% { transform: scale(1.25); } }
.gauge.hot { animation: gaugeshake .12s linear infinite; } @keyframes gaugeshake { 50% { transform: translate(1px, -1px); } }
.gauge.combo.hot, .gauge.combo.hot { animation: none; }
@media (max-width: 700px) { .gauge { width: 120px !important; height: 74px !important; } }

/* ═════ 겹침 방지 구역 ═════ */
@media (min-width: 701px) {
  .rightcol .buffs { top: 220px !important; max-height: 88px; overflow: hidden; gap: 3px !important; }
  .sidecol.right { top: 318px !important; }
  .feed { right: 132px !important; bottom: 186px !important; max-height: 168px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 30%); mask: linear-gradient(transparent, #000 30%); }
  .report { bottom: 186px !important; left: 132px !important; }
}
@media (min-width: 701px) and (max-height: 860px) { .sidecol.right { top: 304px !important; } .rightcol .buffs { max-height: 76px; } }
@media (max-width: 700px) {
  .rightcol .buffs { top: 58px !important; bottom: auto !important; right: 8px !important; max-height: 70px; overflow: hidden; }
  .buff { font-size: 10px !important; padding: 2px 6px !important; } .buff i { width: 28px; }
  .questcard { bottom: 250px !important; }
  .feed { left: 6px !important; right: auto !important; bottom: 176px !important; max-height: 70px; overflow: hidden; align-items: flex-start !important; -webkit-mask: linear-gradient(transparent, #000 35%); mask: linear-gradient(transparent, #000 35%); }
  .report { bottom: 250px !important; }
}

/* ═════ 접히는 도움말 ═════ */
.help { background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); }
.help summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 12px; font: 400 14px var(--disp); color: var(--t-ink); }
.help summary::-webkit-details-marker { display: none; }
.help summary i { width: 20px; height: 20px; display: grid; place-items: center; background: var(--t-ink); color: var(--t-y); font: 700 13px sans-serif; font-style: normal; border-radius: 50%; }
.help summary::after { content: "열기"; margin-left: auto; font-size: 12px; color: var(--t-mute); } .help[open] summary::after { content: "닫기"; }
.help ol { margin: 0; padding: 4px 14px 10px 34px; font: 400 14px/1.7 var(--disp); color: #2a2b2f; }

/* ═════ 도구: 선택 칸 강조 · 비교 ═════ */
.eqtile.pick { box-shadow: inset 0 0 0 3px var(--t-y), inset 0 0 0 4px var(--t-ink) !important; animation: pickpulse 1s ease-in-out infinite alternate; } @keyframes pickpulse { to { box-shadow: inset 0 0 0 3px #fff3a0, inset 0 0 0 4px var(--t-ink), 0 0 12px rgba(255,212,0,.6); } }
.pickhint { display: flex; align-items: center; gap: 8px; background: var(--t-y); color: var(--t-ink); padding: 6px 12px; font: 400 14px var(--disp); clip-path: var(--cut-s); } .pickhint b { font-size: 15px; }
.cmp { display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px; align-items: center; background: #2a2b2f; padding: 8px 10px; }
.cmp div { display: grid; justify-items: center; } .cmp small { font-size: 11px !important; color: #c9c9c3 !important; } .cmp span { color: #fff; font: 400 20px var(--disp); }
.cmp b { justify-self: end; font: 400 18px var(--disp); } .cmp b.up { color: #7fe08a; } .cmp b.down { color: #ff7a6a; }
.eqnow { text-align: center; font: 400 14px var(--disp); color: var(--t-y); padding: 4px; }
.eqstat .hint { font-size: 12px !important; color: #9a9b9f !important; text-align: center; }
.mergeprev { display: grid !important; grid-template-columns: auto auto auto; gap: 8px; } .mergeprev .mats { display: grid; gap: 2px; } .mergeprev .res { padding: 6px; box-shadow: 0 0 0 2px var(--t-y); }
.chk { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #2a2b2f; color: #e2e2dc; font: 400 15px var(--disp); }
.chk i { width: 20px; height: 20px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #6b6c70; font-style: normal; color: var(--t-ink); } .chk.ok i { background: var(--t-y); box-shadow: none; } .chk.ok { color: #fff; }

/* ═════ 펫: 편성 바 + 선택 상세 ═════ */
.team { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.tslot { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 28px 8px 10px; min-height: 180px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut-s); cursor: pointer; }
.tslot.main { background: radial-gradient(circle at 50% 55%, #fff, #e3e3de 80%); box-shadow: inset 0 0 0 2px var(--t-ink); }
.tslot em { position: absolute; left: 0; top: 0; background: var(--t-ink); color: #fff; font: 400 13px var(--disp); font-style: normal; padding: 3px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.tslot.main em { background: var(--t-y); color: var(--t-ink); }
.tslot .ico { width: 110px !important; height: 110px !important; } .tslot b { font: 400 17px var(--disp); color: var(--t-ink); } .tslot b small { font-size: 12px !important; }
.tslot .tn { font-size: 12px !important; color: var(--t-mute) !important; } .tslot .plus { font: 200 56px/1 sans-serif; color: #b5b5af; }
.tslot.empty { background: transparent; box-shadow: inset 0 0 0 2px dashed var(--t-line); outline: 2px dashed #c9c9c3; outline-offset: -6px; }
.tslot:hover { box-shadow: inset 0 0 0 2px var(--t-ink); }
.tslot.picking { outline: 3px solid var(--t-y); outline-offset: -3px; animation: pickpulse 1s ease-in-out infinite alternate; } .tslot.picking .tn { color: var(--t-ink) !important; font-weight: 700; }
.pdet { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; background: var(--t-ink); color: #fff; padding: 14px; clip-path: var(--cut); }
.pdart { position: relative; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%); }
.pdart .ico { width: 190px !important; height: 190px !important; } .pdart .pstage { position: absolute; bottom: 6px; }
.pdinfo { display: grid; gap: 8px; align-content: start; }
.pdname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pdname b { font: 400 26px var(--disp); } .pdname i { font-style: normal; font: 400 12px var(--disp); padding: 1px 8px; color: #fff; }
.pdname .where { margin-left: auto; font-style: normal; font: 400 13px var(--disp); padding: 3px 10px; background: #3a3b3f; color: #c9c9c3; } .pdname .where.on { background: var(--t-y); color: var(--t-ink); }
.pdgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pdet .prow { background: #2a2b2f; border: 0; padding: 8px 10px; color: #fff; } .pdet .prow b { color: var(--t-y); }
.pdet .pskill { background: #2a2b2f; box-shadow: none; } .pdet .pskill b { color: #fff; } .pdet .pskill span { color: #e2e2dc; }
.pdet .plv b { color: #fff; } .pdet .plv span { color: #c9c9c3; } .pdet .plv em { color: #fff; } .pdet .plvbar { background: #3a3b3f; }
.pdet .pbtns { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pdet .pbtns .gbtn:first-child { grid-column: 1 / -1; }
.pgrid.picking .pcard:not(.lock) { box-shadow: inset 0 0 0 2px var(--t-y) !important; cursor: copy; }
.pickon { font-style: normal; background: var(--t-y); color: var(--t-ink); font: 400 13px var(--disp); padding: 2px 8px; margin-left: 8px; }
.ptop { display: none !important; }

/* ═════ 스킨 ═════ */
.skins2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.skc { position: relative; display: grid; gap: 4px; justify-items: center; padding: 10px 10px 12px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut-s); text-align: center; }
.skc.on { box-shadow: inset 0 0 0 2px var(--t-ink), inset 0 -5px 0 var(--t-y); }
.skc .skimg { width: 100%; height: 210px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #fff, #e3e3de 80%); }
.skc .skimg img { max-height: 200px; max-width: 100%; } .skc.lock .skimg img, .skc.lock .skimg .ico { filter: grayscale(.6) brightness(.85); }
.skc b { font: 400 20px var(--disp); color: var(--t-ink); } .skc small { font-size: 12.5px !important; }
.skc .gbtn { width: 100%; } .skc .skst { width: 100%; padding: 9px; background: var(--t-ink); color: var(--t-y); font: 400 15px var(--disp); }
.skc .eqm { position: absolute; right: 6px; top: 6px; font: 400 12px var(--disp); font-style: normal; background: var(--t-y); color: var(--t-ink); padding: 2px 8px; z-index: 1; } .skc .eqm.s { background: var(--t-ink); color: #fff; }
.skach { width: 100%; display: grid; gap: 3px; } .skach span { font: 400 12.5px var(--disp); color: #2a2b2f; } .skach .plvbar { height: 6px; }
.skinchg { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--t-ink); color: #fff; font: 400 14px var(--disp); padding: 7px 12px; clip-path: var(--cut-s); cursor: pointer; } .skinchg .li { width: 16px; height: 16px; }
.eqart .skins { display: none !important; }
@media (max-width: 700px) {
  .team { grid-template-columns: 1.2fr 1fr 1fr; gap: 6px; } .tslot { min-height: 140px; padding-top: 24px; } .tslot .ico { width: 76px !important; height: 76px !important; } .tslot b { font-size: 14px; } .tslot .tn { display: none; }
  .pdet { grid-template-columns: 1fr; } .pdart .ico { width: 140px !important; height: 140px !important; } .pdet .pbtns { grid-template-columns: 1fr 1fr; }
  .skins2 { grid-template-columns: 1fr 1fr; } .skc .skimg { height: 160px; } .skc .skimg img { max-height: 150px; }
}
/* 겹침 정리 2: 알림 카드·관문 배너 위치 고정 */
.pdet .pstars i { color: #55565b; } .pdet .pstars i.on { color: var(--t-y); }
.discover { top: auto !important; bottom: 300px !important; left: 50% !important; transform: translate(-50%, 20px) scale(.95) !important; }
.discover.show { transform: translate(-50%, 0) scale(1) !important; }
#gateBanner { top: auto !important; bottom: 236px !important; }
@media (min-width: 701px) { #gateBanner { bottom: 312px !important; } .discover { bottom: 372px !important; } }
@media (max-width: 700px) {
  .discover { bottom: 330px !important; width: 78vw !important; padding: 6px 10px !important; } .discover .ico { width: 40px !important; height: 40px !important; }
  #gateBanner { bottom: 300px !important; width: 78vw; padding: 6px 10px !important; } #gateBanner span { display: none; } #gateBanner b { font-size: 15px !important; }
  body:has(#gateBanner[style=""]) .questcard, body:has(#gateBanner:not([style*="none"])) .questcard { bottom: 236px !important; }
}
@media (max-width: 700px) {
  .discover { top: 186px !important; bottom: auto !important; width: 66vw !important; } .discover small { font-size: 9px !important; } .discover b { font-size: 14px !important; } .discover span { font-size: 10px !important; }
  #gateBanner { bottom: 300px !important; }
}
/* PC 스킬 HUD 축소 (84 → 62px) */
@media (min-width: 701px) {
  .skillcluster { grid-template-columns: repeat(5, 62px) !important; grid-auto-rows: 62px !important; gap: 8px 12px !important; bottom: 124px !important; }
  .skillcluster .sk, .skillcluster .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .dashbtn { width: 62px !important; height: 62px !important; border-width: 2px !important; }
  .skillcluster .sk .ico { width: 40px !important; height: 40px !important; }
  .skillcluster .sk .cd, .skillcluster .dashbtn .cd { inset: -4px !important; -webkit-mask: radial-gradient(circle, transparent 34px, #000 35px) !important; mask: radial-gradient(circle, transparent 34px, #000 35px) !important; }
  .skillcluster .sk .cdt { font-size: 14px !important; } .skillcluster .sk .num { font-size: 12px !important; }
  .skillcluster .autobtn span, .skillcluster .autobtn small, .skillcluster .dashbtn span { font-size: 12px !important; }
  .skillcluster .dashbtn .li { width: 24px; height: 24px; }
  .skillcluster .autobtn.on::after { width: 10px; height: 10px; top: 2px; right: 3px; }
  body.panelopen .skillcluster { grid-template-columns: repeat(5, 52px) !important; grid-auto-rows: 52px !important; gap: 6px 8px !important; }
  body.panelopen .skillcluster .sk, body.panelopen .skillcluster .autobtn, body.panelopen .skillcluster .autobtn.big, body.panelopen .skillcluster #autoS, body.panelopen .skillcluster .dashbtn { width: 52px !important; height: 52px !important; }
  body.panelopen .skillcluster .sk .ico { width: 32px !important; height: 32px !important; }
  body.panelopen .skillcluster .sk .cd, body.panelopen .skillcluster .dashbtn .cd { -webkit-mask: radial-gradient(circle, transparent 29px, #000 30px) !important; mask: radial-gradient(circle, transparent 29px, #000 30px) !important; }
}
/* 인트로 (택티컬 키비주얼) */
#intro { background: #e9e9e4 !important; }
.introbg { display: none !important; }
.introart { background-color: #e9e9e4 !important; background-size: cover !important; background-position: left center !important; }
.introart::after { background: linear-gradient(90deg, rgba(233,233,228,0) 45%, rgba(233,233,228,.65) 75%, rgba(233,233,228,.85)) !important; }
.logo { top: 50% !important; left: auto !important; right: 7vw; transform: translateY(-60%) !important; justify-items: start !important; filter: none !important; animation: none !important; padding: 26px 34px 22px; background: rgba(246,246,242,.92); clip-path: var(--cut); box-shadow: inset 6px 0 0 #ffd400; }
.logo .code { font: 400 12px var(--t-mono) !important; letter-spacing: 2px !important; color: #6b6c70 !important; margin: 0 0 6px !important; }
.logo .l1 { font: 400 70px/1 var(--disp) !important; color: #1e1f22 !important; -webkit-text-stroke: 0 !important; letter-spacing: 0 !important; }
.logo .l2 { font: 400 92px/1 var(--disp) !important; color: #1e1f22 !important; -webkit-text-stroke: 0 !important; letter-spacing: 0 !important; background: linear-gradient(transparent 62%, #ffd400 62%, #ffd400 90%, transparent 90%); padding: 0 4px; }
.logo small:not(.code) { font: 400 13px var(--t-mono) !important; letter-spacing: .55em !important; color: #1e1f22 !important; margin-top: 12px !important; }
.logo .bc { width: 150px; height: 16px; margin-top: 12px; }
.tapstart { left: auto; right: 7vw; bottom: 12vh !important; transform: none; background: #1e1f22; color: #fff !important; text-shadow: none !important; font-size: 20px !important; padding: 12px 34px; clip-path: var(--cut-s); box-shadow: inset 0 -4px 0 #ffd400; }
.introfoot { color: #3a3b3f !important; text-shadow: none !important; right: 7vw; left: auto; }
@media (max-width: 700px) {
  .introart { background-position: 28% center !important; }
  .introart::after { background: linear-gradient(transparent 40%, rgba(233,233,228,.9) 75%) !important; }
  .logo { top: auto !important; bottom: 22vh; right: 50%; transform: translateX(50%) !important; padding: 16px 22px; justify-items: center !important; }
  .logo .l1 { font-size: 44px !important; } .logo .l2 { font-size: 58px !important; }
  .tapstart { right: 50%; transform: translateX(50%); bottom: 9vh !important; } .introfoot { right: 50%; transform: translateX(50%); width: 90vw; text-align: center; }
}
@media (max-width: 700px) { .logo .code { white-space: nowrap; font-size: 10px !important; } .logo small:not(.code) { white-space: nowrap; letter-spacing: .35em !important; } }
/* ═════ 뽑기 레이어: 택티컬 톤 ═════ */
.gacha .gbg { background: #e9e9e4 !important; }
.gacha .gbg::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(30,31,34,.06) 79px 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgba(30,31,34,.06) 79px 80px); }
.gacha .gbg::after { content: "SUMMON // DRAW_001"; position: absolute; left: 28px; top: 22px; font: 400 12px var(--t-mono); letter-spacing: 2px; color: #6b6c70; }
.gacha.best3 .gbg { background: radial-gradient(circle at 50% 45%, #f1e8ff 0%, #e9e9e4 60%) !important; }
.gacha.best4 .gbg { background: radial-gradient(circle at 50% 45%, #fff3c4 0%, #e9e9e4 60%) !important; }
.gacha .grays { background: repeating-conic-gradient(from 0deg, rgba(30,31,34,.05) 0deg 4deg, transparent 4deg 16deg) !important; }
.gacha.best4 .grays { background: repeating-conic-gradient(from 0deg, rgba(255,212,0,.22) 0deg 4deg, transparent 4deg 16deg) !important; }
.gacha .gportal i { border-radius: 0 !important; border: 2px solid #1e1f22 !important; box-shadow: none !important; transform: rotate(45deg); }
.gacha.best3 .gportal i { border-color: #9b5ce6 !important; } .gacha.best4 .gportal i { border-color: #ffd400 !important; }
.gacha .ghead { border: 0 !important; border-image: none !important; background: #1e1f22; padding: 10px 40px !important; clip-path: var(--cut-s); box-shadow: inset 0 -4px 0 #ffd400; }
.gacha .ghead b { color: #fff !important; text-shadow: none !important; font-size: 22px !important; }
.gfxtog { background: transparent !important; border: 1px solid #c9c9c3 !important; border-radius: 0 !important; color: #1e1f22 !important; right: -170px !important; }
.gfxtog::before { border-color: #1e1f22 !important; border-radius: 0 !important; }
.gcard .gback { background: #1e1f22 !important; filter: none !important; clip-path: var(--cut-s); }
.gcard .gback::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 44px var(--disp); color: #ffd400; }
.gcard .gface { background: #f6f6f2 !important; clip-path: var(--cut-s); box-shadow: inset 0 0 0 1px #c9c9c3; padding: 14% 6% 18% !important; }
.gcard .gface::after { content: ""; position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); height: 9px; width: calc(var(--pips) * 15px); background: repeating-linear-gradient(90deg, var(--rc) 0 9px, transparent 9px 15px); }
.gcard.t0 { --rc: #9a9ca1; --pips: 1; } .gcard.t1 { --rc: #4fbf5a; --pips: 2; } .gcard.t2 { --rc: #3a8ee6; --pips: 3; } .gcard.t3 { --rc: #9b5ce6; --pips: 4; } .gcard.t4 { --rc: #ffb000; --pips: 5; }
.gcard.t0 .gface, .gcard.t1 .gface, .gcard.t2 .gface, .gcard.t3 .gface, .gcard.t4 .gface { background-image: none !important; }
.gcard .gface { box-shadow: inset 0 0 0 1px #c9c9c3, inset 0 4px 0 var(--rc) !important; }
.gface b { color: #1e1f22 !important; text-shadow: none !important; } .gface small { color: #6b6c70 !important; } .gface small.new { color: #1e1f22 !important; background: #ffd400; padding: 0 6px; }
.gface em { background: #1e1f22 !important; color: #fff !important; border-radius: 0 !important; }
.gface .gray { background: repeating-conic-gradient(rgba(155,92,230,.18) 0deg 6deg, transparent 6deg 18deg) !important; } .gcard.t4 .gface .gray { background: repeating-conic-gradient(rgba(255,180,0,.3) 0deg 6deg, transparent 6deg 18deg) !important; }
.gacha.reveal .gcard.t3 { filter: drop-shadow(0 0 10px rgba(155,92,230,.7)); } .gacha.reveal .gcard.t4 { filter: drop-shadow(0 0 14px rgba(255,180,0,.9)); }
.gflash { background: #fff !important; } .gpillar { background: linear-gradient(90deg, transparent, rgba(155,92,230,.35) 35%, #fff 50%, rgba(155,92,230,.35) 65%, transparent) !important; }
.gacha.best4 .gpillar { background: linear-gradient(90deg, transparent, rgba(255,212,0,.5) 35%, #fff 50%, rgba(255,212,0,.5) 65%, transparent) !important; }
.gcutband { background: #1e1f22 !important; box-shadow: inset 0 -5px 0 #9b5ce6; } .gacha.best4 .gcutband { box-shadow: inset 0 -5px 0 #ffd400; }
.gcutband b { color: #fff !important; text-shadow: none !important; }
.gcut > small { color: #1e1f22 !important; font-family: var(--t-mono) !important; }
.gacha .gbtns .gbtn { min-width: 170px; min-height: 56px; font-size: 18px !important; }
.gacha .gbtns .gbtn.gold { background: #ffd400 !important; color: #1e1f22 !important; }
.gcard .gface::after { width: calc(var(--pips) * 14px) !important; height: 9px !important; background: none !important; -webkit-mask: none; display: flex; }
.gcard .gface::after { background: repeating-linear-gradient(90deg, var(--rc) 0 9px, transparent 9px 14px) !important; clip-path: none; transform: translateX(-50%) skewX(-12deg); }
.gacha .gbtns .gbtn { display: inline-grid !important; place-items: center; align-content: center; text-align: center; padding: 6px 18px !important; }
.gacha .gbtns .gbtn small { display: inline-flex; align-items: center; gap: 4px; font-size: 13px !important; }
.gcard .gface { border-radius: 0 !important; } .gcard .gback { border-radius: 0 !important; }

/* 버프 칩 v2 (택티컬) */
.buff2 { position: relative; display: inline-flex; align-items: center; gap: 7px; min-width: 150px; max-width: 230px; height: 26px; padding: 0 9px 0 0; background: rgba(30,31,34,.88); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); overflow: hidden; }
.buff2 .bi { width: 26px; height: 26px; display: grid; place-items: center; background: var(--bc); flex: 0 0 auto; } .buff2 .bi .ico { width: 15px !important; height: 15px !important; filter: brightness(0); }
.buff2 b { flex: 1; font: 400 12.5px var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buff2 em { font: 400 11.5px var(--t-mono); font-style: normal; color: #ffd400; }
.buff2 u { position: absolute; left: 26px; bottom: 0; height: 2px; background: var(--bc); text-decoration: none; transition: width .3s linear; }
.buff2.low { animation: bufflow .6s ease-in-out infinite alternate; } @keyframes bufflow { to { opacity: .55; } }
.rightcol .buffs { gap: 4px !important; }
@media (max-width: 700px) { .buff2 { min-width: 0; max-width: 170px; height: 20px; gap: 5px; } .buff2 .bi { width: 20px; height: 20px; } .buff2 b { font-size: 10px; } .buff2 em { font-size: 9.5px; } .buff2 u { left: 20px; } }
/* 로고 이미지 */
.logo .logoimg { width: 420px; max-width: 34vw; display: block; margin-top: 4px; }
.logo { padding: 16px 20px 14px !important; }
@media (max-width: 700px) { .logo .logoimg { width: 76vw; max-width: none; } }
.story .sportimg { height: 300px; display: block; } @media (max-width: 700px) { .story .sportimg { height: 190px; } }

/* ═════ 인트로 v2: 판·노랑 테두리 없이 로고만 ═════ */
.logo { background: none !important; box-shadow: none !important; clip-path: none !important; padding: 0 !important; filter: drop-shadow(0 0 24px rgba(233,233,228,.95)) !important; }
.logo .code { display: none !important; }
.logo .logoimg { width: 520px; max-width: 40vw; }
.tapstart { background: none !important; box-shadow: none !important; clip-path: none !important; padding: 0 !important; display: grid !important; justify-items: center; gap: 4px; color: #1e1f22 !important; font: 400 26px var(--t-mono) !important; letter-spacing: 6px; right: calc(7vw + 120px) !important; animation: tapblink 1.4s ease-in-out infinite; }
.tapstart i { width: 220px; height: 2px; background: linear-gradient(90deg, transparent, #1e1f22, transparent); }
.tapstart small { font: 400 13px var(--disp); letter-spacing: 2px; color: #3a3b3f; }
@keyframes tapblink { 50% { opacity: .35; } }
@media (max-width: 700px) { .logo .logoimg { width: 86vw; max-width: none; } .tapstart { right: 50% !important; transform: translateX(50%) !important; font-size: 20px !important; letter-spacing: 4px; } }
#loading { background: #e9e9e4 !important; color: #1e1f22 !important; }
#loading .spinner { display: none; }
#loading::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(30,31,34,.06) 79px 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgba(30,31,34,.06) 79px 80px); }
.ldbox { position: relative; display: grid; gap: 10px; justify-items: center; }
.ldbox small { font: 400 12px var(--t-mono); letter-spacing: 3px; color: #6b6c70; }
.ldbox b { font: 400 54px var(--disp); color: #1e1f22; }
.ldbar { width: 280px; height: 6px; background: rgba(30,31,34,.15); overflow: hidden; } .ldbar i { display: block; height: 100%; width: 40%; background: #1e1f22; animation: ldmove 1.1s ease-in-out infinite; }
@keyframes ldmove { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.ldbox span { font: 400 14px var(--disp); color: #3a3b3f; } .ldbox .bc { width: 160px; height: 14px; }
/* ═════ 뽑기 30회: 화면 안에 맞춤 ═════ */
.gacha { grid-template-rows: auto minmax(0, 1fr) auto !important; }
.gacha .ggrid { max-height: 100%; overflow-y: auto; padding: 6px; align-self: center; }
.gacha.many .ggrid { grid-template-columns: repeat(10, minmax(0, 96px)) !important; gap: 8px !important; }
.gacha.many .gface b { font-size: 11px !important; } .gacha.many .gface small { font-size: 9px !important; }
@media (max-width: 700px) { .gacha.many .ggrid { grid-template-columns: repeat(5, 17.4vw) !important; } }
/* ═════ 던전 ═════ */
.sheet .dgcard { background: #f6f6f2 !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px #c9c9c3 !important; clip-path: var(--cut-s); height: 92px !important; }
.sheet .dgcard.on { box-shadow: inset 0 0 0 2px #1e1f22, inset 5px 0 0 #ffd400 !important; }
.sheet .dgcard .dgimg { width: 118px; }
.sheet .dgcard b { color: #1e1f22 !important; font-size: 17px !important; } .sheet .dgcard small { color: #4e4f53 !important; font-size: 12px !important; }
.sheet .dgcard .dgleft { color: #1e1f22 !important; background: #ffd400; padding: 0 6px; justify-self: start; font-size: 12px !important; }
.sheet .dgdetail { border: 0 !important; border-radius: 0 !important; clip-path: var(--cut); background: #1e1f22 !important; }
.sheet .dgdetail .dgbody { background: linear-gradient(rgba(30,31,34,0), #1e1f22 35%) !important; gap: 10px !important; }
.sheet .dgtitle b { color: #fff !important; font-size: 30px !important; } .sheet .dgtitle small { color: #ffd400 !important; font-size: 14px !important; }
.sheet .dgdetail p { color: #e2e2dc !important; font-size: 15px !important; }
.sheet .zone { background: #2a2b2f !important; border-radius: 0 !important; padding: 8px 12px !important; }
.sheet .zone b { color: #fff !important; font-size: 22px !important; } .sheet .zone small { color: #c9c9c3 !important; font-size: 13px !important; }
.sheet .zone .arrow { width: 44px !important; height: 40px !important; border-radius: 0 !important; background: #ffd400 !important; color: #1e1f22 !important; font-size: 15px !important; }
.sheet .zone .arrow:disabled { background: #3a3b3f !important; color: #6b6c70 !important; }
.sheet .dgdetail .kv span { background: #2a2b2f !important; color: #fff !important; box-shadow: none !important; padding: 5px 10px !important; font-size: 13.5px !important; } .sheet .dgdetail .kv span b { color: #ffd400 !important; }
.sheet .dgdetail .btns { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px !important; }
.sheet .dgdetail .btns .gbtn { min-height: 56px !important; font-size: 18px !important; }
.sheet .dgdetail .btns .gbtn:only-child { grid-column: 1 / -1; }
.sheet .chcard { background: #f6f6f2 !important; border: 0 !important; border-radius: 0 !important; color: #1e1f22 !important; box-shadow: inset 0 0 0 1px #c9c9c3, inset 6px 0 0 #1e1f22 !important; clip-path: var(--cut-s); grid-template-columns: 96px 1fr 180px !important; padding: 16px 18px !important; }
.sheet .chcard.ch-rush { box-shadow: inset 0 0 0 1px #c9c9c3, inset 6px 0 0 #e2453c !important; } .sheet .chcard.ch-daily { box-shadow: inset 0 0 0 1px #c9c9c3, inset 6px 0 0 #ffd400 !important; }
.sheet .chico { width: 96px !important; height: 96px !important; background: #1e1f22 !important; clip-path: var(--cut-s); }
.sheet .chbody b { color: #1e1f22 !important; text-shadow: none !important; font-size: 22px !important; } .sheet .chbody small { color: #4e4f53 !important; font-size: 13px !important; } .sheet .chbody p { color: #2a2b2f !important; font-size: 14px !important; }
.sheet .chbtn .gbtn { min-height: 60px !important; width: 100%; font-size: 20px !important; } .sheet .chbtn small { color: #4e4f53 !important; font-size: 12px !important; }
@media (max-width: 700px) { .sheet .chcard { grid-template-columns: 64px 1fr !important; } .sheet .chico { width: 64px !important; height: 64px !important; } .sheet .dgdetail .btns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 박멸 던전 */
.sheet .cleanhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #1e1f22; color: #fff; padding: 12px 16px; clip-path: var(--cut-s); margin-bottom: 10px; border: 0 !important; border-radius: 0 !important; }
.sheet .cleanhead b { color: #fff !important; font: 400 22px var(--disp) !important; } .sheet .cleanhead small { color: #c9c9c3 !important; font-size: 13px !important; display: block; }
.sheet .cleanhead .btns .gbtn { min-height: 48px; font-size: 15px !important; }
.sheet .dgdetail .dgart { min-height: 220px; }
.sheet .dgdetail .btns .gbtn.green:only-child { min-height: 60px !important; font-size: 20px !important; }
.sheet .item small { line-height: 1.35; }

.ldbox .ldlogo { width: 380px; max-width: 80vw; }
.sheet .dgdetail ~ .grid.small, .sheet h3.sec + .grid.small { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.sheet .grid.small .item { min-height: 150px; } .sheet .grid.small .item b { font-size: 14px !important; white-space: normal !important; } .sheet .grid.small .item small { font-size: 12px !important; }
/* ═════ 왼쪽 강조 막대 전면 제거 (2026-11-04): 선택 상태는 전체 테두리로 ═════ */
.buff, .report, #toast, #gateBanner, .discover, .story .sbox, .story.villain .sbox, .rhead.win, .rhead.lose, .sheet .note { border-left: 0 !important; }
.sheethead h3 { box-shadow: inset 0 0 0 1px var(--t-line) !important; }
.perk:hover { box-shadow: inset 0 0 0 2px var(--t-ink) !important; }
.sheet .row.done, .sheet .lrow.me, .sheet .petcard.on, .sheet .stagecard.cur, .sheet .dgcard.on, .skrow.sel, .mrow.ready { box-shadow: inset 0 0 0 2px var(--t-ink) !important; }
.sheet .vtab.on { box-shadow: inset 0 0 0 2px var(--t-ink) !important; }
.sheet[data-p="equip"] .tab[aria-selected="true"] { box-shadow: none !important; }
.sheet .phead { box-shadow: none !important; }
.sheet .chcard, .sheet .chcard.ch-rush, .sheet .chcard.ch-daily { box-shadow: inset 0 0 0 1px #c9c9c3 !important; }
.questcard.done::before { display: none !important; }
.buff2 .bi { background: transparent !important; } .buff2 .bi .ico { filter: none !important; } .buff2 { padding-left: 4px; }
.pickhint { background: transparent !important; box-shadow: inset 0 0 0 2px var(--t-ink); }
.logo { box-shadow: none !important; }

.rhead, .rhead.win, .rhead.lose { box-shadow: none !important; border-left: 0 !important; }
.resultbox .rbtns .gbtn { min-height: 58px; font-size: 17px !important; display: grid !important; align-content: center; } .resultbox .rbtns .gbtn small { font-size: 12px !important; opacity: .85; }

/* ═════ 신화·초월 / 방어구 / 보유 효과 / 펫 확장 / 열쇠 (2026-11-04) ═════ */
.eqtiles.flow { gap: 6px !important; }
.eqtiles.flow .eqtile { clip-path: none !important; box-shadow: inset 0 0 0 1px #cfcfca, inset 0 3px 0 var(--rc, #9a9ca1) !important; }
.eqtile.r0 { --rc: #9a9ca1; } .eqtile.r1 { --rc: #4fbf5a; } .eqtile.r2 { --rc: #3a8ee6; } .eqtile.r3 { --rc: #9b5ce6; } .eqtile.r4 { --rc: #ffb000; } .eqtile.r5 { --rc: #ff3d6e; } .eqtile.r6 { --rc: #00d6c8; }
.eqtile.r5:not(.dim) { background: radial-gradient(circle at 50% 40%, #fff, #ffe1e8) !important; } .eqtile.r6:not(.dim) { background: radial-gradient(circle at 50% 40%, #fff, #d8fbf7) !important; }
.eqtile.r5 .ico, .eqtile.r6 .ico { filter: hue-rotate(var(--hr, 0deg)) saturate(1.3) drop-shadow(0 0 6px var(--rc)); } .eqtile.r5 { --hr: 300deg; } .eqtile.r6 { --hr: 150deg; }
.eqtiles.flow .eqtile.sel { box-shadow: inset 0 0 0 2px var(--t-ink), inset 0 3px 0 var(--rc) !important; }
.eqtiles.hyb { margin-top: 6px; }
.pips.mythp { display: flex; align-items: center; gap: 4px; } .pips.mythp b { font: 400 10px var(--disp); color: var(--rc); } .pips.mythp i { background: var(--rc) !important; }
.mythp.t5 b { color: #ff3d6e; } .mythp.t6 b { color: #00b8ac; }
.gbtn.myth { background: #ff3d6e !important; color: #fff !important; } .gbtn.trans { background: #00d6c8 !important; color: #1e1f22 !important; }
.ownbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--t-line); font: 400 14px var(--disp); color: var(--t-ink); }
.ownbar .li { width: 20px; height: 20px; } .ownbar b { font: 400 18px var(--disp); color: var(--t-ink); background: #ffd400; padding: 0 8px; } .ownbar small { color: #4e4f53 !important; flex: 1; font-size: 12px !important; }
.armparts { position: relative; z-index: 2; display: flex; gap: 6px; padding: 0 16px 10px; } .armparts span { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); padding: 4px 10px 4px 4px; color: #fff; font: 400 13px var(--disp); } .armparts i { font-style: normal; font-size: 12px; }
.eqtile .lv { position: absolute; right: 6px; top: 6px; font: 400 11px var(--t-mono); color: var(--t-ink); background: #ffd400; padding: 0 4px; }
/* 펫 탭 */
.dexbar { background: #1e1f22; color: #fff; padding: 14px 16px; display: grid; gap: 6px; clip-path: var(--cut-s); } .dexbar b { font: 400 20px var(--disp); } .dexbar span { color: #c9c9c3; font: 400 13px var(--disp); }
.dexrw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .dexnode { border: 0; background: #2a2b2f; color: #c9c9c3; padding: 8px; display: grid; gap: 2px; cursor: pointer; } .dexnode b { font: 400 15px var(--disp); color: #fff; } .dexnode small { font-size: 12px !important; color: #c9c9c3 !important; }
.dexnode.ready { background: #ffd400; } .dexnode.ready b, .dexnode.ready small { color: #1e1f22 !important; } .dexnode.got { opacity: .45; }
.dexgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .dexcell { background: #f6f6f2; box-shadow: inset 0 0 0 1px #c9c9c3; display: grid; justify-items: center; padding: 8px 4px; } .dexcell b { font: 400 14px var(--disp); color: #1e1f22; } .dexcell small { color: #4e4f53 !important; } .dexcell.off .ico { filter: grayscale(1) brightness(1.4) opacity(.35); }
.explist { display: grid; gap: 6px; } .expslot { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #f6f6f2; box-shadow: inset 0 0 0 1px #c9c9c3; padding: 8px 12px; } .expslot b { font: 400 16px var(--disp); color: #1e1f22; display: block; } .expslot small { color: #4e4f53 !important; }
.expslot.empty { grid-template-columns: 1fr; height: 60px; box-shadow: inset 0 0 0 1.5px #c9c9c3; background: transparent; outline: 2px dashed #c9c9c3; outline-offset: -6px; } .expslot.empty span { text-align: center; color: #6b6c70; font: 400 14px var(--disp); }
.expwait { background: #1e1f22; color: #ffd400; padding: 8px 14px; font: 400 14px var(--disp); }
.expform { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; } .expcol { display: grid; gap: 6px; align-content: start; background: #f6f6f2; box-shadow: inset 0 0 0 1px #c9c9c3; padding: 10px; } .expcol > small { font: 400 13px var(--disp) !important; color: #1e1f22 !important; }
.exppets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .exppets button, .expopts button { border: 0; background: #fff; box-shadow: inset 0 0 0 1px #c9c9c3; padding: 6px; cursor: pointer; font: 400 14px var(--disp); color: #1e1f22; display: grid; justify-items: center; } .exppets button.on, .expopts button.on { box-shadow: inset 0 0 0 2px #1e1f22; background: #ffd400; } .expopts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .expopts button:disabled { opacity: .4; }
.exprw div { font: 400 15px var(--disp); color: #1e1f22; display: flex; justify-content: space-between; } .exprw em { font-style: normal; background: #ffd400; padding: 2px 8px; font: 400 13px var(--disp); } .exprw .gbtn { margin-top: 6px; min-height: 52px; }
.awkgrid, .pshop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .awkcard, .pshopcard { background: #f6f6f2; box-shadow: inset 0 0 0 1px #c9c9c3; display: grid; justify-items: center; gap: 4px; padding: 10px; text-align: center; } .awkcard b, .pshopcard b { font: 400 17px var(--disp); color: #1e1f22; } .awkcard small, .pshopcard small { color: #4e4f53 !important; font-size: 12px !important; } .awkcard.off { opacity: .45; } .awkcard .gbtn, .pshopcard .gbtn { width: 100%; }
.pshop { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pickpets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; } .pickpets button { border: 0; background: #fff; box-shadow: inset 0 0 0 1px #c9c9c3; padding: 2px; cursor: pointer; } .pickpets button:hover { box-shadow: inset 0 0 0 2px #1e1f22; } .pickpets button:disabled { opacity: .4; }
/* 던전 열쇠 */
.dgleft { display: inline-flex !important; align-items: center; gap: 4px; } .dgleft .kname { font-style: normal; font-size: 11px; } .dgleft .ico { width: 16px !important; height: 16px !important; }
@media (max-width: 700px) {
  .eqtiles.five, .eqtiles.five.flow { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; } .eqtiles.flow .eqtile .nm { font-size: 8.5px !important; } .eqtiles.flow .eqtile .ico { width: 82% !important; }
  .dexgrid { grid-template-columns: repeat(3, 1fr); } .expform { grid-template-columns: 1fr; } .awkgrid { grid-template-columns: repeat(2, 1fr); } .pshop { grid-template-columns: 1fr; } .dexrw { grid-template-columns: repeat(2, 1fr); }
}
/* ═════ 스킬 HUD: 평행사변형, PC 1열 ═════ */
.skillcluster .sk, .skillcluster .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .dashbtn { border-radius: 0 !important; clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); border: 0 !important; box-shadow: none !important; background: rgba(30,31,34,.92) !important; }
.skillcluster .sk::before, .skillcluster .autobtn::before, .skillcluster .dashbtn::before { content: ""; position: absolute; inset: 0; clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%, 0 0, 3px 3px, 3px calc(100% - 3px), calc(78% - 2px) calc(100% - 3px), calc(100% - 4px) 3px, calc(22% + 2px) 3px, 3px 3px); background: #55565b; pointer-events: none; }
.skillcluster .sk.ready::before { background: #ffd400; } .skillcluster .sk.react::before { background: #fff; }
.skillcluster .autobtn.on::before { background: #ffd400; } .skillcluster .autobtn.on::after { display: none; }
.skillcluster .sk .cd, .skillcluster .dashbtn .cd { inset: 0 !important; -webkit-mask: none !important; mask: none !important; border-radius: 0 !important; background: linear-gradient(to top, rgba(255,212,0,.45) calc((100 - var(--cd, 0)) * 1%), rgba(0,0,0,.55) calc((100 - var(--cd, 0)) * 1%)) !important; }
.skillcluster .sk:not(.cooling) .cd, .skillcluster .dashbtn.ready .cd { background: none !important; }
@media (min-width: 701px) {
  .skillcluster { grid-template-columns: repeat(8, 74px) !important; grid-auto-rows: 58px !important; gap: 0 2px !important; bottom: 126px !important; }
  .skillcluster .sk, .skillcluster .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .dashbtn { width: 74px !important; height: 58px !important; grid-row: 1 !important; }
  .skillcluster #autoB { grid-column: 6 !important; } .skillcluster #dashBtn { grid-column: 7 !important; } .skillcluster #autoS { grid-column: 8 !important; }
  .skillcluster .sk .ico { width: 38px !important; height: 38px !important; }
  body.panelopen .skillcluster { grid-template-columns: repeat(8, 56px) !important; grid-auto-rows: 44px !important; }
  body.panelopen .skillcluster .sk, body.panelopen .skillcluster .autobtn, body.panelopen .skillcluster .autobtn.big, body.panelopen .skillcluster #autoS, body.panelopen .skillcluster .dashbtn { width: 56px !important; height: 44px !important; }
  body.panelopen .skillcluster .sk .ico { width: 28px !important; height: 28px !important; }
}
@media (max-width: 700px) { .skillcluster .sk, .skillcluster .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .dashbtn { width: 54px !important; } .skillcluster { grid-template-columns: repeat(5, 54px) !important; gap: 6px 2px !important; } }

/* ═════ 강화 레벨 · 제로피스 (2026-11-04) ═════ */
.lvbox { background: #2a2b2f; padding: 10px 12px; display: grid; gap: 8px; margin-top: 6px; }
.lvtop { display: flex; align-items: baseline; gap: 6px; color: #fff; } .lvtop b { font: 400 18px var(--disp); color: #ffd400; } .lvtop small { color: #9a9ca1 !important; } .lvtop em { margin-left: auto; font-style: normal; font: 400 12px var(--disp); color: #c9c9c3; }
.lvseg { height: 6px; background: repeating-linear-gradient(90deg, #3a3b3f 0 calc(4% - 2px), transparent calc(4% - 2px) 4%); position: relative; } .lvseg i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, #ffd400 0 calc(4% - 2px), transparent calc(4% - 2px) 4%); background-size: 2500% 100%; }
.lvbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .lvbtns .gbtn { min-height: 46px; } .lvbtns .gbtn small { display: block; font-size: 11px !important; }
.eqtile .ilv { position: absolute; left: 4px; top: 4px; font: 400 10px var(--t-mono); line-height: 14px; color: #fff; background: #1e1f22; padding: 0 4px; z-index: 2; width: auto; height: auto; }
.zerobox { background: #1e1f22; padding: 12px; display: grid; gap: 10px; clip-path: var(--cut-s); }
.zhead { display: flex; align-items: center; gap: 12px; color: #fff; } .zhead > div { flex: 1; } .zhead b { font: 400 20px var(--disp); display: block; } .zhead small { color: #c9c9c3 !important; font-size: 12px !important; }
.zgem { width: 34px; height: 34px; background: linear-gradient(135deg, #ff3d6e, #00d6c8); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 12px #ff3d6e; }
.zerobox .eqtiles.flow { gap: 6px !important; } .zcell { display: grid; gap: 4px; } .zcell .gbtn { min-height: 34px; font-size: 13px !important; }
.zrand { display: flex; align-items: center; gap: 12px; background: #2a2b2f; padding: 10px 12px; color: #fff; } .zrand > div { flex: 1; } .zrand b { font: 400 16px var(--disp); display: block; } .zrand small { color: #c9c9c3 !important; font-size: 12px !important; }
.zrand .gbtn { min-width: 150px; min-height: 48px; }
/* 방어구 뽑기 배너의 부위 칩은 아래쪽에 */
.bigbanner .armparts { position: absolute; left: 16px; right: 16px; bottom: 96px; padding: 0; flex-wrap: wrap; }
.bigbanner .armparts span { background: rgba(30,31,34,.85); }
@media (max-width: 700px) { .bigbanner .armparts { bottom: 128px; } .bigbanner .armparts span { font-size: 11px; } .zrand { flex-wrap: wrap; } .zrand .gbtn { width: 100%; } }
.sheet .vtab[data-t="armor"] { --li: url(../assets/final/ui/li/equip.webp); }
/* 복합 도구 안내 */
.hybinfo { background: #1e1f22; color: #fff; padding: 12px 14px; display: grid; gap: 10px; clip-path: var(--cut-s); margin-bottom: 8px; }
.hybex { display: flex; align-items: center; gap: 12px; } .hybex b { font: 400 18px var(--disp); color: #ffd400; display: block; } .hybex small { color: #e2e2dc !important; font-size: 13px !important; }
.hybinfo ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hybinfo li { background: #2a2b2f; padding: 8px 10px; font: 400 12.5px var(--disp); color: #c9c9c3; } .hybinfo li b { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
@media (max-width: 700px) { .hybinfo ul { grid-template-columns: 1fr; } }

.lvtop { flex-wrap: wrap; } .lvtop em { margin-left: 0 !important; flex-basis: 100%; }
.lvbtns .gbtn small { color: inherit !important; opacity: .75; }

/* ═════ 시너지 고리 · 각인 · 합성 내부 탭 (2026-11-04) ═════ */
.synpanel { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: center; background: #1e1f22; padding: 8px 14px 8px 8px; clip-path: var(--cut-s); }
.ringsvg { width: 100%; max-width: 230px; display: block; margin: 0 auto; font-family: var(--disp); }
.ringsvg .lk { stroke: #3a3b3f; stroke-width: 3; stroke-dasharray: 4 5; } .ringsvg .lk.on { stroke: #ffd400; stroke-width: 5; stroke-dasharray: none; }
.ringsvg .pb rect { fill: #ffd400; } .ringsvg .pb text { fill: #1e1f22; font-size: 11px; text-anchor: middle; }
.ringsvg .nd { fill: #2a2b2f; stroke: #4e4f53; stroke-width: 2; } .ringsvg .nd.on { fill: var(--ec); stroke: #fff; stroke-width: 2.5; }
.ringsvg .nc { fill: #6b6c70; font-size: 17px; text-anchor: middle; } .ringsvg .nc.on { fill: #1e1f22; } .ringsvg .ni { font-size: 11px; fill: #fff; }
.ringsvg .nl { font-size: 13px; text-anchor: middle; } .ringsvg .nm2 { fill: #fff; font-size: 11.5px; text-anchor: middle; font-family: var(--t-mono); }
.ringsvg .ct { fill: #fff; font-size: 22px; text-anchor: middle; } .ringsvg .cs { fill: #9a9ca1; font-size: 11px; text-anchor: middle; }
.dpanel .ringsvg, .eqdetail .ringsvg { max-width: 220px; background: #26272b; margin: 8px auto; }
.synside { display: grid; gap: 10px; align-content: center; }
.synchips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc { display: inline-flex; align-items: center; gap: 5px; background: #2a2b2f; color: #fff; padding: 5px 9px; font: 400 13px var(--disp); }
.sc i { width: 9px; height: 9px; transform: rotate(45deg); display: inline-block; } .sc b { color: #ffd400; font-weight: 400; margin-left: 4px; } .sc.pr { background: #33342a; } .sc.none { color: #9a9ca1; }
.synbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .synbtns .gbtn { min-height: 44px; }
.hitsum { display: flex; align-items: baseline; gap: 8px; color: #c9c9c3; } .hitsum small { font-size: 12px !important; color: #9a9ca1 !important; } .hitsum b { font: 400 20px var(--t-mono); color: #fff; }
.eqtile .plus { font: 400 34px var(--disp); color: #9a9ca1; display: grid; place-items: center; flex: 1; } .eqtile .plus .li { width: 30px; height: 30px; background: #9a9ca1; }
.eqtile .impdot { position: absolute; right: 6px; bottom: 26px; width: 12px; height: 12px; background: var(--ec); transform: rotate(45deg); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1e1f22; z-index: 2; }
.eqtile.sel2 { box-shadow: inset 0 0 0 3px #ffd400, inset 0 3px 0 var(--rc) !important; }
.subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #d9d9d3; padding: 3px; }
.subtabs button { border: 0; background: transparent; padding: 10px; font: 400 15px var(--disp); color: #4e4f53; cursor: pointer; } .subtabs button.on { background: #1e1f22; color: #ffd400; }
.impslots { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: center; gap: 4px; background: #1e1f22; padding: 12px; clip-path: var(--cut-s); }
.impslots .op { color: #ffd400; font: 400 26px var(--disp); text-align: center; }
.impslots .eqtile { aspect-ratio: 1 / 1.1; } .impslots .eqtile.empty { background: #2a2b2f !important; box-shadow: inset 0 0 0 2px #3a3b3f !important; outline: 2px dashed #4e4f53; outline-offset: -8px; }
.impslots .eqtile.empty.pick { outline-color: #ffd400; }
.elpair { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; } .elpair i { width: 16px; height: 16px; transform: rotate(45deg); box-shadow: 0 0 0 2px #1e1f22; } .elpair i.q { background: #fff; color: #1e1f22; font: 400 11px var(--disp); font-style: normal; display: grid; place-items: center; }
.impch { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; background: #2a2b2f; padding: 10px 12px; margin: 6px 0; }
.impch small { color: #9a9ca1 !important; } .impch b { font: 400 34px var(--t-mono); color: #ffd400; grid-row: span 2; text-align: right; } .impch span { color: #c9c9c3; font: 400 12px var(--disp); }
.warn { background: #3a2a1e; color: #ffb36b; padding: 6px 10px; font: 400 13px var(--disp); margin-top: 6px; }
.armbtns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; } .armbtns .gbtn { min-height: 44px; }
.eqtiles.slots .eqtile .eqb { left: 6px; right: auto; }
@media (max-width: 700px) {
  .synpanel { grid-template-columns: 150px minmax(0, 1fr); padding: 6px; gap: 8px; } .sc { font-size: 11.5px; padding: 4px 7px; }
  .synbtns { grid-template-columns: 1fr; } .impslots { padding: 8px; grid-template-columns: 1fr 18px 1fr 18px 1fr; } .impch b { font-size: 26px; }
}

/* ═════ 내 정보 · 닉네임 · 계정 대화창 ═════ */
.prcard { background: #1e1f22; color: #fff; padding: 14px 16px; display: grid; gap: 8px; clip-path: var(--cut-s); margin-bottom: 8px; }
.prcard > small { font: 400 11px var(--t-mono); letter-spacing: 2px; color: #9a9ca1 !important; }
.prcard .nrow { display: flex; align-items: center; gap: 12px; } .prcard .nrow > b { font: 400 28px var(--disp); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prcard .nrow > div { flex: 1; min-width: 0; } .prcard .nrow > div b { font: 400 17px var(--disp); display: block; } .prcard .nrow > div span { color: #c9c9c3; font: 400 12.5px var(--disp); }
.prcard .gbtn { min-height: 44px; } .prcard .tip { color: #9a9ca1 !important; margin: 0; }
.rwtag { justify-self: start; background: #ffd400; color: #1e1f22; padding: 3px 10px; font: 400 13px var(--disp); }
.gmark { width: 42px; height: 42px; display: grid; place-items: center; background: #fff; color: #4285f4; font: 700 22px Arial, sans-serif; flex: none; } .gmark.off { background: #3a3b3f; color: #6b6c70; }
.recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .recs div { background: #2a2b2f; padding: 8px 10px; } .recs small { display: block; color: #9a9ca1 !important; font-size: 11.5px !important; } .recs b { font: 400 17px var(--disp); }
.dlgwrap { position: fixed; inset: 0; z-index: 400; background: rgba(20,21,24,.6); display: grid; place-items: center; padding: 16px; animation: dlgin .16s ease-out; }
@keyframes dlgin { from { opacity: 0; } }
.dlg { width: min(420px, 100%); background: #efefea; clip-path: var(--cut); display: grid; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.dlghead { display: flex; align-items: center; background: #1e1f22; color: #fff; padding: 12px 16px; border-bottom: 3px solid #ffd400; } .dlghead b { flex: 1; font: 400 19px var(--disp); }
.dlghead button { border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer; width: 36px; height: 36px; }
.dlgbody { padding: 16px; display: grid; gap: 8px; color: #1e1f22; font: 400 15px var(--disp); } .dlgbody p { margin: 0; } .dlgbody .y { background: #ffd400; padding: 0 4px; font-weight: 400; }
.nickin { font: 400 22px var(--disp); padding: 12px 14px; border: 0; box-shadow: inset 0 0 0 2px #1e1f22; background: #fff; color: #1e1f22; outline: none; width: 100%; box-sizing: border-box; } .nickin:focus { box-shadow: inset 0 0 0 3px #ffd400, inset 0 0 0 5px #1e1f22; }
.nickmsg { font: 400 13.5px var(--disp); min-height: 18px; color: #4e4f53; } .nickmsg.good { color: #2e8f3e; } .nickmsg.bad { color: #d23b33; }
.dlgbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 16px; } .dlgbtns .gbtn { min-height: 50px; font-size: 16px !important; } .dlgbtns .gbtn:only-child { grid-column: 1 / -1; }
.gsibox { display: grid; justify-items: center; gap: 8px; min-height: 48px; padding: 6px 0; } .gsiwait { color: #6b6c70; font: 400 13px var(--disp); }
@media (max-width: 700px) { .recs { grid-template-columns: repeat(2, 1fr); } .prcard .nrow > b { font-size: 22px; } }
.prcard { text-align: left; justify-items: stretch; width: 100%; box-sizing: border-box; } .prcard > small { text-align: left; }
.rwtag, .prcard .gbtn small { display: inline-flex !important; align-items: center; gap: 4px; justify-self: start; }
.rwtag .ico, .prcard .ico, .dlg .ico { width: 16px !important; height: 16px !important; min-width: 0 !important; flex: none; }
.prcard .nrow .gbtn { flex: none; min-width: 120px; }
.recs { width: 100%; }

/* ═════ 상점 뽑기 아래 정보 ═════ */
.ginfo { display: grid; gap: 8px; margin-top: 8px; }
.gisec { background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 12px 14px; display: grid; gap: 10px; }
.gihead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .gihead b { font: 400 16px var(--disp); color: #1e1f22; } .gihead span { font: 400 12.5px var(--disp); color: #6b6c70; }
.glvgrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.glv { display: grid; justify-items: center; gap: 1px; background: #f6f6f2; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 6px 2px; } .glv small { font: 400 11px var(--t-mono); color: #6b6c70 !important; } .glv b { font: 400 13px var(--t-mono); } .glv span { font: 400 10.5px var(--disp); color: #9a9ca1; }
.glv.done { opacity: .55; } .glv.on { background: #1e1f22; box-shadow: inset 0 0 0 2px #ffd400; } .glv.on small, .glv.on span { color: #ffd400 !important; }
.gilegend { font: 400 12px var(--disp); color: #6b6c70; display: flex; align-items: center; gap: 6px; } .gilegend i { width: 8px; height: 8px; transform: rotate(45deg); }
.gown { display: grid; gap: 6px; } .gown > div { display: grid; grid-template-columns: 42px 1fr 52px; align-items: center; gap: 10px; font: 400 14px var(--disp); } .gown b { font: 400 13px var(--t-mono); color: #1e1f22; text-align: right; }
.gobar { height: 8px; background: #e6e6e1; } .gobar i { display: block; height: 100%; }
.tipline { font: 400 13px var(--disp); color: #4e4f53; padding: 10px 14px; }
.sheet .vtab .vs { display: none !important; }
/* ═════ 상점 모바일 정비 ═════ */
@media (max-width: 700px) {
  .sheet .shopfull { display: flex !important; flex-direction: column; gap: 8px !important; }
  .sheet .shopfull .vtabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 4px !important; padding: 4px !important; background: #e3e3de !important; box-shadow: none !important; scrollbar-width: none; flex: none; -webkit-overflow-scrolling: touch; }
  .sheet .shopfull .vtabs::-webkit-scrollbar { display: none; }
  .sheet .shopfull .vtab { flex: none !important; min-height: 40px !important; padding: 0 14px !important; flex-direction: row !important; gap: 6px !important; white-space: nowrap; background: transparent !important; box-shadow: none !important; clip-path: none !important; }
  .sheet .shopfull .vtab .vl { display: none !important; } .sheet .shopfull .vtab .vs { display: inline !important; font: 400 15px var(--disp) !important; }
  .sheet .shopfull .vtab.on { background: #1e1f22 !important; } .sheet .shopfull .vtab.on span { color: #ffd400 !important; } .sheet .shopfull .vtab.on::after, .sheet .shopfull .vtab::before { display: none !important; }
  .sheet .shopfull .vtab .li, .sheet .shopfull .vtab::before { width: 18px !important; height: 18px !important; }
  .sheet .shopmain { flex: 1; min-height: 0; overflow-y: auto; }
  .sheet .bigbanner .bntop { min-height: 210px !important; }
  .sheet .bigbanner .bntitle small { white-space: normal !important; line-height: 1.35; letter-spacing: 0 !important; font-size: 10.5px !important; display: block; max-width: 70%; }
  .sheet .bigbanner .bntitle b { font-size: 26px !important; }
  .sheet .bigbanner .ratebox { display: none !important; }
  .sheet .buyrow { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; }
  .sheet .buyrow .glvbar { grid-column: 1 / -1; }
  .sheet .buyrow .gbtn { min-height: 58px !important; padding: 4px !important; }
  .glvgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gisec { padding: 10px; }
}

.rrates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .rrates div { background: #f6f6f2; box-shadow: inset 0 0 0 1px #d9d9d3; display: grid; justify-items: center; padding: 6px 2px; } .rrates small { font: 400 12px var(--disp) !important; } .rrates b { font: 400 14px var(--t-mono); color: #1e1f22; }
@media (max-width: 700px) { .sheet .buyrow { display: flex !important; flex-wrap: wrap; } .sheet .buyrow .glvbar { flex-basis: 100%; } .sheet .buyrow .gbtn { flex: 1 1 0; min-width: 0; } }

/* ═════ 합성 화면 구조 (내부 탭은 맨 위 줄) ═════ */
.eqshell.mg { grid-template-rows: auto minmax(0, 1fr); } .eqshell.mg .eqtop { grid-column: 1 / -1; padding: 14px 22px 0; }
.eqshell.mg .eqgrid { grid-row: 2; } .eqshell.mg .eqstat { grid-row: 1 / span 2; grid-column: 2; }
.eqtile.empty:has(.plus)::after { content: none !important; }
@media (max-width: 700px) {
  .eqshell { flex-direction: column !important; } .eqshell .eqtop { order: 0; padding: 10px 10px 0 !important; } .eqshell .eqstat { order: 1; } .eqshell .eqgrid { order: 2; }
  .eqshell .eqstat.none, .eqshell .eqstat:has(.impnone) { display: none !important; }
  .eqshell.mg .eqstat { display: block !important; padding: 12px !important; }
  .eqshell.mg .eqstat h4, .eqshell.mg .eqstat .st, .eqshell.mg .eqstat .set { display: flex !important; }
  .eqshell.mg .eqstat .set { display: block !important; }
  .eqshell.mg .mergeprev { grid-template-columns: auto auto auto !important; justify-content: center; padding: 10px !important; }
  .eqshell.mg .mergeprev .mats { grid-auto-flow: column; } .eqshell.mg .mergeprev .mats .ico { width: 40px !important; height: 40px !important; }
  .eqshell.mg .mergeprev .res .ico { width: 64px !important; height: 64px !important; }
  .eqshell.mg .eqstat .dname { margin: 8px 0; } .eqshell.mg .eqstat .dbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .eqshell.mg .eqstat .dbtns .gbtn { min-height: 48px; }
  .eqshell.mg .eqstat .dart { height: 96px; display: grid; place-items: center; } .eqshell.mg .eqstat .dart .ico { width: 80px !important; height: 80px !important; }
  .eqshell.imp .eqstat { display: grid !important; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
  .eqshell.imp .eqstat > * { grid-column: 1 / -1; } .eqshell.imp .eqstat > .dart { grid-column: 1; } .eqshell.imp .eqstat > .dname { grid-column: 2; align-self: center; }
  .eqshell.imp .ringsvg { max-width: 210px !important; }
}
@media (min-width: 701px) { .eqshell.mg .eqtop { grid-column: 1 !important; grid-row: 1 !important; } .eqshell.mg .eqgrid { grid-column: 1 !important; grid-row: 2 !important; overflow-y: auto; } .eqshell.mg .eqstat { grid-column: 2 !important; grid-row: 1 / span 2 !important; } }

/* ═════ 상점 패키지 v2 ═════ */
.vipcard { display: flex; gap: 14px; align-items: center; background: #1e1f22; color: #fff; padding: 12px 16px; clip-path: var(--cut-s); margin-bottom: 10px; }
.viplv { display: grid; justify-items: center; background: #ffd400; color: #1e1f22; width: 60px; padding: 6px 0; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); } .viplv small { font: 400 10px var(--t-mono); color: #1e1f22 !important; } .viplv b { font: 400 28px var(--disp); line-height: 1; }
.vipinfo { flex: 1; display: grid; gap: 5px; min-width: 0; } .vipinfo b { font: 400 15px var(--disp); } .vipinfo small { color: #c9c9c3 !important; font-size: 12px !important; } .vipinfo .plvbar { height: 6px; }
.pkrow3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pksec { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 2px solid #1e1f22; } .pksec b { font: 400 19px var(--disp); color: #1e1f22; } .pksec span { font: 400 12.5px var(--disp); color: #6b6c70; }
.pkgrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pk2 { position: relative; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3, inset 0 4px 0 var(--pc, #1e1f22); padding: 14px 12px 12px; display: grid; gap: 8px; align-content: start; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.pk2.c-free { --pc: #4fbf5a; } .pk2.c-deal { --pc: #e2453c; } .pk2.c-sub { --pc: #9b5ce6; } .pk2.c-grow { --pc: #3a8ee6; } .pk2.c-limited { --pc: #ff8a1a; } .pk2.c-perm { --pc: #1e1f22; } .pk2.c-first { --pc: #ffd400; background: #fffbe0; }
.pk2.big { background: #1e1f22; color: #fff; box-shadow: inset 0 0 0 2px #ffd400; } .pk2.big .pkhead b, .pk2.big p { color: #fff; } .pk2.big .gc { background: #2a2b2f; } .pk2.big .gc em { color: #c9c9c3; } .pk2.big .gc b { color: #fff; }
.pkrib { position: absolute; right: 18px; top: 0; background: #e2453c; color: #fff; font: 400 12px var(--disp); padding: 3px 8px; z-index: 2; }
.pk2.c-first .pkrib { background: #1e1f22; color: #ffd400; }
.pkhead { display: grid; gap: 2px; padding-right: 70px; } .pkhead b { font: 400 17px var(--disp); color: #1e1f22; } .pkhead small { font: 400 12px var(--disp); color: #6b6c70 !important; display: flex; gap: 6px; flex-wrap: wrap; } .pkhead small em { font-style: normal; background: #ffd400; color: #1e1f22; padding: 0 5px; } .pkhead small em.on { background: #9b5ce6; color: #fff; }
.pk2 p { margin: 0; font: 400 12.5px var(--disp); color: #4e4f53; }
.pkgive, .pkdaily { display: flex; flex-wrap: wrap; gap: 4px; } .pkdaily { background: #f3eefc; padding: 6px; } .pkdaily small { width: 100%; font: 400 11.5px var(--disp); color: #7a4fc4 !important; }
.gc { display: inline-flex; align-items: center; gap: 4px; background: #f3f3ef; padding: 3px 7px 3px 3px; font: 400 12.5px var(--disp); } .gc .ico { width: 24px !important; height: 24px !important; } .gc em { font-style: normal; color: #4e4f53; } .gc b { color: #1e1f22; font-family: var(--t-mono); font-weight: 400; }
.zchip { width: 14px; height: 14px; margin: 5px; background: linear-gradient(135deg, #ff3d6e, #00d6c8); transform: rotate(45deg); display: inline-block; }
.pkbuy { min-height: 46px; font-size: 17px !important; margin-top: 2px; }
.pksold { text-align: center; background: #e6e6e1; color: #6b6c70; padding: 12px; font: 400 13px var(--disp); }
.pk2.sold { opacity: .6; } .pk2.locked .pkgive { filter: grayscale(.6); opacity: .7; }
.gemgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.gempk { position: relative; border: 0; cursor: pointer; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 18px 4px 0; display: grid; justify-items: center; gap: 2px; font-family: var(--disp); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.gempk:hover { box-shadow: inset 0 0 0 2px #1e1f22; } .gempk .gpic { height: 70px; display: grid; place-items: center; } .gempk b { font: 400 17px var(--t-mono); color: #1e1f22; } .gempk s { font: 400 11px var(--t-mono); color: #9a9ca1; } .gempk em { font-style: normal; width: 100%; background: #ffd400; color: #1e1f22; padding: 8px 0; margin-top: 6px; font-size: 14px; }
.gempk .pkrib { right: 0; left: 0; text-align: center; font-size: 11px; padding: 2px; }
@media (max-width: 700px) {
  .pkrow3 { grid-template-columns: 1fr; } .pkgrid2 { grid-template-columns: 1fr; } .gemgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vipcard { padding: 10px 12px; } .pkhead b { font-size: 16px; }
}

.pkrow3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
.sheet .shopmain .note .seg { display: flex; flex-wrap: wrap; gap: 4px; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin-top: 6px; }
.sheet .shopmain .note .seg button { border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: inset 0 0 0 1px #c9c9c3 !important; color: #1e1f22 !important; padding: 6px 10px !important; font: 400 13px var(--disp) !important; flex: none; }
.sheet .shopmain .note .seg button[aria-selected="true"] { background: #1e1f22 !important; color: #ffd400 !important; }
.sheet .shopmain .grid .item { border-radius: 0 !important; background: #fff !important; border: 0 !important; box-shadow: inset 0 0 0 1px #d9d9d3 !important; }
@media (max-width: 700px) { .pkrow3 { grid-template-columns: 1fr !important; } }

@media (max-width: 700px) { .glvgrid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
.gilegend { flex-wrap: wrap; }

/* ═════ 상점 카드 v3: 일러스트 중심 ═════ */
.pkrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pkrec { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.pk3 { position: relative; display: grid; grid-template-rows: auto 1fr; background: #fff; box-shadow: 0 2px 0 #d9d9d3, inset 0 0 0 1px #d9d9d3; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); transition: transform .12s; }
.pk3:hover { transform: translateY(-2px); }
.pk3 .pkart { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 60%, var(--g1, #4a4b52), var(--g2, #1e1f22) 72%); }
.pk3 .pkart::before { content: ""; position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.06) 0 10deg, transparent 10deg 20deg); animation: pkspin 30s linear infinite; }
@keyframes pkspin { to { transform: rotate(360deg); } }
.pk3 .pkart .ico { position: relative; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.pk3.c-free { --g1: #5fbf6a; --g2: #1f4a2a; } .pk3.c-first { --g1: #ffe066; --g2: #8a5a00; } .pk3.c-deal { --g1: #ff6b5e; --g2: #5a1410; } .pk3.c-sub { --g1: #a97bff; --g2: #2b1652; } .pk3.c-grow { --g1: #5aa7ff; --g2: #0f2b55; } .pk3.c-limited { --g1: #ffa64a; --g2: #5a2a00; } .pk3.c-perm { --g1: #ffd400; --g2: #3a2a00; }
.pkval { position: absolute; left: 0; top: 0; background: #e2453c; color: #fff; font: 400 20px var(--disp); line-height: 1; padding: 6px 10px 6px 8px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); display: grid; } .pkval small { font: 400 10px var(--disp); color: #ffd6d2 !important; }
.pktag { position: absolute; right: 18px; bottom: 8px; background: rgba(20,21,24,.85); color: #fff; font: 400 12px var(--disp); padding: 3px 8px; } .pktag.hot { background: #ffd400; color: #1e1f22; } .pktag.on { background: #9b5ce6; }
.pk3 .pkbody { display: grid; gap: 8px; padding: 10px 12px 12px; align-content: start; }
.pkname { font: 400 17px var(--disp); color: #1e1f22; } .pkdesc { font: 400 12.5px var(--disp); color: #4e4f53 !important; }
.pkmini, .pkday { display: flex; flex-wrap: wrap; gap: 4px; } .pkmini .gc, .pkday .gc { background: #f3f3ef; padding: 2px 8px 2px 2px; } .pkmini .gc b, .pkday .gc b { font: 400 14px var(--t-mono); color: #1e1f22; } .gc.more { padding: 6px 8px !important; font: 400 13px var(--disp); color: #4e4f53; }
.pkday { align-items: center; background: #f3eefc; padding: 4px; } .pkday em { font: 400 12px var(--disp); font-style: normal; color: #fff; background: #9b5ce6; padding: 4px 6px; } .pkday .gc { background: #fff; } .pkday.fx { background: #eef6ff; } .pkday.fx em { background: #3a8ee6; } .pkday.fx span { font: 400 13px var(--disp); color: #1e1f22; padding: 0 6px; }
.pkbuy { border: 0; cursor: pointer; background: #ffd400; color: #1e1f22; font: 400 18px var(--disp); min-height: 46px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); align-self: end; } .pkbuy:hover { background: #ffe14d; } .pkbuy.gift { background: #1e1f22; color: #ffd400; }
.pk3 .pksold { align-self: end; }
.pk3.sold { opacity: .55; } .pk3.locked .pkart { filter: grayscale(.8) brightness(.8); }
.pk3.big { grid-template-rows: none; grid-template-columns: 200px minmax(0, 1fr); box-shadow: 0 0 0 2px #ffd400; } .pk3.big .pkart { height: 100%; min-height: 200px; } .pk3.big .pkname { font-size: 20px; }
.gempk .gpic { height: 104px !important; }
@media (max-width: 700px) {
  .pkrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .pk3 .pkart { height: 118px; } .pk3 .pkart .ico { width: 104px !important; height: 104px !important; }
  .pkrec { grid-template-columns: 1fr; } .pk3.big { grid-template-columns: 130px minmax(0, 1fr); } .pk3.big .pkart { min-height: 170px; } .pk3.big .pkart .ico { width: 120px !important; height: 120px !important; }
  .pkname { font-size: 15px; } .pkbuy { font-size: 16px; min-height: 42px; } .pkmini .gc .ico { width: 24px !important; height: 24px !important; }
  .gempk .gpic { height: 80px !important; } .gempk .gpic .ico { width: 76px !important; height: 76px !important; }
}

/* FEVER 조건 표시 */
.gauge.fever { cursor: pointer; pointer-events: auto; }
.gcap { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; font: 400 12px var(--disp); color: #fff; background: rgba(30,31,34,.85); padding: 3px 8px; }
.gcap.on { background: #ffd400; color: #1e1f22; } .gcap.lock { color: #9a9ca1; }
.fvsteps { display: grid; gap: 6px; } .fvsteps div { display: flex; gap: 10px; align-items: center; background: #fff; padding: 8px 10px; box-shadow: inset 0 0 0 1px #d9d9d3; } .fvsteps b { width: 26px; height: 26px; display: grid; place-items: center; background: #1e1f22; color: #ffd400; font: 400 15px var(--disp); flex: none; } .fvsteps em { font-style: normal; background: #ffd400; padding: 0 3px; }
@media (max-width: 700px) { .gcap { font-size: 10px; padding: 2px 5px; } }

.presbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #1e1f22; color: #fff; padding: 10px 12px; margin: 8px 0; clip-path: var(--cut-s); } .presbox b { font: 400 15px var(--disp); color: #ffd400; margin-right: 6px; }
.presbox span { font: 400 12.5px var(--disp); color: #9a9ca1; } .presbox span.on { background: #2a2b2f; color: #fff; padding: 4px 8px; box-shadow: inset 0 -2px 0 #ffd400; }
.rarb { font: 400 11px var(--disp); color: #fff; padding: 1px 6px; background: var(--rc); }

.pkrec { grid-template-columns: 1fr !important; } .pk3.big { grid-template-columns: 220px minmax(0, 1fr); } .pk3.big .pkart { min-height: 210px; }

/* 펫 소환 수집 격자 */
.petcoll { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.pcol { position: relative; display: grid; justify-items: center; gap: 1px; padding: 18px 2px 6px; background: radial-gradient(circle at 50% 45%, #fff, #f0f0ec); box-shadow: inset 0 0 0 1px #d9d9d3, inset 0 3px 0 var(--rc); }
.pcol.r3 { background: radial-gradient(circle at 50% 45%, #fff6d6, #ffe7a3); } .pcol.r2 { background: radial-gradient(circle at 50% 45%, #f5eeff, #e4d4ff); }
.pcol b { font: 400 13px var(--disp); color: #1e1f22; } .pcol small { font: 400 10.5px var(--disp); color: #6b6c70 !important; }
.pcol .prar { position: absolute; left: 0; top: 0; background: var(--rc); color: #fff; font: 400 10px var(--disp); padding: 1px 5px; } .pcol .pchk { position: absolute; right: 4px; top: 3px; color: #2e8f3e; font-weight: 700; }
.pcol.off .ico { filter: grayscale(1) brightness(1.3) opacity(.4); } .pcol.off b { color: #9a9ca1; }
@media (max-width: 700px) { .petcoll { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pcol .ico { width: 72px !important; height: 72px !important; } }

@media (max-width: 700px) {
  .gacha .ggrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: calc(100vw - 20px) !important; max-width: none !important; gap: 6px !important; justify-self: center; }
  .gacha.single .ggrid { grid-template-columns: minmax(0, 220px) !important; justify-content: center; }
  .gacha .gcard, .gacha .ggrid > * { width: auto !important; min-width: 0 !important; }
  .gacha .ghead, .gacha .gtitle { max-width: calc(100vw - 20px); }
}
@media (max-width: 700px) {
  .gacha { grid-template-columns: minmax(0, 1fr) !important; }
  .gacha .gbtns { width: calc(100vw - 20px) !important; max-width: none !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; justify-self: center; }
  .gacha .gbtns > * { min-width: 0 !important; width: auto !important; padding-left: 4px !important; padding-right: 4px !important; }
  .gacha .gbtns > :only-child { grid-column: 1 / -1; }
}
.gacha .gfxtog { background: transparent !important; color: #c9c9c3 !important; border: 1px solid #4e4f53 !important; box-shadow: none !important; font: 400 12.5px var(--disp) !important; padding: 4px 10px !important; margin-left: 12px; cursor: pointer; border-radius: 0 !important; }
.gacha .gfxtog.on { background: #ffd400 !important; color: #1e1f22 !important; border-color: #ffd400 !important; }

/* ═════ 출석 v2 ═════ */
.attop { display: flex; align-items: center; gap: 14px; background: #1e1f22; color: #fff; padding: 14px 16px; clip-path: var(--cut-s); } .attop > div { flex: 1; } .attop b { font: 400 22px var(--disp); display: block; } .attop small { color: #c9c9c3 !important; font-size: 12.5px !important; } .attop .gbtn { min-width: 210px; min-height: 52px; font-size: 17px !important; }
.atthead { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; border-bottom: 2px solid #1e1f22; padding-bottom: 6px; } .atthead b { font: 400 19px var(--disp); color: #1e1f22; } .atthead span { font: 400 15px var(--t-mono); color: #1e1f22; background: #ffd400; padding: 0 6px; } .atthead em { font-style: normal; font: 400 12.5px var(--disp); color: #6b6c70; }
.attnav { margin-left: auto; display: flex; gap: 4px; } .attnav button { width: 36px; height: 32px; border: 0; background: #1e1f22; color: #ffd400; font: 400 22px/1 var(--disp); cursor: pointer; }
.att7 { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 4); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.a7card { scroll-snap-align: start; position: relative; display: grid; grid-template-rows: auto 1fr auto auto; min-height: 330px; background: linear-gradient(180deg, #2b2c33, #1e1f22 60%); color: #fff; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); overflow: hidden; }
.a7card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(255,212,0,.22), transparent 60%); pointer-events: none; }
.a7day { position: relative; font: 400 18px var(--disp); padding: 12px 14px 0; } .a7card.big .a7day { color: #ffd400; }
.a7art { position: relative; display: grid; place-items: center; padding: 6px 0; } .a7art .ico { filter: drop-shadow(0 10px 12px rgba(0,0,0,.5)); }
.a7rw { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0 10px 10px; } .a7rw .gc { background: rgba(255,255,255,.1); } .a7rw .gc b { color: #fff; } .a7rw .gc em { display: none; }
.a7st { position: relative; text-align: center; font: 400 13px var(--disp); padding: 10px; background: #2a2b2f; color: #9a9ca1; }
.a7card.now { box-shadow: inset 0 0 0 3px #ffd400; } .a7card.now .a7st { background: #ffd400; color: #1e1f22; } .a7card.now::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 40px rgba(255,212,0,.35); animation: a7pulse 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes a7pulse { 50% { opacity: .3; } }
.a7card.got { opacity: .55; } .a7card.got .a7st { background: #2e8f3e; color: #fff; }
.a7card.big { background: linear-gradient(180deg, #5a3d00, #1e1f22 70%); }
.att30 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.a30 { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 74px; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 14px 2px 4px; } .a30 small { position: absolute; left: 4px; top: 2px; font: 400 10.5px var(--t-mono); color: #6b6c70 !important; } .a30 b { font: 400 12px var(--t-mono); color: #1e1f22; }
.a30.big { background: #fff6cc; box-shadow: inset 0 0 0 2px #ffb000; } .a30.grand { grid-column: span 2; background: linear-gradient(135deg, #fff1a8, #ffd36b); }
.a30.now { box-shadow: inset 0 0 0 3px #1e1f22; } .a30.got { background: #e6e6e1; opacity: .6; } .a30.got::after { content: "✓"; position: absolute; right: 4px; top: 1px; color: #2e8f3e; font-weight: 700; }
@media (max-width: 700px) {
  .attop { flex-wrap: wrap; } .attop .gbtn { width: 100%; }
  .att7 { grid-auto-columns: 62%; } .a7card { min-height: 300px; }
  .att30 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .a30.grand { grid-column: span 2; }
}

/* ═════ 가방 ═════ */
.bagwrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; height: 100%; min-height: 0; }
.bagmain { overflow-y: auto; padding-right: 4px; }
.baghead { font: 400 16px var(--disp); color: #1e1f22; margin: 10px 0 6px; padding-bottom: 4px; border-bottom: 2px solid #1e1f22; }
.baggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.bagtile { position: relative; border: 0; cursor: pointer; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; font-family: var(--disp); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.bagtile b { font: 400 17px var(--t-mono); color: #1e1f22; } .bagtile small { font: 400 12px var(--disp); color: #6b6c70 !important; }
.bagtile.sel { box-shadow: inset 0 0 0 2px #1e1f22; background: #fffbe0; } .bagtile.zero { opacity: .5; } .bagtile:hover { box-shadow: inset 0 0 0 2px #1e1f22; }
.zchip.big { width: 30px; height: 30px; margin: 13px; } .zchip.huge { width: 60px; height: 60px; margin: 25px; }
.bagdet { background: #1e1f22; color: #fff; padding: 16px; display: grid; gap: 10px; align-content: start; clip-path: var(--cut-s); }
.bagart { height: 150px; display: grid; place-items: center; background: radial-gradient(circle, #3a3b40, #1e1f22 70%); }
.bagname { font: 400 22px var(--disp); } .bagamt { font: 400 30px var(--t-mono); color: #ffd400; }
.bagrow { display: grid; gap: 2px; background: #2a2b2f; padding: 8px 10px; } .bagrow small { color: #9a9ca1 !important; font-size: 11.5px !important; } .bagrow span { font: 400 14px var(--disp); }
.bagdet .gbtn { min-height: 50px; }
@media (max-width: 700px) { .bagwrap { grid-template-columns: 1fr; height: auto; } .bagdet { order: -1; grid-template-columns: 100px 1fr; } .bagart { height: 100px; grid-row: span 2; } .bagdet .bagrow, .bagdet .gbtn { grid-column: 1 / -1; } .baggrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bagtile .ico { width: 44px !important; height: 44px !important; } }

/* ═════ 스테이지 선택: 월드 · 등반 지도 ═════ */
.wbar { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 14px; align-items: center; background: #1e1f22; color: #fff; padding: 12px 16px; clip-path: var(--cut-s); box-shadow: inset 0 -3px 0 var(--wc); }
.wname small { font: 400 11px var(--t-mono); color: var(--wc) !important; letter-spacing: 2px; } .wname b { display: block; font: 400 24px var(--disp); } .wname span { font: 400 12px var(--disp); color: #c9c9c3; }
.wchips { display: flex; flex-wrap: wrap; gap: 4px; } .wchips span { font: 400 12.5px var(--disp); padding: 4px 9px; background: #2a2b2f; color: #6b6c70; } .wchips span.on { background: var(--wc); color: #1e1f22; } .wchips span.done { color: var(--wc); box-shadow: inset 0 0 0 1px var(--wc); }
.wprog { display: grid; gap: 3px; } .wprog small { color: #9a9ca1 !important; font-size: 11px !important; } .wprog b { font: 400 20px var(--t-mono); }
.climb { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; margin-top: 10px; min-height: 0; }
.climbmap { display: grid; gap: 8px; }
.rband { background: linear-gradient(90deg, var(--rt), #1e1f22); color: #fff; display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; clip-path: var(--cut-s); }
.rband.here { box-shadow: inset 0 0 0 2px #ffd400; } .rband.lock { filter: grayscale(.9) brightness(.7); }
.rhead { display: flex; align-items: center; gap: 10px; } .rhead small { font: 400 10.5px var(--t-mono); color: #ffd400 !important; } .rhead b { display: block; font: 400 19px var(--disp); } .rhead span { font: 400 12px var(--disp); color: #c9c9c3; }
.rboss { width: 76px; height: 76px; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); }
.rfloors { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.fnode { position: relative; height: 46px; border: 0; cursor: pointer; background: #2a2b2f; color: #9a9ca1; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); font-family: var(--disp); display: grid; place-items: center; }
.fnode b { font: 400 16px var(--t-mono); } .fnode i { position: absolute; top: 1px; font-style: normal; font: 400 8.5px var(--disp); color: #ff6b5e; }
.fnode.done { background: #3e4a40; color: #8fe39b; } .fnode.boss { background: #4a2526; color: #ff8a80; } .fnode.boss.done { background: #3e2a2a; }
.fnode.here { background: #ffd400; color: #1e1f22; } .fnode.here em { position: absolute; bottom: -2px; font-style: normal; font: 400 9px var(--disp); }
.fnode.sel { box-shadow: inset 0 0 0 2px #fff; } .fnode.lock { opacity: .35; cursor: default; }
.stdet { background: #1e1f22; color: #fff; padding: 14px; display: grid; gap: 8px; align-content: start; clip-path: var(--cut-s); position: sticky; top: 0; }
.stmob { position: relative; height: 150px; display: grid; place-items: center; background: radial-gradient(circle, #3a3b40, #1e1f22 70%); } .sbadge { position: absolute; top: 6px; left: 6px; background: #e2453c; color: #fff; font: 400 11px var(--disp); padding: 2px 6px; }
.stname { font: 400 22px var(--disp); } .stmn { font: 400 13px var(--disp); color: #c9c9c3; }
.stweak { display: flex; align-items: center; gap: 6px; background: #2a2b2f; padding: 6px 10px; } .stweak small { color: #9a9ca1 !important; } .stweak i { width: 10px; height: 10px; transform: rotate(45deg); } .stweak b { font: 400 15px var(--disp); }
.stpow { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; background: #2a2b2f; padding: 8px 10px; } .stpow small { color: #9a9ca1 !important; font-size: 11px !important; display: block; } .stpow b { font: 400 16px var(--t-mono); } .stpow b.ok { color: #8fe39b; } .stpow b.bad { color: #ff8a80; } .stpow .plvbar { grid-column: 1 / -1; } .stpow .plvbar.bad i { background: #e2453c !important; } .stpow .plvbar.ok i { background: #4fbf5a !important; }
.stdrop { display: flex; flex-wrap: wrap; gap: 4px; } .stdrop span { font: 400 12px var(--disp); background: #2a2b2f; padding: 3px 7px; color: #e2e2dc; } .stkill { font: 400 12px var(--disp); color: #9a9ca1; }
.stdet .gbtn { min-height: 50px; }
@media (max-width: 700px) {
  .wbar { grid-template-columns: 1fr; gap: 8px; } .climb { grid-template-columns: 1fr; } .stdet { order: -1; position: static; grid-template-columns: 110px 1fr; } .stdet .stmob { grid-row: span 3; height: 110px; } .stdet > :not(.stmob):not(.stname):not(.stmn) { grid-column: 1 / -1; }
  .rband { grid-template-columns: 1fr; } .rfloors { grid-template-columns: repeat(5, minmax(0, 1fr)); } .rboss { width: 56px; height: 56px; } .rboss .ico { width: 52px !important; height: 52px !important; }
}

@media (max-width: 700px) { .topmenu { flex-wrap: nowrap !important; } .tm { width: 40px !important; min-width: 0 !important; } }
.climbmap, .rband, .rhead, .stdet, .wbar { text-align: left; }
.rband .rfloors { display: grid !important; grid-template-columns: repeat(10, minmax(0, 1fr)) !important; align-items: stretch; }
.sheet .rfloors .fnode { width: auto !important; min-width: 0 !important; height: 46px !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none; flex: none; }
.sheet .rfloors .fnode.sel { box-shadow: inset 0 0 0 2px #fff !important; }
.sheet .rfloors .fnode:disabled { opacity: .35; }
.rhead > div:last-child { min-width: 0; }
@media (max-width: 700px) { .rband .rfloors { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .sheet .rfloors .fnode { height: 40px !important; } .rband { padding: 8px !important; } }

/* ═════ HUD v9: 성격별 묶음 + 오른손 엄지 영역 (2026-11-04) ═════
 * PC: 오른쪽 열 = 매일(핫딜·패스·출석·임무·상점), 왼쪽 열 = 콘텐츠·경쟁, 위 오른쪽 = 가끔(가방·도감·랭킹·길드·설정)
 * 모바일(≤700): 가장 자주 누르는 스킬·돌진·AUTO는 오른쪽 아래(엄지 휴식 위치), 매일 메뉴는 오른쪽 가운데,
 *   위쪽(엄지가 닿기 어려움)에는 정보만, 계기판은 왼쪽 아래로 모음 */
.tm[data-id="rank"] .li, .tm[data-id="guild"] .li { }
@media (max-width: 700px) {
  .skillcluster { left: auto !important; right: 8px !important; transform: none !important; bottom: 92px !important; display: grid !important; grid-template-columns: repeat(3, 58px) !important; grid-auto-rows: 52px !important; gap: 6px 2px !important; justify-content: end; }
  .skillcluster .sk, .skillcluster .autobtn, .skillcluster .autobtn.big, .skillcluster #autoS, .skillcluster .dashbtn { width: 58px !important; height: 52px !important; grid-row: auto !important; grid-column: auto !important; }
  .skillcluster .sk[data-i="0"] { grid-row: 1 !important; grid-column: 1 !important; } .skillcluster .sk[data-i="1"] { grid-row: 1 !important; grid-column: 2 !important; } .skillcluster .sk[data-i="2"] { grid-row: 1 !important; grid-column: 3 !important; }
  .skillcluster .sk[data-i="3"] { grid-row: 2 !important; grid-column: 1 !important; } .skillcluster .sk[data-i="4"] { grid-row: 2 !important; grid-column: 2 !important; }
  .skillcluster #autoB { grid-row: 3 !important; grid-column: 1 !important; } .skillcluster #autoS { grid-row: 3 !important; grid-column: 2 !important; }
  .skillcluster #dashBtn { grid-row: 2 / span 2 !important; grid-column: 3 !important; height: 110px !important; }
  .skillcluster .sk .ico { width: 34px !important; height: 34px !important; }
  .gauge.combo { right: auto !important; left: 112px !important; transform-origin: left bottom !important; }
  .gauge { transform: scale(.62) !important; transform-origin: left bottom !important; bottom: 92px !important; }
  .gauge.fever { left: 6px !important; }
  #sideR { top: auto !important; bottom: 290px !important; right: 6px !important; }
  #sideL { top: 150px !important; }
  .questcard { top: 150px !important; bottom: auto !important; left: 76px !important; right: 76px !important; width: auto !important; transform: none !important; }
  .discover { top: auto !important; bottom: 310px !important; left: 76px !important; right: 76px !important; width: auto !important; transform: none !important; }
  .feed { bottom: 190px !important; left: 6px !important; }
}
@media (max-width: 700px) {
  html body #quest#quest.questcard { top: 150px !important; bottom: auto !important; height: auto !important; min-height: 0 !important; left: 74px !important; right: 74px !important; width: auto !important; grid-template-rows: auto auto auto !important; grid-template-columns: 34px minmax(0, 1fr) !important; grid-template-areas: "ic t" "ic p" "ic n" !important; padding: 6px 10px !important; gap: 2px 8px !important; }
  html body #quest#quest.questcard .qico { width: 32px !important; height: 32px !important; } html body #quest#quest.questcard > b { font-size: 13px !important; }
  html body #quest#quest.questcard .gbtn { grid-column: 1 / -1; grid-area: auto !important; }
}
@media (max-width: 700px) {
  html body #quest#quest.questcard { top: 184px !important; }
  #discover.discover { bottom: 392px !important; }
  #sideL { top: 184px !important; }
}

/* ═════ 랭킹 ═════ */
.rkme { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; background: #1e1f22; color: #fff; padding: 12px 16px; clip-path: var(--cut-s); }
.rkmine small, .rkrw small { color: #9a9ca1 !important; font-size: 11.5px !important; display: block; } .rkmine b { font: 400 34px var(--t-mono); color: #ffd400; } .rkmine b em { font: 400 15px var(--disp); font-style: normal; margin-left: 2px; } .rkmine span, .rkrw span { font: 400 12.5px var(--disp); color: #c9c9c3; } .rkrw b { font: 400 20px var(--t-mono); display: flex; align-items: center; gap: 4px; }
.rktip { font: 400 11.5px var(--disp); color: #9a9ca1; max-width: 160px; text-align: right; }
.rkpod { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; margin: 12px 0; }
.pod { position: relative; border: 0; cursor: pointer; background: linear-gradient(180deg, #2b2c33, #1e1f22); color: #fff; display: grid; justify-items: center; gap: 2px; padding: 8px 6px 10px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); font-family: var(--disp); }
.pod .pimg { height: 150px; display: grid; place-items: end center; } .pod .pimg img { height: 100%; object-fit: contain; } .pod.p1 .pimg { height: 190px; }
.pod em { position: absolute; top: 6px; left: 8px; font: 400 24px var(--t-mono); font-style: normal; color: #ffd400; } .pod.p2 em { color: #d6d8de; } .pod.p3 em { color: #e5a46a; }
.pod.p1 { box-shadow: inset 0 0 0 2px #ffd400; } .pod b { font: 400 15px var(--disp); } .pod small { font: 400 12px var(--t-mono); color: #ffd400 !important; } .pod.me { box-shadow: inset 0 0 0 3px #3fd0ff; }
.rklist { display: grid; gap: 3px; }
.rkrow { border: 0; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 9px 12px; font-family: var(--disp); text-align: left; }
.rkrow:hover { box-shadow: inset 0 0 0 2px #1e1f22; } .rkrow .rn { font: 400 16px var(--t-mono); color: #1e1f22; } .rnick { font: 400 15px var(--disp); color: #1e1f22; display: grid; } .rnick small { font-size: 11.5px !important; color: #6b6c70 !important; } .rkrow .rv { font: 400 14px var(--t-mono); color: #1e1f22; }
.rkrow.me { background: #fffbe0; box-shadow: inset 0 0 0 2px #ffd400; position: sticky; bottom: 0; }
.rkdlg { width: min(560px, 100%) !important; } .rkprof { grid-template-columns: 170px minmax(0, 1fr); } .rkprof > h4, .rkprof > .rtiles { grid-column: 1 / -1; margin: 0; }
.rpart { background: radial-gradient(circle at 50% 60%, #fff, #e6e6e1); height: 210px; display: grid; place-items: end center; } .rpart img { height: 200px; object-fit: contain; }
.rpinfo { display: grid; gap: 4px; align-content: start; } .rpinfo > small { color: #6b6c70 !important; } .rpinfo > b { font: 400 24px var(--disp); } .rpinfo > span { font: 400 14px var(--t-mono); }
.rpow { background: #1e1f22; color: #fff; padding: 6px 10px; } .rpow small { color: #9a9ca1 !important; font-size: 11px !important; display: block; } .rpow b { font: 400 22px var(--t-mono); color: #ffd400; }
.rstats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .rstats span { font: 400 12.5px var(--disp); background: #fff; padding: 4px 6px; box-shadow: inset 0 0 0 1px #d9d9d3; } .rstats b { font-family: var(--t-mono); font-weight: 400; float: right; }
.rtiles { display: grid; gap: 5px; } .rtiles.five { grid-template-columns: repeat(5, 1fr); } .rtiles.four { grid-template-columns: repeat(4, 1fr); } .rtiles.three { grid-template-columns: repeat(3, 1fr); }
.rtile { background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3, inset 0 3px 0 var(--rc, #9a9ca1); display: grid; justify-items: center; padding: 6px 2px 4px; min-height: 80px; } .rtile small { font: 400 10.5px var(--disp); color: #4e4f53 !important; text-align: center; } .rtile.empty { background: #ececE7; }
.rtile.r0 { --rc: #9a9ca1; } .rtile.r1 { --rc: #4fbf5a; } .rtile.r2 { --rc: #3a8ee6; } .rtile.r3 { --rc: #9b5ce6; } .rtile.r4 { --rc: #ffb000; } .rtile.r5 { --rc: #ff3d6e; } .rtile.r6 { --rc: #00d6c8; } .rtile.pet { --rc: #ffd400; }
/* ═════ 길드 ═════ */
.gnone { display: flex; gap: 14px; align-items: center; background: #1e1f22; color: #fff; padding: 16px; clip-path: var(--cut-s); } .gnone > div { flex: 1; } .gnone b { font: 400 20px var(--disp); display: block; } .gnone span { font: 400 13px var(--disp); color: #c9c9c3; } .gnone .gbtn { min-width: 190px; min-height: 50px; }
.glist { display: grid; gap: 6px; } .glist .glcard { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 8px 12px; }
.glist .glcard .gi b { font: 400 17px var(--disp); color: #1e1f22; } .glist .glcard .gi b em { font: 400 12px var(--t-mono); font-style: normal; background: #1e1f22; color: #ffd400; padding: 1px 5px; } .glist .glcard .gi small { display: block; color: #4e4f53 !important; font-size: 12.5px !important; } .glist .glcard .gi span { font: 400 12px var(--disp); color: #6b6c70; }
.ghead2 { display: grid; grid-template-columns: 92px minmax(0, 1fr) 150px; gap: 14px; align-items: center; background: #1e1f22; color: #fff; padding: 12px 16px; clip-path: var(--cut-s); }
.ghead2 .gi small { font: 400 11px var(--t-mono); color: #ffd400 !important; } .ghead2 .gi b { display: block; font: 400 24px var(--disp); } .ghead2 .gi b em { font: 400 13px var(--t-mono); font-style: normal; color: #ffd400; } .ghead2 .gi span { font: 400 12px var(--disp); color: #c9c9c3; }
.gcoin { background: #2a2b2f; padding: 8px 10px; display: grid; } .gcoin small { color: #9a9ca1 !important; font-size: 11px !important; } .gcoin b { font: 400 22px var(--t-mono); color: #ffd400; }
.gnotice { display: flex; align-items: center; gap: 8px; background: #fffbe0; box-shadow: inset 0 0 0 1px #ffd400; padding: 8px 12px; margin: 8px 0; font: 400 14px var(--disp); color: #1e1f22; } .gnotice .li { width: 20px; height: 20px; }
.gacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .gact { background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 10px; display: grid; gap: 4px; } .gact b { font: 400 15px var(--disp); color: #1e1f22; } .gact small { font-size: 11.5px !important; color: #6b6c70 !important; } .gact .gbtn { min-height: 40px; }
.gmem { display: grid; gap: 2px; } .gmrow { display: grid; grid-template-columns: 74px minmax(0, 1fr) 90px 100px 70px; gap: 8px; align-items: center; background: #fff; padding: 7px 10px; font: 400 13px var(--disp); color: #1e1f22; box-shadow: inset 0 0 0 1px #e6e6e1; } .gmrow.me { background: #fffbe0; } .gmrow small { color: #6b6c70 !important; font-size: 11.5px !important; }
.role { font-style: normal; font: 400 11px var(--disp); padding: 2px 6px; text-align: center; } .role.r0 { background: #ffd400; color: #1e1f22; } .role.r1 { background: #1e1f22; color: #ffd400; } .role.r2 { background: #e6e6e1; color: #4e4f53; }
.gboss { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: center; background: linear-gradient(90deg, #3e1f22, #1e1f22); color: #fff; padding: 14px; margin-top: 8px; clip-path: var(--cut-s); } .gbart { display: grid; place-items: center; }
.gbinfo { display: grid; gap: 8px; } .gbinfo small { color: #ff8a80 !important; } .gbinfo b { font: 400 26px var(--disp); } .gbinfo span { font: 400 12.5px var(--disp); color: #c9c9c3; } .gbinfo .gbtn { min-height: 50px; }
.gbhp { position: relative; height: 22px; background: #2a2b2f; } .gbhp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #e2453c, #ff8a5e); } .gbhp span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 13px var(--t-mono); }
.gtiers { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-top: 8px; } .gtier { border: 0; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 6px 2px; display: grid; justify-items: center; font-family: var(--disp); cursor: pointer; } .gtier b { font: 400 13px var(--disp); color: #1e1f22; } .gtier small { font-size: 10.5px !important; color: #4e4f53 !important; text-align: center; } .gtier.ready { background: #ffd400; } .gtier.got { opacity: .45; }
.gbuffs, .gshop { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; } .gbuff, .gsi { background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 12px; display: grid; gap: 6px; } .gbuff b, .gsi b { font: 400 16px var(--disp); color: #1e1f22; } .gbuff b em { font: 400 12px var(--t-mono); font-style: normal; color: #6b6c70; } .gbuff small, .gsi small { color: #4e4f53 !important; font-size: 12.5px !important; } .gbuff.lock, .gsi.lock { opacity: .55; }
.gchat { background: #1e1f22; padding: 10px; display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; align-content: start; min-height: 260px; }
.cmsg { justify-self: start; max-width: 78%; background: #2a2b2f; color: #fff; padding: 6px 10px; display: grid; gap: 2px; } .cmsg b { font: 400 11.5px var(--disp); color: #ffd400; } .cmsg span { font: 400 14px var(--disp); } .cmsg small { font-size: 10px !important; color: #6b6c70 !important; justify-self: end; } .cmsg.me { justify-self: end; background: #ffd400; } .cmsg.me b { color: #1e1f22; } .cmsg.me span { color: #1e1f22; }
.cinput { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 6px; margin-top: 6px; } .cinput input { font: 400 15px var(--disp); padding: 10px 12px; border: 0; box-shadow: inset 0 0 0 2px #1e1f22; outline: 0; } .cinput .gbtn { min-height: 44px; }
.gmarks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .gmarks button { border: 0; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 6px; cursor: pointer; } .gmarks button.on { box-shadow: inset 0 0 0 3px #1e1f22; background: #fffbe0; }
/* ═════ 이벤트 허브 ═════ */
.fhead { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: end; min-height: 190px; padding: 16px; color: #fff; background: linear-gradient(90deg, rgba(20,10,30,.95) 0%, rgba(20,10,30,.7) 45%, rgba(20,10,30,0) 75%), var(--img) right center / cover no-repeat, #1e1f22; clip-path: var(--cut-s); box-shadow: inset 0 -4px 0 var(--fc); }
.ftxt small { font: 400 11.5px var(--t-mono); color: var(--fc) !important; letter-spacing: 1px; } .ftxt b { display: block; font: 400 30px var(--disp); text-shadow: 0 2px 0 var(--fc2); } .ftxt span { font: 400 13px var(--disp); color: #e2e2dc; max-width: 460px; display: block; }
.ftok { background: rgba(0,0,0,.6); padding: 8px 12px; display: grid; box-shadow: inset 0 0 0 2px var(--fc); } .ftok small { color: var(--fc) !important; font-size: 12px !important; } .ftok b { font: 400 30px var(--t-mono); color: #fff; }
.fgo { display: flex; gap: 14px; align-items: center; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 14px; margin-top: 8px; } .fgo > div { flex: 1; } .fgo b { font: 400 19px var(--disp); color: #1e1f22; display: block; } .fgo small { font-size: 12.5px !important; color: #4e4f53 !important; } .fgo .gbtn { min-width: 190px; min-height: 54px; font-size: 17px !important; }
.fmiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .fmile { border: 0; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 8px 4px; display: grid; justify-items: center; gap: 4px; cursor: pointer; font-family: var(--disp); } .fmile > small { font: 400 13px var(--t-mono) !important; color: #1e1f22 !important; } .fmile b { font: 400 12px var(--disp); color: #1e1f22; } .fmile.ready { background: #ffd400; } .fmile.got { opacity: .45; } .fmile .pkmini { justify-content: center; }
.fshop { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.fsi { background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; display: grid; gap: 6px; padding: 0 0 10px; align-content: start; } .fsi > b, .fsi > small, .fsi > .pkbuy, .fsi > .pksold { margin: 0 10px; } .fsi > b { font: 400 15px var(--disp); color: #1e1f22; } .fsi > small { font-size: 12px !important; color: #6b6c70 !important; }
.fart { position: relative; height: 120px; display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, #6a3a9e, #1e1225 72%); } .fsi:not(.big) .fart { background: #f3f3ef; height: 80px; }
.fsi.big { grid-column: span 2; } .fsi.big .fart { height: 190px; } .fsi.k-skin .fart img { height: 180px; object-fit: contain; } .wsk { display: flex; gap: 2px; }
.fart .lim { position: absolute; left: 0; top: 0; background: #ff8a1a; color: #1e1f22; font: 400 11px var(--disp); padding: 2px 6px; } .fsi.sold { opacity: .55; }
.fsi .pkbuy:disabled { background: #e6e6e1; color: #9a9ca1; cursor: default; }
.evlist, .comm, .maillist { display: grid; gap: 6px; } .evrow, .cmrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 12px 14px; } .evrow b, .cmrow b { font: 400 16px var(--disp); color: #1e1f22; } .evrow small, .cmrow small { grid-column: 1; color: #6b6c70 !important; font-size: 12.5px !important; display: block; } .evrow > :last-child { grid-row: 1 / span 2; grid-column: 2; } .evrow em { font-style: normal; font: 400 12px var(--disp); background: #4fbf5a; color: #fff; padding: 3px 8px; } .cmrow .gbtn { min-width: 170px; min-height: 44px; }
.mailtop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .mailtop b { font: 400 16px var(--disp); color: #1e1f22; }
.mrow2 { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 10px 12px; } .mrow2 .li { width: 24px; height: 24px; } .mrow2 b { font: 400 15px var(--disp); color: #1e1f22; } .mrow2 small { display: block; color: #6b6c70 !important; font-size: 12px !important; } .mrow2 em { font-style: normal; color: #9a9ca1; font: 400 12px var(--disp); } .mrow2.done { opacity: .6; }
/* 무기·방어구 스킨 */
.sklist { display: grid; gap: 6px; } .sklist.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.skrow2 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 10px 12px; } .skrow2 .skart { display: flex; gap: 2px; background: #1e1f22; padding: 6px; } .skrow2 b, .skcard2 b { font: 400 16px var(--disp); color: #1e1f22; } .skrow2 small, .skcard2 small { display: block; color: #6b6c70 !important; font-size: 12px !important; } .skrow2.on, .skcard2.on { box-shadow: inset 0 0 0 2px #1e1f22; background: #fffbe0; } .skrow2.lock .skart, .skcard2.lock .skart { filter: grayscale(.9); opacity: .6; }
.skcard2 { background: #fff; box-shadow: inset 0 0 0 1px #d9d9d3; padding: 10px; display: grid; gap: 4px; justify-items: center; text-align: center; } .skcard2 .skart { height: 110px; width: 100%; display: grid; place-items: center; background: radial-gradient(circle, #4a3a5e, #1e1f22 75%); } .skcard2 .none { color: #6b6c70; font-size: 30px; } .skcard2 .gbtn { width: 100%; }
/* 구매 확인 · 확률 */
.bcdlg .dlgbody { justify-items: center; text-align: center; } .bcart { height: 120px; display: grid; place-items: center; } .bcname { font: 400 20px var(--disp); } .bcprice { font: 400 26px var(--t-mono); background: #ffd400; padding: 2px 12px; }
.probdlg { width: min(640px, 100%) !important; } .ptab { width: 100%; border-collapse: collapse; font: 400 13px var(--disp); background: #fff; } .ptab th { background: #1e1f22; color: #ffd400; padding: 6px; font-weight: 400; } .ptab td { padding: 5px 6px; text-align: center; border-bottom: 1px solid #e6e6e1; font-family: var(--t-mono); } .ptab tr.on td { background: #fffbe0; font-weight: 700; } .ptab.small td, .ptab.small th { font-size: 11.5px; padding: 3px 4px; }
.probdlg .dlgbody { max-height: 70vh; overflow-y: auto; }
@media (max-width: 700px) {
  .rkme { grid-template-columns: 1fr 1fr; } .rktip { grid-column: 1 / -1; text-align: left; max-width: none; } .pod .pimg { height: 100px; } .pod.p1 .pimg { height: 126px; }
  .rkprof { grid-template-columns: 120px minmax(0, 1fr); } .rpart { height: 160px; } .rpart img { height: 150px; } .rtiles.five { grid-template-columns: repeat(5, 1fr); } .rtile small { font-size: 9px; }
  .gnone { flex-direction: column; align-items: stretch; } .glist .glcard { grid-template-columns: 56px minmax(0, 1fr); } .glist .glcard .gbtn { grid-column: 1 / -1; } .ghead2 { grid-template-columns: 64px minmax(0, 1fr); } .ghead2 .gcoin { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
  .gacts { grid-template-columns: 1fr 1fr; } .gmrow { grid-template-columns: 64px minmax(0, 1fr) 80px; } .gmrow > span:nth-of-type(1), .gmrow small { display: none; }
  .gboss { grid-template-columns: 1fr; } .gbart .ico { width: 110px !important; height: 110px !important; } .gtiers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fhead { grid-template-columns: 1fr; min-height: 220px; background: linear-gradient(0deg, rgba(20,10,30,.95) 0%, rgba(20,10,30,.6) 55%, rgba(20,10,30,.1) 100%), var(--img) center / cover no-repeat, #1e1f22; } .ftxt b { font-size: 24px; }
  .fgo { flex-direction: column; align-items: stretch; } .fmiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fshop { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fsi.big { grid-column: 1 / -1; }
  .cmrow .gbtn { min-width: 0; } .skrow2 { grid-template-columns: 1fr; } .skrow2 .skart { justify-content: center; }
}

.sheet .rkpod { display: grid !important; grid-template-columns: 1fr 1.15fr 1fr !important; }
.sheet .rkpod .pod { width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; overflow: hidden; }
.sheet .rkpod .pod .pimg { width: 100%; height: 150px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.sheet .rkpod .pod.p1 .pimg { height: 190px; }
.sheet .rkpod .pod .pimg img { height: 100% !important; width: auto !important; max-width: 100% !important; object-fit: contain; }
.rpart img, .fsi.k-skin .fart img, .bcart img { max-width: 100% !important; width: auto !important; }
.wsk .ico { width: 64px !important; height: 64px !important; }
@media (max-width: 700px) { .sheet .rkpod .pod .pimg { height: 100px; } .sheet .rkpod .pod.p1 .pimg { height: 126px; } .wsk .ico { width: 44px !important; height: 44px !important; } }

/* 뽑기 탭 v3 (2026-11-04): 세로 일러스트 한 장이 탭 전체를 채움 · 정보 표·보유 현황은 '확률 정보'·관리 창으로 */
.sheet .bigbanner.tall { min-height: min(860px, calc(100vh - 150px)); clip-path: polygon(0 0, 46% 0, 50% 14px, calc(100% - 14px) 14px, 100% 28px, 100% 100%, 0 100%); }
.shopmain > .bigbanner.tall { flex: 1 0 auto; }
.sheet .bigbanner.tall .bnart { background: var(--img) center 40% / cover no-repeat !important; -webkit-mask: none !important; mask: none !important; }
.sheet .bigbanner.tall .bnart::after { background: linear-gradient(rgba(18,19,22,.9) 0%, rgba(18,19,22,.35) 22%, rgba(18,19,22,0) 38%, rgba(18,19,22,0) 62%, rgba(18,19,22,.75) 82%, rgba(18,19,22,.95) 100%) !important; }
.sheet .bigbanner.tall .bntop { position: relative; z-index: 2; }
.sheet .bigbanner.tall .buyrow { position: relative; z-index: 2; margin-top: auto; background: rgba(18,19,22,.82) !important; backdrop-filter: blur(2px); }
@media (max-width: 700px) {
  .sheet .bigbanner.tall { min-height: 0; aspect-ratio: 2 / 3.1; }
  .sheet .bigbanner.tall .bntop { min-height: 0 !important; }
}
.sheet .bigbanner.tall .buyrow { display: flex !important; flex-wrap: wrap; }
.sheet .bigbanner.tall .buyrow .glvbar { flex: 1 0 100%; } .sheet .bigbanner.tall .buyrow .gbtn { flex: 1 1 0; min-width: 0; }

/* 전투력 (2026-11-04): HUD 첫 줄 + 변화 알림 */
.pwico { display: inline-block; width: 20px; height: 20px; flex: none; background: var(--t-y); -webkit-mask: url(/assets/final/ui/li/sword.webp) center / contain no-repeat; mask: url(/assets/final/ui/li/sword.webp) center / contain no-repeat; }
.stat.powerrow { display: flex !important; align-items: center; cursor: pointer; }
.stat.powerrow b { color: var(--t-y) !important; font-size: 20px !important; }
.powpop { position: fixed; left: 50%; top: 150px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 20px 10px 16px; background: rgba(30,31,34,.94); color: #fff; box-shadow: inset 0 0 0 1px #4a4b50, 0 6px 18px rgba(0,0,0,.35); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); pointer-events: none; opacity: 0; transform: translate(-50%, -10px); transition: opacity .2s, transform .2s; font: 400 16px var(--disp); white-space: nowrap; }
.powpop.show { opacity: 1; transform: translate(-50%, 0); }
.powpop .pwico { width: 24px; height: 24px; }
.powpop .pl { color: #c9c9c3; font-size: 14px; }
.powpop .pn { font: 400 26px var(--disp); color: #fff; font-variant-numeric: tabular-nums; }
.powpop em { font-style: normal; font-size: 18px; }
.powpop.up em { color: #7fe08a; } .powpop.down em { color: #ff7a6b; } .powpop.down .pwico { background: #ff7a6b; }
.powpop.pulse .pn { animation: powpulse .45s ease-out; }
@keyframes powpulse { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
body.panelopen .powpop { top: 262px; }
@media (min-width: 701px) { body.panelopen .powpop { left: 21vw; } }
@media (max-width: 700px) { .powpop { top: 128px; padding: 8px 14px; gap: 8px; } .powpop .pn { font-size: 21px; } .powpop em { font-size: 15px; } .stat.powerrow b { font-size: 16px !important; } }

/* 결과 카드 v2 (2026-11-04) — 장면 + 게이지 + 아이콘 카드 */
.resultbox.v2 { width: min(94vw, 760px) !important; display: grid !important; grid-template-columns: 250px minmax(0, 1fr); padding: 0 !important; background: var(--t-plate, #f1f1ec) !important; border: 0 !important; border-radius: 0 !important; box-shadow: 0 18px 50px rgba(0,0,0,.45) !important; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); overflow: hidden; }
.rscene { position: relative; min-height: 300px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px), radial-gradient(circle at 50% 70%, #3a3b40 0, #1e1f22 70%); overflow: hidden; }
.resultbox.v2.win .rscene { background: repeating-linear-gradient(135deg, rgba(255,212,0,.07) 0 10px, transparent 10px 20px), radial-gradient(circle at 50% 65%, #5a4a10 0, #1e1f22 72%); }
.rscene .rhero { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.resultbox.v2.lose .rscene .rhero { left: 40%; }
.rscene .rfoe { position: absolute; right: -26px; top: 18px; opacity: .9; filter: drop-shadow(0 0 18px rgba(170,60,255,.45)); }
.rscene .rstamp { position: absolute; left: 14px; top: 14px; font: 400 12px var(--t-mono, monospace); letter-spacing: 2px; color: #1e1f22; background: var(--t-y, #ffd400); padding: 3px 8px; }
.resultbox.v2.lose .rstamp { background: #ff5a4a; color: #fff; }
.resultbox.v2 .rmain { padding: 18px 20px 18px; display: grid; gap: 12px; align-content: start; }
.resultbox.v2 .rhead { display: block !important; background: none !important; padding: 0 !important; color: var(--t-ink, #1e1f22) !important; }
.resultbox.v2 .rhead small { display: block; font: 400 11px var(--t-mono, monospace) !important; color: #8a8b8f !important; letter-spacing: .5px; }
.resultbox.v2 .rhead b { display: block; font: 400 30px var(--disp) !important; color: var(--t-ink, #1e1f22) !important; margin: 2px 0 2px; }
.resultbox.v2 .rhead span { display: block; font-size: 13px; color: #5a5b60 !important; }
.rgauge { background: #1e1f22; color: #fff; padding: 12px 14px; }
.rgl { display: flex; align-items: baseline; gap: 8px; } .rgl span { font-size: 12px; color: #b9b9b3; } .rgl b { font: 400 26px var(--disp); color: #ff7a6b; } .rgl em { margin-left: auto; font-style: normal; font-size: 11px; color: #9a9b9f; }
.resultbox.v2.win .rgl b { color: #7fe08a; }
.rgbar { position: relative; height: 12px; background: #3a3b40; margin: 6px 0 6px; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.rgbar i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #ff7a6b 0 8px, #e85a4a 8px 10px); }
.rgbar s { position: absolute; right: 0; top: -2px; bottom: -2px; width: 3px; background: var(--t-y, #ffd400); }
.rgauge small { font-size: 12px; color: #e2e2dc; }
.rtips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rtip { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; background: #fff; border: 0; box-shadow: inset 0 0 0 1px #d8d8d2; cursor: pointer; font-family: inherit; color: var(--t-ink, #1e1f22); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.rtip:hover { box-shadow: inset 0 0 0 2px #1e1f22; }
.rtip .li { width: 34px; height: 34px; background: #1e1f22; }
.rtip b { font: 400 16px var(--disp); margin-top: 4px; } .rtip small { font-size: 11px; color: #8a8b8f; }
.resultbox.v2 .rgrid { margin: 0 !important; }
.resultbox.v2 .rbtns { margin: 0 !important; }
.resultbox.v2.lose .rbtns .gbtn[data-act="result"] { background: transparent !important; color: #1e1f22 !important; box-shadow: inset 0 0 0 1px #9a9b9f !important; min-height: 46px; }
@media (max-width: 700px) {
  .resultbox.v2 { grid-template-columns: 1fr; width: 94vw !important; }
  .rscene { min-height: 170px; }
  .rscene .rhero .ico, .rscene .rhero canvas { transform: scale(.8); }
  .rscene .rfoe { transform: scale(.75); transform-origin: top right; right: -10px; }
  .resultbox.v2 .rhead b { font-size: 24px !important; }
  .rtip b { font-size: 14px; }
}

/* FEVER 비누 테두리 (2026-11-04): 무지갯빛 가장자리, opacity만 애니메이션 */
.feveredge { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(255,154,216,.18) 74%, rgba(159,243,255,.26) 88%, rgba(217,179,255,.34) 100%),
              linear-gradient(90deg, rgba(255,243,160,.18), transparent 12%, transparent 88%, rgba(159,243,255,.18)); }
body.fever .feveredge { opacity: 1; animation: fevedge 1.1s ease-in-out infinite alternate; }
@keyframes fevedge { from { opacity: .55; } to { opacity: 1; } }

/* ── 빌드 프리셋 · 스탯 v2 · 스킬 트리 (2026-11-04) ── */
.pagebar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pagebar > small { font: 400 11px var(--t-mono, monospace); letter-spacing: 1px; color: var(--t-mute); margin-right: 2px; }
.pagebar > em { font-style: normal; font-size: 12px; color: #c0392b; }
.pgb { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 6px; border: 0; background: var(--t-plate); color: var(--t-ink); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut-s); font-family: inherit; cursor: pointer; }
.pgb b { width: 28px; height: 28px; display: grid; place-items: center; background: var(--t-ink); color: #fff; font: 400 16px var(--disp); }
.pgb span { font-size: 14px; }
.pgb.on { background: var(--t-y); box-shadow: inset 0 0 0 2px var(--t-ink); }
.pgb.on b { background: var(--t-ink); color: var(--t-y); }
.pgb.lock { color: var(--t-mute); background: transparent; box-shadow: inset 0 0 0 1px var(--t-line); }
.pgb.lock .li { width: 18px; height: 18px; background: var(--t-mute); }
.pgb:disabled { opacity: .45; cursor: default; }
.autorow { display: flex; align-items: center; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.autorow small { font-size: 12px; color: var(--t-mute); margin-right: auto; }
.gstat .gn small { display: block; font: 400 11px var(--body, inherit) !important; color: var(--t-mute) !important; margin-top: 2px; letter-spacing: 0; }
.gstat.locked { opacity: .5; }
.gstat.maxed .gv { color: #8a8b8f; }
.gtag { display: inline-grid; place-items: center; min-width: 64px; min-height: 40px; padding: 0 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--t-line); color: var(--t-mute); font: 400 14px var(--disp); }
.gtag.max { background: var(--t-ink); color: var(--t-y); box-shadow: none; }
.sinfo em.sty { background: transparent !important; color: #6b55d9; box-shadow: inset 0 0 0 1px #6b55d9; margin-left: 4px; }
.sinfo em.sty.ph { color: #c7642a; box-shadow: inset 0 0 0 1px #c7642a; }
.stysel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 12px; background: rgba(0,0,0,.04); box-shadow: inset 0 0 0 1px var(--t-line); }
.stysel p { flex: 1 1 100%; margin: 4px 0 0; font-size: 12.5px; color: var(--t-ink); }
.tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.tbranch { display: grid; gap: 6px; align-content: start; padding: 0 0 8px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); }
.tbh { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px; background: var(--t-ink); color: #fff; border-top: 3px solid var(--bc); }
.tbh b { font: 400 18px var(--disp); } .tbh small { font-size: 12px; color: #c9c9c3; }
.sknode { position: relative; display: grid; gap: 2px; margin: 0 8px; padding: 8px 10px; text-align: left; border: 0; background: #fff; color: var(--t-ink); box-shadow: inset 0 0 0 1px var(--t-line); font-family: inherit; cursor: pointer; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.sknode b { font: 400 15px var(--disp); } .sknode span { font-size: 11.5px; color: #5a5b60; line-height: 1.3; } .sknode em { font-style: normal; font: 400 12px var(--t-mono, monospace); color: var(--t-mute); }
.sknode.has { box-shadow: inset 0 0 0 2px var(--bc); } .sknode.has em { color: var(--t-ink); }
.sknode.full { background: color-mix(in srgb, var(--bc) 14%, #fff); }
.sknode.key { background: var(--t-ink); color: #fff; } .sknode.key span { color: #d6d6d0; } .sknode.key b { color: var(--t-y); }
.sknode.key.has { box-shadow: inset 0 0 0 2px var(--t-y); }
.sknode.lock { opacity: .45; }
.sknode:disabled { cursor: default; }
.sknode:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--t-ink); }
@media (max-width: 700px) {
  .tree { grid-template-columns: 1fr; }
  .pgb { min-height: 36px; padding-right: 10px; } .pgb span { font-size: 12px; }
  .gstat .gn small { display: none; }
}
.skdetail .stysel { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .skdetail .stysel p { color: #e6e6e0; }

/* ── 스킬 화면 v3 · 스킬 트리 v2 (2026-11-04) ── */
.sk2head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.sk2book { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--t-ink); color: #fff; clip-path: var(--cut-s); }
.sk2book .li { width: 20px; height: 20px; background: var(--t-y); } .sk2book small { font-size: 12px; color: #c9c9c3; } .sk2book b { font: 400 22px var(--disp); color: var(--t-y); }
.sk2mix { display: flex; gap: 6px; margin-right: auto; } .sk2mix span { font-size: 12px; padding: 4px 8px; box-shadow: inset 0 0 0 1px currentColor; }
.sk2mix .mg { color: #6b55d9; } .sk2mix .ph { color: #c7642a; }
.sk2list { display: grid; gap: 8px; }
.sk2 { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto 58px 112px; gap: 12px; align-items: center; padding: 10px 12px 10px 16px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); clip-path: var(--cut-s); }
.sk2.open { box-shadow: inset 0 0 0 2px var(--t-ink); }
.sk2no { position: absolute; left: 0; top: 0; background: var(--t-ink); color: #fff; font: 400 11px var(--t-mono, monospace); padding: 1px 5px; }
.sk2ic { width: 60px; height: 60px; display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--ec); cursor: pointer; }
.sk2main { min-width: 0; cursor: pointer; } .sk2main b { display: flex; align-items: center; gap: 6px; font: 400 19px var(--disp); color: var(--t-ink); }
.sk2main b em { font: 400 11px var(--body, inherit); font-style: normal; color: #fff; padding: 1px 6px; }
.sk2st { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font: 400 14px var(--disp); color: var(--t-ink); } .sk2st i { font-style: normal; font: 400 11px var(--body, inherit); color: var(--t-mute); margin-right: -6px; }
.sk2seg { display: inline-flex; box-shadow: inset 0 0 0 1px var(--t-ink); }
.sk2seg button { border: 0; background: transparent; padding: 9px 12px; font: 400 14px var(--disp); color: var(--t-mute); cursor: pointer; font-family: inherit; }
.sk2.mg .sk2seg button.on { background: #6b55d9; color: #fff; } .sk2.ph .sk2seg button.on { background: #c7642a; color: #fff; }
.sk2lv { text-align: center; } .sk2lv small { display: block; font-size: 11px; color: var(--t-mute); } .sk2lv b { font: 400 26px var(--disp); color: var(--t-ink); }
.sk2 > .gbtn { min-height: 52px; } .sk2 > .gbtn small { display: flex !important; align-items: center; justify-content: center; gap: 3px; } .sk2 > .gbtn small .li { width: 13px; height: 13px; }
.sk2more { grid-column: 1 / -1; display: grid; gap: 4px; padding: 10px 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--t-line); }
.sk2more p { margin: 0; font-size: 13px; color: var(--t-ink); } .sk2more p b { display: inline-block; min-width: 52px; font: 400 13px var(--disp); color: var(--t-mute); margin-right: 6px; }
.sk2.empty { grid-template-columns: 1fr auto; color: var(--t-mute); font: 400 15px var(--disp); }
.tr2top { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.tr2pts { display: grid; align-content: center; justify-items: center; min-width: 110px; padding: 8px 12px; background: var(--t-ink); color: #fff; clip-path: var(--cut-s); }
.tr2pts small { font-size: 11px; color: #c9c9c3; } .tr2pts b { font: 400 34px var(--disp); color: var(--t-y); line-height: 1; } .tr2pts span { font-size: 12px; color: #c9c9c3; }
.tr2tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tr2tab { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-top: 3px solid var(--bc); background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); color: var(--t-ink); text-align: left; cursor: pointer; font-family: inherit; }
.tr2tab .li { width: 26px; height: 26px; background: var(--bc); flex: none; } .tr2tab span { flex: 1; min-width: 0; } .tr2tab b { display: block; font: 400 17px var(--disp); } .tr2tab small { display: block; font-size: 11px; color: var(--t-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr2tab em { font-style: normal; font: 400 16px var(--disp); color: var(--t-mute); }
.tr2tab.on { background: var(--t-ink); color: #fff; box-shadow: none; } .tr2tab.on small { color: #c9c9c3; } .tr2tab.on em { color: var(--t-y); }
.tr2body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 10px; }
.tr2graph { position: relative; display: grid; gap: 0; padding: 6px 0; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(0,0,0,.035) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(0,0,0,.035) 23px 24px), #f7f7f3; box-shadow: inset 0 0 0 1px var(--t-line); }
.tr2graph::before { content: ''; position: absolute; left: calc(50% + 40px); top: 40px; bottom: 50px; width: 3px; transform: translateX(-50%); background: var(--bc); opacity: .55; }
.tr2row { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; min-height: 104px; }
.tr2row + .tr2row { border-top: 1px dashed rgba(0,0,0,.08); }
.tr2row.lock .tr2nodes { opacity: .38; filter: grayscale(1); }
.tr2tier { display: grid; justify-items: center; gap: 2px; } .tr2tier b { font: 400 16px var(--disp); color: var(--t-ink); } .tr2tier small { font-size: 10.5px; color: var(--t-mute); text-align: center; line-height: 1.2; padding: 0 4px; }
.tr2row.lock .tr2tier b { color: var(--t-mute); }
.tr2nodes { position: relative; display: flex; justify-content: center; gap: 26px; }
.tr2nodes::before { content: ''; position: absolute; left: 22%; right: 22%; top: 30px; height: 3px; background: var(--bc); opacity: .35; }
.tr2n { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; width: 86px; border: 0; background: transparent; padding: 0; cursor: pointer; font-family: inherit; }
.tr2i { width: 60px; height: 60px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px #b9b9b3; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.tr2i .li { width: 30px; height: 30px; background: #9a9b9f; }
.tr2n.sp .tr2i { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 64px; height: 64px; }
.tr2n.key .tr2i, .tr2i.key { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); width: 74px; height: 64px; background: var(--t-ink); } .tr2n.key .tr2i .li, .tr2i.key .li { background: var(--t-y); }
.tr2n.can .tr2i { box-shadow: inset 0 0 0 2px var(--t-ink); } .tr2n.can .tr2i .li { background: var(--t-ink); }
.tr2n.has .tr2i { background: var(--bc); box-shadow: none; } .tr2n.has .tr2i .li { background: #fff; }
.tr2n.full .tr2i { box-shadow: inset 0 0 0 3px var(--t-y); }
.tr2n.sel .tr2i { outline: 3px solid var(--t-y); outline-offset: 2px; }
.tr2n em { position: absolute; top: 46px; right: 6px; font-style: normal; font: 400 11px var(--t-mono, monospace); background: var(--t-ink); color: #fff; padding: 0 4px; }
.tr2n.full em { background: var(--t-y); color: var(--t-ink); }
.tr2n b { font: 400 13px var(--disp); color: var(--t-ink); text-align: center; line-height: 1.15; }
.tr2det { display: grid; gap: 10px; align-content: start; padding: 14px; background: var(--t-ink); color: #fff; clip-path: var(--cut-s); }
.tr2dh { display: flex; align-items: center; gap: 10px; } .tr2dh small { font-size: 11px; color: #c9c9c3; } .tr2dh b { display: block; font: 400 22px var(--disp); color: var(--t-y); }
.tr2i.big { width: 56px; height: 56px; background: var(--bc); box-shadow: none; } .tr2i.big .li { background: #fff; }
.tr2rank { display: flex; align-items: center; gap: 4px; } .tr2rank i { width: 18px; height: 8px; background: #3a3b40; } .tr2rank i.on { background: var(--bc); } .tr2rank span { margin-left: auto; font: 400 14px var(--disp); }
.tr2cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tr2cmp div { padding: 8px; background: rgba(255,255,255,.06); } .tr2cmp small { display: block; font-size: 11px; color: #9a9b9f; } .tr2cmp b { font: 400 14px var(--disp); }
.tr2cmp div + div b { color: var(--t-y); }
.tr2eff { margin: 0; font-size: 13.5px; line-height: 1.45; color: #e6e6e0; } .tr2req { margin: 0; font-size: 12px; color: #ff9a8a; }
.tr2sum { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 6px; padding: 10px 12px; background: var(--t-plate); box-shadow: inset 0 0 0 1px var(--t-line); }
.tr2sum small { width: 100%; font-size: 11px; color: var(--t-mute); } .tr2sum span { font-size: 12.5px; padding: 3px 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--bc); color: var(--t-ink); } .tr2sum em { font-style: normal; font-size: 12.5px; color: var(--t-mute); }
@media (max-width: 700px) {
  .sk2 { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "ic main lv" "seg seg btn"; gap: 8px; padding: 10px 10px 10px 12px; }
  .sk2ic { grid-area: ic; width: 48px; height: 48px; } .sk2ic .ico, .sk2ic canvas { transform: scale(.85); } .sk2main { grid-area: main; } .sk2lv { grid-area: lv; } .sk2 .sk2seg { grid-area: seg; } .sk2 > .gbtn { grid-area: btn; min-height: 40px; }
  .sk2main b { font-size: 16px; } .sk2st { font-size: 12px; } .sk2seg button { padding: 7px 10px; font-size: 13px; }
  .tr2top { flex-direction: column; } .tr2pts { grid-auto-flow: column; gap: 8px; align-items: baseline; justify-content: start; } .tr2tab small { display: none; }
  .tr2body { grid-template-columns: 1fr; } .tr2row { grid-template-columns: 52px minmax(0, 1fr); min-height: 96px; } .tr2nodes { gap: 8px; } .tr2n { width: 76px; }
  .tr2graph::before { left: calc(50% + 26px); }
  .tr2i { width: 52px; height: 52px; } .tr2n em { top: 38px; }
}

/* ── 뽑기 카드 톡톡 (2026-11-04): 떨어질 때 눌렸다 튀고, 뒤집히면 한 번 더 통, NEW는 콩 ── */
.gacha.reveal .gcard { animation: gpop .5s cubic-bezier(.3, 1.6, .5, 1) var(--d) forwards; }
@keyframes gpop { 0% { opacity: 0; transform: translateY(-46px) scale(.7) rotate(-6deg); } 55% { opacity: 1; transform: translateY(6px) scale(1.06, .94) rotate(1deg); } 78% { transform: translateY(-3px) scale(.98, 1.03); } 100% { opacity: 1; transform: none; } }
.gacha.reveal .gface { animation: gface .32s cubic-bezier(.3, 1.8, .5, 1) calc(var(--d) + .62s) both; }
@keyframes gface { 0% { transform: rotateY(180deg) scale(.92); } 60% { transform: rotateY(180deg) scale(1.08); } 100% { transform: rotateY(180deg) scale(1); } }
.gacha.reveal .gface small.new { display: inline-block; animation: gnew .45s cubic-bezier(.3, 2, .5, 1) calc(var(--d) + .8s) both; }
@keyframes gnew { 0% { transform: scale(0) rotate(-12deg); } 100% { transform: scale(1) rotate(-3deg); } }
.gacha.instant .gface, .gacha.instant .gface small.new { animation: none; }
.gacha .gcard { cursor: default; transition: transform .15s; } .gacha .gcard:hover { transform: translateY(-4px) rotate(-1deg); }
.gcard .gface { padding: 16% 7% 20% !important; gap: 4px; }
.gface .gart { filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)) !important; }
.gface b { font: 400 13px/1.15 var(--disp) !important; word-break: keep-all; max-width: 100%; }
.gface em { top: 7% !important; left: 7% !important; font-size: 10px !important; padding: 1px 5px !important; }
.gacha .ggrid { justify-content: center; justify-items: stretch; }

/* 모바일: 트리 노드를 누르면 상세가 화면 아래에 붙어서 올라옴(스크롤해도 따라옴) */
.tr2x { display: none; }
@media (max-width: 700px) {
  .tr2det { position: sticky; bottom: 0; z-index: 5; display: none; margin: 0 -2px; box-shadow: 0 -10px 24px rgba(0,0,0,.28); animation: trup .26s cubic-bezier(.3, 1.4, .5, 1); }
  .tr2det.show { display: grid; }
  @keyframes trup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .tr2x { display: grid; place-items: center; position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 16px; cursor: pointer; }
  .tr2det .gbtn.big { min-height: 46px; }
}

/* ── 획득 알림 (2026-11-04) ── */
.gainpop { position: fixed; left: 50%; top: 96px; z-index: 75; width: min(92vw, 460px); padding: 12px 14px 14px; background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 0 0 2px #1e1f22; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); opacity: 0; transform: translate(-50%, -16px) scale(.94); pointer-events: none; transition: opacity .18s, transform .18s; }
.gainpop.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: gpin .42s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes gpin { 0% { transform: translate(-50%, -22px) scale(.8); } 60% { transform: translate(-50%, 3px) scale(1.04); } 100% { transform: translate(-50%, 0) scale(1); } }
.gph { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .gph b { font: 400 22px var(--disp); color: #1e1f22; background: #ffd400; padding: 0 10px; transform: rotate(-2deg); } .gph small { font: 400 12px var(--t-mono, monospace); color: #8a8b8f; }
.gpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.gpi { position: relative; display: grid; justify-items: center; gap: 1px; padding: 8px 4px 6px; background: #f3f3ef; box-shadow: inset 0 0 0 1px #dcdcd6; opacity: 0; animation: gpi .36s cubic-bezier(.3, 1.8, .5, 1) calc(var(--i) * .06s + .1s) forwards; }
@keyframes gpi { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 100% { opacity: 1; transform: none; } }
.gpi i { display: grid; place-items: center; height: 36px; font-style: normal; } .gpi i .li { width: 28px; height: 28px; background: #1e1f22; }
.gpi b { font: 400 12px var(--disp); color: #1e1f22; text-align: center; line-height: 1.15; word-break: keep-all; } .gpi em { font-style: normal; font: 400 15px var(--disp); color: #1e1f22; }
.gpi s { position: absolute; top: -5px; right: -3px; text-decoration: none; font: 400 10px var(--disp); background: #ff4a6a; color: #fff; padding: 1px 5px; transform: rotate(6deg); }
.gpi.t1 { box-shadow: inset 0 0 0 1px #dcdcd6, inset 0 3px 0 #4fbf5a; } .gpi.t2 { box-shadow: inset 0 0 0 1px #dcdcd6, inset 0 3px 0 #3a8ee6; } .gpi.t3 { box-shadow: inset 0 0 0 1px #dcdcd6, inset 0 3px 0 #9b5ce6; } .gpi.t4, .gpi.t5, .gpi.t6 { box-shadow: inset 0 0 0 1px #dcdcd6, inset 0 3px 0 #ffb000; }
.gpi.more { display: grid; place-items: center; font: 400 18px var(--disp); color: #8a8b8f; }
@media (max-width: 700px) { .gainpop { top: 70px; } .gpl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (min-width: 701px) { body.panelopen .gainpop { left: 21vw; width: min(38vw, 440px); } }
.gpi b { font-size: 13px !important; } .gpi em { font-size: 17px !important; } .gpi i { height: 40px; } .gpi i .ico, .gpi i canvas { width: 36px !important; height: 36px !important; }

/* ══ 모바일 HUD v10 (2026-11-04, 실기기 390×844 기준): 겹침 정리 · 크기 축소 · 안전 영역 ══ */
@media (max-width: 700px) {
  :root { --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); }
  .hud.top .herocard { position: fixed !important; left: 8px !important; top: calc(var(--st) + 8px) !important; width: 186px !important; min-height: 0 !important; height: 56px !important; padding: 5px 8px 5px 5px !important; gap: 7px !important; }
  .hud.top .herocard .portrait { width: 44px !important; height: 44px !important; flex: none; } .hud.top .herocard .portrait canvas { width: 44px !important; height: 44px !important; }
  .hud.top .herocard .namerow { font-size: 12px !important; gap: 4px !important; white-space: nowrap; overflow: hidden; } .hud.top .herocard .namerow b { font-size: 12.5px !important; overflow: hidden; text-overflow: ellipsis; }
  .hud.top .herocard .bar { height: 7px !important; margin-top: 2px !important; } .hud.top .herocard .bar span { font-size: 8.5px !important; line-height: 7px !important; } .hud.top .herocard .titletag { display: none !important; }
  .hud.top .stats { position: fixed !important; left: 10px !important; top: calc(var(--st) + 70px) !important; gap: 0 !important; transform: none !important; }
  .hud.top .stats .stat { font-size: 12.5px !important; min-height: 19px !important; gap: 5px !important; padding: 0 !important; } .hud.top .stats .stat b { font-size: 14px !important; } .hud.top .stats .stat .lbl { font-size: 11px !important; }
  .hud.top .stats .stat .icoslot, .hud.top .stats .stat .ico, .hud.top .stats .pwico { width: 15px !important; height: 15px !important; }
  .hud.top .stats .stat.powerrow b { font-size: 15px !important; }
  .rightcol .topmenu, #topmenu { position: fixed !important; right: 8px !important; left: auto !important; top: calc(var(--st) + 8px) !important; display: flex !important; gap: 0 !important; width: auto !important; max-width: none !important; padding: 0 !important; transform: none !important; }
  #topmenu .tm { width: 36px !important; min-width: 0 !important; height: 38px !important; padding: 0 !important; display: grid !important; place-items: center !important; }
  #topmenu .tm span { display: none !important; } #topmenu .tm .li { width: 20px !important; height: 20px !important; }
  .plaque { position: fixed !important; right: 8px !important; left: auto !important; top: calc(var(--st) + 52px) !important; width: 168px !important; transform: none !important; min-height: 0 !important; padding: 4px 6px !important; }
  .plaque .plaquebody b { font-size: 14px !important; } .plaque .plaquebody small { font-size: 11px !important; } .plaque .arrow { width: 22px !important; min-width: 22px !important; font-size: 11px !important; }
  .plaque .plaquebtns { transform: scale(.82); transform-origin: top right; }
  #buffs { position: fixed !important; right: 8px !important; left: auto !important; top: calc(var(--st) + 112px) !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 3px !important; width: 168px !important; max-width: 168px !important; transform: none !important; }
  #buffs .buff2 { height: 19px !important; min-height: 0 !important; padding: 0 6px !important; font-size: 10.5px !important; max-width: 168px; }
  #buffs .buff2 b { font-size: 10.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #buffs .buff2 em { font-size: 10px !important; } #buffs .buff2 .bi { display: none !important; }
  #buffs .buff2:nth-child(n+4) { display: none !important; }
  #quest.questcard, #quest#quest.questcard { position: fixed !important; left: 8px !important; right: auto !important; bottom: auto !important; top: calc(var(--st) + 134px) !important; width: 300px !important; max-width: none !important; transform: scale(.68) !important; transform-origin: top left !important; margin: 0 !important; }
  #sideL.sidecol.left { position: fixed !important; left: 6px !important; right: auto !important; top: calc(var(--st) + 228px) !important; bottom: auto !important; transform: scale(.74) !important; transform-origin: top left !important; }
  #sideR.sidecol.right { position: fixed !important; right: 6px !important; left: auto !important; top: calc(var(--st) + 188px) !important; bottom: auto !important; transform: scale(.74) !important; transform-origin: top right !important; }
  .sidecol .sideb small, .sidecol .sideb .sub { font-size: 10px !important; }
  .hud.bottom .skillcluster { transform: scale(.8) !important; transform-origin: bottom right !important; }
  .feed { transform: scale(.82); transform-origin: bottom left; }
  .powpop { top: calc(var(--st) + 200px) !important; transform: translate(-50%, 0) scale(.86) !important; }
  .powpop:not(.show) { transform: translate(-50%, -10px) scale(.86) !important; }
  .gainpop { top: calc(var(--st) + 120px) !important; }
  .dock .mi.locked > span:not(.circ) { display: none !important; }
  .dock .mi.locked em { position: static !important; transform: none !important; display: block !important; font-size: 11px !important; margin-top: 4px; }
  .hudframe { display: none !important; }
}
@media (max-width: 700px) and (display-mode: standalone) { .hud.bottom .dock { padding-bottom: max(6px, var(--sb)) !important; } }

/* ══ 획득 띠 (PC·모바일 공통, 2026-11-04 표준) ══ */
.lootbar { position: fixed; left: 50%; top: 118px; z-index: 72; display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px 0 4px; background: rgba(18,19,22,.92); color: #fff; border-radius: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.32); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s, transform .2s; }
.lootbar.show { opacity: 1; transform: translate(-50%, 0); animation: lbin .38s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes lbin { 0% { transform: translate(-50%, -14px) scale(.86); } 60% { transform: translate(-50%, 2px) scale(1.03); } 100% { transform: translate(-50%, 0) scale(1); } }
.lootbar .lh { height: 26px; padding: 0 10px; display: grid; place-items: center; background: #ffd400; color: #1e1f22; font: 400 12.5px var(--disp, 'Jua'); border-radius: 13px; }
.lootbar .lc { position: relative; display: flex; align-items: center; gap: 3px; height: 26px; padding: 0 7px 0 3px; border-radius: 13px; font: 400 13px var(--disp, 'Jua'); }
.lootbar .lc i { display: grid; place-items: center; width: 22px; height: 22px; font-style: normal; } .lootbar .lc i .ico, .lootbar .lc i canvas { width: 22px !important; height: 22px !important; }
.lootbar .lc em { font-style: normal; color: #9ef09e; } .lootbar .lc b { color: #fff; font-weight: 400; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.lootbar .lc s { text-decoration: none; position: absolute; top: -8px; right: -4px; font: 400 9px var(--disp, 'Jua'); background: #ff4a6a; color: #fff; padding: 0 4px; border-radius: 6px; }
.lootbar .lc.r3 { background: linear-gradient(90deg, rgba(155,92,230,.6), rgba(155,92,230,.22)); box-shadow: inset 0 0 0 1.5px #b98cff; }
.lootbar .lc.r4 { background: linear-gradient(90deg, rgba(255,176,0,.65), rgba(255,176,0,.22)); box-shadow: inset 0 0 0 1.5px #ffd400; }
.lootbar.rare.r3 { box-shadow: 0 0 0 2px #b98cff, 0 0 22px rgba(155,92,230,.6); } .lootbar.rare.r4 { box-shadow: 0 0 0 2px #ffd400, 0 0 24px rgba(255,190,0,.6); }
.lootbar .lc.more { color: #c9c9c3; }
@media (min-width: 701px) { body.panelopen .lootbar { left: 21vw; } }
.mtopbg, .mmenu, .mfever, .mctrl, .mdrawer { display: none; }
@media (min-width: 701px) { .sidecol .sideb .hf { display: none !important; } }

/* ══ 모바일 HUD v11 (2026-11-04, A안 + 벤토 Q8 + 조작부 C3) ══ */
@media (max-width: 700px) {
  :root { --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --dk: calc(62px + var(--sb)); }
  html body .hudframe, html body #topmenu, html body .trialcard, html body #gFever, html body #gCombo, html body #autoB, html body #autoS, html body #dashBtn, html body .hud.top .stats .lbl, html body #ts { display: none !important; }
  .mtopbg { display: block; position: fixed; left: 0; right: 0; top: 0; height: calc(var(--st) + 92px); z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(18,19,22,.86) 0, rgba(18,19,22,.5) 62%, rgba(18,19,22,0)); }
  /* 1행: 프로필 · 골드 · 보석 · 메뉴 */
  html body .hud.top .herocard { position: fixed !important; left: 8px !important; top: calc(var(--st) + 6px) !important; width: 168px !important; height: 44px !important; padding: 0 !important; gap: 6px !important; background: none !important; box-shadow: none !important; clip-path: none !important; border: 0 !important; z-index: 6; }
  html body .hud.top .herocard .portrait { width: 40px !important; height: 40px !important; border-radius: 50% !important; overflow: hidden; box-shadow: 0 0 0 2px #ffd400 !important; flex: none; } html body .hud.top .herocard .portrait canvas { width: 40px !important; height: 40px !important; } html body .hud.top .herocard .lvbadge { display: none !important; }
  html body .hud.top .herocard .heroinfo { display: grid !important; gap: 3px !important; width: 120px !important; min-width: 0; }
  html body .hud.top .herocard .namerow { display: flex !important; align-items: baseline; gap: 4px !important; white-space: nowrap; overflow: hidden; color: #fff !important; } html body .hud.top .herocard .namerow .lvtxt { font: 400 11.5px var(--disp) !important; color: #ffd400 !important; } html body .hud.top .herocard .namerow b { font: 400 13px var(--disp) !important; color: #fff !important; overflow: hidden; text-overflow: ellipsis; }
  html body .hud.top .herocard .bar { height: 7px !important; margin: 0 !important; background: rgba(0,0,0,.6) !important; border: 0 !important; border-image: none !important; } html body .hud.top .herocard .bar.mp { display: none !important; } html body .hud.top .herocard .bar.xp { height: 3px !important; } html body .hud.top .herocard .bar span { font: 400 8px/7px var(--disp) !important; right: 3px; left: auto !important; } html body .hud.top .herocard .bar.xp span { display: none !important; }
  html body .hud.top .stats { position: static !important; transform: none !important; }
  html body .hud.top .stats .stat { position: fixed !important; z-index: 6; display: flex !important; align-items: center; gap: 4px !important; height: 26px !important; min-height: 0 !important; padding: 0 8px 0 5px !important; background: rgba(0,0,0,.45) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important; border-radius: 13px; }
  html body .hud.top .stats .stat b { font: 400 13.5px var(--disp) !important; color: #fff !important; }
  html body .hud.top .stats .stat .icoslot, html body .hud.top .stats .stat .ico, html body .hud.top .stats .stat canvas { width: 18px !important; height: 18px !important; }
  html body .hud.top .stats .stat:nth-child(2) { top: calc(var(--st) + 12px) !important; right: 132px !important; left: auto !important; min-width: 74px; }
  html body .hud.top .stats .stat.gem { top: calc(var(--st) + 12px) !important; right: 50px !important; left: auto !important; min-width: 72px; } html body .hud.top .stats .stat.gem .plus { width: 16px; height: 16px; display: grid; place-items: center; background: #ffd400; color: #1e1f22; border-radius: 50%; font: 700 12px sans-serif; margin-right: -4px; }
  html body .hud.top .stats .stat.powerrow { top: calc(var(--st) + 56px) !important; left: 8px !important; height: 24px !important; } html body .hud.top .stats .stat.powerrow b { color: #ffd400 !important; font-size: 13.5px !important; } html body .hud.top .stats .pwico { width: 14px !important; height: 14px !important; }
  .mmenu { display: grid; place-items: center; position: fixed; right: 8px; top: calc(var(--st) + 8px); z-index: 7; width: 36px; height: 34px; border: 0; border-radius: 9px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #fff; } .mmenu .li { width: 20px; height: 20px; background: #fff; } .mmenu .rd { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #ff4a6a; }
  /* 2행: 전투력 · 층 · 버프 */
  html body .plaque { position: fixed !important; left: 50% !important; right: auto !important; top: calc(var(--st) + 52px) !important; width: 150px !important; transform: translateX(-50%) !important; z-index: 6; padding: 3px 4px !important; min-height: 0 !important; }
  html body .plaque .plaquebody b { font-size: 13.5px !important; } html body .plaque .plaquebody small { font-size: 10px !important; } html body .plaque .arrow { width: 20px !important; min-width: 20px !important; font-size: 10px !important; }
  html body .plaque .plaquebtns { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) scale(.82); transform-origin: top center; margin-top: 2px; }
  html body #buffs { position: fixed !important; right: 8px !important; left: auto !important; top: calc(var(--st) + 52px) !important; width: 104px !important; max-width: 104px !important; z-index: 6; display: flex !important; flex-direction: column; align-items: flex-end; gap: 3px !important; transform: none !important; }
  html body #buffs .buff2 { height: 19px !important; padding: 0 6px !important; max-width: 104px; border-image: none !important; background: rgba(0,0,0,.55) !important; border-radius: 10px; } html body #buffs .buff2 b { font-size: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body #buffs .buff2 em { font-size: 9.5px !important; } html body #buffs .buff2 u { display: none !important; } html body #buffs .buff2:nth-child(n+4) { display: none !important; }
  /* 가장자리 벤토: 차콜 칸 + 아이콘 뒤 색 원판, 이벤트·상점은 큰 칸 색 채움 */
  html body #sideL.sidecol.left, html body #sideR.sidecol.right { position: fixed !important; top: calc(var(--st) + 152px) !important; bottom: auto !important; transform: none !important; display: grid !important; grid-template-columns: 40px 40px; gap: 4px 4px !important; z-index: 5; }
  html body #sideL.sidecol.left { left: 8px !important; right: auto !important; } html body #sideR.sidecol.right { right: 8px !important; left: auto !important; }
  html body .sidecol .sideb { position: relative; width: 40px !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: grid !important; justify-items: center; gap: 1px; background: none !important; box-shadow: none !important; border: 0 !important; clip-path: none !important; border-image: none !important; }
  html body .sidecol .sideb > .li { display: none !important; }
  html body .sidecol .sideb .hf { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: radial-gradient(circle at 50% 50%, var(--hc) 0 14px, #2a2b30 14.5px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 0 rgba(0,0,0,.35); }
  html body .sidecol .sideb .hf .ico, html body .sidecol .sideb .hf canvas { width: 28px !important; height: 28px !important; }
  html body .sidecol .sideb.big { grid-column: span 2; width: 84px !important; } html body .sidecol .sideb.big .hf { width: 84px; background: var(--hc); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.3), inset 0 -4px 0 rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.35); }
  html body .sidecol .sideb > b { font: 400 9.5px/1.1 var(--disp) !important; color: #fff !important; text-shadow: 0 1px 0 #000, 0 0 3px #000, 0 0 3px #000 !important; white-space: nowrap; letter-spacing: -.2px; }
  html body .sidecol .sideb > small { position: absolute; top: 29px; left: 50%; transform: translateX(-50%); font: 400 8.5px/11px var(--disp) !important; background: #1e1f22; color: #ffd400 !important; padding: 0 3px; white-space: nowrap; border-radius: 2px; }
  html body .sidecol .sideb.dot::after { top: -3px !important; right: -3px !important; left: auto !important; width: 9px !important; height: 9px !important; }
  /* 하단: 퀘스트 띠 */
  html body #quest#quest.questcard { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(var(--dk) + 8px) !important; width: auto !important; height: 40px !important; min-height: 0 !important; transform: none !important; margin: 0 !important; z-index: 6; display: flex !important; align-items: center; gap: 8px; padding: 0 4px 0 10px !important; background: rgba(18,19,22,.9) !important; border: 0 !important; border-image: none !important; box-shadow: none !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
  html body #quest .qico, html body #quest .qnum, html body #quest .prog { display: none !important; }
  html body #quest small { flex: none; font: 400 10px var(--disp) !important; color: #1e1f22 !important; background: #ffd400; padding: 1px 5px; position: static !important; }
  html body #quest > b { flex: 1; min-width: 0; font: 400 13px var(--disp) !important; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: static !important; }
  html body #quest .reward { position: static !important; display: flex !important; align-items: center; gap: 6px; flex: none; } html body #quest .reward span { font: 400 12px var(--disp); color: #c9c9c3; } html body #quest .reward b { display: flex; align-items: center; gap: 2px; font: 400 12px var(--disp); color: #fff; }
  html body #quest .gbtn { flex: none; min-height: 32px !important; height: 32px; padding: 0 10px !important; font-size: 13px !important; background: #ffd400 !important; color: #1e1f22 !important; border-image: none !important; position: static !important; }
  html body #quest.done .reward span { display: none; }
  /* FEVER 막대 (계기판 대신) */
  .mfever { display: grid; gap: 3px; position: fixed; left: 8px; bottom: calc(var(--dk) + 56px); width: 140px; z-index: 6; pointer-events: none; }
  .mfl { display: flex; justify-content: space-between; align-items: baseline; font: 400 11px var(--disp); color: #fff; text-shadow: 0 1px 2px #000; } .mfl em { font-style: normal; color: #ffd400; }
  .mfb { height: 8px; display: flex; gap: 1px; padding: 1px; background: rgba(0,0,0,.55); } .mfb i { flex: 1; background: #555; } .mfb i.on { background: #ffd400; } .mfb i.hot { background: #ff8a2a; }
  .mfever.fever .mfb i.hot { animation: mfv .5s steps(2) infinite; } @keyframes mfv { 50% { opacity: .55; } }
  /* 스킬 한 줄 + 조작부 (공격 일반/카이팅 · 스킬 자동) */
  html body .hud.bottom .skillcluster { position: fixed !important; right: 8px !important; left: auto !important; bottom: calc(var(--dk) + 92px) !important; top: auto !important; width: auto !important; height: auto !important; transform: none !important; display: flex !important; flex-direction: row !important; gap: 5px !important; z-index: 6; }
  html body .skillcluster .sk[data-i] { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 40px !important; height: 40px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; clip-path: none !important; border-radius: 50% !important; overflow: hidden; background: rgba(20,21,24,.85) !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45) !important; display: grid !important; place-items: center; border: 0 !important; }
  html body.skauto .skillcluster .sk[data-i]:not(.off) { box-shadow: inset 0 0 0 2px #ffd400 !important; }
  html body .skillcluster .sk[data-i] .ico, html body .skillcluster .sk[data-i] canvas { width: 30px !important; height: 30px !important; transform: none !important; }
  html body .skillcluster .sk[data-i] .num { display: none !important; } html body .skillcluster .sk[data-i].off .num { display: block !important; position: static; color: rgba(255,255,255,.4); font: 400 13px var(--disp); }
  html body .skillcluster .sk[data-i] .cd { border-radius: 50%; } html body .skillcluster .sk[data-i] .cdt { font: 400 13px var(--disp) !important; }
  .mctrl { display: flex; align-items: center; gap: 5px; position: fixed; right: 8px; bottom: calc(var(--dk) + 56px); z-index: 6; }
  .seg2 { display: flex; align-items: center; height: 28px; padding: 2px; border-radius: 14px; background: rgba(18,19,22,.82); }
  .seg2 em { font: 400 10.5px var(--disp); font-style: normal; color: #c9c9c3; padding: 0 5px 0 7px; }
  .seg2 button { height: 24px; padding: 0 9px; border: 0; border-radius: 12px; background: transparent; color: #8a8b8f; font: 400 11.5px var(--disp); }
  .seg2 button.on[data-m="normal"] { background: #ffd400; color: #1e1f22; } .seg2 button.on[data-m="kite"] { background: #3fd6c4; color: #1e1f22; }
  .mctrl .sau { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 3px 0 9px; border: 0; border-radius: 14px; background: rgba(18,19,22,.82); color: #fff; font: 400 11px var(--disp); }
  .mctrl .sau b { font-weight: 400; } .mctrl .sau i { position: relative; width: 28px; height: 18px; border-radius: 9px; background: #55565c; } .mctrl .sau i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #c9c9c3; transition: left .15s; }
  .mctrl .sau.on i { background: #ffd400; } .mctrl .sau.on i::after { left: 12px; background: #1e1f22; }
  /* 드랍 피드 · 하단 메뉴 */
  html body .feed { left: 8px !important; right: auto !important; bottom: calc(var(--dk) + 92px) !important; top: auto !important; transform: none !important; max-width: 46vw; }
  html body .hud.bottom .dock { height: var(--dk) !important; padding-bottom: var(--sb) !important; }
  html body .powpop { top: calc(var(--st) + 140px) !important; }
  .lootbar { top: calc(var(--st) + 96px); max-width: calc(100vw - 16px); }
  body.panelopen .mctrl, body.panelopen .mfever, body.panelopen .mtopbg, body.panelopen .mmenu { display: none !important; }
  /* 메뉴 서랍 */
  .mdrawer { display: block; position: fixed; inset: 0; z-index: 80; pointer-events: none; }
  .mdrawer .mdim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; }
  .mdrawer .mdpan { position: absolute; right: 0; top: 0; bottom: 0; width: min(78vw, 272px); padding: calc(var(--st) + 10px) 14px calc(var(--sb) + 16px); background: #f6f6f2; display: grid; align-content: start; gap: 10px; overflow-y: auto; transform: translateX(105%); transition: transform .24s cubic-bezier(.3, 1.1, .5, 1); }
  body.mdopen .mdrawer { pointer-events: auto; } body.mdopen .mdrawer .mdim { opacity: 1; } body.mdopen .mdrawer .mdpan { transform: none; }
  .mdh { display: flex; align-items: center; justify-content: space-between; } .mdh b { font: 400 20px var(--disp); color: #1e1f22; } .mdh button { width: 32px; height: 32px; border: 0; background: #1e1f22; color: #fff; font-size: 15px; }
  .mdgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .mdi { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 0 8px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; color: #1e1f22; font-family: inherit; } .mdi .li { width: 24px; height: 24px; background: #1e1f22; } .mdi b { font: 400 12px var(--disp); }
  .mdi .rd { position: absolute; top: 5px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ff4a6a; }
  .mdrawer h4 { margin: 4px 0 0; font: 400 11px var(--disp); color: #8a8b8f; }
  .mdrow { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; font: 400 14px var(--disp); color: #1e1f22; text-align: left; }
  .mdrow .tog { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #ccc; } .mdrow .tog::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
  .mdrow .tog.on { background: #1e1f22; } .mdrow .tog.on::after { left: 21px; background: #ffd400; }
  .mdall { display: grid; gap: 4px; padding: 10px 12px; border: 0; background: #1e1f22; color: #fff; text-align: left; font-family: inherit; } .mdall b { display: flex; justify-content: space-between; font: 400 14px var(--disp); } .mdall p { margin: 0; font: 400 11px/1.5 'Noto Sans KR', sans-serif; color: #9a9b9f; }
  /* 결과·복귀 보상 창: 화면 안에서 끝나게 (본문만 스크롤, 버튼 고정) */
  html body .resultbox.v2 { max-height: calc(100dvh - var(--st) - var(--sb) - 24px) !important; grid-template-rows: auto minmax(0, 1fr) !important; overflow: hidden !important; }
  html body .resultbox.v2 .rscene { min-height: 110px !important; max-height: 130px; }
  html body .resultbox.v2.k-offline .rscene { display: none !important; }
  html body .resultbox.v2 .rmain { overflow-y: auto !important; min-height: 0; padding-bottom: 0 !important; }
  html body .resultbox.v2 .rbtns { position: sticky; bottom: 0; z-index: 2; background: var(--t-plate, #f1f1ec); padding: 8px 0 14px !important; margin-top: 4px !important; }
}

@media (max-width: 700px) {
  html body .hud.bottom .skillcluster #autoS#autoS, html body .hud.bottom .skillcluster #autoB#autoB, html body .hud.bottom .skillcluster #dashBtn#dashBtn { display: none !important; }
  html body .skillcluster .sk[data-i]::before, html body .skillcluster .sk[data-i]::after { display: none !important; }
}

@media (max-width: 700px) {
  html body .hud.top .herocard { width: 146px !important; } html body .hud.top .herocard .heroinfo { width: 98px !important; }
  html body .hud.top .herocard .bar::before, html body .hud.top .herocard .bar::after { display: none !important; }
  html body .hud.top .stats .stat:nth-child(2) { right: 136px !important; width: 86px !important; min-width: 0 !important; justify-content: space-between; }
  html body .hud.top .stats .stat.gem { right: 48px !important; width: 84px !important; min-width: 0 !important; justify-content: space-between; }
  html body .hud.top .stats .stat:nth-child(2) b, html body .hud.top .stats .stat.gem b { font-size: 12.5px !important; white-space: nowrap; overflow: hidden; }
}

@media (max-width: 700px) {
  html body .hud.top .stats .stat:nth-child(2) { right: 140px !important; width: 94px !important; padding-right: 9px !important; } html body .hud.top .stats .stat.gem { right: 48px !important; width: 88px !important; }
  html body .hud.top .stats .stat.gem .plus { display: none !important; }
  html body.panelopen .hud.bottom .skillcluster { display: none !important; }
  html body.panelopen .lootbar { top: calc(var(--st) + 60px); }
}

@media (max-width: 700px) {
  html body .resultbox.v2 { grid-template-columns: minmax(0, 1fr) !important; width: calc(100vw - 20px) !important; max-width: none !important; }
  html body .resultbox.v2 .rmain { padding: 16px 14px 0 !important; min-width: 0; }
  html body .resultbox.v2 .rgrid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; }
  html body .resultbox.v2 .rgrid > * { min-width: 0 !important; width: auto !important; padding: 8px 4px !important; }
  html body .resultbox.v2 .rgrid > * b, html body .resultbox.v2 .rgrid > * em, html body .resultbox.v2 .rgrid > * span { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html body .resultbox.v2 .rbtns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; width: 100% !important; }
  html body .resultbox.v2 .rbtns .gbtn { width: auto !important; min-width: 0 !important; min-height: 46px !important; font-size: 14px !important; }
  html body .resultbox.v2 .rbtns .gbtn:last-child { grid-column: 1 / -1; }
  html body .resultbox.v2 .rbtns .gbtn small { font-size: 11px !important; }
  html body .resultbox.v2 .rhead b { font-size: 24px !important; }
}

/* ══ 레퍼런스 UX A단계 (2026-11-05) ══ */
.curdlg .curtop { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px 10px; color: #1e1f22; }
.curdlg .curic { width: 60px; height: 60px; display: grid; place-items: center; background: #1e1f22; } .curdlg .curic .ico { width: 46px !important; height: 46px !important; }
.curdlg .curtop b { font: 400 20px var(--disp); } .curdlg .curtop small { display: block; font: 400 12px var(--t-mono, monospace); color: #8a8b8f; } .curdlg .curtop p { margin: 4px 0 0; font-size: 13px; color: #4e4f53; }
.curtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 16px; } .curtabs button { border: 0; height: 36px; background: #dcdcd6; color: #6b6c70; font: 400 14px var(--disp); cursor: pointer; } .curtabs button.on { background: #1e1f22; color: #ffd400; }
.curlist { display: grid; gap: 6px; padding: 10px 16px 16px; max-height: 50vh; overflow-y: auto; }
.currow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; color: #1e1f22; } .currow b { font: 400 14.5px var(--disp); } .currow span { font-size: 12px; color: #8a8b8f; }
.curdlg .dlg { width: min(400px, 100%); }
[data-act="cur"] { cursor: pointer; } .gc[data-act="cur"]:hover { box-shadow: inset 0 0 0 2px #1e1f22; }
.claimbar { display: flex; justify-content: flex-end; margin-bottom: 8px; } .claimbar .gbtn { min-width: 140px; }
.burstwrap { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; background: rgba(12,13,16,.72); animation: dlgin .16s ease-out; cursor: pointer; }
.burstwrap.out { opacity: 0; transition: opacity .18s; }
.bst { position: relative; display: grid; justify-items: center; gap: 14px; width: min(92vw, 520px); }
.bst > b { font: 400 30px var(--disp); color: #fff; letter-spacing: 2px; text-shadow: 0 2px 0 #000; position: relative; z-index: 1; } .bst > b::after { content: ''; display: block; height: 3px; margin-top: 4px; background: #ffd400; }
.bray { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; background: repeating-conic-gradient(rgba(255,212,0,.16) 0 8deg, transparent 8deg 24deg); border-radius: 50%; -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); animation: bspin 8s linear infinite; }
@keyframes bspin { to { transform: rotate(360deg); } }
.bgrid { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bgrid .bi { position: relative; display: grid; justify-items: center; align-content: center; width: 66px; height: 74px; background: #f6f6f2; box-shadow: inset 0 0 0 2px #1e1f22, 0 4px 0 rgba(0,0,0,.35); opacity: 0; animation: bipop .34s cubic-bezier(.3, 1.8, .5, 1) calc(var(--i) * .05s + .1s) forwards; }
.bgrid .bi i { font-style: normal; display: grid; place-items: center; height: 44px; } .bgrid .bi i .ico, .bgrid .bi i canvas { width: 40px !important; height: 40px !important; }
.bgrid .bi em { font-style: normal; font: 400 14px var(--disp); color: #1e1f22; } .bgrid .bi s { position: absolute; top: -6px; right: -4px; text-decoration: none; font: 400 9px var(--disp); background: #ff4a6a; color: #fff; padding: 0 4px; }
.bgrid .bi.t3 { box-shadow: inset 0 0 0 2px #9b5ce6, 0 0 16px rgba(155,92,230,.7); } .bgrid .bi.t4, .bgrid .bi.t5, .bgrid .bi.t6 { box-shadow: inset 0 0 0 2px #ffb000, 0 0 18px rgba(255,190,0,.75); }
@keyframes bipop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: none; } }
.bst > small { position: relative; z-index: 1; color: #c9c9c3; font: 400 13px var(--disp); }
.effbox { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; } .effbox > div { display: grid; gap: 1px; padding: 8px 10px; background: rgba(0,0,0,.05); box-shadow: inset 0 0 0 1px var(--t-line, #d6d6d0); }
.effbox small { font-size: 11px; color: #8a8b8f; } .effbox b { font: 400 16px var(--disp); color: #1e1f22; } .effbox em { font-style: normal; font: 400 12.5px var(--disp); color: #2e8f3e; }
.statlist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .slr { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid #dcdcd6; } .slr span { font-size: 13.5px; color: #4e4f53; } .slr b { font: 400 15px var(--disp); color: #1e1f22; }
.slr.top { grid-column: 1 / -1; padding: 10px 12px; background: #1e1f22; border: 0; } .slr.top span { color: #c9c9c3; } .slr.top b { color: #ffd400; font-size: 20px; }
.setgrp { display: grid; gap: 6px; margin-bottom: 14px; } .setgrp h4 { margin: 0 0 2px; font: 400 12px var(--disp); color: #8a8b8f; letter-spacing: 1px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; color: #1e1f22; text-align: left; font-family: inherit; cursor: pointer; } .setrow.static { cursor: default; }
.setrow b { display: block; font: 400 15px var(--disp); } .setrow small { display: block; font-size: 11.5px; color: #8a8b8f; margin-top: 1px; }
.setrow .tog { flex: none; position: relative; width: 42px; height: 24px; border-radius: 12px; background: #ccc; } .setrow .tog::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.setrow .tog.on { background: #1e1f22; } .setrow .tog.on::after { left: 21px; background: #ffd400; }
.seg3b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .seg3b button { height: 38px; border: 0; background: #dcdcd6; color: #4e4f53; font: 400 14px var(--disp); cursor: pointer; } .seg3b button.on { background: #1e1f22; color: #ffd400; }
body.nofeed .feed { display: none !important; }
.sleepov { display: none; position: fixed; inset: 0; z-index: 500; background: #08090b; color: #fff; place-items: center; text-align: center; cursor: pointer; }
body.sleeping .sleepov { display: grid; } .sleepov small { display: block; font: 400 13px var(--disp); color: #8a8b8f; letter-spacing: 3px; } .sleepov b { display: block; font: 400 54px var(--disp); color: #ffd400; margin: 6px 0; } .sleepov p { margin: 0 0 18px; font: 400 15px var(--disp); color: #c9c9c3; } .sleepov em { font-style: normal; font: 400 12px var(--disp); color: #55565c; animation: slp 2.4s ease-in-out infinite; }
@keyframes slp { 50% { opacity: .35; } }
@media (max-width: 700px) { .statlist { grid-template-columns: 1fr; } .effbox { grid-template-columns: 1fr; } }

/* ── B⑦ 층 진행 막대 → 돌파 버튼 (2026-11-05) ── */
.stgbar { position: fixed; left: 50%; top: 112px; width: 230px; transform: translateX(-50%); z-index: 6; display: grid; justify-items: center; gap: 4px; }
body.panelopen .stgbar { left: 21vw; }
.stgbar .sbt { width: 100%; height: 5px; background: rgba(0,0,0,.45); } .stgbar .sbt i { display: block; height: 100%; background: #ffd400; transition: width .3s; }
.stgbar .sbgo, .stgbar .sbauto { display: none; }
.stgbar.ready .sbgo { display: block; height: 30px; padding: 0 18px; border: 0; background: #e2483d; color: #fff; font: 400 14px var(--disp); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); cursor: pointer; animation: sbp 1s ease-in-out infinite; }
@keyframes sbp { 50% { transform: scale(1.06); } }
.stgbar.ready .sbauto { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 0; background: rgba(0,0,0,.55); color: #fff; font: 400 11px var(--disp); cursor: pointer; }
.stgbar .sbauto i { width: 11px; height: 11px; box-shadow: inset 0 0 0 1.5px #fff; } .stgbar .sbauto.on i { background: #ffd400; box-shadow: none; }
.stgbar.ready ~ * { }
body .breakbtn { display: none !important; }
@media (max-width: 700px) { .stgbar { top: calc(var(--st, 0px) + 94px); width: 146px; } body.panelopen .stgbar { display: none !important; } .stgbar.ready .sbgo { height: 26px; font-size: 12.5px; padding: 0 14px; } }

/* ── B단계 나머지 (2026-11-05) ── */
.stnums { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 6px 0; } .stnums > div { padding: 6px 8px; background: rgba(0,0,0,.05); box-shadow: inset 0 0 0 1px #dcdcd6; } .stnums small { display: block; font-size: 10.5px; color: #8a8b8f; } .stnums b { font: 400 14px var(--disp); color: #1e1f22; }
.stjump { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0; } .stjump button { height: 32px; border: 0; background: #dcdcd6; color: #1e1f22; font: 400 13px var(--disp); cursor: pointer; } .stjump button:nth-child(n+5) { grid-column: span 2; background: #1e1f22; color: #ffd400; } .stjump button:disabled { opacity: .4; cursor: default; }
.dgauto { display: flex; align-items: center; gap: 6px; margin: 6px 0; font: 400 13.5px var(--disp); color: #1e1f22; cursor: pointer; } .dgauto small { font-size: 11px; color: #8a8b8f; } .dgauto input { width: 18px; height: 18px; accent-color: #1e1f22; }
.dgauton { margin: 4px 0 8px; padding: 8px 10px; background: #1e1f22; color: #ffd400; font: 400 13px var(--disp); text-align: center; animation: slp 1.2s ease-in-out infinite; }
.gbtn.ad { background: #3a7bf0 !important; color: #fff !important; }
.mexp { font-style: normal; font: 400 11px var(--disp); color: #8a8b8f; display: block; } .mexp b { color: #e2483d; font-weight: 400; }

.stdet .stnums > div { background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important; } .stdet .stnums small { color: #9a9b9f !important; } .stdet .stnums b { color: #fff !important; }
.stdet .stjump button { background: rgba(255,255,255,.1) !important; color: #fff !important; box-shadow: none !important; } .stdet .stjump button:nth-child(n+5) { background: #ffd400 !important; color: #1e1f22 !important; }
body.panelopen .stgbar { display: none !important; }
.sheet .gbtn.ad, .sheet .buyrow .gbtn.ad { background: #3a7bf0 !important; color: #fff !important; box-shadow: none !important; } .sheet .gbtn.ad small { color: #dbe7ff !important; }

.dgdetail .dgauto { color: #fff !important; } .dgdetail .dgauto small { color: #9a9b9f !important; } .dgdetail .dgauto input { accent-color: #ffd400; }
@media (min-width: 701px) { body.panelopen .lootbar { top: 250px; } }

/* ══ C단계 (2026-11-05) ══ */
.b3row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.b3 { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; text-align: center; }
.b3.on { box-shadow: inset 0 0 0 2px #1e1f22, inset 0 4px 0 #ffd400; }
.b3 > small { font: 400 12px var(--disp); color: #4e4f53; } .b3 > b { font: 400 22px var(--disp); color: #2e8f3e; }
.b3ic { width: 64px; height: 64px; display: grid; place-items: center; background: #1e1f22; } .b3:not(.on) .b3ic { opacity: .45; }
.b3 em { font-style: normal; font: 400 15px var(--disp); color: #1e1f22; }
.b3x { position: relative; width: 100%; height: 12px; background: #dcdcd6; } .b3x i { position: absolute; left: 0; top: 0; bottom: 0; background: #2e8f3e; } .b3x s { position: relative; text-decoration: none; display: block; font: 400 9.5px/12px var(--t-mono, monospace); color: #1e1f22; }
.b3 .b3t { font-size: 11.5px; color: #8a8b8f; } .b3.on .b3t { color: #1e1f22; }
.b3 .gbtn { width: 100%; min-height: 40px; }
.b3sub { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; } .b3sub > div { padding: 8px 10px; background: #1e1f22; color: #fff; } .b3sub small { display: block; font-size: 11px; color: #9a9b9f; } .b3sub b { font: 400 15px var(--disp); color: #ffd400; }
.colhead { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 4px; margin-bottom: 10px; } .colhead > div { padding: 8px 10px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; } .colhead > div:first-child { background: #1e1f22; }
.colhead small { display: block; font-size: 11px; color: #8a8b8f; } .colhead > div:first-child b { font: 400 24px var(--disp); color: #ffd400; } .colhead em { font-style: normal; font: 400 13px var(--disp); color: #1e1f22; }
.ptime { padding: 12px 14px; background: #1e1f22; color: #fff; margin-bottom: 10px; } .ptime small { display: block; font-size: 11.5px; color: #9a9b9f; } .ptime > b { font: 400 28px var(--disp); color: #ffd400; }
.ptbar { position: relative; height: 10px; margin: 10px 0 16px; background: #3a3b40; } .ptbar i { position: absolute; left: 0; top: 0; bottom: 0; background: #ffd400; } .ptbar s { position: absolute; top: 12px; transform: translateX(-100%); text-decoration: none; font: 400 10.5px var(--disp); color: #c9c9c3; }
.ptcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .ptc { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; } .ptc > b { font: 400 17px var(--disp); color: #1e1f22; }
.ptc.ready { box-shadow: inset 0 0 0 2px #ffd400; background: #fffbe0; } .ptc.got { opacity: .5; } .ptc em { font-style: normal; font: 400 13px var(--disp); color: #8a8b8f; } .ptc .gbtn { width: 100%; }
@media (max-width: 700px) { .b3 { padding: 8px 4px; } .b3ic { width: 46px; height: 46px; } .b3 > b { font-size: 18px; } .b3 > small { font-size: 10.5px; } .b3 .gbtn { font-size: 12px !important; min-height: 34px; } .colhead { grid-template-columns: 1fr 1fr; } .colhead > div:first-child { grid-column: 1 / -1; } .ptcards { grid-template-columns: 1fr 1fr; } .b3sub { grid-template-columns: 1fr; } }

/* ⑳ 장비 칸 보유 n/필요 막대 (합성 3개 / 각성 6개) */
.eqtile .ncnt { position: absolute; left: 6px; right: 6px; bottom: 22px; height: 10px; background: rgba(0,0,0,.55); } .eqtile .ncnt i { position: absolute; left: 0; top: 0; bottom: 0; background: #2e8f3e; } .eqtile .ncnt.full i { background: #ffd400; }
.eqtile .ncnt s { position: relative; display: block; text-align: center; text-decoration: none; font: 400 8.5px/10px var(--t-mono, monospace); color: #fff; }

.eqtile .ncnt { left: auto !important; right: 4px !important; top: 4px !important; bottom: auto !important; width: 34px !important; height: 11px !important; }
.effbox > div { background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; } .effbox small { color: #9a9b9f !important; } .effbox b { color: #fff !important; } .effbox em { color: #7fe08a !important; }

/* ══ 장비 창 v2 (2026-11-05, 레퍼런스 레이아웃) ══ */
.eqv2 { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 8px; height: 100%; min-height: 0; padding: 12px 14px 0; box-sizing: border-box; }
.etop { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "ic m" "b b"; gap: 8px 12px; padding: 12px; background: #1e1f22; color: #fff; clip-path: var(--cut-s); }
.etic { grid-area: ic; position: relative; width: 92px; height: 92px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3a3b40, #1e1f22); box-shadow: inset 0 0 0 2px #55565c; } .etic span { position: absolute; left: 4px; bottom: 3px; font: 400 11px var(--disp); color: #ffd400; }
.etmain { grid-area: m; display: grid; gap: 6px; min-width: 0; }
.eth { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .eth b { font: 400 19px var(--disp); } .eth small { font-size: 11.5px; color: #9a9b9f; } .eth em { margin-left: auto; font-style: normal; font: 400 15px var(--disp); color: #ffd400; }
.etsec { display: grid; gap: 2px; } .etsec > small { font: 400 10.5px var(--disp); color: #1e1f22; background: #c9a24a; justify-self: start; padding: 0 6px; } .etsec.own > small { background: #8a6cff; color: #fff; }
.etr { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: baseline; font-size: 13px; } .etr span { color: #c9c9c3; } .etr b { font: 400 14px var(--disp); color: #fff; } .etr i { font-style: normal; color: #ff8a2a; } .etr em { font-style: normal; font: 400 14px var(--disp); color: #ffb14a; }
.etbtns { grid-area: b; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .etbtns .gbtn { min-height: 42px; font-size: 14px !important; } .etbtns .gbtn small { display: flex !important; align-items: center; justify-content: center; gap: 3px; } .etbtns .gbtn small .li { width: 12px; height: 12px; }
.eslots { display: grid; grid-template-columns: repeat(5, 1fr) 1.4fr; gap: 6px; }
.esl { position: relative; height: 52px; display: grid; place-items: center; border: 0; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; cursor: pointer; } .esl span { position: absolute; left: 3px; top: 1px; font: 400 10px var(--t-mono, monospace); color: #8a8b8f; } .esl em { font-style: normal; color: #b5b5b0; font-size: 20px; }
.esl.on { box-shadow: inset 0 0 0 2px #1e1f22, inset 0 -3px 0 #ffd400; } .esl .ico, .esl canvas { width: 40px !important; height: 40px !important; }
.esyn { display: grid; align-content: center; gap: 0; border: 0; background: #1e1f22; color: #fff; text-align: left; padding: 0 10px; cursor: pointer; } .esyn small { font-size: 10px; color: #9a9b9f; } .esyn b { font: 400 13px var(--disp); color: #ffd400; } .esyn em { font-style: normal; font-size: 11px; color: #c9c9c3; }
.efilt { display: flex; gap: 4px; flex-wrap: wrap; } .efilt button { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 0; background: #dcdcd6; color: #4e4f53; font: 400 13.5px var(--disp); cursor: pointer; } .efilt button.on { background: #1e1f22; color: #ffd400; } .efilt button i { width: 9px; height: 9px; border-radius: 50%; background: var(--ec); }
.efilt.parts button { flex: 1; justify-content: center; height: 40px; } .efilt.parts button small { font-size: 10.5px; color: #8a8b8f; } .efilt.parts button .ico { width: 26px !important; height: 26px !important; }
.eslotup { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; font-size: 12.5px; color: #4e4f53; } .eslotup span { flex: 1; } .eslotup b { color: #1e1f22; font: 400 14px var(--disp); }
.egrid { display: grid; gap: 6px; align-content: start; overflow-y: auto; min-height: 0; padding: 2px 2px 8px; } .egrid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .egrid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ebar { position: sticky; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) 130px 130px; gap: 6px; align-items: center; padding: 8px 0 12px; background: var(--t-bg, #efefea); } .ebar span { font-size: 12.5px; color: #4e4f53; } .ebar span b { font: 400 14px var(--disp); color: #1e1f22; } .ebar .gbtn { min-height: 44px; }
.sheet[data-p="equip"] .eqv2 { max-height: 100%; }
@media (max-width: 700px) {
  .eqv2 { padding: 8px 8px 0; gap: 6px; } .etop { grid-template-columns: 70px minmax(0, 1fr); padding: 10px; } .etic { width: 70px; height: 70px; } .etic .ico, .etic canvas { width: 58px !important; height: 58px !important; }
  .eth b { font-size: 16px; } .etr { font-size: 12px; } .etbtns .gbtn { min-height: 38px; font-size: 12.5px !important; }
  .eslots { grid-template-columns: repeat(5, 1fr); } .esyn { display: none; } .esl { height: 46px; }
  .efilt { flex-wrap: nowrap; overflow-x: auto; } .efilt button { flex: none; height: 30px; padding: 0 10px; font-size: 12.5px; } .efilt.parts button { flex: 1; padding: 0 4px; } .efilt.parts button small { display: none; }
  .egrid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .ebar { grid-template-columns: 1fr 1fr; } .ebar span { grid-column: 1 / -1; }
}

.etbtns .gbtn.buy { background: #ff8a2a !important; color: #1e1f22 !important; box-shadow: none !important; } .etbtns .gbtn.buy small { color: #1e1f22 !important; } .etbtns .gbtn.buy .li { background: #1e1f22 !important; }
.etbtns .gbtn:disabled, .etbtns .gbtn[disabled] { opacity: .45; }
.etr { grid-template-columns: minmax(70px, auto) auto auto auto; justify-content: start; column-gap: 10px; }

/* ══ D단계 나머지 (2026-11-05) ══ */
.abtop, .lbtop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-bottom: 10px; } .lbtop { grid-template-columns: 1fr 1fr 1.4fr; }
.abtop > div, .lbtop > div { padding: 10px 12px; background: #1e1f22; color: #fff; } .abtop small, .lbtop small { display: block; font-size: 11px; color: #9a9b9f; } .abtop b, .lbtop b { font: 400 22px var(--disp); color: #ffd400; } .lbtop em { font-style: normal; font-size: 12px; color: #7fe08a; margin-left: 6px; }
.absum { display: flex; flex-wrap: wrap; gap: 4px; align-content: center; } .absum span { font: 400 12.5px var(--disp); padding: 2px 8px; background: rgba(255,255,255,.08); } .absum em { font-style: normal; color: #9a9b9f; font-size: 12px; }
.ablines { display: grid; gap: 4px; }
.abl { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; } .abl b { font: 400 15px var(--disp); color: #1e1f22; } .abl small { font-size: 11px; color: #8a8b8f; }
.abg { display: grid; place-items: center; height: 24px; font: 400 12px var(--disp); background: #dcdcd6; color: #4e4f53; }
.abl.g1 .abg { background: #4fbf5a; color: #fff; } .abl.g2 .abg { background: #3a8ee6; color: #fff; } .abl.g3 .abg { background: #9b5ce6; color: #fff; } .abl.g4 .abg { background: #ffb000; color: #1e1f22; } .abl.g4 { box-shadow: inset 0 0 0 2px #ffb000; }
.abl.lock { opacity: .5; } .ablk { border: 0; height: 28px; padding: 0 10px; background: #dcdcd6; color: #4e4f53; font: 400 12px var(--disp); cursor: pointer; } .ablk.on { background: #1e1f22; color: #ffd400; }
.abbar { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px; margin-top: 10px; align-items: center; } .abbar > .gbtn { min-height: 52px; } .abauto { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .abauto small { width: 100%; font-size: 11px; color: #8a8b8f; }
.lbtree { display: grid; gap: 22px; padding: 18px 10px; background: radial-gradient(circle at 50% 40%, #2a3350, #151a2a); position: relative; }
.lbrow { display: flex; justify-content: center; gap: 22px; position: relative; } .lbrow + .lbrow::before { content: ''; position: absolute; left: 20%; right: 20%; top: -12px; height: 2px; background: #4a6fd0; } .lbrow + .lbrow::after { content: ''; position: absolute; left: 50%; top: -22px; width: 2px; height: 10px; background: #4a6fd0; }
.lbn { display: grid; justify-items: center; gap: 2px; width: 92px; border: 0; background: none; cursor: pointer; font-family: inherit; color: #fff; } .lbn > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #3a4570; box-shadow: inset 0 0 0 2px #5a74c0; } .lbn > span .li { width: 26px; height: 26px; background: #c9d4ff; }
.lbn.has > span { background: #4a6fd0; } .lbn.sel > span { box-shadow: inset 0 0 0 3px #ffd400; } .lbn.run > span { animation: slp 1s ease-in-out infinite; } .lbn.lock { opacity: .4; } .lbn em { font-style: normal; font: 400 10.5px var(--t-mono, monospace); color: #c9d4ff; } .lbn b { font: 400 12px var(--disp); }
.lbdet { position: sticky; bottom: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; background: #1e1f22; color: #fff; box-shadow: inset 0 0 0 2px #c9a24a; }
.lbi { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #4a6fd0; } .lbi .li { width: 28px; height: 28px; background: #fff; } .lbdet small { font-size: 11px; color: #c9a24a; } .lbdet b { display: block; font: 400 17px var(--disp); } .lbdet p { margin: 2px 0 4px; font-size: 12.5px; color: #c9c9c3; } .lbdet p em { font-style: normal; color: #ffb14a; }
.lbbar { height: 6px; background: #3a3b40; } .lbbar i { display: block; height: 100%; background: #7fe08a; } .lbdet .gbtn { min-height: 50px; }
.awtop { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; background: radial-gradient(circle at 30% 50%, #5a2a2a, #1e1f22); color: #fff; margin-bottom: 10px; } .awtop img { width: 150px; height: 170px; object-fit: contain; object-position: bottom; }
.awtop small { font-size: 12px; color: #ffb14a; } .awtop b { display: block; font: 400 22px var(--disp); margin: 2px 0 6px; } .awtop p { margin: 0 0 4px; font-size: 13px; color: #e6e6e0; } .awtop p.nx { color: #7fe08a; }
.awmis { display: grid; gap: 4px; margin-bottom: 10px; } .awh { display: flex; justify-content: space-between; padding: 8px 10px; background: #c9a24a; color: #1e1f22; } .awh b, .awh em { font: 400 15px var(--disp); font-style: normal; }
.awm { display: grid; grid-template-columns: 26px minmax(0, 1fr) 46%; gap: 8px; align-items: center; padding: 8px 10px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; } .awm i { width: 22px; height: 22px; display: grid; place-items: center; font-style: normal; background: #dcdcd6; color: #fff; } .awm.ok i { background: #2e8f3e; } .awm span { font: 400 14px var(--disp); color: #1e1f22; }
.awb { position: relative; height: 18px; background: #e3e3de; } .awb s { position: absolute; left: 0; top: 0; bottom: 0; background: #9be86a; text-decoration: none; } .awm.ok .awb s { background: #ffd400; } .awb b { position: relative; display: block; text-align: center; font: 400 11.5px/18px var(--disp); color: #1e1f22; }
.smplist { display: grid; gap: 6px; } .smp { display: grid; grid-template-columns: 48px minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 8px 10px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; } .smi { width: 48px; height: 48px; display: grid; place-items: center; background: #1e1f22; }
.smp b { font: 400 15px var(--disp); color: #1e1f22; } .smp small { display: block; font-size: 11.5px; color: #8a8b8f; } .smb { position: relative; height: 14px; margin-top: 4px; background: #e3e3de; } .smb s { position: absolute; left: 0; top: 0; bottom: 0; background: #ffd400; text-decoration: none; } .smb em { position: relative; display: block; text-align: center; font: 400 10.5px/14px var(--disp); font-style: normal; color: #1e1f22; }
.exgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .exc { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; } .exc b { font: 400 15px var(--disp); color: #1e1f22; } .exc small { font-size: 11.5px; color: #8a8b8f; } .exc .gbtn { width: 100%; }
.miletop { padding: 12px 14px; background: #1e1f22; color: #fff; } .miletop small { display: block; font-size: 11.5px; color: #9a9b9f; } .miletop b { font: 400 30px var(--disp); color: #ffd400; } .miletop span { display: block; font-size: 12px; color: #c9c9c3; }
@media (max-width: 700px) { .lbtop { grid-template-columns: 1fr 1fr; } .lbtop .lbact { grid-column: 1 / -1; } .lbn { width: 76px; } .lbrow { gap: 8px; } .lbdet { grid-template-columns: 44px minmax(0, 1fr); } .lbdet .gbtn { grid-column: 1 / -1; } .abbar { grid-template-columns: 1fr; } .awtop { grid-template-columns: 90px minmax(0, 1fr); } .awtop img { width: 90px; height: 110px; } .awm { grid-template-columns: 22px minmax(0, 1fr); } .awm .awb { grid-column: 1 / -1; } .exgrid { grid-template-columns: 1fr 1fr; } .abl { grid-template-columns: 50px minmax(0, 1fr) auto; } .abl small { display: none; } }

/* ══ 가독성 v2 (2026-11-05, 시안 docs/mockups/rd2-*) ══ */
:root { --rt0: #9a9ca1; --rt1: #43b052; --rt2: #2f86e0; --rt3: #9050e0; --rt4: #f0a800; --rt5: #e2483d; --rt6: #e04aa8; }
.etop2 { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "ic m" "b b"; gap: 10px 12px; padding: 12px; background: #1e1f22; color: #fff; clip-path: var(--cut-s); }
.etic2 { grid-area: ic; position: relative; width: 96px; height: 96px; display: grid; place-items: center; background: var(--tc); box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); } .etic2 .ico, .etic2 canvas { width: 76px !important; height: 76px !important; }
.etic2 span { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 400 10.5px var(--disp); background: rgba(0,0,0,.5); }
.etm2 { grid-area: m; display: grid; gap: 4px; min-width: 0; } .eth2 { display: flex; align-items: center; gap: 8px; } .eth2 b { font: 400 20px var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eth2 i { font-style: normal; font: 400 12px var(--disp); padding: 1px 7px; background: var(--tc); color: #fff; } .eth2 em { margin-left: auto; font-style: normal; font: 400 15px var(--disp); color: #ffd400; white-space: nowrap; }
.etsub { font-size: 11.5px; color: #9a9b9f; }
.ebig { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ebig > div { padding: 6px 10px; background: rgba(255,255,255,.07); } .ebig small { display: block; font-size: 11px; color: #9a9b9f; } .ebig b { font: 400 23px var(--disp); color: #fff; } .ebig em { font-style: normal; font: 400 14px var(--disp); color: #7fe08a; margin-left: 6px; }
.etb2 { grid-area: b; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; } .etb2 .gbtn { min-height: 46px; font-size: 15px !important; }
.etb2 .gbtn:disabled, .etb2 .gbtn[disabled] { background: #2c2d31 !important; color: #55565c !important; box-shadow: none !important; opacity: 1 !important; } .etb2 .gbtn:disabled small { color: #55565c !important; }
.etb2 .gbtn.grey:not(:disabled) { background: #e7e7e1 !important; color: #1e1f22 !important; } .etb2 .gbtn.buy:not(:disabled) { background: #ff8a2a !important; color: #1e1f22 !important; } .etb2 .gbtn.buy small { color: #1e1f22 !important; }
.efilt button i { width: 12px !important; height: 12px !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ec); }
.efilt .eown { margin-left: auto; background: none !important; gap: 6px; color: #1e1f22; } .eown .tg { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #ccc; } .eown .tg::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; } .eown .tg.on { background: #1e1f22; } .eown .tg.on::after { left: 17px; background: #ffd400; }
.elegend { display: flex; flex-wrap: wrap; gap: 8px; font: 400 11.5px var(--disp); color: #4e4f53; } .elegend i { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; }
.egrid.own { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.eqv2 .egrid .eqtile { background: var(--tc, var(--rt0)) !important; padding: 3px !important; box-shadow: none !important; border: 0 !important; clip-path: none !important; display: grid !important; grid-template-rows: 1fr auto; aspect-ratio: auto !important; min-height: 0; }
.eqv2 .egrid .eqtile.r0 { --tc: var(--rt0); } .eqv2 .egrid .eqtile.r1 { --tc: var(--rt1); } .eqv2 .egrid .eqtile.r2 { --tc: var(--rt2); } .eqv2 .egrid .eqtile.r3 { --tc: var(--rt3); } .eqv2 .egrid .eqtile.r4 { --tc: var(--rt4); } .eqv2 .egrid .eqtile.r5 { --tc: var(--rt5); } .eqv2 .egrid .eqtile.r6 { --tc: var(--rt6); }
.eqv2 .egrid .eqtile.dim { filter: grayscale(1); opacity: .45; }
.eqv2 .egrid .eqtile .ico, .eqv2 .egrid .eqtile canvas { width: 100% !important; height: auto !important; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.45), rgba(255,255,255,.06) 70%); }
.eqv2 .egrid .eqtile .ty, .eqv2 .egrid .eqtile .pips { display: none !important; }
.eqv2 .egrid .eqtile .nm { position: static !important; font: 400 12px/1.25 var(--disp) !important; color: #fff !important; text-align: center; padding: 3px 2px 1px; text-shadow: 0 1px 0 rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none !important; }
.eqv2 .egrid .eqtile .eqb { position: absolute; left: 3px !important; top: 3px !important; right: auto !important; font: 400 10.5px var(--disp) !important; background: #1e1f22 !important; color: #ffd400 !important; padding: 0 5px !important; }
.eqv2 .egrid .eqtile .ncnt { right: 3px !important; top: 3px !important; width: auto !important; height: auto !important; background: rgba(0,0,0,.55) !important; padding: 0 5px; } .eqv2 .egrid .eqtile .ncnt i { display: none; } .eqv2 .egrid .eqtile .ncnt s { font: 400 10.5px/15px var(--disp) !important; } .eqv2 .egrid .eqtile .ncnt.full { background: #ffd400 !important; } .eqv2 .egrid .eqtile .ncnt.full s { color: #1e1f22 !important; }
.eqv2 .egrid .eqtile .ilv { position: absolute !important; left: auto !important; top: auto !important; right: 6px !important; bottom: 24px !important; background: none !important; font: 400 12px var(--disp) !important; color: #fff !important; text-shadow: 0 1px 2px #000; padding: 0 !important; }
.eqv2 .egrid .eqtile.sel { box-shadow: 0 0 0 3px #1e1f22, 0 0 0 5px #ffd400 !important; z-index: 1; }
/* 스킬 줄 v3 */
.sk3 { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 104px; gap: 10px; align-items: center; padding: 10px 12px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; }
.sk3.open { box-shadow: inset 0 0 0 2px #1e1f22; } .sk3.empty { grid-template-columns: 30px 1fr auto; color: #8a8b8f; font: 400 15px var(--disp); }
.s3ic { position: relative; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #f6f6f2; box-shadow: inset 0 0 0 3px var(--ec); cursor: pointer; } .s3ic span, .s3n { position: absolute; left: -3px; top: -3px; font: 400 11px var(--disp); background: #1e1f22; color: #fff; padding: 0 5px; } .s3n { position: static; }
.s3m { min-width: 0; } .s3t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .s3t > b { font: 400 17px var(--disp); color: #1e1f22; cursor: pointer; }
.s3el { font-style: normal; font: 400 11px var(--disp); padding: 1px 6px; color: #fff; background: var(--ed); } .s3lv { font-style: normal; font: 400 11px var(--disp); padding: 1px 6px; box-shadow: inset 0 0 0 1px #b5b5b0; color: #4e4f53; }
.s3sty { display: inline-flex; box-shadow: inset 0 0 0 1px #1e1f22; } .s3sty button { border: 0; background: none; padding: 2px 8px; font: 400 11.5px var(--disp); color: #9a9b9f; cursor: pointer; } .s3sty button.on.m { background: #6b55d9; color: #fff; } .s3sty button.on.p { background: #c7642a; color: #fff; }
.s3d { display: flex; align-items: baseline; gap: 10px; margin-top: 3px; } .s3d b { font: 400 23px var(--disp); color: #1e1f22; } .s3d small { font-size: 12px; color: #6b6c70; }
.sk3 .s3up { min-height: 52px; } .sk3 .s3up:disabled, .sk3 .s3up[disabled] { background: #e3e3de !important; color: #9a9b9f !important; box-shadow: none !important; opacity: 1 !important; } .sk3 .s3up:disabled small { color: #9a9b9f !important; }
.sk3 .sk2more { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .etop2 { grid-template-columns: 78px minmax(0, 1fr); padding: 10px; } .etic2 { width: 78px; height: 78px; } .etic2 .ico, .etic2 canvas { width: 62px !important; height: 62px !important; } .eth2 b { font-size: 17px; } .ebig b { font-size: 19px; } .etb2 .gbtn { min-height: 42px; font-size: 13px !important; }
  .egrid.own { grid-template-columns: repeat(4, minmax(0, 1fr)); } .elegend { font-size: 10.5px; gap: 6px; }
  .efilt button { padding: 0 8px !important; } .efilt .eown span { font-size: 11px; }
  .sk3 { grid-template-columns: 50px minmax(0, 1fr) 84px; padding: 8px 10px; gap: 8px; } .s3ic { width: 50px; height: 50px; } .s3t > b { font-size: 15px; } .s3d b { font-size: 20px; } .sk3 .s3up { min-height: 46px; font-size: 13px !important; }
}

/* 가독성 v2 보정 */
.eqv2 .egrid .eqtile { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%), var(--tc, var(--rt0)) !important; align-content: start; justify-items: center; padding: 6px 3px 3px !important; }
.eqv2 .egrid .eqtile .ico, .eqv2 .egrid .eqtile canvas { width: 72% !important; max-width: 84px; background: none !important; margin-top: 8px; }
.eqv2 .egrid .eqtile .nm { width: 100%; align-self: end; }
.sk3 .s3up:not(:disabled):not([disabled]) { background: #ffd400 !important; color: #1e1f22 !important; } .sk3 .s3up:not(:disabled) small { color: #1e1f22 !important; }
.elegend { gap: 4px 10px; }
@media (max-width: 700px) {
  .efilt { flex-wrap: wrap !important; } .efilt .eown { margin-left: auto; height: 30px; }
  .ebig em { display: block; margin-left: 0; font-size: 12.5px; }
}

.eqv2 { display: flex !important; flex-direction: column; } .eqv2 > .egrid { flex: 1 1 auto; } .eqv2 > * { flex: none; }
@media (max-width: 700px) {
  .elegend { display: none; }
  .efilt .eown { order: -1; flex: 1 1 100% !important; justify-content: flex-end; height: 24px !important; padding: 0 !important; }
}

.efilt .eown i.tg { width: 34px !important; height: 20px !important; box-shadow: none !important; border-radius: 10px !important; background: #ccc !important; } .efilt .eown i.tg.on { background: #1e1f22 !important; }

/* 새 기능 해금 카드 */
.unlcard { position: fixed; left: 50%; top: 34%; z-index: 430; width: min(86vw, 340px); transform: translate(-50%, -50%); padding: 18px 18px 14px; background: #1e1f22; color: #fff; text-align: center; box-shadow: 0 0 0 3px #ffd400, 0 20px 60px rgba(0,0,0,.5); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); animation: unlin .45s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes unlin { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.unlcard small { font: 400 12px var(--disp); color: #ffd400; letter-spacing: 2px; } .unlcard b { display: block; font: 400 30px var(--disp); margin: 4px 0; } .unlcard p { margin: 0 0 12px; font-size: 13.5px; color: #c9c9c3; }
.unlcard div { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; } .unlcard button { height: 42px; border: 0; font: 400 15px var(--disp); cursor: pointer; } .unlcard [data-u="go"] { background: #ffd400; color: #1e1f22; } .unlcard [data-u="x"] { background: #3a3b40; color: #c9c9c3; }
.mi.unlhot { animation: unlhot 1s ease-in-out infinite; } .mi.unlhot::after { content: 'NEW'; position: absolute; top: 2px; right: 6px; font: 400 9px var(--disp); background: #ff4a6a; color: #fff; padding: 0 4px; }
@keyframes unlhot { 50% { transform: translateY(-4px); } }

.lgv2 { overflow-y: auto; } .lgv2 > .egrid { flex: none !important; overflow: visible; }
.lgextra { display: grid; gap: 6px; padding: 10px 12px 16px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d0; } .lgextra h4 { margin: 4px 0 0; font: 400 15px var(--disp); color: #1e1f22; }
.lgextra .chk { color: #1e1f22; } .lgextra .dbtns .gbtn { min-height: 42px; }

.lgextra .chk { background: #f3f3ef !important; color: #1e1f22 !important; box-shadow: inset 0 0 0 1px #d6d6d0 !important; padding: 8px 10px !important; display: flex; gap: 8px; align-items: center; font: 400 14px var(--disp); }
.lgextra .chk i { width: 20px; height: 20px; display: grid; place-items: center; background: #dcdcd6 !important; color: #fff; font-style: normal; } .lgextra .chk.ok i { background: #2e8f3e !important; }
.lgextra .st { color: #1e1f22 !important; background: #f3f3ef !important; }

/* 유물 칸 v2 */
.rlgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.rl2 { position: relative; display: grid; justify-items: center; gap: 1px; padding: 18px 4px 6px; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.4), rgba(255,255,255,0) 62%), var(--tc); color: #fff; text-align: center; }
.rl2.dim { filter: grayscale(1); opacity: .45; }
.rl2 .rlv { position: absolute; left: 3px; top: 3px; font: 400 10.5px var(--disp); background: rgba(0,0,0,.55); padding: 0 5px; }
.rl2 .rart { height: 46px; display: grid; place-items: center; } .rl2 b { width: 100%; font: 400 12.5px var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.rl2 em { font-style: normal; font: 400 11.5px var(--disp); background: rgba(0,0,0,.35); padding: 0 5px; white-space: nowrap; }
@media (max-width: 700px) { .rlgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rl2 em { font-size: 10.5px; } }

.sharedlg .dlg { width: min(420px, 100%); } .shimg { width: 100%; display: block; box-shadow: 0 0 0 2px #1e1f22; } .sharedlg .dlgbody { max-height: 70vh; overflow-y: auto; }

/* 펫 보유 격자 v2: 희귀도색 바탕 · 촘촘하게 */
.sheet[data-p="pet"] .pgrid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px !important; }
.sheet[data-p="pet"] .pgrid .pcard { position: relative; padding: 4px 3px 5px !important; background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.5), rgba(255,255,255,0) 62%), var(--tc, #9a9ca1) !important; box-shadow: none !important; border: 0 !important; clip-path: none !important; min-height: 0 !important; }
.sheet[data-p="pet"] .pgrid .pcard .ico, .sheet[data-p="pet"] .pgrid .pcard canvas { width: 82% !important; height: auto !important; aspect-ratio: 1; display: block; margin: 0 auto; }
.sheet[data-p="pet"] .pgrid .pcard .pstage { display: none !important; }
.sheet[data-p="pet"] .pgrid .pcard .pn { display: block; font: 400 12px var(--disp) !important; color: #fff !important; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sheet[data-p="pet"] .pgrid .pcard .pn small { color: #fff !important; opacity: .85; }
.sheet[data-p="pet"] .pgrid .pcard .pstars { display: flex; justify-content: center; font-size: 9px; } .sheet[data-p="pet"] .pgrid .pcard .pstars i { color: rgba(0,0,0,.25); } .sheet[data-p="pet"] .pgrid .pcard .pstars i.on { color: #ffd400; text-shadow: 0 0 2px #000; }
.sheet[data-p="pet"] .pgrid .pcard.sel { box-shadow: 0 0 0 3px #1e1f22, 0 0 0 5px #ffd400 !important; z-index: 1; }
.sheet[data-p="pet"] .pgrid .pcard .eqm { position: absolute; left: 3px; top: 3px; font: 400 10px var(--disp); background: #1e1f22; color: #ffd400; padding: 0 5px; }
.sheet[data-p="pet"] .pgrid .pcard.lock { filter: grayscale(1); opacity: .4; }
@media (max-width: 700px) { .sheet[data-p="pet"] .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.sheet[data-p="pet"] .pgrid .pcard .eqm { right: auto !important; width: auto !important; }

/* 유지 모드에서 처음 깬 층: 다음 층 버튼 */
.stgbar .sbnext { display: none; } .stgbar.next .sbt { display: none; } .stgbar.next .sbnext { display: block; height: 30px; padding: 0 18px; border: 0; background: #ffd400; color: #1e1f22; font: 400 14px var(--disp); cursor: pointer; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
@media (max-width: 700px) { .stgbar.next .sbnext { height: 26px; font-size: 12.5px; padding: 0 14px; } }

/* 특별 훈련: 미완료 + 바로 갈 곳이 있으면 '하러 가기' (2026-11-05, 신규가 카드를 누를 수 있는지 몰랐음) */
html body .questcard .gbtn.qgo, html body #quest .gbtn.qgo { background: transparent !important; border-image: none !important; box-shadow: inset 0 0 0 2px #ffd400 !important; color: #ffd400 !important; animation: qgo 1.6s ease-in-out infinite; }
@keyframes qgo { 50% { opacity: .55; } }

/* 장비 격자 칸: 그림이 칸 밖으로 삐져나오던 문제(2026-11-05) — 칸 비율 고정 + 그림은 남은 높이에 맞춤 + 넘침 숨김 */
html body .eqv2 .egrid { grid-auto-rows: max-content !important; grid-template-rows: none !important; }
html body .eqv2 .egrid .eqtile { aspect-ratio: 1 / 1.12 !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; grid-template-rows: minmax(0, 1fr) auto !important; align-content: stretch !important; padding: 4px 3px 2px !important; }
html body .eqv2 .egrid .eqtile .ico, html body .eqv2 .egrid .eqtile canvas { width: auto !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; aspect-ratio: 1; margin: 0 !important; align-self: center; justify-self: center; min-height: 0; }
html body .eqv2 .egrid .eqtile .nm { align-self: end; padding: 1px 2px 0 !important; }
@media (max-width: 700px) { html body .eqv2 .egrid .eqtile .nm { font-size: 10.5px !important; } html body .eqv2 .egrid .eqtile .eqb, html body .eqv2 .egrid .eqtile .ncnt s { font-size: 9.5px !important; } html body .eqv2 .egrid .eqtile .ilv { bottom: 18px !important; font-size: 10.5px !important; } }

/* 스킬 피해 숫자가 '억'에서 줄바꿈되던 문제: 숫자는 한 줄, 쿨·마나는 넘치면 아래 줄로 */
.s3d { flex-wrap: wrap; row-gap: 0; } .s3d b { white-space: nowrap; } @media (max-width: 700px) { .s3d b { font-size: 18px; } }

/* QA 스윕(2026-11-05): 상점 교환소·마일리지 탭 아이콘 비어 있던 것, 장비 개요 스탯 이름이 한 글자씩 세로로 꺾이던 것 */
.sheet .vtab[data-t="exch"] { --li: url(../assets/final/ui/li/forge.webp); } .sheet .vtab[data-t="mile"] { --li: url(../assets/final/ui/li/crown.webp); }
.eqstat .st { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) !important; grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 1px; } .eqstat .st > :first-child { grid-row: 1 / span 2; } .eqstat .st span { white-space: nowrap; font-size: 12px; opacity: .75; } .eqstat .st b { grid-column: 2; text-align: left !important; white-space: nowrap; min-width: 0; }

/* PC 장비 격자 열 수(2026-11-05): 한 화면에 더 많이 */
@media (min-width: 701px) { html body .eqv2 .egrid.c5 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } html body .eqv2 .egrid.c4 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } html body .eqv2 .egrid.own { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } html body .eqv2 .egrid .eqtile .nm { font-size: 11px !important; } }

/* 서버 저장 고르기 */
.cloudcmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; } .cloudcmp > div { background: #1e1f22; color: #fff; padding: 12px; display: grid; gap: 2px; } .cloudcmp small { font: 400 11px var(--t-mono); color: #ffd400; letter-spacing: 1px; } .cloudcmp b { font: 400 24px var(--disp); } .cloudcmp span { font-size: 12px; color: #c9c9c3; }

.rkpod .pod.empty { display: grid; place-content: center; gap: 4px; opacity: .45; } .rkpod .pod.empty b { font-size: 13px; }