/* ===== 심연의 균열 — UI ===== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0c0a12; --bg2:#151122; --bg3:#1e1830; --line:#3a2f57;
  --gold:#ffcc4d; --gold2:#8a6a1e;
  --txt:#e6e0f0; --dim:#9a90b5;
  --hp:#e8384f; --mp:#3aa7ff; --exp:#7ee06a;
  --c0:#b4b4c0; --c1:#5ee06a; --c2:#4aa8ff; --c3:#ff6fd8; --c4:#ff9a3c; --c5:#ffd94a; --c6:#ff3b5c;
}
html,body{height:100%;background:#000;color:var(--txt);
  font-family:'Galmuri11','DungGeunMo','NeoDunggeunmo',ui-monospace,monospace;
  -webkit-font-smoothing:none;font-size:14px;overflow:hidden}
#app{position:fixed;inset:0;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 50% 0%,#1b1430 0%,#0a0810 70%,#000 100%)}
.hidden{display:none !important}
kbd{background:#2b2340;border:1px solid var(--line);border-bottom-width:2px;padding:1px 5px;border-radius:3px;color:var(--gold);font-size:11px}

/* ================= 전투 ================= */
#battleWrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
#game{image-rendering:pixelated;image-rendering:crisp-edges;display:block;
  box-shadow:0 0 0 2px #000, 0 0 40px #000 inset}

#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:flex-start;padding:10px 14px;gap:12px;pointer-events:none;
  background:linear-gradient(#000c 0%,#0000 100%)}
.hud-left{display:flex;gap:8px;align-items:center}
.portrait{width:44px;height:44px;border:2px solid var(--gold2);background:#241c38;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--gold);
  box-shadow:0 0 12px #000 inset}
.bars{display:flex;flex-direction:column;gap:3px}
.bar{position:relative;width:210px;height:13px;background:#0c0912;border:1px solid #000;
  box-shadow:0 0 0 1px #4a3f6a}
.bar i{position:absolute;inset:0;width:0%;display:block;transition:width .15s linear}
.bar span{position:absolute;inset:0;font-size:10px;line-height:13px;text-align:center;
  color:#fff;text-shadow:1px 1px 0 #000}
.hpbar i{background:linear-gradient(#ff6a7d,var(--hp) 60%,#8f0f22)}
.mpbar i{background:linear-gradient(#8fd0ff,var(--mp) 60%,#124a8f)}
.expbar{height:7px}
.expbar i{background:linear-gradient(#c8ff9a,var(--exp) 60%,#2f7a1f)}
.bossbar{width:340px;height:15px}
.bossbar i{background:linear-gradient(#ff9f6a,#c31b3a 60%,#5a0413)}
.hud-mid{flex:1;text-align:center}
#roomInfo{font-size:13px;color:var(--gold);text-shadow:1px 1px 0 #000;letter-spacing:1px}
#bossName{margin-top:6px;font-size:12px;color:#ffb3b3;text-shadow:1px 1px 0 #000}
#bossBarWrap{display:inline-block}
.hud-right{text-align:right;font-size:13px;text-shadow:1px 1px 0 #000;line-height:1.5}

#comboBox{position:absolute;right:38px;top:120px;text-align:right;pointer-events:none;
  text-shadow:2px 2px 0 #000,0 0 12px #ff9a3c}
#comboBox b{font-size:44px;color:var(--gold);display:block;line-height:1}
#comboBox span{font-size:14px;color:#fff}
#comboBox.pop{animation:pop .18s ease-out}
@keyframes pop{0%{transform:scale(1.5)}100%{transform:scale(1)}}

#skillBar{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;pointer-events:none}
.sk{position:relative;width:60px;height:48px;background:#181228cc;border:2px solid #4a3f6a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.sk b{color:var(--gold);font-size:15px;line-height:1}
.sk em{font-style:normal;font-size:10px;color:var(--dim);margin-top:2px}
.sk .cd{position:absolute;left:0;right:0;bottom:0;height:0%;background:#000a;display:block}
.sk.locked{opacity:.35}
.sk.potion{border-color:#2f6a3a}

#lootFeed{position:absolute;left:14px;bottom:70px;display:flex;flex-direction:column-reverse;gap:3px;pointer-events:none}
.lootline{font-size:12px;text-shadow:1px 1px 0 #000;animation:slideIn .25s ease-out;padding:1px 6px;
  background:#000a;border-left:3px solid currentColor}
@keyframes slideIn{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}

#banner{position:absolute;left:0;right:0;top:33%;text-align:center;pointer-events:none;z-index:5}
#banner .bt{font-size:34px;font-weight:700;text-shadow:0 0 18px currentColor,3px 3px 0 #000;animation:bannerIn .5s ease-out}
#banner .bs{font-size:16px;color:#fff;text-shadow:2px 2px 0 #000;margin-top:4px}
@keyframes bannerIn{0%{transform:scale(2.4);opacity:0;filter:blur(6px)}60%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen}
#vignette{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 140px #000c;opacity:1;transition:box-shadow .2s}
#vignette.danger{box-shadow:inset 0 0 160px #b00020cc}

/* ================= 마을 ================= */
#town{position:absolute;inset:0;display:flex;flex-direction:column}
#topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;
  background:linear-gradient(#241c3a,#160f26);border-bottom:2px solid var(--line)}
.tb-name{display:flex;gap:10px;align-items:center}
.tb-name .cls{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:#0f0b1a;border:2px solid var(--gold2);color:var(--gold)}
.tb-name b{font-size:15px;color:#fff}
.tb-name small{display:block;color:var(--dim);font-size:11px}
#tTitle{color:var(--gold)}
.tb-exp{flex:1;max-width:420px}
.bar.wide{width:100%;height:15px}
.tb-res{display:flex;gap:14px;font-size:14px}
.tb-res span{white-space:nowrap}

#tabs{display:flex;gap:4px;padding:8px 14px 0;background:#120d1e;border-bottom:2px solid var(--line)}
.tab{background:#1c1530;border:2px solid var(--line);border-bottom:none;color:var(--dim);
  padding:8px 16px;cursor:pointer;font-family:inherit;font-size:13px;position:relative;top:2px}
.tab:hover{color:#fff;background:#261d42}
.tab.active{background:#2e2350;color:var(--gold);border-color:var(--gold2)}
.tab i{font-style:normal;font-size:11px;color:var(--dim)}

#panel{flex:1;overflow-y:auto;padding:18px 22px 26px;scrollbar-width:thin}
#panel::-webkit-scrollbar{width:10px}
#panel::-webkit-scrollbar-thumb{background:#3a2f57}

#botbar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:7px 16px;background:#0d0917;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}

h2{font-size:18px;color:var(--gold);margin-bottom:12px;letter-spacing:1px}
h3{font-size:14px;color:#cfc3ee;margin:14px 0 8px}
.sub{color:var(--dim);font-size:12px;line-height:1.6}

.btn{background:linear-gradient(#3a2d5e,#241b3d);border:2px solid var(--line);color:var(--txt);
  padding:8px 16px;cursor:pointer;font-family:inherit;font-size:13px;transition:.1s}
.btn:hover:not(:disabled){background:linear-gradient(#4c3b79,#2f2350);border-color:var(--gold2);color:#fff}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:linear-gradient(#8a6a1e,#5c4512);border-color:var(--gold);color:#fff2c8}
.btn.primary:hover:not(:disabled){background:linear-gradient(#c69b2c,#8a6a1e)}
.btn.danger{background:linear-gradient(#7a1f2e,#4a1220);border-color:#a83048}
.btn.tiny{padding:4px 9px;font-size:11px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.center{justify-content:center;margin-top:16px}

/* 던전 목록 */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.dcard{background:linear-gradient(#221a3a,#171126);border:2px solid var(--line);padding:12px;cursor:pointer;
  position:relative;overflow:hidden;transition:.12s}
.dcard:hover{border-color:var(--gold2);transform:translateY(-2px)}
.dcard.lock{opacity:.45;cursor:not-allowed}
.dcard.lock:hover{transform:none;border-color:var(--line)}
.dcard .dn{font-size:15px;color:#fff}
.dcard .dl{font-size:11px;color:var(--dim);margin:3px 0 8px}
.dcard .dd{font-size:11px;color:#a99ccb;line-height:1.5}
.dcard .badge{position:absolute;right:8px;top:8px;font-size:10px;background:#000a;
  border:1px solid var(--line);padding:2px 6px;color:var(--gold)}
.dcard .thumb{height:56px;margin:-12px -12px 8px;border-bottom:1px solid var(--line)}

.diffrow{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.diffbtn{flex:1;min-width:64px;padding:5px 4px;font-size:11px;text-align:center;border:1px solid var(--line);
  background:#0f0b1c;cursor:pointer;color:var(--dim)}
.diffbtn:hover{background:#2a2045;color:#fff}
.diffbtn.on{border-color:var(--gold);color:var(--gold);background:#3a2c14}
.diffbtn.lock{opacity:.3;cursor:not-allowed}

/* 아이템 */
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.itemcell{display:flex;gap:8px;align-items:center;padding:6px 8px;background:#150f26;
  border:2px solid var(--line);cursor:pointer;position:relative;transition:.1s}
.itemcell:hover{background:#241a40;transform:translateX(2px)}
.itemcell.empty{opacity:.4;cursor:default}
.itemcell.empty:hover{transform:none;background:#150f26}
.ico{width:34px;height:34px;min-width:34px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:#0b0814;border:2px solid currentColor;position:relative}
.ico.r5,.ico.r6{animation:shine 1.6s infinite}
@keyframes shine{0%,100%{box-shadow:0 0 4px currentColor}50%{box-shadow:0 0 16px currentColor}}
.iname{font-size:12px;line-height:1.35;overflow:hidden}
.iname small{display:block;color:var(--dim);font-size:10px}
.enh{color:#ffd94a;text-shadow:0 0 6px #ff9a3c}
.newdot{position:absolute;right:3px;top:2px;width:6px;height:6px;background:#ff3b5c;border-radius:50%}

.eqwrap{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.statbox{background:#150f26;border:2px solid var(--line);padding:12px}
.statline{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;border-bottom:1px dotted #2e2545}
.statline span:last-child{color:#fff}
.statline.hi span:last-child{color:var(--gold)}

.ptbtn{width:24px;height:24px;background:#3a2d5e;border:1px solid var(--line);color:var(--gold);
  cursor:pointer;font-family:inherit;line-height:1}
.ptbtn:hover{background:#5b4590}
.ptbtn:disabled{opacity:.25;cursor:not-allowed}

/* 툴팁 */
#tooltip{position:fixed;z-index:99;width:290px;background:#0d0a16f2;border:2px solid var(--line);
  padding:10px;font-size:12px;pointer-events:none;box-shadow:0 8px 24px #000c;line-height:1.55}
#tooltip .tt-n{font-size:13px;margin-bottom:2px}
#tooltip .tt-r{font-size:10px;color:var(--dim);margin-bottom:6px}
#tooltip .tt-main{color:#fff;margin-bottom:6px}
#tooltip .tt-af{color:#6fd8ff}
#tooltip .tt-uq{color:#ff9a3c;margin-top:6px;font-size:11px}
#tooltip .tt-q{margin-top:6px;font-size:11px;color:var(--dim)}
#tooltip hr{border:none;border-top:1px solid #2e2545;margin:6px 0}
.qbar{height:5px;background:#000;border:1px solid #2e2545;margin-top:2px}
.qbar i{display:block;height:100%}

/* 강화 */
.enhwrap{display:grid;grid-template-columns:320px 1fr;gap:20px}
.enhslot{background:#120d20;border:2px solid var(--line);padding:16px;text-align:center}
.bigico{width:84px;height:84px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  font-size:42px;border:3px solid currentColor;background:#08060f;position:relative}
.enhtable{display:flex;flex-direction:column;gap:3px;font-size:12px;max-height:280px;overflow:auto}
.enhrow{display:flex;justify-content:space-between;padding:3px 8px;background:#150f26;border:1px solid #241c3c}
.enhrow.cur{background:#3a2c14;border-color:var(--gold);color:var(--gold)}
.warn{color:#ff6a7d}
.ok{color:#6ce07a}
.gauge{height:14px;background:#0b0814;border:1px solid var(--line);position:relative;margin-top:4px}
.gauge i{display:block;height:100%;background:linear-gradient(90deg,#ff9a3c,#ffd94a)}
.gauge span{position:absolute;inset:0;text-align:center;font-size:10px;line-height:14px;text-shadow:1px 1px 0 #000}

/* 상점 */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.shopcard{background:linear-gradient(#221a3a,#171126);border:2px solid var(--line);padding:14px;text-align:center}
.shopcard .si{font-size:32px}
.shopcard .sn{font-size:13px;color:#fff;margin:6px 0 3px}
.shopcard .sd{font-size:11px;color:var(--dim);min-height:32px;line-height:1.4}
.shopcard .sp{color:var(--gold);font-size:13px;margin:8px 0}

/* 오버레이 */
.overlay{position:absolute;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:20;
  backdrop-filter:blur(2px)}
.panelbox{background:linear-gradient(#231b3c,#150f26);border:3px solid var(--gold2);padding:22px 26px;
  min-width:340px;max-width:660px;box-shadow:0 0 60px #000}
.panelbox.big{width:660px;max-height:86vh;overflow:auto}
.clear-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:13px;margin-bottom:6px}
.clear-stats div{display:flex;justify-content:space-between;padding:4px 8px;background:#0f0b1c}
.loot-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:230px;overflow:auto}

#toasts{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:#0d0a16ee;border:2px solid var(--line);padding:7px 16px;font-size:12px;
  animation:toastIn .25s ease-out;box-shadow:0 4px 16px #000}
@keyframes toastIn{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}

.gachaFx{animation:gspin .6s ease-out}
@keyframes gspin{0%{transform:scale(0) rotate(-180deg)}70%{transform:scale(1.25) rotate(10deg)}100%{transform:scale(1)}}

/* ================= 던전 내 장비 교체 ================= */
.dg-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;background:#0f0b1c;border:1px solid var(--line);margin-bottom:8px;font-size:13px}
.dg-head small{color:var(--dim);font-size:11px;margin-left:6px}
.dg-set{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.dg-set span{font-size:11px;color:#8fd8ff;background:#0f0b1c;border-left:3px solid #4aa8ff;padding:3px 8px}
.dg-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dg-cols h4{font-size:12px;color:#cfc3ee;margin-bottom:6px;font-weight:400}
.dg-cols h4 small{color:var(--dim);font-size:10px}
.dg-list{display:flex;flex-direction:column;gap:4px;max-height:44vh;overflow-y:auto}
.dgcell{display:flex;gap:8px;align-items:center;padding:5px 7px;background:#150f26;
  border:1px solid var(--line);cursor:default}
.dgcell.pick{cursor:pointer}
.dgcell.pick:hover{background:#2a1f48;border-color:var(--gold2);transform:translateX(2px)}
.dgcell.empty{opacity:.4}
.dgcell .ico{width:28px;height:28px;min-width:28px;font-size:15px}

/* ================= 광고 영역 ================= */
#adTown{margin:16px 0 4px;min-height:60px;text-align:center}
.adlabel{font-size:10px;color:#6a6280;margin-bottom:4px;letter-spacing:1px}
html.in-battle #adTown{display:none !important}

/* ================= 하단 법적 고지 ================= */
#botbar .legal{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#botbar .legal a{color:var(--dim);text-decoration:none;font-size:11px;border-bottom:1px dotted #3a2f57}
#botbar .legal a:hover{color:var(--gold)}

/* ================= 회전 안내 ================= */
#rotate{position:fixed;inset:0;z-index:200;background:#0a0810f2;display:flex;
  align-items:center;justify-content:center;text-align:center;font-size:16px;line-height:2;color:var(--gold)}

/* ================= 터치 컨트롤 ================= */
#touchUI{position:absolute;inset:0;pointer-events:none;z-index:8}
#stick{position:absolute;left:14px;bottom:14px;width:124px;height:124px;border-radius:50%;
  background:#1a142cbb;border:2px solid #4a3f6a;pointer-events:auto;touch-action:none;
  display:flex;align-items:center;justify-content:center}
#stickNub{width:52px;height:52px;border-radius:50%;background:#5b4590dd;border:2px solid var(--gold2);
  display:block;transition:transform .04s linear;pointer-events:none}
#tbtns{position:absolute;right:12px;bottom:10px;width:210px;height:180px;pointer-events:none}
.tbtn{position:absolute;pointer-events:auto;touch-action:none;font-family:inherit;
  border:2px solid #4a3f6a;background:#241c38dd;color:var(--txt);border-radius:50%;
  font-size:12px;display:flex;align-items:center;justify-content:center;padding:0;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.tbtn.on{background:#5b4590;border-color:var(--gold);transform:scale(.93)}
.tbtn.atk{right:8px;bottom:16px;width:74px;height:74px;font-size:15px;
  background:#7a2438dd;border-color:#c0405a}
.tbtn.jmp{right:82px;bottom:62px;width:60px;height:60px;background:#26506add;border-color:#4a8ac0}
.tbtn.dsh{right:14px;bottom:96px;width:54px;height:54px;background:#2a5a3add;border-color:#4aa060}
.tbtn.sk1{right:146px;bottom:14px;width:44px;height:44px}
.tbtn.sk2{right:146px;bottom:62px;width:44px;height:44px}
.tbtn.sk3{right:146px;bottom:110px;width:44px;height:44px}
.tbtn.sk4{right:100px;bottom:126px;width:44px;height:44px}
.tbtn.pot{right:44px;bottom:150px;width:42px;height:42px;font-size:16px}
.tbtn.menu{position:absolute;right:12px;top:64px;width:auto;height:32px;padding:0 14px;
  border-radius:4px;font-size:12px;pointer-events:auto}

/* 터치 기기: 키보드 안내와 데스크톱 스킬바 숨김 */
body.touch .keyhint{display:none}
body.touch #skillBar{display:none}
body.touch #touchUI{display:block}
body.touch #comboBox{top:80px;right:auto;left:14px;text-align:left}
body.touch #comboBox b{font-size:30px}
body.touch #lootFeed{bottom:auto;top:104px;left:14px}

/* ================= 모바일 레이아웃 ================= */
@media (max-width:820px){
  body{font-size:13px}
  #topbar{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .tb-exp{order:3;flex-basis:100%;max-width:none}
  .tb-res{gap:9px;font-size:12px}
  .tb-name .cls{width:34px;height:34px;font-size:16px}
  #tabs{padding:6px 8px 0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  #tabs::-webkit-scrollbar{display:none}
  .tab{padding:7px 11px;font-size:12px;white-space:nowrap}
  #panel{padding:12px 12px 20px}
  #botbar{flex-direction:column;align-items:flex-start;gap:6px}
  .dgrid,.slotgrid,.shopgrid{grid-template-columns:1fr}
  .eqwrap,.enhwrap,.dg-cols{grid-template-columns:1fr}
  .panelbox{min-width:0;width:94vw;padding:16px 14px}
  .panelbox.big{width:94vw}
  .clear-stats{grid-template-columns:1fr}
  .loot-grid{grid-template-columns:1fr}
  #tooltip{width:min(300px,86vw)}
  .dg-list{max-height:32vh}
}
@media (max-width:520px){
  #hud{padding:6px 8px}
  .bar{width:130px;height:11px}
  .bar span{font-size:9px;line-height:11px}
  .bossbar{width:min(240px,58vw)}
  .portrait{width:34px;height:34px;font-size:10px}
  .hud-right{font-size:11px}
  #roomInfo{font-size:11px}
  #stick{width:104px;height:104px;left:10px;bottom:10px}
  #stickNub{width:44px;height:44px}
  .tbtn.atk{width:64px;height:64px}
  .tbtn.jmp{width:52px;height:52px;right:70px}
  .tbtn.dsh{width:48px;height:48px;bottom:84px}
}