:root {
  --gold: #c9a24a;
  --gold-hi: #f4d27a;
  --wow-yellow: #ffd100;
  --tt-bg: rgba(6, 8, 22, 0.94);
  --tt-border: #8a8f9c;
  --frame-bg: linear-gradient(#1b1d24, #0c0d12);
  --q-common: #ffffff;
  --q-uncommon: #1eff00;
  --q-rare: #0070dd;
  --q-epic: #a335ee;
  --q-legendary: #ff8000;
  --q-artifact: #e6cc80;
  --font: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-title: 'Noto Serif KR', 'Batang', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05070c; overflow: hidden; font-family: var(--font); color: #fff; user-select: none; }
#game { position: fixed; inset: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.hidden { display: none !important; }
#errlog { position: fixed; left: 0; bottom: 0; color: #f66; font: 12px monospace; z-index: 999; white-space: pre; pointer-events: none; }

/* ---------- 공통 프레임 ---------- */
.bar { position: relative; height: 18px; background: #111; border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a3a3a; overflow: hidden; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .08s linear; }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 16px; font-weight: 700; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.bar.hp .fill { background: linear-gradient(#3bd13b, #0d8a0d 60%, #096b09); }
.bar.mana .fill { background: linear-gradient(#5aa7ff, #1a5fd1 60%, #1446a0); }
.bar .absorb { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.75) 0 3px, rgba(190,225,255,.45) 3px 6px); box-shadow: 0 0 6px #bfe6ff; }

#hud { position: absolute; inset: 0; pointer-events: none; }
#hud .slot, #hud .pslot, #meter, #hud .buff { pointer-events: auto; }

/* ---------- 플레이어 프레임 ---------- */
/* 작은 화면 배율 --ui (js/render.js resize: PC 1, 폰 가로 0.6): HUD 조각마다 scale로 줄인다. 위치 transform과 겹치지 않게 가운데 정렬은 translate 속성을 쓴다 */
:root { --ui: 1; --uiT: max(var(--ui), .8); } /* uiT: 손가락으로 누르는 버튼은 덜 줄인다 */
#playerFrame { position: absolute; left: calc(18px * var(--ui)); top: calc(16px * var(--ui)); display: flex; align-items: center; gap: 0; scale: var(--ui); transform-origin: top left; }
.portrait { position: relative; width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 0 2px #2a1e08, 0 0 14px rgba(0,0,0,.8); overflow: visible; background: #000; z-index: 2; }
.portrait img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.lvbadge { position: absolute; left: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(#3a2a0a, #120c02); border: 2px solid var(--gold); font-size: 12px; font-weight: 900; color: var(--wow-yellow); display: flex; align-items: center; justify-content: center; }
.pfBody { margin-left: -10px; padding: 6px 10px 6px 18px; width: 240px; background: var(--frame-bg); border: 2px solid #5c4a22; border-left: none; border-radius: 0 6px 6px 0; box-shadow: 0 2px 10px rgba(0,0,0,.7); }
.pfName { font-size: 13px; font-weight: 700; color: var(--wow-yellow); margin-bottom: 3px; text-shadow: 1px 1px 0 #000; }
.pfBody .bar { margin-top: 2px; }
.pfBody .bar.mana { height: 12px; }
.pfBody .bar.mana span { font-size: 10px; line-height: 10px; }

/* ---------- 버프 ---------- */
#buffs { position: absolute; right: calc(18px * var(--ui)); top: calc(16px * var(--ui)); display: flex; flex-direction: row-reverse; gap: 6px; scale: var(--ui); transform-origin: top right; }
.buff { position: relative; width: 34px; text-align: center; }
.buff img { width: 34px; height: 34px; border: 1px solid #000; box-shadow: 0 0 0 1px #555; display: block; }
.buff .bt { font-size: 11px; font-weight: 700; color: var(--wow-yellow); text-shadow: 1px 1px 0 #000; }
.buff .bs { position: absolute; right: 1px; top: 20px; font-size: 13px; font-weight: 900; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.buff.debuff img { box-shadow: 0 0 0 1px #c00; }
.buff.in { animation: buffIn .18s ease-out; }
@keyframes buffIn { from { opacity: 0; transform: scale(.7); } }
.buff.ending img { animation: buffEnd .9s ease-in-out infinite alternate; }
@keyframes buffEnd { to { opacity: .45; } }

/* ---------- 상단 정보 ---------- */
#topInfo { position: absolute; left: 50%; top: calc(6px * var(--ui)); translate: -50% 0; scale: var(--ui); transform-origin: top center; text-align: center; white-space: nowrap; }
#stageInfo { font-size: 12px; font-weight: 700; color: #b9c6dc; text-shadow: 1px 1px 0 #000, 0 0 4px #000; line-height: 16px; }
#stageInfo b { color: #ff9cff; }
#stageInfo small { font-size: 11px; color: #d7b8e0; font-weight: 400; }
#stageInfo small.tier3 { color: #ffd100; } #stageInfo small.tier2 { color: #a0d8ff; } #stageInfo small.tier1 { color: #b9c6dc; }
/* 공격대 보스전 진행 게이지 (js/raid.js hud) */
#stageInfo .rBar { display: block; width: 180px; height: 4px; margin: 2px auto 0; background: rgba(0,0,0,.6); border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
#stageInfo .rBar u { display: block; height: 100%; background: linear-gradient(90deg, #3f9a1c, #9cff5a); transition: width .3s; }
#stageInfo .rBar.seal u { background: linear-gradient(90deg, #7a3ad0, #d2a0ff); }
#stageInfo .rBar.boss u { background: linear-gradient(90deg, #b06018, #ffb050); }
#stageInfo .rBar.enr u { background: linear-gradient(90deg, #a01810, #ff5040); }
#timer { font-family: var(--font-title); font-size: 30px; font-weight: 900; color: #e8f4ff; text-shadow: 0 0 10px #3b8cff, 2px 2px 0 #000; letter-spacing: 1px; }
#subInfo { font-size: 13px; color: #cfd8e8; text-shadow: 1px 1px 0 #000; }
#goldTxt { color: var(--wow-yellow); }

/* ---------- 보스 프레임 ---------- */
#bossFrame { position: absolute; left: 50%; top: calc(96px * var(--ui)); translate: -50% 0; scale: var(--ui); transform-origin: top center; display: flex; align-items: center; }
#bossFrame .portrait { width: 64px; height: 64px; border-color: #d8b452; }
#bossFrame .portrait::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e6c35a; border-right-color: #8a6a20; transform: rotate(-30deg); }
.bfBody { margin-left: -8px; padding: 6px 10px 6px 16px; width: 420px; background: var(--frame-bg); border: 2px solid #6b5420; border-left: none; border-radius: 0 6px 6px 0; }
.bfName { display: flex; justify-content: space-between; font-weight: 900; font-size: 14px; color: #ff4b3a; text-shadow: 1px 1px 0 #000; margin-bottom: 3px; }
#bfPct { color: #fff; }
.bar.bhp { height: 20px; }
.bar.bhp .fill { background: linear-gradient(#e33, #a00 60%, #700); }
.bcast { position: relative; height: 14px; margin-top: 4px; background: #111; border: 1px solid #000; overflow: hidden; }
.bcast .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffb43c, #c46a00); }
.bcast span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 12px; font-weight: 700; text-shadow: 1px 1px 0 #000; }

/* ---------- 공격대 경보 ---------- */
#raidWarn { position: absolute; left: 0; right: 0; top: max(22%, calc(180px * var(--ui))); text-align: center; font-family: var(--font-title); font-weight: 900; font-size: calc(34px * var(--ui)); color: #ff6a1a; text-shadow: 0 0 6px #000, 2px 2px 0 #000, -2px -2px 0 #000; opacity: 0; transition: opacity .3s; }
#raidWarn.show { opacity: 1; }
body.modal-open #raidWarn, body.modal-open #castbar { opacity: 0 !important; }

/* ---------- 시전바 ---------- */
#castbar { position: absolute; left: 50%; bottom: calc(196px * var(--ui)); translate: -50% 0; scale: var(--ui); transform-origin: bottom center; width: 260px; height: 22px; background: rgba(0,0,0,.75); border: 2px solid #6d6d6d; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 2px 8px #000; overflow: hidden; }
#castbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffd85c, #e9a400 55%, #b97b00); }
#castbar.channel .fill { background: linear-gradient(#7be27b, #2fae2f 55%, #1f7d1f); }
#castbar .name { position: absolute; left: 8px; top: 0; line-height: 18px; font-size: 12px; font-weight: 700; text-shadow: 1px 1px 0 #000; }
#castbar .time { position: absolute; right: 8px; top: 0; line-height: 18px; font-size: 12px; font-weight: 700; text-shadow: 1px 1px 0 #000; }
#castbar .spark { position: absolute; top: -4px; bottom: -4px; width: 10px; margin-left: -5px; background: radial-gradient(ellipse at center, rgba(255,255,230,.95), rgba(255,255,200,0) 70%); }

/* ---------- 하단 바 ---------- */
#bottom { position: absolute; left: 50%; bottom: calc(10px * var(--ui)); translate: -50% 0; scale: var(--ui); transform-origin: bottom center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#rowTop { display: flex; gap: 22px; align-items: flex-end; }
#autoBar, #passiveBar { display: flex; gap: 4px; }
#actionBar { display: flex; gap: 4px; padding: 7px 10px; background: linear-gradient(#2a2418, #120f09); border: 2px solid #6b5420; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,220,140,.15); }
.slot { position: relative; width: 52px; height: 52px; background: radial-gradient(#1e2028, #08090c); border: 1px solid #000; box-shadow: inset 0 0 0 1px #44464f; cursor: pointer; }
.slot.small { width: 40px; height: 40px; }
.slot img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); display: block; }
.slot .cd { position: absolute; inset: 2px; background: conic-gradient(rgba(0,0,0,.72) calc(var(--p, 0) * 1turn), transparent 0); }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 0 0 4px #000; }
.slot.small .cdt { font-size: 13px; }
.slot .key { position: absolute; right: 3px; top: 1px; font-size: 11px; font-weight: 700; color: #ddd; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.slot .chg { position: absolute; right: 3px; bottom: 1px; font-size: 13px; font-weight: 900; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.slot .lv { position: absolute; left: 2px; bottom: 1px; font-size: 10px; font-weight: 900; color: var(--wow-yellow); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.slot.empty { opacity: .55; }
/* 자동 시전: 초록 점선 테두리 + '자동' 표시 */
.slot .ac { display: none; position: absolute; left: 0; right: 0; bottom: -1px; text-align: center; font-size: 10px; font-weight: 900; color: #7dff8a; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; pointer-events: none; }
.slot.autocast .ac { display: block; }
.slot.autocast::before { content: ''; position: absolute; inset: -3px; border: 2px dashed #5fe36c; border-radius: 3px; opacity: .85; pointer-events: none; z-index: 2; }
.slot.unusable img { filter: brightness(.38) saturate(.4); }
.slot.unusable.oor img { filter: brightness(.5) sepia(1) hue-rotate(-50deg) saturate(3); }
.slot.active { box-shadow: inset 0 0 0 2px #fff, 0 0 8px #fff; }
.slot.glow::after { content: ''; position: absolute; inset: -5px; border-radius: 4px; border: 2px solid #ffe580; box-shadow: 0 0 10px 3px #ffb300, inset 0 0 8px #ffcf3a; animation: procglow .7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes procglow { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.04); } }
.slot.pressed { transform: scale(.92); }
.slot.pressed img { filter: brightness(1.35); }
.slot.flashready::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.6); animation: ready .35s ease-out forwards; z-index: 3; }
@keyframes ready { to { opacity: 0; } }
.pslot { position: relative; width: 30px; height: 30px; border: 1px solid #000; box-shadow: 0 0 0 1px #555; }
.pslot img { width: 100%; height: 100%; display: block; }
.pslot .lv { position: absolute; right: 1px; bottom: -1px; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.pslot.legend { box-shadow: 0 0 0 1px var(--q-legendary), 0 0 6px var(--q-legendary); }

#xpBar { position: relative; width: 760px; height: 13px; background: #0b0710; border: 1px solid #000; box-shadow: 0 0 0 1px #4b3d68; overflow: hidden; }
#xpBar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#b469ff, #6e2ac2 60%, #4b1890); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); transition: width .15s; }
#xpBar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; font-weight: 700; text-shadow: 1px 1px 0 #000; }

/* ---------- 데미지 미터 ---------- */
#meter { position: absolute; right: calc(18px * var(--ui)); bottom: calc(120px * var(--ui)); scale: var(--ui); transform-origin: bottom right; width: 270px; background: rgba(8,10,14,.82); border: 1px solid #000; box-shadow: 0 0 0 1px #333, 0 4px 12px #000; font-size: 12px; }
.mTitle { padding: 3px 6px; background: linear-gradient(#2b2f38, #16181d); font-weight: 900; color: #e7e7e7; border-bottom: 1px solid #000; }
.mTitle small { color: #aaa; font-weight: 400; }
.mHint { float: right; color: #777; font-weight: 400; }
.mRow { position: relative; height: 20px; margin: 1px 0; }
.mRow .mFill { position: absolute; left: 0; top: 0; bottom: 0; opacity: .85; }
.mRow img { position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; }
.mRow .mName { position: absolute; left: 24px; top: 0; line-height: 20px; font-weight: 700; text-shadow: 1px 1px 0 #000; }
.mRow .mVal { position: absolute; right: 5px; top: 0; line-height: 20px; font-weight: 700; text-shadow: 1px 1px 0 #000; }

/* ---------- 툴팁 (와우 스타일) ---------- */
#tooltip { position: fixed; z-index: 50; max-width: 330px; padding: 8px 10px; background: var(--tt-bg); border: 1px solid var(--tt-border); border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 4px 16px rgba(0,0,0,.8); font-size: 13px; line-height: 1.45; pointer-events: none; }
.tt-title { font-size: 15px; font-weight: 700; }
.tt-row { display: flex; justify-content: space-between; gap: 16px; color: #fff; }
.tt-desc { color: var(--wow-yellow); margin-top: 4px; }
.tt-sub { color: #9da3ad; margin-top: 4px; font-size: 12px; }
.tt-green { color: #1eff00; }
.tt-red { color: #ff2020; }
.tt-off { color: #7f7f7f; }
b.v, .v { color: #fff; font-weight: 700; }

/* ---------- 모달 ---------- */
#modal { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(4,10,24,.55), rgba(0,0,0,.85)); }
.panel { background: linear-gradient(rgba(14,18,32,.97), rgba(6,8,16,.97)); border: 2px solid #6b5420; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 10px 40px #000, inset 0 1px 0 rgba(255,220,140,.15); padding: 22px 28px; }
.panel h1, .panel h2 { font-family: var(--font-title); margin: 0 0 6px; text-align: center; color: var(--wow-yellow); text-shadow: 2px 2px 0 #000, 0 0 16px rgba(255,180,0,.35); }
.panel h1 { font-size: 46px; }
.installSteps { margin: 10px 0 14px; padding-left: 22px; line-height: 1.9; color: #dde; } .installSteps b { color: var(--wow-yellow); }
.panel h2 { font-size: 28px; }
.sub { text-align: center; color: #9fc6ff; margin-bottom: 18px; }
.btn { display: block; width: 260px; margin: 8px auto; padding: 10px 0; font: 700 16px var(--font); color: var(--wow-yellow); background: linear-gradient(#8c1a12, #4a0905); border: 2px solid #c9a24a; border-radius: 4px; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,200,150,.3); cursor: pointer; text-shadow: 1px 1px 0 #000; }
.btn:hover { filter: brightness(1.3); box-shadow: 0 0 0 1px #000, 0 0 12px #ffb300; }
.btn.small { display: inline-block; width: auto; padding: 6px 16px; font-size: 14px; margin: 4px; }
.btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; }

.lvTitle { text-align: center; font-family: var(--font-title); font-size: 32px; font-weight: 900; color: var(--wow-yellow); text-shadow: 2px 2px 0 #000, 0 0 18px rgba(255,200,0,.5); margin-bottom: 4px; }
.lvSub { text-align: center; color: #bcd; margin-bottom: 18px; }
/* 카드는 230px까지, 화면이 좁으면(폴드 펼친 화면 등) 4장이 한 줄에 들어오게 함께 줄어든다 */
.cards { display: flex; gap: 14px; justify-content: center; max-width: var(--vw, 100vw); padding: 0 10px; }
.card { flex: 0 1 230px; min-width: 0; display: flex; flex-direction: column; min-height: 200px; padding: 12px; background: var(--tt-bg); border: 2px solid var(--qc, #888); border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 18px -2px var(--qc, #888), 0 8px 24px #000; cursor: pointer; transition: transform .12s, box-shadow .12s; position: relative; animation: cardIn .3s ease-out backwards; }
.card:nth-child(2) { animation-delay: .06s; } .card:nth-child(3) { animation-delay: .12s; } .card:nth-child(4) { animation-delay: .18s; }
@keyframes cardIn { from { transform: translateY(30px) scale(.94); opacity: 0; } }
.card:hover, .card.sel { transform: translateY(-6px); box-shadow: 0 0 0 1px #000, 0 0 30px 2px var(--qc), 0 12px 30px #000; }
.card .chead { display: flex; gap: 9px; align-items: center; margin-bottom: 6px; }
.card .chead img { flex: none; width: 48px; height: 48px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--qc), 0 0 10px var(--qc); }
.card .cicon { position: relative; flex: none; display: flex; }
.card .chead .cicon img.cbadge { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 3px; box-shadow: 0 0 0 1px var(--qc), 0 1px 3px #000; } /* 주문 강화 노드 자체 아이콘 (큰 아이콘은 강화하는 주문) */
.card .cname { font-size: 16px; font-weight: 900; color: var(--qc); text-shadow: 1px 1px 0 #000; line-height: 1.2; }
.card .ctype { font-size: 12px; color: #aab; }
.card .clv { font-size: 12px; color: #fff; margin-top: 2px; }
.card .cdesc { color: var(--wow-yellow); font-size: 13px; line-height: 1.5; }
.card .cnode { color: #1eff00; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.card .cfoot { margin-top: auto; padding-top: 6px; font-size: 12px; color: #889; display: flex; justify-content: space-between; }
.card .ckey { color: #fff; border: 1px solid #555; border-radius: 3px; padding: 0 6px; background: #222; }
.lvBtns { text-align: center; margin-top: 18px; }

/* 메인 메뉴 */
.menuWrap { text-align: center; }
.menuWrap .logo { font-family: var(--font-title); font-size: 64px; font-weight: 900; color: #dff3ff; text-shadow: 0 0 24px #3fa7ff, 0 0 4px #9fdcff, 3px 3px 0 #000; letter-spacing: 2px; }
.menuWrap .logo2 { font-size: 18px; color: var(--wow-yellow); letter-spacing: 6px; margin-bottom: 26px; text-shadow: 1px 1px 0 #000; }
.menuWrap .goldLine { color: var(--wow-yellow); margin: 10px 0; }
.helpGrid { display: grid; grid-template-columns: auto auto; gap: 4px 20px; text-align: left; font-size: 14px; }
.helpGrid .k { color: var(--wow-yellow); font-weight: 700; text-align: right; }
.metaGrid { display: grid; grid-template-columns: repeat(3, 250px); gap: 10px; margin: 12px 0; }
.metaItem { display: flex; gap: 8px; padding: 8px; background: rgba(0,0,0,.4); border: 1px solid #333; border-radius: 4px; align-items: center; }
.metaItem img { width: 40px; height: 40px; border: 1px solid #000; }
.metaItem .mi { flex: 1; text-align: left; font-size: 12px; }
.metaItem .mi b { font-size: 14px; color: #fff; }
.metaItem .mi .r { color: #1eff00; }
.metaItem button { font-size: 12px; padding: 4px 8px; }

.statTable { border-collapse: collapse; margin: 10px auto; font-size: 13px; min-width: 520px; }
.statTable td, .statTable th { padding: 3px 10px; border-bottom: 1px solid #222; text-align: right; }
.statTable td:first-child, .statTable th:first-child { text-align: left; }
.statTable img { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
.summary { display: flex; gap: 30px; justify-content: center; margin: 10px 0; font-size: 15px; }
.summary b { color: var(--wow-yellow); font-size: 22px; display: block; }
.buildRow { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 640px; margin: 8px auto; }
.buildRow .pslot { width: 36px; height: 36px; }
.endPanel { max-height: calc(var(--vh, 100vh) * .92); overflow: auto; }
.pStage { text-align: center; font-size: 13px; font-weight: 700; color: #b9c6dc; margin-bottom: 4px; }
.pStage b { color: #ff9cff; } .pStage small { display: none; }

#flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 50%, rgba(255,0,0,.45)); opacity: 0; transition: opacity .25s; }

/* ---------- 계정 / 건의사항 게시판 ---------- */
.menuWrap .acctLine { color: #bcd; font-size: 14px; margin: -10px 0 14px; }
.menuWrap .acctLine b { color: var(--wow-yellow); }
input, textarea, select { font: 14px var(--font); color: #fff; background: rgba(0,0,0,.55); border: 1px solid #6b5420; border-radius: 4px; padding: 8px 10px; user-select: text; outline: none; }
input:focus, textarea:focus { border-color: var(--gold-hi); box-shadow: 0 0 8px rgba(255,200,80,.35); }
.authPanel { width: 400px; }
.authPanel .sub { font-size: 13px; }
.authPanel label { display: block; margin: 0 0 12px; font-size: 13px; color: #bcd; }
.authPanel label input { display: block; width: 100%; margin-top: 4px; }
.formErr { min-height: 18px; color: #ff4b3a; font-size: 13px; text-align: center; }
.boardWrap { max-width: 760px; }
.sgForm { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sgForm textarea { resize: vertical; min-height: 60px; }
.sgForm .btn { align-self: flex-end; }
.sgLogin { text-align: center; color: #bcd; margin-bottom: 12px; }
a { color: #6cf; }
.sgTabs { display: flex; gap: 14px; border-bottom: 1px solid #333; margin-bottom: 6px; padding-bottom: 4px; font-size: 14px; }
.sgTabs a { color: #889; text-decoration: none; }
.sgTabs a.on { color: var(--wow-yellow); font-weight: 700; }
.sgItem { display: flex; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #222; }
.sgItem .vote { flex: none; width: 44px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 12px var(--font); color: #889; background: rgba(0,0,0,.4); border: 1px solid #333; border-radius: 4px; cursor: pointer; }
.sgItem .vote span { font-size: 15px; color: #fff; }
.sgItem .vote.on { color: var(--wow-yellow); border-color: var(--gold); }
.sgItem .vote:disabled { cursor: default; }
.sgMain { flex: 1; min-width: 0; cursor: pointer; }
.sgHead { display: flex; gap: 8px; align-items: center; }
.sgTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgMeta { font-size: 12px; color: #778; margin-top: 2px; }
.sgMeta a { margin-left: 8px; color: #c66; }
.sgMeta a.sgReplyEdit { color: #8cf; }
.sgMeta select { margin-left: 8px; padding: 1px 4px; font-size: 12px; }
.sgBody { display: none; margin-top: 6px; font-size: 14px; color: #dde; white-space: pre-wrap; word-break: break-word; user-select: text; }
.sgItem.open .sgBody { display: block; }
.sgItem.open .sgTitle { white-space: normal; }
.sgEmpty { text-align: center; color: #778; padding: 24px 0; }
.sgReplied { flex: none; font-size: 11px; color: #8cf; }
.sgReply, .sgReplyForm { display: none; }
.sgItem.open .sgReply { display: block; margin-top: 8px; padding: 6px 10px; border-left: 2px solid #4a7aa8; background: rgba(60,110,170,.12); font-size: 14px; color: #dde; white-space: pre-wrap; word-break: break-word; user-select: text; cursor: auto; }
.sgReplyHead { font-size: 12px; color: #8cf; margin-bottom: 2px; }
.sgItem.open.editing .sgReplyForm { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; cursor: auto; }
.sgReplyForm textarea { resize: vertical; min-height: 50px; }
.sgReplyForm .btn { align-self: flex-end; }
.st { flex: none; font-size: 11px; padding: 1px 6px; border-radius: 3px; border: 1px solid; }
.st-open { color: #9fc6ff; border-color: #3a5a8a; }
.st-planned { color: var(--wow-yellow); border-color: #8a6a1a; }
.st-done { color: #1eff00; border-color: #2a7a1a; }
.st-rejected { color: #888; border-color: #444; }
#toast { position: absolute; left: 50%; bottom: 40px; transform: translate(-50%, 20px); z-index: 40; padding: 10px 20px; background: var(--tt-bg); border: 1px solid var(--gold); border-radius: 4px; color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.summary small { display: block; font-size: 11px; color: #889; }
.summary small.err { color: #ff4b3a; }

/* ================= 로비 ================= */
#modal:has(.lobby) { align-items: stretch; justify-content: stretch; }
/* 작은 화면은 --lbZ(js/render.js)만큼 통째로 줄인다 — 크기는 보이는 화면 ÷ 배율이라 줄인 만큼 넓게 배치된다 */
.lobby { display: flex; flex-direction: column; background: linear-gradient(rgba(6,10,22,.92), rgba(3,5,12,.97)); user-select: none;
  zoom: var(--lbZ, 1); width: calc(var(--vw, 100vw) / var(--lbZ, 1)); height: calc(var(--vh, 100vh) / var(--lbZ, 1));
  padding: calc(env(safe-area-inset-top) / var(--lbZ, 1)) calc(env(safe-area-inset-right) / var(--lbZ, 1)) 0 calc(env(safe-area-inset-left) / var(--lbZ, 1)); } /* 홈 화면 앱: 상태 표시줄 · 노치 아래로 */
.lbTop { display: flex; align-items: center; gap: 20px; padding: 10px 20px; border-bottom: 2px solid #6b5420; background: linear-gradient(#1a1408, #0a0804); }
.lbLogo { font-family: var(--font-title); font-size: 26px; font-weight: 900; color: #dff3ff; text-shadow: 0 0 14px #3fa7ff, 2px 2px 0 #000; white-space: nowrap; }
.lbLogo small { font-size: 13px; color: var(--wow-yellow); margin-left: 10px; letter-spacing: 3px; }
.lbCur { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; font-size: 14px; color: #fff; }
.lbCur span { display: flex; align-items: center; gap: 5px; }
.lbCur img, img.ci { width: 20px; height: 20px; border: 1px solid #000; vertical-align: middle; margin-right: 3px; }
.lbAcct { white-space: nowrap; color: #bcd; font-size: 14px; }
.lbAcct b { color: var(--wow-yellow); }
.lbBody { flex: 1; display: flex; min-height: 0; }
.lbNav { width: 168px; flex: none; padding: 10px 8px; border-right: 1px solid #3a2e14; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.lbNav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; color: #cdb; text-decoration: none; font-size: 15px; border: 1px solid transparent; }
.lbNav a img { width: 30px; height: 30px; border: 1px solid #000; box-shadow: 0 0 0 1px #6b5420; }
.lbNav a:hover { background: rgba(255,210,100,.07); }
.lbNav a.on { background: linear-gradient(90deg, rgba(140,26,18,.6), rgba(74,9,5,.2)); border-color: #c9a24a; color: var(--wow-yellow); font-weight: 700; }
.lbMain { flex: 1; overflow: auto; padding: 18px 24px; }
.lbMain h3 { font-family: var(--font-title); color: var(--wow-yellow); margin: 8px 0; font-size: 20px; }
.lbMain h4 { color: var(--wow-yellow); margin: 12px 0 6px; font-size: 14px; }
/* 묶음 안 화면 단추 줄 (캐릭터: 장비 · 특성 · 주문 도감 등) */
.rkSeg.lbSub { display: inline-flex; margin: 0 0 12px; }
.rkSeg.lbSub a { font-size: 14px; padding: 6px 16px; } .lbSub .newTag { margin-left: 4px; }
.lbMain .lbTitle { margin: 0 0 8px; }
.lbNav a.lbSet { margin-top: 10px; } /* 묶음과 조금 띄운다 (맨 아래는 채팅 표시에 가린다) */
/* 우편함 단추 (계정 줄) */
.lbMail { position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; line-height: 0; }
.lbMail img { width: 26px; height: 26px; border: 1px solid #000; box-shadow: 0 0 0 1px #6b5420; border-radius: 2px; }
.lbMail:hover img, .lbMail.on img { box-shadow: 0 0 0 1px var(--wow-yellow); }
.lbMail .newTag { position: absolute; right: -7px; top: -6px; margin: 0; padding: 0 3px; font-size: 9px; line-height: 14px; }
/* 설정 창: 조작법 · 앱 설치 */
.setLinks { display: flex; justify-content: center; gap: 22px; margin: -8px 0 12px; font-size: 13px; } .setLinks a { color: #9ab; }
.lbEmpty { text-align: center; margin-top: 12vh; color: #bcd; }
.lbEmpty img { width: 64px; height: 64px; border: 2px solid #6b5420; }
.dim { color: #8a93a6; } .small { font-size: 12px; } .center { text-align: center; } .err { color: #ff4b3a; }
.btn.big { width: 320px; font-size: 20px; padding: 14px 0; margin-top: 14px; }
.btn.sel { box-shadow: 0 0 0 1px #000, 0 0 12px #ffd100; background: linear-gradient(#c02a1c, #6a0d07); }
select { cursor: pointer; }

/* 출정 */
.stageWrap { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.2fr); gap: 24px; }
.chap h3 small { font-family: var(--font); font-size: 12px; color: #8a93a6; margin-left: 10px; font-weight: 400; }
.stageList { display: flex; flex-direction: column; gap: 6px; }
.stageCard { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid #333; border-radius: 4px; background: rgba(0,0,0,.35); cursor: pointer; }
.stageCard img { width: 42px; height: 42px; border: 1px solid #000; }
.stageCard b { display: block; font-size: 15px; } .stageCard small { color: #8a93a6; font-size: 12px; }
.stageCard.on { border-color: #ffd100; box-shadow: 0 0 10px rgba(255,209,0,.3); }
.stageCard.locked { opacity: .45; }
.marks i { font-style: normal; font-size: 11px; margin-right: 4px; padding: 0 5px; border-radius: 3px; border: 1px solid #555; color: #888; }
.marks i.ok { color: #1eff00; border-color: #2a7a1a; } .marks i.hc { color: #a335ee; border-color: #6a2a9a; } .marks i.my { color: #ff8000; border-color: #9a5a1a; }
.stageDetail { background: rgba(0,0,0,.35); border: 1px solid #3a2e14; border-radius: 6px; padding: 16px 20px; }
.sdHead { display: flex; gap: 14px; align-items: center; } .sdHead img { width: 64px; height: 64px; border: 2px solid #c9a24a; }
.sdHead h2 { margin: 0; font-family: var(--font-title); color: var(--wow-yellow); }
.sdDesc { color: #cdd; font-size: 14px; }
.diffs { margin: 8px 0; }
.bossRow { display: flex; gap: 14px; margin: 10px 0; }
.boss { text-align: center; width: 92px; } .boss img { width: 48px; height: 48px; border: 1px solid #000; box-shadow: 0 0 0 1px #8a1a12; } .boss small { display: block; font-size: 11px; color: #ccc; }
.sdRec { font-size: 14px; color: #bcd; } .sdRec b { color: var(--wow-yellow); }
.sdRew { font-size: 13px; color: #bcd; } .sdRew b { color: var(--wow-yellow); }
.sdLoot { font-size: 13px; }
.sdAffix span { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; font-size: 13px; }
.sdAffix img { width: 22px; height: 22px; } .sdAffix small { color: #888; }
.clsRow { display: flex; gap: 10px; flex-wrap: wrap; }
/* 중단된 판 이어하기 (js/resume.js) — 폰에서는 출정 정보 맨 위 */
.resumeBox { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 7px 10px; border: 1px solid #4a3c1c; border-radius: 6px; background: rgba(0,0,0,.3); }
.resumeBox img { width: 30px; height: 30px; border-radius: 3px; border: 1px solid #000; }
.resumeBox > div { flex: 1; min-width: 0; } .resumeBox b { display: block; color: var(--wow-yellow); font-size: 13px; } .resumeBox small { display: block; color: #8b95a3; font-size: 11px; word-break: keep-all; }
.resumeBox .btn.small { margin: 0; padding: 4px 12px; font-size: 13px; } .resumeBox #rsDrop { background: none; border-color: #4a3c1c; color: #8b95a3; }
.stageDetail .resumeBox { order: -3; }
/* 로비가 열릴 때 가운데 팝업 */
.lobby { position: relative; }
.resumePop { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.55); animation: rpFade .2s ease-out; }
.rpCard { width: min(296px, 100%); padding: 16px 18px 12px; border: 1px solid #6b5420; border-radius: 8px; background: linear-gradient(rgba(16,20,34,.98), rgba(8,10,18,.98));
  box-shadow: 0 0 0 1px #000, 0 12px 36px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,140,.12); animation: rpIn .22s ease-out; }
.rpHead { display: flex; align-items: center; gap: 11px; }
.rpHead img { width: 38px; height: 38px; border-radius: 4px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--cc); }
.rpHead div { min-width: 0; } .rpHead b { display: block; font-size: 15px; color: var(--wow-yellow); }
.rpHead small { display: block; margin-top: 2px; font-size: 12px; color: #9aa6b4; word-break: keep-all; }
.rpStats { display: flex; justify-content: space-around; margin: 13px 0 12px; padding: 8px 0; border-top: 1px solid rgba(201,162,74,.18); border-bottom: 1px solid rgba(201,162,74,.18); }
.rpStats span { font-size: 15px; font-weight: 700; color: #e8edf2; text-align: center; }
.rpStats i { display: block; margin-bottom: 1px; font-style: normal; font-size: 11px; font-weight: 400; color: #7d8794; }
.rpCard .btn { width: 100%; margin: 0; padding: 8px 0; font-size: 15px; }
.rpLinks { display: flex; justify-content: center; gap: 22px; margin-top: 9px; }
.rpLinks a { font-size: 12px; color: #8b95a3; text-decoration: none; } .rpLinks a:hover { color: #dfe6ee; text-decoration: underline; }
/* 공지 · 패치노트 팝업 (js/notice.js) — 이어하기 카드와 같은 틀, 본문만 스크롤 */
.ncCard { width: min(360px, 100%); }
.ncBody { max-height: min(300px, calc(var(--vh, 100vh) / var(--lbZ, 1) - 190px)); min-height: 60px; overflow-y: auto; margin: 12px 0; padding: 8px 2px 8px 0; border-top: 1px solid rgba(201,162,74,.18); border-bottom: 1px solid rgba(201,162,74,.18);
  font-size: 13px; line-height: 1.55; color: #d6dce4; word-break: keep-all; }
.ncBody p { margin: 0 4px; } .ncBody ul { margin: 0; padding-left: 18px; } .ncBody li { margin: 2px 0; }
.ncBody .pnH { list-style: none; margin-left: -14px; font-weight: 700; color: #ffd27a; } .ncBody .pnH ul { font-weight: 400; color: #d6dce4; }
.ncCard .btn small { margin-left: 4px; font-size: 11px; opacity: .7; }
/* 공지 */
.noticeWrap { max-width: 760px; }
.notice { margin: 8px 0; padding: 10px 12px; border: 1px solid #2a2a2a; border-radius: 4px; background: rgba(0,0,0,.35); }
.notice.pinned { border-color: #6b5420; }
.ntTop { display: flex; align-items: baseline; gap: 6px; } .ntTop b { flex: 1; min-width: 0; font-size: 15px; color: var(--wow-yellow); } .ntTop small { flex: none; color: #8a93a6; font-size: 12px; }
.ntPin { flex: none; padding: 0 5px; border: 1px solid #6b5420; border-radius: 3px; font-size: 11px; font-style: normal; color: #d8b45a; }
.notice p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: #dde; word-break: keep-all; }
.ntAdm { display: flex; justify-content: flex-end; gap: 14px; margin-top: 6px; font-size: 12px; } .ntAdm a { color: #8b95a3; }
.ntOpts { display: flex; gap: 16px; font-size: 13px; color: #bcd; } .ntOpts label { display: flex; align-items: center; gap: 4px; }
/* 출석 · 접속 보상 (js/reward.js) */
.atWrap { max-width: 640px; } .atH { margin-top: 22px; } .atH small { margin-left: 8px; font-size: 13px; font-weight: 400; color: #8a93a6; }
.atGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 10px 0; }
.atDay { position: relative; padding: 4px 2px 5px; border: 1px solid #2a2f3a; border-radius: 5px; background: rgba(0,0,0,.35); text-align: center; }
.atDay > b { display: block; font-size: 11px; color: #8a93a6; }
.atRew { display: flex; justify-content: center; gap: 2px; }
.rwI { position: relative; display: inline-block; line-height: 0; } .rwI img { width: 26px; height: 26px; border: 1px solid #000; border-radius: 3px; }
.rwI i { position: absolute; right: -2px; bottom: -3px; font: 700 10px/1 var(--font); font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000; }
.atDay.got > * { opacity: .35; } .atDay.got::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #6fe07a; text-shadow: 0 0 4px #000; }
.atDay.today { border-color: var(--gold); background: rgba(80,60,20,.45); cursor: pointer; } .atDay.today > b { color: var(--wow-yellow); }
.atDay.miss { cursor: pointer; filter: grayscale(.7); } .atDay.miss:hover { filter: none; border-color: #6b5420; }
.atDay.miss small { display: block; margin-top: 2px; font-size: 10px; color: #d8b45a; }
.atDay.future { opacity: .8; }
.atCard { width: min(400px, 100%); } .atCard .atGrid { gap: 4px; margin: 12px 0; } .atCard .rwI img { width: 22px; height: 22px; }
.olList { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.olRow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid #2a2f3a; border-radius: 5px; background: rgba(0,0,0,.35); }
.olRow > b { width: 44px; font-size: 13px; color: #cfd6e0; } .olRow > span { width: 64px; text-align: right; font-size: 12px; color: #8a93a6; }
.olBar { flex: 1; height: 6px; border-radius: 3px; background: #1b2029; overflow: hidden; } .olBar i { display: block; height: 100%; background: linear-gradient(90deg, #6b5420, #d8b45a); }
.olRow.ready { border-color: #6b5420; } .olRow.got { opacity: .5; }
/* 2차 능력치 강화 창 */
.enStats { display: flex; gap: 6px; margin-top: 12px; }
.enStats button { flex: 1; padding: 7px 4px; border: 1px solid #2c3442; border-radius: 5px; background: rgba(0,0,0,.3); color: #8a93a6; font: 12px var(--font); cursor: pointer; }
.enStats button b { display: block; font-size: 15px; color: #dfe6ee; } .enStats button small { color: #9ff0ff; }
.enStats button.on { border-color: var(--gold); color: var(--wow-yellow); }
.enOk { color: #6fe07a; font-weight: 700; } .enNo { color: #ff6a5a; font-weight: 700; }
.tt-enh { color: #9ff0ff; font-size: 11px; }
/* 채팅 시스템 메시지 (전설 획득 알림) */
.cm.sys { color: #ff9a2e; font-weight: 700; }
/* 결과 화면 전리품 슬롯머신 */
.pull.spin { filter: saturate(.6) brightness(.85); } .pull.spin img { filter: blur(1px); }
.pull.land { animation: slotLand .35s ease-out; }
@keyframes slotLand { 0% { transform: scale(1.18); box-shadow: 0 0 30px 6px var(--qc); } 100% { transform: scale(1); } }
.eReroll { margin-top: 10px; text-align: center; }
.eReroll .btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; font-size: 13px; background: rgba(0,0,0,.35); border: 1px solid #6b5420; color: #d8c08a; box-shadow: none; animation: none; }
.eReroll .btn:hover { border-color: var(--gold); color: #fff; } .eReroll .btn small { opacity: .7; font-size: 11px; } .eReroll .ci { width: 18px; height: 18px; }
/* 게임 안 확인 창 (G.UI.ask · confirm — 브라우저 confirm/prompt 대신). 로비와 같은 배율로 */
.gDlg { position: absolute; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.5); animation: rpFade .15s ease-out; }
.dlgCard { zoom: var(--lbZ, 1); width: min(300px, calc(100vw / var(--lbZ, 1) - 32px)); padding: 16px 18px 14px; border: 1px solid #6b5420; border-radius: 8px; background: linear-gradient(rgba(16,20,34,.98), rgba(8,10,18,.98));
  box-shadow: 0 0 0 1px #000, 0 12px 36px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,140,.12); animation: rpIn .18s ease-out; }
.dlgTitle { display: block; font-size: 15px; color: var(--wow-yellow); }
.dlgText { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: #c3ccd6; word-break: keep-all; } .dlgText b { color: #fff; } .dlgText b.v { color: var(--wow-yellow); }
.dlgBtns { display: flex; gap: 8px; margin-top: 16px; }
.dlgBtns .btn { flex: 1; margin: 0; padding: 7px 0; font-size: 14px; }
.dlgBtns .dlgNo { background: none; border-color: #4a3c1c; color: #9aa6b4; box-shadow: none; text-shadow: none; }
.dlgCheck { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: #c3ccd6; cursor: pointer; } .dlgCheck input { margin: 0; accent-color: #c9a24a; }
.dlgNote { margin: 8px 0 0; min-height: 1.4em; font-size: 11px; color: #7d8794; }
/* 일괄 분해: 품질 고르기 (고른 품질 이하가 함께 켜진다) */
.deQ { display: flex; margin-top: 12px; border: 1px solid #2c3442; border-radius: 5px; overflow: hidden; }
.deQ button { flex: 1; padding: 6px 0; border: 0; border-left: 1px solid #2c3442; background: rgba(0,0,0,.3); color: #6f7a88; font: 700 12px var(--font); cursor: pointer; }
.deQ button:first-child { border-left: 0; }
.deQ button.on { color: var(--qc); background: rgba(255,255,255,.06); box-shadow: inset 0 -2px 0 var(--qc); }
.deMode + .deQ { margin-top: 8px; }
.deIlvl { cursor: default; } .deIlvl input { width: 64px; padding: 3px 6px; border: 1px solid #2c3442; border-radius: 4px; background: rgba(0,0,0,.3); color: #e6e9ee; font: 12px var(--font); }
@keyframes rpFade { from { opacity: 0; } }
@keyframes rpIn { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.clsPick { display: flex; flex-direction: column; align-items: center; width: 130px; padding: 8px; border: 1px solid #333; border-radius: 4px; cursor: pointer; background: rgba(0,0,0,.3); }
.clsPick img { width: 44px; height: 44px; border: 1px solid #000; } .clsPick b { color: var(--cc); font-size: 13px; margin-top: 4px; } .clsPick small { color: #888; font-size: 11px; }
.clsPick.on { border-color: var(--cc); box-shadow: 0 0 10px var(--cc); } .clsPick.new { opacity: .6; border-style: dashed; }

/* 캐릭터 */
.charHead { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.charHead a, .talTabs a { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #333; border-radius: 4px; color: #ccc; text-decoration: none; }
.charHead a img, .talTabs a img { width: 24px; height: 24px; }
.charHead a.on, .talTabs a.on { border-color: #ffd100; color: var(--wow-yellow); }
.charHead a.newCls { border-style: dashed; color: #8b95a3; font-size: 13px; } .charHead a.newCls img { opacity: .55; filter: grayscale(.6); }
.charHead a.newCls:hover { color: #dfe6ee; border-color: #6b5420; } .charHead a.newCls:hover img { opacity: 1; filter: none; }
.charBody { display: grid; grid-template-columns: auto 240px 1fr; gap: 18px; align-items: start; }
.paper { display: flex; gap: 8px; }
.eqCol { display: flex; flex-direction: column; gap: 4px; width: 230px; }
.eqSlot { display: flex; gap: 8px; align-items: center; padding: 3px; border: 1px solid #222; border-radius: 3px; background: rgba(0,0,0,.4); cursor: pointer; min-height: 44px; }
.eqSlot img { width: 38px; height: 38px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--qc); flex: none; }
.eqSlot img.emptyImg { opacity: .25; filter: grayscale(1); }
.eqSlot div { min-width: 0; font-size: 12px; } .eqSlot small { display: block; color: #777; font-size: 10px; }
.eqSlot b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .eqSlot i { font-style: normal; color: #ffd100; font-size: 11px; }
.eqSlot.sel, .bagItem.sel { box-shadow: 0 0 0 2px #ffd100; }
.statBox { background: rgba(0,0,0,.35); border: 1px solid #3a2e14; border-radius: 6px; padding: 10px 14px; font-size: 13px; }
.statBox h4:first-child { margin-top: 0; }
.stl { display: flex; justify-content: space-between; padding: 1px 0; } .stl b { color: #fff; }
.statTip { cursor: help; } .statTip span { border-bottom: 1px dotted #666; }
.stacks { display: flex; flex-wrap: wrap; gap: 4px; }
.stk { position: relative; } .stk img { width: 32px; height: 32px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--qc); }
.stk i { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 11px; font-weight: 700; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.bagBox h4 { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 0; } .bagBox h4 > *, .bagBox h4 .btn { white-space: nowrap; } .bagBox h4 select { margin-left: auto; padding: 3px 6px; font-size: 12px; }
.bagGrid { display: grid; grid-template-columns: repeat(auto-fill, 42px); gap: 3px; max-height: 300px; overflow-y: auto; padding: 4px; background: rgba(0,0,0,.35); border: 1px solid #222; }
.bagItem { position: relative; width: 42px; height: 42px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--qc); background: #0a0c12; cursor: pointer; }
.bagItem img { width: 40px; height: 40px; } .bagItem.empty { box-shadow: 0 0 0 1px #1a1d25; cursor: default; }
.bagItem.locked { box-shadow: 0 0 0 1px #15171d; background: #06070a; color: #3a3f4c; font-size: 20px; line-height: 40px; text-align: center; }
.bagItem.locked:hover { color: #c9a24a; box-shadow: 0 0 0 1px #c9a24a; }
.bagItem i { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.bagItem u { position: absolute; left: 1px; top: -2px; text-decoration: none; font-size: 10px; }
.bagItem.noUse img { filter: sepia(1) saturate(4) hue-rotate(-40deg) brightness(0.6); }
.specPick { display: flex; gap: 4px; align-items: center; margin-left: auto; color: #aaa; }
.skinPick { display: flex; gap: 8px; align-items: center; margin: -2px 0 10px; color: #aaa; font-size: 13px; }
.skinOpt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; background: rgba(0,0,0,.35); border: 1px solid #333; border-radius: 4px; color: #ccc; cursor: pointer; font: inherit; }
.skinOpt img { width: 40px; height: 48px; object-fit: contain; }
.skinOpt b { font-weight: normal; font-size: 12px; }
.skinOpt.on { border-color: #ffd100; color: var(--wow-yellow); }
.itemPanel { margin-top: 10px; padding: 10px; background: rgba(0,0,0,.35); border: 1px solid #3a2e14; border-radius: 6px; min-height: 80px; font-size: 13px; }
.ipHead { font-weight: 700; display: flex; align-items: center; gap: 6px; font-size: 15px; } .ipHead img { width: 28px; height: 28px; }
.ipBtns { margin: 6px 0; } .ipRow { display: flex; gap: 8px; align-items: center; margin: 4px 0; flex-wrap: wrap; } .ipRow select { font-size: 12px; padding: 3px; max-width: 100%; }
/* 경매장 (js/auction.js) */
.auWrap { display: flex; flex-direction: column; gap: 10px; }
.auHead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.auHead .rkSeg a { font-size: 14px; padding: 6px 16px; } .auHead .newTag { margin-left: 4px; }
.auFilters { align-items: center; } .auFilters select, .auFilters input[type=search] { padding: 4px 6px; font-size: 13px; }
.auFilters input[type=search] { width: 150px; }
.auChk { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #ccc; }
.auList { margin-top: 8px; overflow-x: auto; }
.auTable { border-collapse: collapse; width: 100%; font-size: 13px; }
.auTable th, .auTable td { padding: 4px 10px; border-bottom: 1px solid #222; text-align: left; white-space: nowrap; }
.auTable th { color: #998; font-weight: normal; font-size: 12px; }
.auTable .num { text-align: right; } .auTable td.num small { display: block; font-size: 11px; }
.auName { display: flex; align-items: center; gap: 6px; }
.auName img { width: 28px; height: 28px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--qc); }
.auName b { white-space: normal; } .auName i { font-style: normal; color: #fff; } .auName small { color: #aaa; }
.auGold { display: inline-flex; align-items: center; gap: 3px; color: #fff; font-weight: 700; }
.auPager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 8px 0; }
.auSell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.auPick h4 { margin: 0 0 6px; } .auPick h4 + .stacks, .auPick .bagGrid + h4 { margin-top: 10px; }
.auPick .stk { cursor: pointer; } .stk.sel img, .bagItem.sel { outline: 2px solid var(--wow-yellow); }
.auForm { padding: 12px; background: rgba(0,0,0,.35); border: 1px solid #3a2e14; border-radius: 6px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.auField { display: flex; flex-direction: column; gap: 3px; } .auField input { padding: 5px 8px; font-size: 14px; width: 100%; box-sizing: border-box; }
.auCalc { display: flex; flex-direction: column; gap: 2px; }
.auWrap h4 { margin: 12px 0 4px; display: flex; align-items: center; gap: 8px; }
@media (max-width: 600px) { .auSell { grid-template-columns: 1fr; } .auList .auTable th:nth-child(2), .auList .auTable td:nth-child(2) { display: none; } }
.tt-cmp { border-top: 1px solid #333; margin-top: 4px; padding-top: 3px; } .tt-cmp .up { color: #1eff00; margin-right: 6px; } .tt-cmp .down { color: #ff4040; margin-right: 6px; }
.tt-gold { color: #ffd100; }
.tt-set { margin-top: 4px; }

/* 특성 */
.talWrap { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; }
.talTabs { grid-column: 1 / -1; display: flex; gap: 8px; }
.talInfo { grid-column: 1; } .talPts { margin: 8px 0; font-size: 15px; } .talPts b { color: var(--wow-yellow); }
.talGrid { grid-column: 2; grid-row: 2 / span 2; display: grid; grid-template-columns: repeat(4, 64px); gap: 10px; padding: 16px; background: radial-gradient(ellipse at top, rgba(60,40,10,.4), rgba(0,0,0,.6)); border: 2px solid #6b5420; border-radius: 6px; }
.tal { position: relative; width: 54px; height: 54px; cursor: pointer; }
.tal img { width: 54px; height: 54px; border: 2px solid #1eff00; border-radius: 4px; }
.tal i { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 11px; font-weight: 700; background: #000; border: 1px solid #1eff00; color: #1eff00; padding: 0 4px; border-radius: 3px; }
.tal.max img, .tal.max i { border-color: #ffd100; color: #ffd100; }
.tal.locked img { filter: grayscale(1) brightness(.5); border-color: #444; } .tal.locked i { border-color: #444; color: #777; }
.tal:not(.has):not(.locked) img { border-color: #1eff00; filter: brightness(.8); }
/* 갈래형 특성 트리 (관리자 테스트 모드의 시험 트리) */
.talWrap.graph { grid-template-columns: minmax(220px, 300px) 1fr; align-items: start; }
.tgScroll { grid-column: 2; grid-row: 2 / span 2; overflow: auto; max-height: calc(var(--vh, 1vh) * 100 - 190px); border: 2px solid #6b5420; border-radius: 6px; background: radial-gradient(ellipse at top, rgba(60,40,10,.4), rgba(0,0,0,.6)); }
.tgBoard { position: relative; margin: 0 auto; }
.tgBoard svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.tgBoard line { stroke: #444; stroke-width: 3; }
.tgBoard line.ok { stroke: #1eff00; opacity: .6; } .tgBoard line.on { stroke: #ffd100; }
.tgNode { position: absolute; }
.tgNode img { border-color: var(--br, #1eff00); }
.tgNode.school img { border-radius: 50%; border-width: 3px; }
.tgNode.choice img { border-radius: 14px; }
.tgNode.apex { transform: scale(1.15); } .tgNode.apex img { border-width: 3px; border-color: #ff8000; box-shadow: 0 0 12px rgba(255,128,0,.6); }
.tgGate { position: absolute; left: 6px; right: 6px; height: 0; border-top: 1px dashed rgba(255,209,0,.35); }
.tgGate span { position: absolute; left: 0; top: -9px; font-size: 11px; color: #c9a24a; background: #0b0906; padding: 0 4px; }
.tgGate.ok { border-top-color: rgba(30,255,0,.25); } .tgGate.ok span { color: #6c6; }
.tgBr { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; font-size: 13px; font-weight: 700; }
.talTabs .testTgl { margin-left: auto; border-color: #6b5420; color: #c9a24a; }
.talTabs .testTgl.on { border-color: #ff8000; color: #ff8000; background: rgba(255,128,0,.08); }
@media (max-width: 760px) { .talWrap.graph { grid-template-columns: 1fr; } .tgScroll { grid-column: 1; grid-row: auto; } }

/* 상점 */
.gachaRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.gacha { background: rgba(0,0,0,.4); border: 1px solid #6b5420; border-radius: 6px; padding: 14px; }
.gHead { display: flex; gap: 10px; align-items: center; } .gHead > img { width: 52px; height: 52px; border: 2px solid #c9a24a; } .gHead h3 { margin: 0; }
.gProb { width: 100%; font-size: 13px; margin: 8px 0; border-collapse: collapse; } .gProb td { padding: 2px 4px; border-bottom: 1px solid #222; } .gProb td:last-child { text-align: right; }
.gBtns .btn { margin: 4px 4px 0 0; }
.gachaResult, .eLoot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: center; }
.pull { width: 110px; text-align: center; padding: 8px 4px; background: rgba(0,0,0,.6); border: 1px solid var(--qc); border-radius: 6px; box-shadow: 0 0 14px -2px var(--qc); animation: cardIn .35s ease-out backwards; font-size: 12px; }
.pull img { width: 44px; height: 44px; border: 1px solid #000; } .pull span { display: block; color: var(--qc); font-weight: 700; } .pull small { color: #888; }
.pull.q4 { box-shadow: 0 0 26px 2px var(--qc); }

/* 퀘스트 · 금고 */
.questWrap { max-width: 760px; }
.qBox h3 { display: flex; align-items: center; gap: 8px; } .qBox h3 img { width: 28px; height: 28px; }
.quest { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; margin: 6px 0; background: rgba(0,0,0,.35); border: 1px solid #2a2a2a; border-radius: 4px; }
.quest b { display: block; } .quest small { color: #8a93a6; }
.quest.done { border-color: #c9a24a; } .quest.claimed { opacity: .55; }
.qBar { position: relative; width: 320px; height: 14px; margin-top: 4px; background: #111; border: 1px solid #333; }
.qBar div { height: 100%; background: linear-gradient(#e8b000, #9a6a00); } .qBar span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 14px; text-shadow: 1px 1px 0 #000; }
.qRew { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
/* 클리어 상자 확률표 (출정 화면) */
.sdBox span { display: inline-flex; align-items: center; gap: 2px; margin: 2px 10px 2px 0; font-size: 13px; white-space: nowrap; } .sdBox .ci { width: 16px; height: 16px; }
/* 제작 (js/craft.js) */
.crWrap { max-width: 1200px; display: flex; flex-direction: column; gap: 10px; }
.crWrap .qBox { padding: 8px 12px; background: rgba(0,0,0,.35); border: 1px solid #2a2a2a; border-radius: 4px; }
.crWrap h4 { margin: 8px 0 5px; display: flex; align-items: center; gap: 8px; } .crWrap h4:first-child { margin-top: 2px; }
.crMats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; } .crMats b { color: #fff; }
.crMain { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.crSide { display: flex; flex-direction: column; gap: 10px; }
.crSlots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.crSlot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; color: #bbb; text-decoration: none; font-size: 12px; background: rgba(0,0,0,.3); border: 1px solid #333; border-radius: 4px; }
.crSlot > img { width: 34px; height: 34px; border: 1px solid #000; } .crSlot small { color: #8a93a6; } .crSlot small .ci { width: 14px; height: 14px; }
.crSlot.on { border-color: var(--gold); color: #fff; box-shadow: 0 0 8px -2px var(--gold); }
.crCount { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .crCount input { width: 56px; text-align: center; }
.crNeed { margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.crCost { white-space: nowrap; }
.crRule { margin-top: 8px; line-height: 1.6; }
.crList { display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; }
.crRow { display: flex; align-items: center; gap: 8px; padding: 3px 6px; background: rgba(0,0,0,.3); border: 1px solid #262626; border-radius: 3px; cursor: default; }
.crRow > img { width: 30px; height: 30px; border: 1px solid var(--qc); } .crRow b { display: block; font-size: 13px; } .crRow small { font-size: 12px; color: #aab; }
.crDE { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.crFx summary { cursor: pointer; color: #ccc; } .crFx h4.tt-green { color: #1eff00; } .crFx h4.tt-gold { color: #ffd100; } .crFx h4.tt-red { color: #ff4040; } .crFx h4 small { font-weight: normal; } .crFx .stl { font-size: 13px; max-width: 560px; }
html.short .crMain, .crMain.narrow { grid-template-columns: 1fr; }
@media (max-width: 760px) { .crMain { grid-template-columns: 1fr; } .crSlots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 이벤트 퀘스트 (js/event.js) */
.evBox { margin-bottom: 18px; } .evBox h3 { margin-bottom: 4px; }
.evTime { margin-left: auto; font-size: 12px; font-weight: normal; color: #7fd47f; } .evTime.over { color: #8a93a6; }
.evBody { margin: 2px 0 4px; font-size: 13px; color: #cfd6e4; white-space: pre-line; }
.evRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; } .evRow label { display: flex; align-items: center; gap: 6px; }
.evQ { padding: 6px 8px; margin: 6px 0; border: 1px solid #3a3020; border-radius: 4px; background: rgba(0,0,0,.3); }
.evQTop { display: flex; flex-wrap: wrap; gap: 6px; } .evQTop .evName { flex: 1; min-width: 140px; } .evQTop .evTrack { flex: 1.3; min-width: 160px; } .evQTop .evGoal { width: 90px; }
.evQ .evDesc { display: block; margin: 3px 0 5px; }
.evRews { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 2px; } .evRews .maRew { margin: 0; } .evRews .maRew select { flex: none; width: 170px; } .evRews .maRew input { width: 80px; }
.evCond { margin-top: 5px; } .evCond select { max-width: 200px; }
.evEach { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 3px; font-size: 12px; } .evEach span { padding: 0 5px; border: 1px solid #333; border-radius: 3px; color: #8a93a6; }
.evEach span.on { border-color: #5a7a3a; color: #bff0bf; }
.evSt { margin-left: 6px; padding: 0 5px; border-radius: 3px; font: 11px/16px var(--font); font-style: normal; background: #333; color: #ccc; }
.evSt.live { background: #2f5a2f; color: #bff0bf; } .evSt.soon { background: #3d3560; color: #d6ccff; }
.vRows { display: flex; flex-direction: column; gap: 8px; }

/* 패치노트 */
.newTag, .curTag { margin-left: 6px; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 900; font-style: normal; color: #fff; background: #c8281c; vertical-align: middle; }
.curTag { background: #2c6e3a; }
.lbNav a .newTag { margin-left: auto; }
/* 이벤트 표시: 녹색 테두리 (숫자 표시 앞) */
.evTag { margin-left: 6px; padding: 0 4px; border: 1px solid #4fc04f; border-radius: 3px; font-size: 9px; line-height: 14px; font-weight: 900; font-style: normal; letter-spacing: .5px; color: #8fe88f; background: rgba(40, 90, 40, .35); vertical-align: middle; }
/* 왼쪽 메뉴에서는 아이콘 아래쪽에 겹쳐 (메뉴 폭이 좁아 숫자 표시를 밀어내지 않게) */
.lbNav a { position: relative; } .lbNav a .evTag { position: absolute; left: 2px; bottom: 1px; margin: 0; padding: 0 2px; font-size: 8px; line-height: 11px; background: #12301a; }
.lbSub .evTag { margin-left: 4px; }
.patchWrap { max-width: 760px; }
.patch { margin: 8px 0; background: rgba(0,0,0,.35); border: 1px solid #2a2a2a; border-radius: 4px; }
.patch[open] { border-color: #6b5420; }
.patch summary { cursor: pointer; padding: 9px 12px; font-size: 15px; }
.patch summary b { color: var(--wow-yellow); margin-right: 4px; }
.patch summary small { float: right; color: #8a93a6; font-size: 12px; margin-top: 2px; }
.patch ul { margin: 0; padding: 0 16px 10px 32px; line-height: 1.6; font-size: 14px; color: #dde; }
.patch ul ul { padding: 2px 0 4px 18px; font-weight: 400; color: #dde; }
.patch .pnH { font-weight: 700; color: #ffd27a; list-style: none; margin-left: -14px; }
.rkSeg.pnCats { display: inline-flex; margin: 4px 0 10px; }
.pnCats a small { color: #6f7788; font-size: 11px; }
.pnFix { margin-right: 6px; padding: 0 4px; border: 1px solid #4a5a72; border-radius: 3px; font-size: 10px; font-style: normal; color: #9fb3d1; vertical-align: 1px; }
.vRow { display: flex; align-items: center; gap: 12px; } .vRow b { width: 80px; }
.vCell { width: 70px; text-align: center; padding: 6px; border: 1px solid #333; border-radius: 4px; opacity: .45; } .vCell img { width: 36px; height: 36px; filter: grayscale(1); }
.vCell.open { opacity: 1; border-color: #c9a24a; box-shadow: 0 0 10px rgba(255,200,80,.3); } .vCell.open img { filter: none; } .vCell small { display: block; font-size: 11px; }
.vOpts { display: flex; flex-wrap: wrap; gap: 12px; }
.vOpt { width: 180px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 1px solid var(--qc); border-radius: 6px; background: rgba(0,0,0,.4); text-align: center; font-size: 13px; }
.vOpt img { width: 48px; height: 48px; } .vOpt small { color: #888; } .vOpt.picked { box-shadow: 0 0 16px var(--qc); }

/* 우편함 */
.mailWrap { max-width: 640px; }
.mailHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .mailHead p { margin: 0; }
.mail { display: flex; align-items: flex-start; gap: 10px; padding: 10px; margin-bottom: 8px; border: 1px solid #4a3d22; border-radius: 6px; background: rgba(0,0,0,.35); }
.mail > img { width: 32px; height: 32px; flex: none; } .mail.done { opacity: .6; }
.mBody { flex: 1; min-width: 0; } .mBody p { margin: 4px 0 0; font-size: 13px; color: #bcd; line-height: 1.45; }
.mTop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .mTop small { color: #888; flex: none; }
.mRews { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #ffd27a; }
.mail > .btn { flex: none; align-self: center; } .mDel { flex: none; align-self: center; font-size: 12px; color: #888; }
.mailAdm { margin-bottom: 12px; padding: 8px 10px; border: 1px dashed #6b5420; border-radius: 6px; background: rgba(0,0,0,.25); }
.mailAdm summary { cursor: pointer; color: var(--gold-hi); font-size: 14px; } .mailAdm h4 { margin: 12px 0 6px; font-size: 13px; color: #bcd; }
.maForm { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .maForm input, .maForm textarea, .maForm select { padding: 5px 8px; font-size: 13px; }
.maTo { display: flex; gap: 6px; } .maTo input { flex: 1; min-width: 0; }
.maRew { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .maRew select { flex: 1; min-width: 0; } .maRew input { width: 90px; } .maDel { color: #888; font-size: 12px; }
.maBtns { display: flex; align-items: center; justify-content: space-between; } .maBtns a { font-size: 13px; }
.maLog { padding: 6px 0; border-top: 1px solid #3a3020; font-size: 12px; } .maLog .mTop b { font-size: 13px; } .maLog .mRews { margin-top: 2px; font-size: 12px; } .maLog .mDel { display: inline-block; margin-top: 2px; }
.gTix { display: flex; align-items: center; gap: 4px; font-size: 13px; margin-top: 6px; } .gTix .btn { margin: 0 0 0 4px; }

/* 랭킹 */
.rankWrap { display: flex; flex-direction: column; gap: 8px; }
.rankFilters { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.rkSeg { display: flex; border: 1px solid #333; border-radius: 4px; overflow: hidden; }
.rkSeg a { display: flex; align-items: center; gap: 5px; padding: 5px 11px; color: #aaa; text-decoration: none; font-size: 13px; border-left: 1px solid #333; }
.rkSeg a:first-child { border-left: 0; }
.rkSeg a img { width: 18px; height: 18px; }
.rkSeg a:hover { color: #fff; background: rgba(255,255,255,.04); }
.rkSeg a.on { color: var(--wow-yellow); background: rgba(255,209,0,.12); }
.rkGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rkCard { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: rgba(0,0,0,.35); border: 1px solid #2c2416; border-radius: 6px; cursor: pointer; transition: border-color .12s, transform .12s; }
.rkCard:hover { border-color: #ffd100; transform: translateY(-2px); }
.rkCard.mine { border-color: #6b5420; }
.rkCardHead { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.rkCardHead img { width: 34px; height: 34px; border: 1px solid #000; box-shadow: 0 0 0 1px #6b5420; }
.rkCardHead b { display: block; color: var(--wow-yellow); font-size: 15px; }
.rkCardHead small { color: #8a93a6; font-size: 12px; }
.rkRow { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 4px; border-radius: 3px; }
.rkRow.me { background: rgba(255,209,0,.1); }
.rkName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkCls { width: 18px; height: 18px; border: 1px solid #000; }
.rkVal { font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; }
.rkMedal { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 900; color: #1a1206; box-shadow: 0 0 0 1px #000; }
.rkMedal.r1 { background: linear-gradient(#ffe680, #d9a400); }
.rkMedal.r2 { background: linear-gradient(#f0f0f0, #9aa0a8); }
.rkMedal.r3 { background: linear-gradient(#f0b080, #a0582a); }
.rkEmpty { color: #666; font-size: 13px; padding: 14px 0; text-align: center; }
.rkMine { margin-top: auto; padding-top: 6px; border-top: 1px solid #2a2a2a; font-size: 12px; color: #ccc; }
.rkMine b { color: var(--wow-yellow); }
.rkHead { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--wow-yellow); }
.rkHead .btn.small { margin: 0 8px 0 0; }
.rkHead img { width: 30px; height: 30px; border: 1px solid #000; }
.rankTable { border-collapse: collapse; min-width: 560px; font-size: 14px; }
.rankTable th, .rankTable td { padding: 5px 12px; border-bottom: 1px solid #222; text-align: left; }
.rankTable tr.me td { background: rgba(255,209,0,.08); color: var(--wow-yellow); }
.rankTable tr.gap td { color: #555; text-align: center; padding: 0; }

/* 레벨업 카드 · 종료 화면 */
.card .cacts { position: absolute; right: 10px; top: 8px; display: flex; gap: 6px; }
.card .cacts a { font-size: 11px; color: #999; text-decoration: none; border: 1px solid #444; border-radius: 3px; padding: 0 5px; background: rgba(0,0,0,.6); }
.card .cacts a:hover { color: #fff; border-color: #aaa; } .card .cacts a.on { color: #4af; border-color: #4af; }
.card:has(.cacts a) .chead { margin-top: 16px; } /* 추방 · 봉인 단추가 긴 이름을 덮지 않게 한 줄 아래로 */
.card .chead > div { min-width: 0; }
.eRewards { text-align: center; margin: 10px 0; }
.eScore { margin: 8px auto; max-width: 440px; padding: 8px 14px; border: 1px solid #5a4a1c; border-radius: 6px; background: rgba(40, 30, 8, 0.5); }
.eScoreHead { text-align: center; font-size: 15px; margin-bottom: 4px; }
.eScoreHead b { color: var(--wow-yellow); font-size: 24px; margin: 0 6px; }
.eScoreRows div { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 1px 0; }
.eScoreRows small { flex: 1; color: #889; font-size: 11px; }
.eScoreRows b { color: #ffe9a0; }
.eGain { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 15px; color: #fff; }

@media (max-width: 900px) {
  .lbBody { flex-direction: column; } .lbNav { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #3a2e14; }
  .lbNav a span { display: none; } .stageWrap, .charBody, .talWrap { grid-template-columns: 1fr; } .talGrid { grid-column: 1; grid-row: auto; }
  .lbTop { flex-wrap: wrap; } .qBar { width: 180px; }
}
.lbLogo .beta { font-family: var(--font); font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #000; background: linear-gradient(#ffd100, #e08a00); border-radius: 3px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; text-shadow: none; box-shadow: 0 0 8px rgba(255,180,0,.6); }

/* 주문 도감 */
.cdxWrap { display: flex; flex-direction: column; gap: 10px; }
.cdxH { margin: 10px 0 0; color: var(--wow-yellow); font-size: 16px; border-bottom: 1px solid #3a2e14; padding-bottom: 4px; }
.cdxH small { color: #8a8070; font-weight: 400; }
.cdxGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.cdx { display: flex; gap: 10px; padding: 8px; background: rgba(0,0,0,.35); border: 1px solid #2c2416; border-radius: 4px; font-size: 13px; line-height: 1.45; }
.cdx > img { width: 40px; height: 40px; flex: none; border: 1px solid #000; box-shadow: 0 0 0 1px #6b5420; }
.cdxName { font-weight: 700; font-size: 14px; color: #fff; }
.cdxKey { font-size: 11px; padding: 0 5px; border: 1px solid #6b5420; border-radius: 3px; color: #e6cc80; margin-left: 4px; }
.cdxSub { color: #9da3ad; font-size: 12px; }
.cdxDesc { color: var(--wow-yellow); margin-top: 2px; }
.lgTag { margin-left: 4px; padding: 0 5px; border-radius: 3px; font-size: 11px; font-weight: 400; color: #ffd8a8; background: rgba(255,128,0,.15); border: 1px solid rgba(255,128,0,.35); vertical-align: 1px; }
.lgTag.own { color: #1eff00; background: rgba(30,255,0,.1); border-color: rgba(30,255,0,.35); }
.lgTag.none { color: #8a8070; background: none; border-color: #3a3326; }
.lgNone > img { filter: grayscale(1) brightness(.55); }
.lgNone .cdxName { opacity: .7; }
.lgItems { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lgItem { font: inherit; font-size: 12px; padding: 2px 8px; color: #d8cfbf; background: rgba(255,128,0,.08); border: 1px solid rgba(255,128,0,.4); border-radius: 3px; cursor: pointer; }
.lgItem:hover { background: rgba(255,128,0,.18); }
.lgItem.sel { border-color: #ff8000; box-shadow: 0 0 0 1px #ff8000; color: #fff; }
.lgPanel { max-width: 820px; position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #120e08; border: 1px solid #6b5420; border-radius: 4px; }
.lgPanel .charHead { margin: 0; }
.cdxNodes { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; color: #b8b0a0; font-size: 12px; }
.cdxNodes b { color: #1eff00; font-weight: 600; }


/* ---------- 접속자 · 채팅 (js/chat.js) ---------- */
#chat { position: absolute; left: 12px; bottom: 12px; z-index: 30; font-size: 13px; user-select: text; }
.chatPill { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font: 700 13px var(--font); color: #dde6f5; background: var(--tt-bg); border: 1px solid #6b5420; border-radius: 16px; cursor: pointer; box-shadow: 0 2px 10px #000; }
.chatPill:hover { border-color: var(--gold); color: #fff; }
.chatDot { width: 8px; height: 8px; border-radius: 50%; background: #1eff00; box-shadow: 0 0 6px #1eff00; }
.chatUnread { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #c41f1f; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.chatBox { display: none; flex-direction: column; width: 320px; height: 380px; background: var(--tt-bg); border: 2px solid #6b5420; border-radius: 6px; box-shadow: 0 6px 24px #000; }
#chat.open .chatPill { display: none; }
#chat.open .chatBox { display: flex; }
.chatHead { display: flex; align-items: center; border-bottom: 1px solid #3a2e12; background: linear-gradient(#1a1408, #0a0804); }
.chatHead a { padding: 8px 12px; color: #8a93a6; text-decoration: none; font-weight: 700; }
.chatHead a.on { color: var(--wow-yellow); box-shadow: inset 0 -2px 0 var(--gold); }
.chatX { margin-left: auto; padding: 4px 10px; background: none; border: 0; color: #8a93a6; font-size: 14px; cursor: pointer; }
.chatX:hover { color: #fff; }
.chatMsgs, .chatWho { flex: 1; overflow-y: auto; padding: 6px 10px; }
.cm { padding: 2px 0; line-height: 1.45; word-break: break-word; color: #e8ecf4; }
.cm i { font-style: normal; color: #5d6577; font-size: 11px; margin-right: 2px; }
.cm b { color: #9fc6ff; }
.cm.mine b { color: #1eff00; }
#chat b.adm { color: #ff8000; }
#chat b.gst { color: #9d9d9d; }
.cmDel { color: #5d6577; text-decoration: none; font-size: 11px; }
.cmDel:hover { color: #ff4b3a; }
.cw { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.cw b { color: #e8ecf4; }
.cw small { margin-left: auto; color: #8a93a6; font-size: 11px; }
.chatForm { display: flex; gap: 4px; padding: 6px; border-top: 1px solid #3a2e12; }
.chatForm input { flex: 1; min-width: 0; padding: 6px 8px; font: 13px var(--font); color: #fff; background: #05070c; border: 1px solid #3a3f4c; border-radius: 3px; }
.chatForm input:focus { outline: none; border-color: var(--gold); }
.chatForm .btn.small { margin: 0; padding: 4px 12px; font-size: 13px; }
.chatGuest { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-top: 1px solid #3a2e12; color: #8a93a6; font-size: 12px; }
.chatGuest .btn.small { margin: 0 0 0 6px; padding: 3px 10px; font-size: 12px; }
/* 판 중: 작고 반투명하게, 레벨업 · 일시정지 창보다 아래 */
#chat.play { z-index: 15; }
/* 판 중(PC): 로비보다 조금 낮게, 설정 '화면 크기'를 따른다 (--ui). 폭은 가운데 단축바(반폭 346px × --ui) 왼쪽 끝을 넘지 않게 */
/* 큰 화면(2560 등)에서는 화면에 비례해 키운다 (16vw · 30vh). 좁은 창에서도 200px 아래로는 줄지 않게 */
#chat.play .chatBox { width: clamp(200px, 50vw - 346px * var(--ui, 1) - 24px, max(340px * var(--ui, 1), 16vw)); height: max(300px * var(--ui, 1), 30vh); background: rgba(8,10,14,.6); border-color: rgba(107,84,32,.6); box-shadow: none; }
#chat.play .chatBox:focus-within, #chat.play .chatBox:hover { background: rgba(8,10,14,.85); }
#chat.play .chatHead { background: rgba(10,8,4,.6); }
#chat.play .cm { text-shadow: 1px 1px 0 #000; }
/* 로비(PC): 큰 화면(2560 등)에서 고정 크기면 상대적으로 작아 보이므로 화면에 비례해 키운다 (1280×720 이하는 320×380 그대로) */
@media (min-width: 601px) { #chat:not(.play) .chatBox { width: clamp(320px, 18vw, 460px); height: clamp(380px, 42vh, 560px); } }
@media (min-width: 2000px) { #chat:not(.play), #chat:not(.play) .chatForm input { font-size: 14px; } }
@media (max-width: 600px) {
  #chat { left: 8px; bottom: 8px; }
  .chatBox { width: calc(100vw - 16px); height: 55vh; }
}

/* ---------- 설정 ---------- */
.setPanel { width: 480px; max-width: calc(100vw - 32px); max-height: 92vh; overflow-y: auto; }
.setH { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 2px 6px; color: var(--wow-yellow); font-weight: 700; font-size: 15px; }
.setH a { color: #9ab; font-size: 12px; font-weight: 400; }
.keyList { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.keyRow { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; background: rgba(0,0,0,.35); border: 1px solid #2c2416; border-radius: 4px; color: #dde; font-size: 12.5px; min-width: 0; }
.keyRow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyRow i { color: #667; }
.keyBtn { flex: none; min-width: 64px; padding: 4px 8px; background: #1a1c26; border: 1px solid #6b5420; border-radius: 3px; color: var(--wow-yellow); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.keyBtn:hover { border-color: #c9a24a; }
.keyBtn.wait { color: #fff; border-color: #fff; animation: keyWait 0.8s ease-in-out infinite alternate; }
@keyframes keyWait { from { background: #1a1c26; } to { background: #3a3220; } }
.keyMsg { margin: 8px 2px 14px; color: #889; font-size: 12px; line-height: 1.5; }
.keyMsg.bad { color: #ff7060; }
@media (max-width: 520px) { .keyList { grid-template-columns: 1fr; } }
.setList { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.setRow { display: grid; grid-template-columns: 1fr 150px 48px; align-items: center; gap: 10px; padding: 7px 10px; background: rgba(0,0,0,.35); border: 1px solid #2c2416; border-radius: 4px; cursor: pointer; color: #dde; font-size: 14px; }
.setRow small { display: block; color: #889; font-size: 11.5px; }
.setRow input[type=range] { width: 100%; accent-color: #c9a24a; }
.setRow input[type=checkbox] { justify-self: end; width: 18px; height: 18px; accent-color: #c9a24a; }
.setRow b { color: var(--wow-yellow); font-size: 13px; text-align: right; }

/* ---------- 보상 연출 ---------- */
/* 레벨업 카드: 한 장씩 뒤집히며 등장. 희귀 이상은 테두리가 반짝이고, 전설 · 진화는 빛기둥 */
.cards { perspective: 1200px; }
.card, .card:nth-child(n) { animation: cardFlip .42s cubic-bezier(.2,.9,.3,1.2) var(--d, 0s) backwards; }
@keyframes cardFlip { 0% { transform: rotateY(90deg) translateY(20px); filter: brightness(3); opacity: 0; } 60% { filter: brightness(1.8); opacity: 1; } 100% { transform: none; filter: none; } }
.card.r3 { animation: cardFlip .42s cubic-bezier(.2,.9,.3,1.2) var(--d, 0s) backwards, epicGlow 1.6s ease-in-out calc(var(--d, 0s) + .42s) infinite alternate; }
@keyframes epicGlow { to { box-shadow: 0 0 0 1px #000, 0 0 34px 4px var(--qc), 0 8px 24px #000; } }
.card.r4, .card.r5 { animation: cardFlip .42s cubic-bezier(.2,.9,.3,1.2) var(--d, 0s) backwards, epicGlow 1s ease-in-out calc(var(--d, 0s) + .42s) infinite alternate; }
.card.r4::before, .card.r5::before { content: ''; position: absolute; left: 50%; bottom: 92%; width: 120px; height: 520px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, color-mix(in srgb, var(--qc) 70%, transparent), transparent 70%); filter: blur(6px); animation: pillar 1.2s ease-out var(--d, 0s) backwards; }
@keyframes pillar { from { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: bottom; } }

/* 전리품 상자: 아이콘 릴 → 멈추면 빛기둥 */
.chestOpen { text-align: center; position: relative; cursor: pointer; }
.reel { position: relative; width: 96px; height: 96px; margin: 26px auto 18px; overflow: hidden; border: 3px solid var(--qc); border-radius: 8px; background: #05070d; box-shadow: 0 0 0 1px #000, 0 0 24px -2px var(--qc); z-index: 1; }
.reelStrip { display: flex; flex-direction: column; animation: reelSpin 1.05s cubic-bezier(.15,.6,.25,1) forwards; }
.reelStrip img { width: 96px; height: 96px; flex: none; }
@keyframes reelSpin { from { transform: translateY(0); } to { transform: translateY(-1536px); } }
.chestOpen .pillar { position: absolute; left: 50%; top: -60px; width: 160px; height: 420px; transform: translateX(-50%) scaleY(0); transform-origin: 50% 70%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 45% 50% at 50% 60%, color-mix(in srgb, var(--qc) 80%, transparent), transparent 70%); filter: blur(4px); }
.chestOpen.stop .pillar { animation: pillarUp .65s ease-out forwards; }
.chestOpen.stop .reel { animation: reelHit .35s ease-out; }
@keyframes pillarUp { to { opacity: 1; transform: translateX(-50%) scaleY(1); } }
@keyframes reelHit { 40% { transform: scale(1.18); box-shadow: 0 0 0 1px #000, 0 0 60px 10px var(--qc); } }

/* 가챠: 전설이 나오면 결과 영역에 빛이 번진다 */
.gachaResult { position: relative; }
.gachaResult.burst::before { content: ''; position: absolute; inset: -40px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,140,30,.45), transparent 65%); animation: gBurst 1.6s ease-out forwards; }
@keyframes gBurst { from { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } to { opacity: 0; transform: scale(1.3); } }
.pull.q4 { animation: cardIn .35s ease-out backwards, epicGlow 1s ease-in-out infinite alternate; }

/* 보스 등장: 위아래 검은 띠 + 이름 */
#bossIntro { position: absolute; inset: 0; pointer-events: none; }
#bossIntro .biBar { position: absolute; left: 0; right: 0; height: 11%; background: #000; transform: scaleY(0); transition: transform .45s ease; }
#bossIntro .biBar.top { top: 0; transform-origin: top; } #bossIntro .biBar.bot { bottom: 0; transform-origin: bottom; }
#bossIntro .biName { position: absolute; left: 0; right: 0; top: max(30%, calc(240px * var(--ui))); text-align: center; opacity: 0; transform: scale(1.4); transition: opacity .4s, transform .5s cubic-bezier(.2,.9,.3,1.2); }
#bossIntro .biName b { display: block; font: 900 calc(54px * var(--ui)) var(--font-title); color: #ff5a3a; text-shadow: 0 0 20px rgba(255,60,20,.7), 3px 3px 0 #000; letter-spacing: 4px; }
#bossIntro .biName small { display: block; font: 700 calc(18px * var(--ui)) var(--font-title); color: #e8c98a; text-shadow: 2px 2px 0 #000; }
#bossIntro.show .biBar { transform: scaleY(1); }
#bossIntro.show .biName.on { opacity: 1; transform: none; }
/* 공격대: 띠가 더 두껍고 천천히, 아래 띠에 대사 자막 · 이름 카드는 화면 아래쪽 (가운데 보스를 가리지 않게) */
#hud #castbar, #hud #bottom, #hud #meter { transition: opacity .5s; }
#hud.cine #castbar, #hud.cine #bottom, #hud.cine #meter { opacity: 0; }
#bossIntro.cine .biBar { height: 13%; transition-duration: .8s; display: flex; align-items: center; justify-content: center; }
#bossIntro .biSub { margin: 0; padding: 0 16px; font: italic 700 calc(19px * var(--ui)) var(--font-title); color: #f3dcae; text-shadow: 0 0 12px rgba(255,120,40,.45), 2px 2px 0 #000; text-align: center;
  opacity: 0; transition: opacity .6s .5s; }
#bossIntro.show .biSub { opacity: 1; }
#bossIntro .biName.raid { top: auto; bottom: 19%; transform: scale(1.15); filter: blur(4px); transition: opacity .6s, transform .9s cubic-bezier(.2,.9,.3,1), filter .6s; }
#bossIntro.show .biName.raid.on { filter: none; }
#bossIntro .biName.raid small { font-size: calc(14px * var(--ui)); letter-spacing: 6px; color: #b8f08a; }
#bossIntro .biName.raid b { font-size: calc(64px * var(--ui)); color: #ff6a3a; letter-spacing: 6px; text-shadow: 0 0 26px rgba(120,255,60,.45), 0 0 18px rgba(255,60,20,.8), 3px 3px 0 #000; }
#bossIntro .biName.raid i { display: block; width: min(360px, 60%); height: 2px; margin: 6px auto 6px; background: linear-gradient(90deg, transparent, #c9a24a, transparent); }
#bossIntro .biName.raid em { display: block; font: 700 calc(17px * var(--ui)) var(--font-title); font-style: normal; color: #e8c98a; text-shadow: 2px 2px 0 #000; }

/* 연속 처치 */
#streak { margin-top: 4px; opacity: 0; transition: opacity .3s; }
#streak.show { opacity: 1; }
#streak b { display: block; font: 900 18px var(--font-title); color: #ffcf40; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,150,0,.6); }
#streak i { display: block; height: 3px; margin: 2px auto 0; width: 100%; max-width: 120px; background: linear-gradient(90deg, #ff8a00, #ffd100); border-radius: 2px; }
#streak.pop b { animation: streakPop .5s ease-out; }

/* 밸런스 분석 (관리자) */
.lbMain:has(.tuneFrame) { display: flex; flex-direction: column; overflow: hidden; }
.lbMain:has(.tuneFrame) .lbSubBody { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.tuneFrame { flex: 1; min-height: 0; width: 100%; border: 1px solid #2a2c36; border-radius: 3px; background: #0d0e12; }
.tuneOpen { position: absolute; right: 0; top: -30px; }
.balWrap { display: flex; flex-direction: column; gap: 8px; }
.balWrap h3 { margin: 14px 0 2px; color: var(--wow-yellow); font-size: 15px; }
.balWrap h4 { margin: 8px 0 2px; color: #cfd6e4; font-size: 13px; }
.balWrap select, .balWrap input { background: #111; color: #ddd; border: 1px solid #333; border-radius: 3px; padding: 4px 6px; font-size: 13px; }
.balWrap h3 img { width: 22px; height: 22px; vertical-align: middle; margin: 0 4px; }
.balTable { margin: 4px 0; min-width: 0; }
.balTable td, .balTable th { vertical-align: top; text-align: left; }
.balRel { color: #8a93a6; font-size: 11px; }
.balRuns tr[data-run] { cursor: pointer; }
.balRuns tr[data-run]:hover { background: rgba(255,209,0,.08); }
.balCurve { width: 100%; max-width: 760px; background: rgba(0,0,0,.3); border: 1px solid #222; }
.balCurve text { fill: #8a93a6; font-size: 10px; }
.balGroup { border: 1px solid #2c2416; border-radius: 6px; padding: 6px 10px; background: rgba(0,0,0,.25); }
.balGroup summary { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.balGroup summary img { width: 20px; height: 20px; }
.balCols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 16px; }
.balBar { height: 8px; min-width: 1px; border-radius: 2px; width: 0; }
.balTable td:nth-child(2):has(.balBar) { width: 120px; }
.tdBar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.tdBar .btn.small { margin: 0; padding: 4px 12px; font-size: 13px; }
.tdBar .btn.ghost { background: #1a1c24; border-color: #3a3d4a; color: #cfd6e4; }
.tdBar .btn:disabled { opacity: .4; cursor: default; }
.tdDirty { color: var(--wow-yellow); }
.tdWrap .tdTable { margin: 4px 0; width: auto; min-width: 0; align-self: flex-start; }
.tdWrap .tdTable td, .tdWrap .tdTable th { padding: 3px 14px; }
.tdTable td { vertical-align: middle; }
.tdWrap .tdTable input { width: 64px; padding: 2px 4px; text-align: right; }
.tdWrap .tdTable input.chg, .tdTable td.tdChg { color: var(--wow-yellow); border-color: #8a6d1a; }
.balSpark { display: flex; align-items: flex-end; gap: 1px; height: 60px; background: rgba(0,0,0,.3); padding: 2px; }
.balSpark i { flex: 1; background: #3fa7ff; min-height: 1px; }
@keyframes streakPop { 0% { transform: scale(1.9); color: #fff; } 100% { transform: scale(1); } }

/* ---------- 터치 조작 (js/touch.js, body.touch) ---------- */
html, body { overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* 판 화면의 왼쪽 · 오른쪽 안전 여백. 돌려 그리면(세로 폰) 판의 오른쪽 = 화면 아래(rot90) · 위(rotm90)라서 그쪽 여백을 쓴다.
   --barB: 화면 아래를 덮는 브라우저 막대 높이 (아이폰 사파리 세로, js/render.js가 잰다) */
:root { --sl: env(safe-area-inset-left); --sr: env(safe-area-inset-right); }
html.rot90 { --sl: env(safe-area-inset-top); --sr: max(env(safe-area-inset-bottom), var(--barB, 0px)); }
html.rotm90 { --sl: max(env(safe-area-inset-bottom), var(--barB, 0px)); --sr: env(safe-area-inset-top); }
#cv { touch-action: none; }
#stick { position: absolute; z-index: 5; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(rgba(255,255,255,.06), rgba(255,255,255,.14)); border: 2px solid rgba(255,255,255,.35); pointer-events: none; }
#stick .knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.75), rgba(160,190,230,.45)); box-shadow: 0 0 10px rgba(0,0,0,.6); }
.touchBtn { display: none; position: absolute; top: calc(12px * var(--ui)); width: 44px; scale: var(--uiT); transform-origin: top right; height: 44px; padding: 0; border-radius: 6px; border: 1px solid #6b5420; background: linear-gradient(#2a2418, #120f09); color: var(--wow-yellow); font: 900 15px var(--font); pointer-events: auto; }
body.touch .touchBtn { display: block; }
#touchPause { right: calc(14px * var(--ui) + var(--sr)); }
#touchMeter { right: calc(14px * var(--ui) + 52px * var(--uiT) + var(--sr)); font-size: 12px; }
#touchChat { right: calc(14px * var(--ui) + 104px * var(--uiT) + var(--sr)); font-size: 12px; }
body.touch #touchChat:not(.on) { display: none; } /* 서버 없이 열면 (js/chat.js) */
#touchChat.unread::after { content: ''; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #c41f1f; box-shadow: 0 0 0 1px #000; }
body.touch #buffs { right: calc(14px * var(--ui) + 156px * var(--uiT) + var(--sr)); }
body.touch #playerFrame { left: calc(18px * var(--ui) + var(--sl)); }
/* 피해 미터: 주문 칸과 겹치지 않게 왼쪽 위 (손가락을 막지 않게 터치는 통과) */
body.touch #meter { right: auto; bottom: auto; left: calc(16px + var(--sl)); top: calc(100px * var(--ui)); width: 230px; transform-origin: top left; pointer-events: none; opacity: .9; }
/* 아래 가운데 묶음(자동 주문 · 패시브 · 경험치): 작게 줄여 왼쪽으로 비키고, 조이스틱을 막지 않게 터치는 통과 */
body.touch #bottom { left: calc(50% - 116px * var(--ui)); bottom: calc(4px * var(--ui)); scale: calc(var(--ui) * .72); }
body.touch #bottom .slot, body.touch #bottom .pslot { pointer-events: none; }
/* 시전 바: 아래 묶음(자동 주문 · 경험치) 바로 위 — 화면 가운데(캐릭터 · 적)를 가리지 않게 */
body.touch #castbar { bottom: calc(62px * var(--ui)); }
/* 판 중에는 채팅 표시를 숨긴다 (조이스틱 자리) */
body.touch #game:has(#hud:not(.hidden)) #chat { display: none; }
/* 위의 '채팅' 버튼으로 열면 (게임은 멈춤, js/chat.js hold): 화면 위 가운데 · 입력창을 위로 (아래쪽은 키보드가 덮는다) */
body.touch #game:has(#hud:not(.hidden)) #chat.hold { display: block; left: 50%; top: calc(8px + env(safe-area-inset-top)); bottom: auto; transform: translateX(-50%); z-index: 25; }
/* 높이는 키보드 위까지 (--free = 키보드가 덮지 않는 화면 아래 끝, js/chat.js fit) */
#chat.hold .chatBox { width: min(440px, calc(var(--vw) - 16px)); height: min(260px, calc(var(--free, 100vh) - 16px - env(safe-area-inset-top))); min-height: 110px; background: rgba(8,10,14,.94); border-color: #6b5420; box-shadow: 0 6px 24px #000; }
/* 돌려 그릴 때(세로 폰): 키보드가 덮는 화면 아래 = 판의 오른쪽(rot90) · 왼쪽(rotm90) → 창을 반대쪽 끝에 붙이고 폭을 키보드 위까지로 */
html.rot90 body.touch #game:has(#hud:not(.hidden)) #chat.hold { left: calc(8px + env(safe-area-inset-top)); top: 8px; transform: none; }
html.rotm90 body.touch #game:has(#hud:not(.hidden)) #chat.hold { left: auto; right: calc(8px + env(safe-area-inset-top)); top: 8px; transform: none; }
html.rot90 #chat.hold .chatBox, html.rotm90 #chat.hold .chatBox { width: min(440px, calc(var(--free, 100vh) - 16px - env(safe-area-inset-top))); height: min(260px, calc(var(--vh) * .5)); }
#chat.hold .chatHead { order: -2; } #chat.hold .chatForm { order: -1; border-top: 0; border-bottom: 1px solid #3a2e12; }
#chat.hold .chatForm input { font-size: 16px; } /* 16px 미만이면 iOS가 입력할 때 화면을 확대한다 */
/* 주문 칸: 오른쪽 아래 엄지 자리. 첫 칸이 맨 오른쪽 아래, 왼쪽으로 3칸씩 채우고 위로 쌓인다. 빈 칸 · 단축키 글자는 숨김 */
body.touch #actionBar { position: absolute; right: calc(16px + var(--sr)); bottom: calc(22px * var(--ui)); width: 216px; scale: max(var(--ui), .75); transform-origin: bottom right; padding: 0; gap: 12px; flex-direction: row-reverse; flex-wrap: wrap-reverse; background: none; border: 0; box-shadow: none; pointer-events: none; }
body.touch #actionBar .slot { width: 64px; height: 64px; border-radius: 12px; touch-action: none; -webkit-user-select: none; }
body.touch #actionBar .slot img, body.touch #actionBar .slot .cd { border-radius: 10px; }
body.touch #actionBar .slot::before, body.touch #actionBar .slot::after { border-radius: 14px; }
body.touch #actionBar .slot.empty, body.touch #actionBar .slot .key { display: none; }
body.touch #actionBar .slot .cdt { font-size: 20px; }
/* 낮은 화면 (html.short = 보이는 높이 520px 이하, js/render.js — 판을 돌려 그릴 때도 맞게 미디어 쿼리 대신 클래스, 마우스 여부와 상관없이): 창은 화면 안에서 스크롤, 카드 · 로비 머리말을 줄인다 */
html.short .panel { max-height: calc(var(--vh) - 12px); overflow-y: auto; padding: 12px 18px; }
html.short .panel h1 { font-size: 30px; } html.short .panel h2 { font-size: 22px; }
html.short .lvTitle { font-size: 24px; margin-bottom: 0; } html.short .lvSub { margin-bottom: 8px; font-size: 13px; } html.short .lvBtns { margin-top: 8px; }
html.short .cards { gap: 10px; padding: 0 10px; max-width: var(--vw); }
html.short .card { flex: 1 1 0; width: auto; max-width: 230px; min-width: 0; min-height: 170px; padding: 10px; }
html.short .card .chead img { width: 42px; height: 42px; } html.short .card .cname { font-size: 15px; } html.short .card .cdesc { font-size: 12.5px; }
html.short .card { display: flex; flex-direction: column; } html.short .card .cfoot { position: static; margin-top: auto; padding-top: 6px; } /* 글이 길면 아래 줄이 겹치지 않고 밀려난다 */
html.short .panel .btn { padding: 7px 0; margin: 5px auto; font-size: 15px; }
html.short body.touch #actionBar { width: 292px; } /* 주문 칸 4열: 12칸이 3줄이면 위 버튼까지 닿지 않는다 */
/* 플레이어 프레임 압축: 초상화 · 막대 폭을 줄인다 (글자 크기는 그대로) */
html.short body.touch #playerFrame .portrait { width: 50px; height: 50px; border-width: 2px; }
html.short body.touch #playerFrame .lvbadge { width: 20px; height: 20px; font-size: 10px; left: -5px; bottom: -5px; }
html.short body.touch .pfBody { width: 160px; padding: 3px 8px 4px 14px; }
html.short body.touch .pfName { margin-bottom: 1px; }
html.short body.touch #meter { top: calc(74px * var(--ui)); } /* 줄어든 프레임 바로 아래 */
html.short body.touch .bfBody { width: 320px; } html.short body.touch #bossFrame .portrait { width: 52px; height: 52px; }
html.short body.touch .pfBody .bar.hp { height: 15px; } html.short body.touch .pfBody .bar.hp span { line-height: 13px; }
/* 경보 글자: 보스가 없으면 타이머 바로 아래, 보스가 있으면 보스 프레임 아래 */
html.short body.touch #raidWarn { top: calc(84px * var(--ui)); }
html.short body.touch #hud:has(#bossFrame:not(.hidden)) #raidWarn { top: calc(166px * var(--ui)); }
/* 일시 정지: 버튼은 2열로 (한 화면에 다 보이게) */
html.short .pBtns { display: grid; grid-template-columns: repeat(2, 220px); gap: 0 10px; justify-content: center; }
html.short .pBtns .btn { width: auto; margin: 4px 0; }
/* 판 중 창(레벨업 · 상자 · 일시 정지 · 결과 · 설정): 통째로 --uiM배 (js/render.js). zoom은 자리도 함께 줄어
   max-height도 같은 배율로 줄어드므로 나눠서 보이는 높이에 맞춘다. 로비(#hud 숨김)는 그대로 */
html.short #hud:not(.hidden) ~ #modal > * { zoom: var(--uiM); }
html.short #hud:not(.hidden) ~ #modal .panel { max-height: calc((var(--vh) - 12px) / var(--uiM)); }
/* 좁은 화면 (폰 세로 로비): 출정 정보 · 시작 버튼을 목록 위로, 탭 아이콘은 두 줄로, 장비 칸 · 설정 줄은 폭에 맞게 */
@media (max-width: 600px) {
  .stageDetail { order: -1; display: flex; flex-direction: column; }
  .stageDetail .sdHead { order: -2; }
  .stageDetail .diffs, .stageDetail h4:has(+ .clsRow), .stageDetail .clsRow, .stageDetail #sdGo { order: -1; } /* 난이도 · 캐릭터 · 출정 버튼을 제목 바로 아래로 */
  .stageDetail #sdGo { margin-bottom: 14px; }
  .lbNav { flex-wrap: wrap; justify-content: center; overflow-x: visible; padding: 4px; gap: 2px; }
  .lbNav a { padding: 4px; } .lbNav a img { width: 28px; height: 28px; }
  .lbTop { padding: 6px 12px; gap: 6px 12px; } .lbLogo { font-size: 20px; }
  .lbMain { padding: 12px 14px 70px; } /* 아래 채팅 표시에 가리지 않게 */
  .paper { gap: 6px; } .eqCol { width: auto; flex: 1; min-width: 0; }
  .panel { padding: 16px 14px; }
  .setRow { grid-template-columns: 1fr 96px 72px; gap: 8px; } .setRow b { font-size: 12px; text-align: right; }
}
/* 채팅 창: 화면보다 크면 닫기 버튼이 밖으로 밀려나므로 보이는 높이에 맞춘다 (폰 가로 + 브라우저 주소창이면 300px 남짓) */
.chatBox { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
/* 판은 항상 가로 (js/render.js checkRot): 판 중 세로 화면이면 #game을 90° 돌려 그린다. 크기는 보이는 화면의 가로 · 세로를 바꾼 값 */
html.rot90 #game, html.rotm90 #game { inset: auto; left: 0; top: 0; width: var(--vw); height: var(--vh); transform-origin: top left; }
html.rot90 #game { transform: rotate(90deg) translateY(-100%); }
html.rotm90 #game { transform: rotate(-90deg) translateX(-100%); }

/* ================= 로비: 폰 가로 (html.short) — 왼쪽 탭 세로 줄 · 출정은 왼쪽 목록 / 오른쪽 선택 던전 ================= */
html.short .lbTop { gap: 14px; padding: 4px 14px; flex-wrap: nowrap; border-bottom-width: 1px; }
html.short .lbLogo { font-size: 18px; } html.short .lbLogo small { display: none; }
html.short .lbCur { gap: 10px; font-size: 13px; flex-wrap: nowrap; overflow: hidden; }
html.short .lbCur img, html.short img.ci { width: 16px; height: 16px; }
html.short .lbAcct { font-size: 13px; } html.short .lbAcct .btn { padding: 4px 10px; font-size: 12px; margin: 0; }
html.short .lbBody { flex-direction: row; }
html.short .lbNav { width: auto; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; padding: 6px 5px 50px; gap: 3px; border-right: 1px solid #3a2e14; border-bottom: 0; overflow-x: hidden; overflow-y: auto; }
html.short .lbNav a { padding: 3px; } html.short .lbNav a span { display: none; } html.short .lbNav a img { width: 32px; height: 32px; }
html.short .lbMain { padding: 8px 14px 48px; }
html.short .lbMain h3 { font-size: 17px; margin: 4px 0 6px; }
html.short .lbMain:has(> .stageWrap) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 8px; }
html.short .stageWrap { flex: 1; min-height: 0; grid-template-columns: minmax(250px, .8fr) 1.2fr; gap: 12px; }
html.short .stageCol, html.short .stageDetail { min-height: 0; overflow-y: auto; }
html.short .stageCol { padding: 0 4px 44px 0; } /* 아래 채팅 표시에 가리지 않게 */
html.short .stageCard { padding: 4px 8px; } html.short .stageCard img { width: 34px; height: 34px; } html.short .stageCard b { font-size: 14px; }
html.short .stageDetail { display: flex; flex-direction: column; padding: 10px 14px; }
html.short .stageDetail .sdHead { order: -2; } html.short .sdHead img { width: 48px; height: 48px; } html.short .sdHead h2 { font-size: 20px; }
html.short .stageDetail .diffs, html.short .stageDetail h4:has(+ .clsRow), html.short .stageDetail .clsRow, html.short .stageDetail #sdGo { order: -1; }
html.short .stageDetail .diffs { margin: 6px 0 0; } html.short .stageDetail h4 { margin: 8px 0 4px; }
html.short .clsRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
html.short .clsPick { width: auto; padding: 5px 4px; } html.short .clsPick img { width: 32px; height: 32px; }
html.short .clsPick b { font-size: 12px; } html.short .clsPick small { font-size: 10px; }
html.short .btn.big { width: 100%; font-size: 17px; padding: 9px 0; margin: 10px 0 4px; }
html.short .sdDesc { font-size: 13px; margin: 8px 0; }
html.short .boss { width: 76px; } html.short .boss img { width: 40px; height: 40px; }
/* 캐릭터: 장비 | 능력치 · 가방 */
html.short .charBody { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 12px; }
html.short .charBody > .paper { grid-row: span 2; } html.short .eqCol { width: 200px; }
/* 특성: 설명 | 특성 판 */
html.short .talWrap { grid-template-columns: 1fr auto; } html.short .talGrid { grid-column: 2; grid-row: 2 / span 2; }
/* 채팅 표시: 로비 배율을 따라 작게 (글자가 너무 작아지지 않게 0.65까지만) */
html.short .chatPill { padding: 4px 10px; font-size: 12px; }
#chat:not(.play) .chatPill { zoom: max(var(--lbZ, 1), .65); }
/* 폰 가로 로비: 왼쪽 세로 탭 줄(폭 약 54px × 배율)을 덮지 않게 그 오른쪽에 (화면 크기를 줄이면 설정 탭이 이 자리에 온다) */
html.short #chat:not(.play) { left: calc(54px * var(--lbZ, 1) + 6px + env(safe-area-inset-left)); bottom: 6px; }

/* 탭의 NEW 표시: 아이콘만 보일 때는 아이콘 위에 작게 */
@media (max-width: 900px) { .lbNav a { position: relative; } .lbNav a .newTag { position: absolute; right: -4px; top: -4px; margin: 0; padding: 0 3px; font-size: 9px; } }
html.short .lbNav a { position: relative; } html.short .lbNav a .newTag { position: absolute; right: -4px; top: -4px; margin: 0; padding: 0 3px; font-size: 9px; }

/* ================= 로비: 폰 세로 ================= */
@media (max-width: 600px) {
  .lbTop { padding: 6px 12px; gap: 4px 10px; }
  .lbLogo { flex: 1; font-size: 19px; } .lbLogo small { display: none; }
  .lbAcct { font-size: 13px; } .lbAcct .btn { padding: 4px 10px; font-size: 12px; margin: 0; }
  .lbCur { order: 3; flex: 1 0 100%; flex-wrap: nowrap; gap: 12px; font-size: 13px; }
  .lbCur img, img.ci { width: 16px; height: 16px; }
  .lbNav a img { width: 30px; height: 30px; }
  .lbMain h3 { font-size: 17px; }
  .stageDetail { padding: 12px 14px; }
  .sdHead img { width: 52px; height: 52px; } .sdHead h2 { font-size: 21px; }
  .clsRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .clsPick { width: auto; padding: 6px 3px; } .clsPick img { width: 34px; height: 34px; }
  .clsPick b { font-size: 12px; text-align: center; } .clsPick small { font-size: 10px; text-align: center; }
  .btn.big { width: 100%; font-size: 18px; padding: 11px 0; }
  .sdDesc { font-size: 13px; }
  .boss { width: 80px; }
}
/* 직업 · 필터 버튼: 이름이 줄바꿈되지 않게 — 넘치면 버튼째 다음 줄로 (세로 화면) */
.charHead a, .talTabs a, .rkSeg a { white-space: nowrap; }
.charHead, .talTabs { flex-wrap: wrap; }
.rkSeg { flex-wrap: wrap; }
@media (max-width: 600px) {
  .charHead a, .talTabs a { padding: 5px 9px; font-size: 14px; } .charHead a img, .talTabs a img { width: 20px; height: 20px; }
  .rkSeg a { padding: 5px 9px; }
}
/* 로비에서 여는 창(설정 · 조작법 · 계정 · 게시판 등)도 폰 가로에서는 로비와 같은 배율로 */
html.short #hud.hidden ~ #modal > .panel { zoom: var(--lbZ); max-height: calc((var(--vh) - 12px) / var(--lbZ)); }

.testBanner { margin: 0 0 8px; padding: 5px 10px; font-size: 12px; color: #ffb060; border: 1px solid rgba(255,128,0,.45); border-radius: 4px; background: rgba(255,128,0,.06); }

.paper { flex-wrap: wrap; } .paperBtns { flex-basis: 100%; display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.aeTable { border-collapse: collapse; margin: 4px auto 8px; font-size: 12px; text-align: left; } .aeTable td { padding: 2px 6px; white-space: nowrap; }
.bagFilter { font-size: 12px; font-weight: 400; color: #ccc; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* 서버 종료 예고: 모달/일시정지에서도 보이며 게임 조작은 막지 않는다. */
#shutdownBanner { position: absolute; z-index: 90; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(620px, 76vw); padding: 7px 16px; border: 1px solid #b48534; border-radius: 3px; background: linear-gradient(#35200ef2, #170d08f2); color: #ffe5a4; box-shadow: 0 3px 14px #000a; text-shadow: 0 1px 2px #000; font-size: clamp(12px, 1.1vw, 16px); font-weight: 700; text-align: center; pointer-events: none; }
#shutdownBanner.urgent { border-color: #d75b40; color: #ffb49a; background: linear-gradient(#42150ff5, #200a07f5); }
body.shutdown-active #topInfo { top: var(--shutdown-bottom, calc(76px * var(--ui))); }
.chatShutdown { padding: 7px 10px; color: #ffe5a4; background: #40230bd9; border-bottom: 1px solid #926b32; font-size: 12px; line-height: 1.5; }
.shutdownAdmin input[type=number] { width: 85px; }
@media (max-width: 600px) { #shutdownBanner { max-width: 90vw; padding: 6px 10px; } }

body.shutdown-active #oracleTestBanner { display: none; }
#shutdownBanner { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }

body.shutdown-active #playerFrame, body.shutdown-active #bossFrame { top: var(--shutdown-bottom, calc(76px * var(--ui))); }