/* ✨ 1026 UI 질감 층 — style.css 위에 덮음. 배치·크기(폭·높이·여백)는 그대로, 재질·빛·눌림·아이콘만.
   ★ 크기 바꾸는 속성 넣지 말 것(팝업 페이지 나누기·uiaudit 기준이 그대로여야 함)
   ★ 런타임 렉 0: 계속 도는 애니메이션 X(눌렀을 때·열 때만) · backdrop-filter X(뒤가 WebGL 이라 매 프레임 비쌈) */
:root{
  --au:#c9a85c; --au-hi:#f1d896; --au-lo:#8a6a2a;
  --gm-1:#232127; --gm-2:#17161a; --gm-3:#0e0d10;
  --edge:rgba(201,168,92,.22); --edge-hi:rgba(241,216,150,.55);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 48%,rgba(0,0,0,.16) 100%);
  --ease-out:cubic-bezier(.2,.9,.25,1.15);
}
/* 제목 글꼴(굵은 디스플레이) — 숫자·본문은 Pretendard 그대로 */
#login h1,.pbox h2,#lvbig b,#center{font-family:'Black Han Sans',Pretendard,system-ui,sans-serif;font-weight:400}
.pbox h2 small,.pbox h2 span,.pbox h2 em{font-family:Pretendard,system-ui,sans-serif}
button:focus{outline:none}button:focus-visible{outline:2px solid var(--au);outline-offset:2px}

/* ───── 공통 버튼 눌림·올림 ─────
   translate/scale 개별 속성 = 기존 transform(가운데 정렬 등)과 안 부딪힘 */
.pbox button,#buyask button,#invc button,#sidebtn button,#login button,#downui button,#bHome,#bCam,.slot,.qact button{
  transition:filter .14s ease,translate .14s var(--ease-out),scale .09s ease,border-color .16s ease,box-shadow .2s ease,background-color .16s ease}
@media (hover:hover){
  .pbox button:not(:disabled):hover,#buyask button:hover,#invc button:hover,#login button:hover,#downui button:hover,.qact button:hover{filter:brightness(1.16);translate:0 -1px}
  #sidebtn button:hover,#bHome:hover,#bCam:hover,.slot:hover{filter:brightness(1.2)}
}
.pbox button:not(:disabled):active,#buyask button:active,#invc button:active,#sidebtn button:active,#login button:active,#downui button:active,#bHome:active,#bCam:active,.qact button:active{scale:.94;translate:0 1px;filter:brightness(.88);transition-duration:.05s}
#bHome:active{transform:none}   /* 원래 scale(.96) → 위 개별 scale 로 통일 */
.pbox button:disabled{cursor:default}

/* 버튼 재질: 색은 원래 규칙 그대로 두고 위에 빛(sheen)만 한 겹 → 금색·빨강·선택(.on) 상태색 유지 */
.pbox button,#buyask button,#invc button,.qact button:not(.gold){background-image:var(--sheen);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.45)}
.pbox button.px{background-image:none;box-shadow:none}

/* 금색 = 금속 질감 · 빨강 = 피 묻은 철판 */
.pbox .btn.gold,#buyask .btn.gold,#invc .btn.gold,.qact button.gold,.pbox button.gold{
  background-color:#c9a85c;background-image:linear-gradient(180deg,#f6e2a6 0%,#d8b86c 38%,#b8913f 62%,#a07a32 100%);color:#16110a;border-color:#6b5223;
  text-shadow:0 1px 0 rgba(255,240,200,.45);box-shadow:inset 0 1px 0 rgba(255,250,225,.7),inset 0 -2px 0 rgba(90,60,15,.35),0 2px 8px rgba(201,168,92,.28),0 1px 2px rgba(0,0,0,.6)}
@media (hover:hover){.pbox .btn.gold:not(:disabled):hover,#buyask .btn.gold:hover{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -2px 0 rgba(90,60,15,.35),0 0 18px rgba(241,216,150,.45),0 1px 2px rgba(0,0,0,.6)}}
.pbox .btn.red,#buyask .btn.red,#downui #giveup{background-color:#8a1010;background-image:linear-gradient(180deg,#c42626 0%,#8f1313 55%,#6a0a0a 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,170,170,.35),inset 0 -2px 0 rgba(40,0,0,.4),0 2px 8px rgba(160,20,20,.3)}

/* 탭 = 선택된 것 아래 금색 불빛 */
.tabs button.on,.sk-tab.on{box-shadow:inset 0 -2px 0 var(--au),inset 0 1px 0 rgba(255,255,255,.08),0 0 10px rgba(201,168,92,.25)}
.pgr button{background-image:var(--sheen)}
.pgr b{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ───── 창(팝업) ───── */
#panel{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.38) 0%,rgba(0,0,0,.62) 70%,rgba(0,0,0,.78) 100%)}
#panel:not(.hide){animation:zlFade .16s ease-out}
#panel:not(.hide) .pbox{animation:zlPop .22s var(--ease-out)}
#panel .pbox.shake{animation:pShake .45s}
@keyframes zlFade{from{opacity:0}to{opacity:1}}
@keyframes zlPop{from{opacity:0;scale:.965;translate:0 8px}to{opacity:1;scale:1;translate:0 0}}
.pbox{
  border-radius:12px;border-color:rgba(201,168,92,.26);
  background:
    linear-gradient(180deg,rgba(201,168,92,.07) 0,rgba(201,168,92,0) 64px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#1c1b20 0%,#141317 45%,#0f0e11 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 28px 70px rgba(0,0,0,.7),0 0 40px rgba(120,0,0,.08),inset 0 1px 0 rgba(255,240,210,.08)}
/* 네 모서리 금속 꺾쇠(장식 · 클릭 통과) */
.pbox::before{content:'';position:absolute;inset:5px;pointer-events:none;z-index:0;border-radius:8px;opacity:.75;
  background:
    linear-gradient(var(--au),var(--au)) top left/16px 2px,linear-gradient(var(--au),var(--au)) top left/2px 16px,
    linear-gradient(var(--au),var(--au)) top right/16px 2px,linear-gradient(var(--au),var(--au)) top right/2px 16px,
    linear-gradient(var(--au),var(--au)) bottom left/16px 2px,linear-gradient(var(--au),var(--au)) bottom left/2px 16px,
    linear-gradient(var(--au),var(--au)) bottom right/16px 2px,linear-gradient(var(--au),var(--au)) bottom right/2px 16px;
  background-repeat:no-repeat}
.pbox h2{letter-spacing:-.01em;color:#f3ead6;text-shadow:0 2px 0 rgba(0,0,0,.8),0 0 22px rgba(201,168,92,.18)}
/* 닫기 = 각진 철판 버튼 · 마우스 올리면 빨갛게 */
.pbox .px{background:linear-gradient(180deg,#2c2a2f,#1a191c);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#d9d1c2;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.5);z-index:2}
@media (hover:hover){.pbox .px:hover{background:linear-gradient(180deg,#a01c1c,#6a0d0d);border-color:#e05a4a;color:#fff;filter:none;translate:0 0;rotate:90deg}}
.pbox .px{transition:background .15s,border-color .15s,rotate .25s var(--ease-out),scale .08s}

/* 카드(가방·상점·도감 칸) = 살짝 떠오름 */
#pbody .it{background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.35);transition:translate .16s var(--ease-out),border-color .16s,box-shadow .2s,filter .14s}
@media (hover:hover){#pbody .it:hover{translate:0 -2px;filter:brightness(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 18px rgba(0,0,0,.5)}}
#pbody .it:active{translate:0 0;scale:.97;transition-duration:.05s}
.setl button{background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.14))!important}
@media (hover:hover){.setl button:hover{box-shadow:0 0 0 1px rgba(201,168,92,.35),0 0 16px rgba(201,168,92,.15)}}

/* 확인창(살까요·팔까요) · 초대 카드 */
#buyask .ba{border-radius:12px!important;background:linear-gradient(180deg,#1f1d22,#121114)!important;border:1px solid rgba(201,168,92,.4)!important;box-shadow:0 30px 80px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,240,210,.08)!important;animation:zlPop .2s var(--ease-out)}
#invc{background:linear-gradient(180deg,#221d14,#15120c);box-shadow:0 10px 36px rgba(0,0,0,.7),0 0 24px rgba(201,168,92,.18),inset 0 1px 0 rgba(255,240,210,.1)}

/* ───── HUD ───── */
/* 체력·배고픔·경험치 바 = 유리 광택 + 칸 눈금 */
.bar{border-radius:3px;border-color:rgba(0,0,0,.9);background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(20,18,22,.62));box-shadow:0 0 0 1px rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.4)}
.bar::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.05) 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.18) 100%),
             repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.35) calc(10% - 1px) 10%)}
.bar.hp i{background:linear-gradient(180deg,#ff5a4a 0%,#d42020 50%,#8e0f0f 100%);box-shadow:0 0 8px rgba(230,40,30,.45)}
.bar.hu i{background:linear-gradient(180deg,#f2bb4a,#c47d18 55%,#8a520b)}
.bar.hu.low i{background:linear-gradient(180deg,#d04040,#8a1818 55%,#551010)}
.bar.xp i{background:linear-gradient(180deg,#f4dc8e 0%,#d3ae58 50%,#8a6a2a 100%)}
.bar span{z-index:1;letter-spacing:.02em;text-shadow:0 1px 1px #000,0 0 3px rgba(0,0,0,.8)}
#lvb{box-shadow:0 0 0 2px rgba(0,0,0,.75),0 0 14px rgba(201,168,92,.35),inset 0 2px 4px rgba(255,230,160,.25),inset 0 -3px 6px rgba(0,0,0,.6)}
.nm{text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.6)}
#money{font-variant-numeric:tabular-nums;letter-spacing:.01em;text-shadow:0 2px 0 rgba(0,0,0,.85),0 0 14px rgba(255,190,40,.35)}

/* 오른쪽 버튼 줄 = 금속 단추 + 선 아이콘(이모지 대신 · 배지 숫자는 그대로) */
#sidebtn button{background-color:rgba(14,13,16,.82);background-image:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 50%,rgba(0,0,0,.25));border-color:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.45);position:relative}
#sidebtn button.on{background-color:#2a2316;border-color:var(--au)}
@media (hover:hover){#sidebtn button:hover{border-color:rgba(201,168,92,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(0,0,0,.55),0 0 14px rgba(201,168,92,.35)}}
#sidebtn button.ico{font-size:0!important;color:transparent}
#sidebtn button.ico::before{content:'';position:absolute;inset:0;margin:auto;width:52%;height:52%;background:linear-gradient(180deg,#f6e2a6,#c9a85c 60%,#9c7a36);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
#sidebtn button.ico.off::before{background:linear-gradient(180deg,#8f877a,#5e584f)}
#sidebtn button.ico.on::before{background:linear-gradient(180deg,#fff4c8,#ffd76a)}
#sidebtn button.ico i{font-size:10px}
#bInv{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7V5a4 4 0 0 1 8 0v2'/%3E%3Crect x='4' y='7' width='16' height='14' rx='3'/%3E%3Cpath d='M4 12h16M10 12v3h4v-3'/%3E%3C/svg%3E")}
#bDrop{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a2 2 0 0 1 2-2h14v16H6.5A2.5 2.5 0 0 0 4 21.5 2.5 2.5 0 0 0 6.5 24'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M12 7l1.2 2.4 2.6.4-1.9 1.8.5 2.6-2.4-1.3-2.4 1.3.5-2.6-1.9-1.8 2.6-.4z'/%3E%3C/svg%3E")}
#bMap{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E")}
#bStat{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Crect x='5' y='12' width='3' height='6'/%3E%3Crect x='10.5' y='7' width='3' height='11'/%3E%3Crect x='16' y='3' width='3' height='15'/%3E%3C/svg%3E")}
#bAch{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 6H4a3 3 0 0 0 3 4M17 6h3a3 3 0 0 1-3 4M12 14v4M8 21h8M9 18h6'/%3E%3C/svg%3E")}
#bHelp{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.2a2.6 2.6 0 0 1 5 .8c0 1.8-2.5 2.3-2.5 4'/%3E%3Cpath d='M12 17.2v.3'/%3E%3C/svg%3E")}
#bVc{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v1a7 7 0 0 0 14 0v-1M12 18v4M8 22h8'/%3E%3C/svg%3E")}   /* 🎙 1029 음성 대화 */
#sidebtn #bVc.vlive::before{background:linear-gradient(180deg,#ffc2b4,#e0644c 60%,#a8321f)}
#bLight{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 10h6l-1 4v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-6z'/%3E%3Cpath d='M8 7h8v3H8z'/%3E%3Cpath d='M12 2v2M6.5 3.5l1.2 1.5M17.5 3.5l-1.2 1.5'/%3E%3C/svg%3E")}
#bChat{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E")}
#bMail{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
#bSet{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E")}
#bSnd{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E")}
#bSnd.off{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='m16 9 6 6M22 9l-6 6'/%3E%3C/svg%3E")}
#bPush{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E")}
#bPush.off{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0M3 3l18 18'/%3E%3C/svg%3E")}
#bAdm{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5L21 13l-8 8-3-3 8-8zM3 21l6-6'/%3E%3Cpath d='M14.7 6.3 17 4l3 3-2.3 2.3'/%3E%3C/svg%3E")}

/* 아래 무기·스킬 칸 = 금속 판 */
.slot{background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%,rgba(0,0,0,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 10px rgba(0,0,0,.45)}
.slot.on{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 16px rgba(201,168,92,.55),inset 0 0 12px rgba(201,168,92,.18),inset 0 1px 0 rgba(255,240,200,.2)}
.slot .du{border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.6)}

/* 내 기지 · 시점 버튼 */
#bHome{box-shadow:inset 0 1px 0 rgba(255,240,200,.18),0 0 0 1px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.5),0 0 18px rgba(201,168,92,.18)}
@media (hover:hover){#bHome:hover{box-shadow:inset 0 1px 0 rgba(255,240,200,.22),0 0 0 1px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.5),0 0 26px rgba(201,168,92,.45)}}

/* 알림(토스트) = 왼쪽 금색 띠 카드 */
#toast div{background:linear-gradient(90deg,rgba(26,22,14,.92),rgba(12,11,13,.88));border-radius:6px;box-shadow:inset 3px 0 0 var(--au),inset 0 0 0 1px rgba(201,168,92,.28),0 6px 18px rgba(0,0,0,.5);letter-spacing:.01em}

/* 폰 조작 버튼 = 누르면 쑥 들어감 + 둥근 광택 */
#touch button{background-image:radial-gradient(circle at 50% 28%,rgba(255,255,255,.16),rgba(255,255,255,0) 58%);transition:scale .07s ease,filter .1s ease}
#touch button:active,#touch #bAtk.on{scale:.92;filter:brightness(1.25)}
#touch .bsk:active{scale:.92}

/* ───── 로그인 ───── */
#login{background:radial-gradient(ellipse at 50% 32%,#3a1414 0%,#170c0c 42%,#0b0b0c 75%)}
#login::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
#login .lg-in{position:relative;animation:zlPop .5s var(--ease-out)}
#login h1{font-size:72px;letter-spacing:.02em;color:#efe6d6;text-shadow:0 3px 0 #3a0808,0 6px 0 rgba(0,0,0,.6),0 0 34px rgba(200,20,20,.55),0 0 80px rgba(170,0,0,.35)}
.lg-t{text-shadow:0 0 12px rgba(201,168,92,.4)}
#login .lg-t::before,#login .lg-t::after{content:'';display:inline-block;width:34px;height:1px;vertical-align:middle;margin:0 12px;background:linear-gradient(90deg,transparent,var(--au))}
#login .lg-t::after{background:linear-gradient(90deg,var(--au),transparent)}
#who button{background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.2));border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 8px rgba(0,0,0,.4)}
#who button.on{box-shadow:inset 0 1px 0 rgba(255,240,200,.15),0 0 0 1px rgba(201,168,92,.3),0 0 18px rgba(201,168,92,.3)}
#pin{background:linear-gradient(180deg,#0c0c0e,#141316);border-color:rgba(255,255,255,.12);box-shadow:inset 0 2px 6px rgba(0,0,0,.6);transition:border-color .15s,box-shadow .15s}
#pin:focus{outline:none;border-color:var(--au);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 3px rgba(201,168,92,.18)}
#go{background-image:linear-gradient(180deg,#c42626,#8f1313 55%,#640909);box-shadow:inset 0 1px 0 rgba(255,170,170,.35),0 4px 14px rgba(160,20,20,.35);text-shadow:0 1px 0 rgba(0,0,0,.4)}
#inst{background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.15))}

/* 쓰러짐 */
#downui .dt{letter-spacing:.04em;text-shadow:0 0 24px rgba(220,30,30,.6),0 3px 0 rgba(0,0,0,.7)}

/* 눌렀을 때 퍼지는 빛(uifx.js 가 버튼 위에 잠깐 겹침) */
.uirp{position:fixed;pointer-events:none;z-index:9999;overflow:hidden;display:none}
.uirp i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,.42) 0%,rgba(255,236,190,.16) 40%,rgba(255,236,190,0) 70%)}
/* ✕ 1026 유저 "X 두 개 겹쳐 보임": 창 틀 ✕ + 내용 ✕ 가 같이 있던 것 → 내용에 ✕ 있으면 틀 ✕ 숨김(관리자·땅굴·튜토리얼은 자리가 어긋나 두 개로 보였음) */
.pbox:has(#pbody .px)>.px{display:none!important}

/* 🎨 1026 지도 이동 버튼 = 내가 깬 난이도 색(안 깸 회색·쉬움 초록·보통 주황·어려움 빨강·지옥 보라) */
.pbox .acts button.mapb{border-color:var(--dc)!important;color:var(--dt)!important;box-shadow:inset 3px 0 0 var(--dc),0 0 0 1px color-mix(in srgb,var(--dc) 35%,transparent)!important;background-color:color-mix(in srgb,var(--dc) 12%,#17140f)!important}
.mapleg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:8px;font-size:11px;color:#a49c8c}.mapleg i{width:9px;height:9px;border-radius:50%;background:var(--dc);display:inline-block;margin-right:-4px}.mapleg small{font-size:11px;color:#7d7668}
/* 🛸 1028 반려 드론 버튼·메뉴 */
#bDrone{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='9.5' width='7' height='5' rx='2'/%3E%3Cpath d='M8.5 10.5 5.5 7.5M15.5 10.5l3-3M8.5 13.5l-3 3M15.5 13.5l3 3'/%3E%3Cellipse cx='5' cy='7' rx='3' ry='1.2'/%3E%3Cellipse cx='19' cy='7' rx='3' ry='1.2'/%3E%3Cellipse cx='5' cy='17' rx='3' ry='1.2'/%3E%3Cellipse cx='19' cy='17' rx='3' ry='1.2'/%3E%3C/svg%3E")}
.dr-hd{display:flex;gap:14px;align-items:center;margin:4px 0 10px}.dr-im{width:150px;height:104px;flex:none;background:radial-gradient(circle at 50% 45%,#2a2620,#0f0d0b 75%);border:1px solid #3a3226;border-radius:12px;display:flex;align-items:center;justify-content:center}.dr-im img{max-width:92%;max-height:92%}
.dr-in{flex:1;min-width:0}.dr-nm{font-size:20px;font-weight:900;display:flex;align-items:center;gap:6px}.dr-ed{background:#221c14;border:1px solid #4a3e2a;color:#c9a85c;border-radius:8px;padding:1px 7px;cursor:pointer;font-size:12px}
.dr-sub{font-size:13px;color:#cfc6b4;margin:3px 0 6px}.dr-bars{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12px;color:#a49c8c}.dr-bars b{color:#e8dfcd}.dr-bars b.mid{color:#ffb040}.dr-bars b.bad{color:#ff5a4a}
.dr-bar{display:inline-block;width:90px;height:7px;border-radius:9px;background:#2a241c;overflow:hidden}.dr-bar em{display:block;height:100%;background:linear-gradient(90deg,#c9a85c,#ffe08a)}
.dr-tabs{display:flex;gap:6px;margin-bottom:10px}.dr-tabs button{flex:1;padding:7px 0;border-radius:10px;border:1px solid #3a3226;background:#17140f;color:#a49c8c;font:inherit;font-weight:800;cursor:pointer}.dr-tabs button.on{background:#2a2112;color:#ffd76a;border-color:#c9a85c}
.dr-body{min-height:220px}.dr-big{font-size:17px;font-weight:800;margin:6px 0}.dr-cost{display:flex;gap:14px;font-size:14px;font-weight:800;margin:6px 0 10px}.dr-cost .ok{color:#8fe08f}.dr-cost .bad{color:#ff6a5a}
.dr-acts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.dr-warn{background:#3a1410;border:1px solid #7a2a1e;color:#ffc2b4;border-radius:10px;padding:7px 10px;margin-bottom:8px;font-size:13px}
.dr-tip{font-size:12px;color:#8d8578;line-height:1.55;margin:6px 0}.dr-tip b{color:#d8c99a}
.dr-brs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.dr-br{background:#14110d;border:1px solid #2f2920;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:3px;font-size:12px}.dr-br.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset}
.dr-br img{width:100%;height:64px;object-fit:contain}.dr-br>b{color:var(--c);font-size:15px}.dr-br small{color:#a49c8c}.dr-br em{font-style:normal;color:#d8cfbd;font-size:11px}.dr-br ul{list-style:none;margin:2px 0;padding:0}.dr-br li{font-size:10.5px;color:#6f685c;line-height:1.35}.dr-br li.ok{color:#d8cfbd}.dr-br li i{font-style:normal;color:#8d8578;margin-right:3px;font-weight:800}.dr-br li.ok i{color:var(--c)}
.dr-pc{font-weight:900;color:#e8dfcd;margin-top:auto}.dr-br .btn{padding:5px 0;font-size:12px}
.dr-pal{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;margin:8px 0}.dr-pal>div{display:flex;gap:6px;flex-wrap:wrap}.dr-sw{width:40px;height:30px;border-radius:9px;border:2px solid #3a3226;cursor:pointer;font-size:10px;color:#fff;font-weight:800;text-shadow:0 1px 2px #000}.dr-sw.on{border-color:#ffd76a;box-shadow:0 0 0 2px #ffd76a55}.dr-sw.lk{opacity:.45;cursor:default}
.dr-rec{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.dr-rec div{background:#17140f;border:1px solid #2f2920;border-radius:12px;padding:14px 8px;text-align:center}.dr-rec b{display:block;font-size:22px;color:#ffd76a}.dr-rec small{color:#8d8578}
@media (max-width:760px){.dr-brs{grid-template-columns:repeat(2,1fr)}.dr-br ul{display:none}.dr-im{width:110px;height:78px}}
/* 🧟 1030 로그인 사진(공포 보정) — 사진 위 이름 · 고르면 붉은 테 + 떨림 · 마우스 올리면 지지직 */
#who button.wph{position:relative;padding:0;overflow:hidden;aspect-ratio:1;border-radius:12px;background:#000;border:1px solid #2a1414}
#who button.wph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05);transition:filter .2s,transform .3s}
#who button.wph span{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 6px;background:linear-gradient(transparent,rgba(0,0,0,.92));color:#d8d0c0;font-size:13px;letter-spacing:.5px;text-shadow:0 0 6px #000}
#who button.wph:hover img{animation:whoGl .35s steps(2) infinite;filter:saturate(1.3) contrast(1.3) brightness(1.1)}
#who button.wph.on{border-color:#c41a1a;box-shadow:0 0 0 1px #c41a1a,0 0 22px rgba(200,20,20,.55)}
#who button.wph.on img{transform:scale(1.06);animation:whoTw 2.4s infinite}
#who button.wph.on span{color:#ff4a4a;text-shadow:0 0 8px rgba(255,40,40,.8)}
@keyframes whoGl{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px) skewX(2deg)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,0) skewX(-2deg)}}
@keyframes whoTw{0%,86%,100%{transform:scale(1.06)}88%{transform:scale(1.1) translate(-3px,1px);filter:hue-rotate(-30deg) contrast(1.6)}90%{transform:scale(1.04) translate(3px,0)}92%{transform:scale(1.08)}}
@media (max-height:560px){#who{grid-template-columns:repeat(6,1fr);gap:5px}#who button.wph span{font-size:10.5px;padding:10px 1px 3px;letter-spacing:0}}   /* 📱 가로 폰 = 한 줄(비번 칸 안 밀리게) */
/* ⚔ 1030 PK 대기실(오른쪽 위 고정 · 움직이며 기다림) · 끝 팝업 · 기록 */
#pklb{position:fixed;right:70px;top:250px;z-index:40;width:250px;background:rgba(18,14,14,.94);border:1px solid #7a2020;border-radius:12px;padding:10px;box-shadow:0 0 18px rgba(200,30,30,.35);font-size:13px}
#pklb .pkh{font-weight:900;color:#ff6a5a;margin-bottom:6px}#pklb .pkh small{color:#c9a85c}
#pklb .pkm{display:flex;gap:6px;align-items:center;padding:4px 6px;border-radius:7px;background:#1d1818;margin:3px 0}#pklb .pkm span{margin-left:auto;font-size:12px}#pklb .pkm.rd{background:#1d2a1d}#pklb .pkm small{color:#999}
#pklb .pkb{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}#pklb .pkb .btn{padding:5px 9px;font-size:12px}#pklb .pkb .btn[disabled]{opacity:.45}
#pklb .pki{display:flex;flex-direction:column;gap:3px;margin-top:6px;max-height:160px;overflow:auto}#pklb .pki .btn{font-size:12px;padding:4px 8px;text-align:left}
#pklb .pkcd{margin-top:8px;text-align:center;font-size:16px;color:#ffcf4a;font-weight:900}#pklb .pks{margin-top:7px;color:#8a847a;font-size:11px;line-height:1.4}
#pkend{position:fixed;left:50%;top:26%;transform:translate(-50%,-50%);z-index:60;background:rgba(10,8,6,.92);border:2px solid #ffcf4a;border-radius:16px;padding:18px 34px;text-align:center;box-shadow:0 0 40px rgba(255,200,60,.45);animation:zlPop .3s}
#pkend .pkw{font-size:44px}#pkend b{display:block;font-size:26px;color:#ffcf4a}#pkend small{color:#bbb}
.pkwl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.pkwl span{background:#1d1a14;border:1px solid #3a3226;border-radius:8px;padding:3px 9px;font-size:13px}
@media (max-height:560px){#pklb{top:auto;bottom:90px;right:8px;width:220px;font-size:12px}}
#pklb .pkm.sp{opacity:.75}#pklb .pkrole{display:flex;gap:4px;margin-top:6px}#pklb .pkrole .btn{flex:1;font-size:12px;padding:4px 6px}#pklb .pkrole .btn.on{border-color:#c41a1a;background:#2a1414;color:#ff8a7a}   /* 👀 PK 참가/관전 */
#pklb .pksk{margin-top:7px;border-top:1px solid #3a2020;padding-top:6px}#pklb .pksk>div{display:flex;gap:4px;margin-top:3px}#pklb .pksk>div .btn{flex:1;font-size:11.5px;padding:4px 5px}#pklb .pksk .btn.on{border-color:#ffcf4a;color:#ffcf4a}
#pklb .pksl{display:grid!important;grid-template-columns:1fr 1fr;gap:3px;max-height:150px;overflow:auto;margin-top:4px}#pklb .pksl .btn{font-size:11px;padding:3px 4px;text-align:left}#pklb .pksl .btn small{float:right;color:#9a9;font-size:10px}#pklb .pksl .btn[disabled]{opacity:.35}   /* ⚡ PK 스킬 고르기 */
/* 🔵🔴 PK 팀전 */
.tag.tmA b{color:#6ab4ff!important;text-shadow:0 0 6px rgba(80,160,255,.8)}.tag.tmB b{color:#ff6a5a!important;text-shadow:0 0 6px rgba(255,80,60,.8)}.tag.tmA::before{content:'🔵';font-size:10px}.tag.tmB::before{content:'🔴';font-size:10px}
#pklb .pkh{display:flex;align-items:center;gap:6px}#pklb .pkmd{margin-left:auto;display:flex;gap:3px}#pklb .pkmd .btn{font-size:11px;padding:2px 7px}#pklb .pkmd .btn.on{border-color:#ffcf4a;color:#ffcf4a}
#pklb .pkteams{display:grid;grid-template-columns:1fr 1fr;gap:4px}#pklb .pkteams>div{border-radius:8px;padding:3px;min-height:30px}#pklb .pkteams .tA{background:rgba(60,120,255,.12);border:1px solid #2a4a8a}#pklb .pkteams .tB{background:rgba(255,60,60,.12);border:1px solid #8a2a2a}
#pklb .pkteams i{display:block;font-style:normal;font-size:11px;font-weight:800;margin-bottom:2px}#pklb .pkteams .pkm{font-size:11.5px;padding:3px 4px;gap:3px}#pklb .pkm.me b{color:#ffcf4a}
#pklb .pktm{display:flex;gap:4px;margin-top:5px}#pklb .pktm .btn{flex:1;font-size:12px;padding:4px}#pklb .pktm .btn.on{border-color:#ffcf4a;color:#ffcf4a}
#pklb{top:70px;max-height:calc(100vh - 90px);overflow:auto}   /* 📐 길어져도 버튼 안 잘리게 */
@media (max-height:560px){#pklb{top:8px;bottom:auto;max-height:calc(100vh - 16px)}}