@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;800&display=swap');
:root{
  --gold:#e8c76a;--gold2:#9a7428;--gold3:#fff1b8;--bronze:#6b4e22;
  --txt:#f4e8c8;--ink:#0b0805;--wood:#1a120c;--wood2:#2c1c10;
  --iron:#7a6234;--iron2:#3a2a16;
  --frame:#c9a24a;--frame2:#5a3e16;--blood:#8a2020;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#050508;color:var(--txt);font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;}
#game{position:fixed;left:0;top:0;display:block;image-rendering:pixelated;image-rendering:crisp-edges;}
#ui{position:fixed;left:0;top:0;pointer-events:none;}
#hud{position:fixed;inset:0;pointer-events:none;}
.ui{position:absolute;pointer-events:auto;}
.hidden{display:none!important;}

/* 공통 리니지풍 이중 프레임 */
.frame,#status,#target,#mmapwrap,#zone,#log,#skillbar,.btn,.skill,.it,.cls,.panel{
  border-radius:0;
}
#status,#target,#mmapwrap,#zone,#log,#skillbar,.panel,.btn.sm{
  background:
    linear-gradient(#3a2a18,#16100a 55%,#0c0906);
  border:2px solid #d4af4a;
  box-shadow:
    0 0 0 1px #2a1c08,
    0 0 0 3px #6a4a18,
    0 0 0 4px #1a1008,
    inset 0 0 0 1px #8a6a28,
    inset 0 0 18px rgba(0,0,0,.55),
    0 8px 22px rgba(0,0,0,.55);
}

/* ===== STATUS (좌상) ===== */
#status{
  left:8px;top:calc(8px + env(safe-area-inset-top));width:228px;
  padding:10px 10px 8px;font-size:11px;
}
#status:before,#status:after{
  content:'';position:absolute;width:10px;height:10px;pointer-events:none;
  background:linear-gradient(135deg,#fff1b8,#c9a24a 40%,#6a4a18);
  box-shadow:0 0 0 1px #2a1c08;
}
#status:before{left:-3px;top:-3px;}
#status:after{right:-3px;top:-3px;transform:rotate(90deg);}
.sthead{display:flex;gap:8px;align-items:stretch;margin-bottom:6px;}
#pport{
  width:52px;height:52px;flex:0 0 52px;
  border:2px solid #e0c36a;
  box-shadow:inset 0 0 0 1px #3a2a10,inset 0 0 14px #000,0 0 10px rgba(212,175,55,.25);
  background:#140e08;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;color:#fff1b8;text-shadow:0 2px 0 #000,0 0 8px rgba(212,175,55,.6);
  position:relative;
}
#pport:after{
  content:'';position:absolute;inset:3px;border:1px solid rgba(212,175,55,.28);pointer-events:none;
}
.stmeta{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.nrow{display:flex;gap:5px;align-items:baseline;margin-bottom:2px;white-space:nowrap;overflow:hidden;}
.nrow .g{margin-left:auto;color:#ffd76a;font-size:11px;font-weight:800;letter-spacing:-.2px;text-shadow:0 1px 0 #000;}
.nrow b{color:#fff1b8;font-size:14px;text-shadow:0 1px 0 #000,0 0 8px rgba(255,220,120,.35);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.nrow span{flex:0 0 auto;}
.nrow span{color:#cbb48a;font-size:11px;}
.bline{display:flex;align-items:center;gap:5px;margin:4px 0 0;}
.bline .lbl{
  width:22px;flex:0 0 22px;font-size:9px;color:#ffe27a;font-weight:800;
  text-shadow:0 1px 0 #000;letter-spacing:.4px;
}
.bar{
  position:relative;flex:1;height:13px;background:#070402;overflow:hidden;
  border:1px solid #000;
  box-shadow:inset 0 0 0 1px #4a3414,inset 0 3px 4px rgba(0,0,0,.65);
}
.bar>div{position:relative;height:100%;width:100%;transition:width .15s;}
.bar>div::after{content:'';position:absolute;inset:0;background:
  linear-gradient(rgba(255,255,255,.28),transparent 40%,rgba(0,0,0,.35)),
  repeating-linear-gradient(90deg,transparent 0 7px,rgba(0,0,0,.32) 7px 8px);}
.bar.hp>div{background:linear-gradient(#e05050 0 36%,#8a1212 70%,#4a0808);}
.bar.mp>div{background:linear-gradient(#4a88f0 0 36%,#1638a0 70%,#0a1860);}
.bar.xp>div{background:linear-gradient(#f0d060 0 36%,#8a6a12 70%,#4a3808);}
.bar>span{position:absolute;left:0;top:0;width:100%;text-align:center;font-size:9px;line-height:13px;color:#fff;text-shadow:0 0 2px #000,0 1px 0 #000;z-index:1;font-weight:700;}
.bar.small{height:8px;}
.bar.small>span{line-height:8px;font-size:7px;}
.astate{
  font-size:10px;color:#9fef9f;margin-top:5px;white-space:nowrap;overflow:hidden;
  border-top:1px solid #6a4a18;padding-top:3px;letter-spacing:.3px;
}

/* ===== TARGET ===== */
#target{
  left:8px;top:calc(128px + env(safe-area-inset-top));width:228px;
  background:linear-gradient(#3a1614,#140808);
  border-color:#c05040;
  box-shadow:
    0 0 0 1px #2a0c08,0 0 0 3px #6a2818,0 0 0 4px #1a0808,
    inset 0 0 0 1px #8a4030,inset 0 0 16px rgba(0,0,0,.5),0 8px 22px #000;
  padding:6px 8px 7px;font-size:11px;text-align:center;
}
#target:before{
  content:'◆ 대상 ◆';display:block;font-size:9px;color:#ffb0a0;
  letter-spacing:3px;margin-bottom:2px;font-weight:800;
}
#tname{color:#ffe0d4;font-weight:800;font-size:12px;text-shadow:0 1px 0 #000;}

/* ===== MINIMAP ===== */
#topright{right:8px;top:calc(8px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
#topright.mini #mmapwrap{display:none;}
#mmapwrap{padding:5px 5px 4px;}
#mmapwrap:before{
  content:'대륙 지도';display:block;text-align:center;font-size:9px;color:#ffe27a;
  letter-spacing:2px;margin-bottom:3px;font-weight:800;
}
#minimap{display:block;background:#000;width:128px;height:92px;opacity:.97;cursor:pointer;border:1px solid #3a2a12;}
#zone{
  font-size:11px;color:#fff1b8;padding:4px 10px;cursor:pointer;font-weight:700;
  letter-spacing:.4px;
}

button{font-family:inherit;}
.btn{
  background:linear-gradient(#5a4224,#2a1c0e);
  color:var(--txt);border:1px solid #e0c36a;
  box-shadow:0 0 0 1px #2a1c0c,inset 0 1px 0 rgba(255,240,180,.28),inset 0 -2px 0 rgba(0,0,0,.4);
  padding:8px 12px;font-size:13px;cursor:pointer;
}
.btn:active{background:#3a2a16;transform:translateY(1px);}
.btn.on{border-color:#7aee7a;color:#c8ffc8;box-shadow:0 0 10px rgba(80,255,80,.4),inset 0 0 10px rgba(80,180,80,.18);}
.btn.gold{background:linear-gradient(#b08630,#5a3c14);border-color:#ffe27a;color:#fff8d8;font-weight:800;}
.btn.xs{padding:4px 9px;font-size:11px;}

/* ===== SKILL DOCK ===== */
#bottom{position:absolute;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:flex-end;gap:8px;pointer-events:none;}
#skillbar{
  display:flex;gap:4px;pointer-events:auto;padding:7px 8px 6px;
}
.skill{
  position:relative;width:54px;height:54px;
  border:2px solid #c9a24a;
  box-shadow:inset 0 0 0 1px #1a1008,inset 0 0 14px rgba(0,0,0,.6),0 0 0 1px #3a2a10;
  background:
    radial-gradient(circle at 50% 28%,#4a341c,#120c08 72%);
  color:var(--txt);font-size:10px;line-height:1.1;padding:2px;overflow:hidden;cursor:pointer;
}
.skill:before{
  content:'';position:absolute;inset:3px;border:1px solid rgba(232,199,106,.22);pointer-events:none;
}
.skill b{display:block;font-size:11px;color:#fff1b8;white-space:nowrap;margin-top:10px;text-align:center;text-shadow:0 1px 0 #000;font-weight:800;}
.skill small{display:block;color:#9ad0ff;font-size:8.5px;text-align:center;margin-top:1px;}
.skill .cd{position:absolute;left:0;bottom:0;width:100%;height:0;background:rgba(6,4,2,.78);pointer-events:none;}
.skill .key{
  position:absolute;left:3px;top:2px;font-size:9px;color:#ffe27a;
  text-shadow:0 1px 0 #000;font-weight:800;background:rgba(0,0,0,.35);padding:0 3px;
}
.skill.lock{opacity:.4;filter:grayscale(.45);}
#sidebtns{position:static;display:flex;flex-direction:row;gap:4px;pointer-events:auto;align-self:stretch;}
#sidebtns .btn.sm{height:auto;width:56px;}
@media (orientation:landscape),(min-width:601px){#bottom{flex-direction:row;}#sidebtns{order:2;width:auto!important;}}
.btn.sm{
  width:52px;height:54px;padding:0;font-size:9px;line-height:1.15;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-weight:700;
}
.btn.sm i{font-style:normal;font-size:16px;}

/* ===== CHAT / LOG ===== */
#log{
  left:8px;bottom:calc(78px + env(safe-area-inset-bottom));width:min(calc(var(--vw,1vw)*68),360px);
  font-size:11px;line-height:1.4;pointer-events:none;
  text-shadow:0 0 3px #000,0 1px 0 #000;
  padding:6px 8px 5px;
  max-height:92px;overflow:hidden;
}
#log div{padding:1px 0;color:#f4e8c8;}
#log div:nth-last-child(n+2){opacity:.68;}
#log .g{color:#ffd76a}#log .r{color:#ff8a8a}#log .b{color:#9ad0ff}

/* ===== PANELS ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:10;touch-action:auto;}
.panel{
  width:min(calc(var(--vw,1vw)*94),490px);max-height:calc(var(--vh,1vh)*88);overflow:auto;position:relative;
  padding:20px 16px 16px;font-size:13px;
  touch-action:auto;
}
.panel:before{
  content:'';position:sticky;display:block;top:0;margin:-11px 0 8px;height:3px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,#8a6a28 12%,#fff1b8 50%,#8a6a28 88%,transparent);
}
.panel:after{
  content:'';position:sticky;display:block;bottom:0;margin:8px 0 -7px;height:2px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,#8a6a28 20%,#c9a24a 50%,#8a6a28 80%,transparent);
  opacity:.7;
}
.pclose{
  position:sticky;top:0;float:right;width:30px;height:30px;margin:-6px -4px 0 6px;
  border:2px solid #e0c36a;background:linear-gradient(#5a4224,#23180e);color:#fff1b8;
  font-size:16px;line-height:26px;text-align:center;cursor:pointer;padding:0;z-index:2;
}
.hrow{display:flex;align-items:center;gap:6px;margin:10px 0 6px;border-bottom:1px solid #6a4a18;padding-bottom:4px;}
.hrow h3{flex:1;margin:0;border:none;padding:0;}
.panel h2{margin:4px 0 12px;color:#fff1b8;font-size:20px;text-align:center;letter-spacing:2px;text-shadow:0 1px 0 #000,0 0 14px rgba(212,175,55,.4);font-weight:800;}
.panel h3{margin:10px 0 6px;color:#e0c36a;font-size:13px;border-bottom:1px solid #6a4a18;padding-bottom:3px;}
.row{display:flex;gap:6px;flex-wrap:wrap;}
.cls{flex:1;min-width:120px;border:1px solid #7a5a28;padding:10px;cursor:pointer;background:rgba(0,0,0,.32);box-shadow:inset 0 0 0 1px #1a1208;}
.cls.sel{border-color:#ffe27a;background:rgba(212,168,75,.18);box-shadow:inset 0 0 12px rgba(212,175,55,.16),0 0 0 1px #3a2a10;}
.cls .cport{display:block;width:100%;height:86px;image-rendering:pixelated;background:#0a0806;border:1px solid #5a4018;margin-bottom:6px;object-fit:contain;}
.titlesplash{position:relative;width:100%;height:110px;margin:0 0 8px;border:1px solid #c9a24a;background:#0a0808;overflow:hidden;}
.titlesplash canvas{width:100%;height:100%;image-rendering:pixelated;display:block;}
#pport{overflow:hidden;padding:0;}
#pport img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block;}
.cls b{display:block;font-size:15px;margin-bottom:3px;}
.cls small{color:#cbb48a;font-size:11px;}
.cls .st{margin-top:4px;font-size:11px;color:#dcb;}
input[type=text]{width:100%;padding:8px;border:1px solid #7a5a28;background:#0e0b08;color:var(--txt);font-size:14px;user-select:text;-webkit-user-select:text;touch-action:auto;box-shadow:inset 0 0 0 1px #1a1208;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:5px;}
.it{
  border:1px solid #7a5a28;padding:7px;background:linear-gradient(rgba(24,16,8,.78),rgba(8,6,4,.9));
  cursor:pointer;font-size:11px;min-height:52px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  box-shadow:inset 0 0 0 1px #1a1208;
}
.it:active{background:rgba(212,168,75,.2);}
.it .n{font-weight:800;}
.it .s{color:#b8a888;font-size:10px;}
.eq{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.eq .slot{color:#ffe27a;font-size:10px;letter-spacing:.5px;font-weight:700;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:12px;color:#e4d6b4;margin-bottom:6px;}
.tabs{display:flex;gap:6px;margin-bottom:8px;}
.tabs .btn{flex:1;}
.tabs .btn.sel{border-color:#ffe27a;color:#fff1b8;background:linear-gradient(#7a5828,#3a2a14);}
.list .it{flex-direction:row;justify-content:space-between;align-items:center;min-height:0;margin-bottom:5px;}
.pr{color:var(--gold);white-space:nowrap;}
.r0{color:#e8e8e8}.r1{color:#6ee06e}.r2{color:#6db3ff}.r3{color:#d18dff}.r4{color:#ffd24a}
.actions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.lore{font-size:12px;color:#c9b993;line-height:1.55;margin:6px 0 10px;}
.help{font-size:12px;color:#c9b993;line-height:1.6;}
.center{text-align:center;}
#banner{position:absolute;left:0;right:0;top:32%;text-align:center;font-size:28px;font-weight:800;color:#ffd24a;text-shadow:0 0 12px #000,0 0 28px #f80,0 2px 0 #4a2000;pointer-events:none;opacity:0;transition:opacity .3s;letter-spacing:3px;}

/* ===== LAYOUT: 겹침 방지 존 ===== */
:root{
  --dock-h:72px;
  --hud-gap:8px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
#leftcol{
  left:var(--hud-gap);
  top:calc(var(--hud-gap) + var(--safe-t));
  width:min(220px, calc(calc(var(--vw,1vw)*100) - 148px));
  display:flex;flex-direction:column;gap:6px;
  z-index:3;pointer-events:none;
}
#leftcol > *{pointer-events:auto;}
#status{
  position:relative;left:auto;top:auto;width:100%;
}
#status:before,#status:after{z-index:1;}
#target{
  position:relative;left:auto;top:auto;width:100%;
}
#topright{
  right:var(--hud-gap);
  top:calc(var(--hud-gap) + var(--safe-t));
  max-width:min(140px, calc(var(--vw,1vw)*38));
  z-index:3;
}
#mmapwrap{width:100%;}
#minimap{width:100%;height:auto;aspect-ratio:128/92;max-height:92px;}
#zone{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#questbox{margin-top:4px;max-width:100%;font-size:11px;line-height:1.35;color:#ffe6a8;text-align:left;text-shadow:0 0 3px #000,0 1px 2px #000;pointer-events:none;background:rgba(10,8,6,.5);padding:4px 6px;border:1px solid rgba(184,149,63,.5)}
#questbox .qtr{margin-top:4px;padding-top:3px;border-top:1px solid rgba(184,149,63,.25)}#questbox .qtr:first-child{margin-top:0;padding-top:0;border-top:none}
#questbox .qt{color:#ffd97a;font-weight:bold}#questbox .goal .qt{color:#9fd4ff}
#questbox .qo{color:#e6dcc4;padding-left:4px;display:flex;justify-content:space-between;gap:6px}#questbox .qo b{color:#fff;flex:0 0 auto}#questbox .qo span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#questbox .qo.ok{color:#8fe08f}#questbox .qo.ok b{color:#8fe08f}#questbox .qdone .qt{color:#9fff9f}
#bottom{
  left:var(--hud-gap);right:var(--hud-gap);
  bottom:calc(var(--hud-gap) + var(--safe-b));
  flex-wrap:wrap;justify-content:center;
  z-index:4;
}
#skillbar{flex-shrink:0;}
#log{
  left:var(--hud-gap);
  right:auto;
  bottom:calc(var(--dock-h) + 12px + var(--safe-b));
  width:min(360px, calc(calc(var(--vw,1vw)*100) - 16px));
  max-height:min(86px, calc(var(--vh,1vh)*16));
  z-index:2;
}
#banner{
  top:auto;bottom:calc(var(--dock-h) + 28px + var(--safe-b));
  font-size:clamp(16px,calc(var(--vw,1vw)*5),26px);padding:0 12px;
  pointer-events:none;z-index:5;
}
.skill b,.skill small{overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.overlay{z-index:20;}

@media (max-width:480px){
  #leftcol{width:min(186px, calc(calc(var(--vw,1vw)*100) - 126px));}
  #pport{width:40px;height:40px;flex-basis:40px;font-size:16px;}
  .nrow b{font-size:12px;}
  .bar{height:11px;}
  .bar>span{line-height:11px;font-size:8px;}
  #topright{max-width:min(118px,calc(var(--vw,1vw)*34));}
  #minimap{max-height:72px;}
  .skill,.btn.sm{width:42px;height:44px;}
  .skill b{font-size:9px;margin-top:8px;}
  .skill small{font-size:8px;}
  #log{font-size:10px;max-height:64px;}
  #mmapwrap:before{font-size:8px;letter-spacing:1px;}
}
@media (max-width:360px){
  #leftcol{width:min(160px, calc(calc(var(--vw,1vw)*100) - 108px));}
  .skill,.btn.sm{width:38px;height:40px;}
  #bottom{gap:4px;}
  #skillbar{gap:3px;padding:5px;}
}
@media (max-height:430px) and (orientation:landscape){
  #leftcol{width:min(200px,calc(var(--vw,1vw)*42));}
  #topright{max-width:110px;}
  #minimap{max-height:56px;}
  #log{max-height:40px;}
  .skill,.btn.sm{width:36px;height:36px;}
  .skill b{font-size:8px;margin-top:6px;}
}

#skillbar{display:grid!important;grid-auto-flow:column;grid-auto-columns:48px;grid-template-columns:none!important;}
.skill.lock.on{border-color:#6f6!important;box-shadow:0 0 6px rgba(120,255,120,.5)!important;} .skill.lock.on small{color:#9f9!important;} .btn.sm.on#btnMenu{border-color:#6f6!important;}
.igrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
.icell{position:relative;aspect-ratio:1;border:1px solid #6b5428;background:radial-gradient(circle at 50% 35%,#2a2018,#0e0a07);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 1px #1a1208;overflow:hidden;}
.icell canvas{width:76%;height:76%;image-rendering:pixelated;}
.icell.empty{background:#0a0806;opacity:.6;cursor:default;}
.icell.r1{border-color:#4fa04a}.icell.r2{border-color:#4a8ad8}.icell.r3{border-color:#a060d8}.icell.r4{border-color:#e8c040}.icell.r5{border-color:#ff8c1a;box-shadow:0 0 6px rgba(255,140,26,.5)}
.r5{color:#ff8c1a}
.icell.sel{border-color:#ffe08a;box-shadow:0 0 0 1px #ffe08a,0 0 8px rgba(232,199,106,.6);}
.icell .cnt{position:absolute;right:2px;bottom:1px;font-size:10px;font-weight:bold;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000;}
.icell .ench{position:absolute;left:2px;top:1px;font-size:9px;font-weight:bold;color:#ffe08a;text-shadow:0 0 2px #000;}
.icell .ok{position:absolute;right:2px;top:1px;font-size:10px;color:#8f8;text-shadow:0 0 2px #000;}
.icell .prog{position:absolute;left:3px;right:3px;bottom:2px;height:3px;background:rgba(0,0,0,.6);}
.icell .prog i{display:block;height:100%;background:linear-gradient(90deg,#c8a040,#ffe08a);}
.icell .goalm{position:absolute;left:1px;top:0;font-size:10px;}
.icell .eqm{position:absolute;left:2px;bottom:1px;font-size:9px;color:#8f8;text-shadow:0 0 2px #000;}
.icell .qb{position:absolute;right:2px;top:1px;font-size:9px;font-weight:bold;text-shadow:0 0 2px #000,0 0 2px #000;}
.craftlv{font-size:12px;color:#e4d6b4;width:100%;}
.rcats{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;}.rcats .btn.sel{border-color:#ffe08a;color:#ffe08a;}
.eqrow{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.eqslot{text-align:center;}.eqslot .slot{display:block;font-size:10px;color:#c9a227;margin-top:2px;}
.idetwrap{margin-top:8px;border:1px solid #6b5428;background:rgba(0,0,0,.35);min-height:52px;}
.ipop{position:fixed;width:min(272px,calc(var(--vw,1vw)*90));z-index:60;background:linear-gradient(#2c2218,#120d08);border:1px solid #d4af4a;box-shadow:0 0 0 1px #000,0 10px 26px rgba(0,0,0,.75);padding:8px 8px 8px;font-size:12px;color:#e4d6b4;}
.ipop .idet{padding:0 26px 0 0;}.ipop .ipclose{position:absolute;right:6px;top:6px;width:24px;height:24px;border:1px solid #6b5428;background:#1c1409;color:#ddd;font-size:12px;line-height:22px;text-align:center;padding:0;cursor:pointer;}
.idet{padding:8px;}.idh{display:flex;gap:8px;align-items:center;}.idh canvas{width:40px;height:40px;image-rendering:pixelated;border:1px solid #6b5428;background:#0e0a07;}
.ids{margin-top:6px;font-size:12px;color:#e4d6b4;line-height:1.5;}
.ok{color:#8f8}.lack{color:#f88}
.sel{width:100%;padding:8px;background:#1c1409;color:#f0e6c8;border:1px solid #6b5428;font-size:13px;margin-bottom:8px}
.sppv{overflow-x:auto;border:1px solid #6b5428;background:repeating-conic-gradient(#2a2418 0 25%,#1c1810 0 50%) 0 0/16px 16px;margin-bottom:8px}.sppv canvas{display:block;image-rendering:pixelated;width:576px;height:auto}
.sprow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:#e4d6b4}.sprow label{display:flex;align-items:center;gap:6px}.sprow input[type=range]{width:110px}
details.hd summary{cursor:pointer;color:#ffe08a;font-weight:bold;font-size:13px;padding:6px 0}details.hd .help{margin-top:4px}
:root{--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);}
#game{z-index:0}#ui{z-index:1}#hud{z-index:5}#banner{z-index:6}#overlayRoot{z-index:20}.ipop{z-index:60}
#hud>*{pointer-events:none}#hud .btn,#hud .skill,#hud #minimap,#hud #zone,#hud #skillbar,#hud #sidebtns{pointer-events:auto}
#log .lfade{opacity:0;transition:opacity .25s}#log .lfade.in{opacity:1}
.skill.dim{opacity:.45;filter:saturate(.4)}
/* ===== 상단 UI 변경안 ===== */
/* A: 컴팩트 — 초상화 작게, 이름/레벨 한 줄, 바 3개 얇게, 골드는 이름 줄 오른쪽 */
#hud.topA #pport{width:38px!important;height:38px!important;}
#hud.topA .bline .lbl{display:none!important;}
#hud.topA .bar{height:9px!important;}
#hud.topA .bar.small{height:6px!important;}
#hud.topA .bar span{font-size:8px!important;}
#hud.topA #status{padding:5px 7px!important;}
#hud.topA .nrow b{font-size:13px!important;}
/* B: 초상화 좌측 大 + 오른쪽 세로 바 3개(라벨 유지) */
#hud.topB #pport{width:52px!important;height:52px!important;}
#hud.topB .sthead{align-items:flex-start!important;}
#hud.topB #status{display:grid!important;grid-template-columns:auto 1fr;gap:3px 8px!important;align-items:center;padding:7px 9px!important;}
#hud.topB .sthead{grid-column:1;grid-row:1 / span 3;flex-direction:column!important;gap:3px!important;text-align:center;align-items:center!important;}
#hud.topB .stmeta{display:none!important;}
#hud.topB .bline{grid-column:2;}
#hud.topB #astate{grid-column:1 / -1;}
#hud.topB .bar{height:11px!important;}
#hud.topB #topname{display:block!important;}
/* C: 바 위 오버레이 — 라벨/숫자를 바 안에 넣고 카드 높이 최소화 */
#hud.topC #pport{width:42px!important;height:42px!important;}
#hud.topC .bline .lbl{position:absolute;left:5px;z-index:2;font-size:8px!important;opacity:.85;}
#hud.topC .bline{position:relative;gap:0!important;}
#hud.topC .bar{height:13px!important;}
#hud.topC .bar.small{height:9px!important;}
#hud.topC .bar.small span{font-size:7.5px!important;}
#hud.topC .bar span{font-size:9px!important;text-align:right;padding-right:5px;}
#hud.topC #status{padding:5px 7px 6px!important;gap:3px!important;}
#hud.topC .nrow b{font-size:13px!important;}
#hud.topC #topright{width:var(--mmw,104px)!important;max-width:none!important;}
#hud.topC #mmapwrap{padding:0!important;height:var(--mmh,104px);}
#hud.topC #minimap{width:100%!important;height:100%!important;max-height:none!important;display:block;}
#hud.topC #zone{position:absolute!important;left:0;right:0;bottom:0;}
/* ===== 가방/메뉴 변경안 ===== */
/* A: 요약 헤더 — 능력치는 2열 압축 + 접기, 장비 2행, 가방 6열 (현재 개선형) */
.bagA .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px 10px;font-size:11px;padding:4px 2px 6px;}
.bagA .eqrow{gap:4px!important;}
.bagA .eqslot .slot{font-size:9px;}
/* B: 인물 카드형 — 왼쪽 장비 2열 세로, 오른쪽 능력치, 아래 가방 5열(칸 큼) */
.bagB .bagtop{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin-bottom:4px;}
.bagB .bagtop h3{margin:0 0 3px!important;font-size:12px!important;}
.bagB .stats span{padding:0!important;font-size:11px!important;line-height:1.28;}
.bagB .stats{gap:0!important;}
.bagB .hrow{margin-top:2px!important;}
.bagB .eqrow{grid-template-columns:repeat(2,1fr)!important;gap:3px!important;width:98px;}
.bagB .eqslot .icell{width:46px;height:46px;}
.bagB .eqslot .slot{font-size:8.5px;margin-top:1px;}
.bagB .eqslot .icell canvas{width:72%;height:72%;}
.bagB .stats{display:flex;flex-direction:column;gap:2px;font-size:11.5px;padding:0;}
.bagB .stats span{display:flex;justify-content:space-between;border-bottom:1px solid rgba(184,149,63,.18);padding:1px 0;}
.bagB .igrid{grid-template-columns:repeat(6,1fr)!important;gap:4px!important;}
.bagB h3{margin-top:2px;}
.bagB>#bagStats{display:none!important;}
/* C: 탭형 — 능력치 접힘, 장비 한 줄 8칸, 가방 7열 + 분류 탭 */
.bagC .stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 8px;font-size:10.5px;padding:2px 2px 5px;}
.bagC .eqrow{grid-template-columns:repeat(8,1fr)!important;gap:3px!important;}
.bagC .icell canvas{width:70%;height:70%;}
.bagC .eqslot .slot{font-size:8px;}
.bagC .igrid{grid-template-columns:repeat(6,1fr)!important;gap:4px!important;}
.bagC .bagtabs{display:flex;gap:4px;margin:4px 0 6px;}
.bagC .bagtabs .btn{flex:1;}
.btn.xs.sel{border-color:#ffd24a;color:#ffe9a8;background:rgba(120,90,20,.35);}
#titlebg{position:fixed;inset:0;width:100%;height:100%;z-index:15;pointer-events:none;image-rendering:pixelated;}
#titlechar{position:fixed;inset:0;width:100%;height:100%;z-index:16;pointer-events:none;image-rendering:pixelated;}
#titlechar.hidden{display:none}
.overlay.titlemode .panel.bare{background:none!important;border:none!important;box-shadow:none!important;padding:0!important;max-height:none!important;}
.overlay.titlemode .panel.bare:before,.overlay.titlemode .panel.bare:after{display:none!important;}
.tmenu{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.tmenu .btn{padding:13px;font-size:15px}
/* A: 화면 정중앙 카드 */
.overlay.titlemode.flowA{align-items:center!important;}
.overlay.titlemode.flowA .panel{max-height:calc(var(--vh,1vh)*74)!important;width:min(340px,calc(var(--vw,1vw)*88))!important;background:linear-gradient(180deg,rgba(24,17,10,.93),rgba(10,7,5,.96))!important;animation:tpop .22s ease-out}
@keyframes tpop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.overlay.titlemode.flowA .panel h2{margin-bottom:4px}
.overlay.titlemode.flowA .lore{font-size:12px;margin-bottom:2px}
.overlay.titlemode.flowA .crow{padding:7px}
.overlay.titlemode.flowA .crow .cport.small{width:62px!important;height:62px!important;flex:0 0 62px}
.overlay.titlemode.flowA #nameIn{margin-top:6px}
.overlay.titlemode.flowA .actions{margin-top:10px}
/* B: 전체화면 3분할 */
.overlay.titlemode.flowB{align-items:stretch!important;}
.flowB .fsWrap{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 16px);}
.flowB .fsTop{text-align:center;min-height:56px}
.flowB .fsMid{display:flex;align-items:center;justify-content:center;gap:10px}
.flowB .fsMid.cards{align-items:flex-end}
.flowB .fsBot{display:flex;flex-direction:column;gap:9px}
.flowB .tglow{font-size:34px;font-weight:800;color:#ffe9a0;text-shadow:0 0 18px rgba(255,200,90,.45),0 3px 0 #000;letter-spacing:4px}
.flowB .tsub{color:#f3e0a6;font-size:13px;letter-spacing:3px;text-shadow:0 2px 0 #000}
.flowB .pickname b{font-size:26px;text-shadow:0 2px 0 #000}
.flowB .pickdesc{color:#e4d6b4;font-size:12.5px;margin-top:3px;text-shadow:0 1px 2px #000}
.flowB .ccard{flex:1;background:rgba(14,10,6,.78);border:1px solid #6b5428;border-radius:5px;padding:6px 4px;text-align:center;display:flex;flex-direction:column;gap:2px;align-items:center}
.flowB .ccard.sel{border-color:#ffd24a;box-shadow:0 0 0 1px rgba(255,210,74,.4) inset,0 0 14px rgba(255,190,80,.25)}
.flowB .ccard .cport{width:100%!important;height:58px!important;margin:0}
.flowB .ccard b{font-size:13px}.flowB .ccard .st{font-size:10px;color:#9fd4ff}
.flowB input{width:100%}
/* C: 상단 고정 + 아래 캐릭터 */
.overlay.titlemode.flowC{align-items:flex-start!important;}
.overlay.titlemode.flowC .panel{margin-top:calc(var(--safe-t) + 12px);max-height:calc(var(--vh,1vh)*58)!important;background:linear-gradient(180deg,rgba(22,16,9,.94),rgba(10,7,5,.9))!important;}
/* 공통 직업 행 */
.crow{display:flex;gap:10px;align-items:center;border:1px solid #6b5428;background:rgba(20,14,8,.7);padding:6px;border-radius:4px;margin-top:7px}
.crow.sel{border-color:#ffd24a;box-shadow:0 0 0 1px rgba(255,210,74,.35) inset}
.crow .cport.small{width:58px!important;height:58px!important;flex:0 0 58px;margin:0}
.cinfo{display:flex;flex-direction:column;gap:1px;min-width:0}
.cinfo b{font-size:14px}.cinfo .s{font-size:11px;color:#cbb48a}.cinfo .st{font-size:11px;color:#9fd4ff}
.npcmenu{display:flex;flex-direction:column;gap:8px;margin-top:10px}.npcmenu .btn{padding:12px 14px;font-size:14px;text-align:left}
.qcard{border:1px solid #6b5428;background:rgba(0,0,0,.3);padding:8px 10px;margin-bottom:7px;}
.qtitle{color:#ffe08a;font-weight:bold;margin-bottom:3px;}.qtext{font-size:12px;color:#cbb48a;margin-bottom:4px;}.qneed,.qrew{font-size:12px;color:#e4d6b4;}
.skill .sic{position:absolute;left:50%;top:3px;transform:translateX(-50%);width:20px;height:20px;image-rendering:pixelated;pointer-events:none;}
.skill b{margin-top:23px!important;font-size:8px!important;}.skill small{font-size:7px!important;margin-top:0!important;}
.skill.lock .sic{opacity:.45;filter:grayscale(.6);}
.skl{display:flex;align-items:center;gap:10px;border:1px solid #6b5428;background:rgba(0,0,0,.3);padding:6px 10px;margin-bottom:6px;cursor:pointer;}
.skl.learned{border-color:#4fa04a}.skl:active{background:rgba(255,220,120,.08)}
.skl .mico{width:40px;height:40px;flex:0 0 40px;image-rendering:pixelated;border:1px solid #6b5428;background:#0e0a07}.ipop .mico{width:44px;height:44px;image-rendering:pixelated;border:1px solid #6b5428;background:#0e0a07}
.matlist{margin:3px 0 4px}.matrow{font-size:12px;line-height:1.45}
.skl .sico{width:36px;height:36px;flex:0 0 36px;image-rendering:pixelated;border:1px solid #6b5428;background:#0e0a07;}
.skl .skn{flex:1;min-width:0}.skl .skn b{display:block;color:#ffe08a;font-size:13px}.skl .skn .s{font-size:11px;color:#cbb48a}
.skst{font-size:11px;padding:3px 8px;border:1px solid #6b5428;white-space:nowrap}.skst.ok{color:#8f8;border-color:#4fa04a}.skst.lack{color:#f88}.skst.can{color:#ffe08a;border-color:#e8c76a;background:rgba(232,199,106,.12)}.skst.s{color:#9fd4ff}
.ipop .sico{width:40px;height:40px;image-rendering:pixelated;border:1px solid #6b5428;background:#0e0a07;}
.cbadge{display:inline-block;font-size:9px;padding:1px 5px;border:1px solid #6b5428;color:#ffe08a;margin-right:3px;vertical-align:middle;}.cbadge.c4{border-color:#a060d8;color:#d0a0ff}.cbadge.c5{border-color:#e8c040;color:#ffe040}
.how{font-size:11px;color:#9fd4ff;margin-top:3px;line-height:1.4;}
.skrow{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid #6b5428;padding:7px 9px;margin-bottom:6px;background:rgba(0,0,0,.3);}
.skrow.learned{border-color:#4fa04a}.skrow.locked{opacity:.55}.skinfo b{color:#ffe08a}.skinfo .s{color:#cbb48a;font-size:11px;}

/* ===== 모바일 세로모드 컴팩트 HUD ===== */
@media (orientation:portrait) and (max-width:600px){
 /* 퀘스트창 겹침 해결(2026-09-19): 퀘스트창은 미니맵 아래에 오른쪽 정렬로 붙는데(폭 --qbw), 왼쪽 열(상태창·대상창)이 화면의 60%라 자동사냥 상태 줄이 나오거나 대상창이 뜨면 서로 겹쳤다.
    → 왼쪽 열 폭을 '화면 폭 − 퀘스트창 폭 − 여백 22px'로 잡아 어떤 경우에도 가로로 겹치지 않게 한다. */
 :root{--qbw:clamp(150px,calc(var(--vw,1vw)*42),184px);}
 #leftcol{width:calc(var(--vw,1vw)*100 - var(--qbw) - 22px)!important;gap:4px!important;top:calc(var(--safe-t) + 8px)!important;left:8px!important;}
 #topright{top:calc(var(--safe-t) + 8px)!important;right:8px!important;}
 #status,#target,#mmapwrap,#log,#skillbar,.btn.sm,.skill{background:rgba(14,10,6,.8)!important;border:1px solid #b8953f!important;box-shadow:0 0 0 1px rgba(0,0,0,.55)!important;}
 #status,#target{width:100%!important;box-sizing:border-box!important;} #status{padding:5px 7px 6px!important;}
 :root{--slot:min(44px,calc((calc(var(--vw,1vw)*100) - 60px) / 8));}
 #status:before,#status:after{display:none!important;}
 #pport{width:34px!important;height:34px!important;flex-basis:34px!important;border-width:1px!important;box-shadow:none!important;}
 .sthead{gap:6px!important;align-items:center;}
 .nrow b{font-size:12px!important;} .nrow span{font-size:10px!important;} .nrow .g{font-size:10px!important;}
 .bline{margin:3px 0 0!important;gap:0!important;} .bline .lbl{display:none!important;}
 .bar{height:9px!important;box-shadow:inset 0 0 0 1px #3a2a10!important;} .bar>span{line-height:9px!important;font-size:8px!important;}
 .bar.small{height:5px!important;} .bar.small>span{display:none!important;}
 .astate{font-size:9px!important;margin-top:3px!important;padding-top:2px!important;border-top:1px solid rgba(184,149,63,.35)!important;}
 #target{padding:3px 7px 5px!important;} #target:before{display:none!important;} #tname{font-size:11px;font-weight:700;color:#ffd0c0;margin-bottom:2px;}
 #topright{max-width:104px!important;width:104px!important;gap:0!important;}
 #topright.mini{max-width:104px!important;}
 #mmapwrap{padding:0!important;} #mmapwrap:before,#mmapwrap .mmtitle,#topright:before{display:none!important;} #minimap{max-height:66px!important;border:none!important;opacity:1!important;}
 #zone{position:absolute!important;left:0;right:0;bottom:0;background:rgba(0,0,0,.6)!important;border:none!important;box-shadow:none!important;font-size:10px!important;padding:2px 4px!important;text-align:center;color:#fff1b8;letter-spacing:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 #minimap{width:104px!important;height:104px!important;max-height:104px!important;}
 #topright.mini #zone{position:static!important;background:rgba(14,10,6,.8)!important;border:1px solid #b8953f!important;}
 #questbox{position:absolute!important;top:calc(100% + 6px);right:0;left:auto;width:max(var(--qbw),var(--mmw,104px));max-width:none!important;font-size:10px!important;padding:5px 7px;margin:0;background:rgba(10,8,6,.55);border:1px solid rgba(184,149,63,.5);border-radius:3px;box-sizing:border-box;}
 #log{background:rgba(10,8,6,.45)!important;border:none!important;box-shadow:none!important;padding:3px 8px!important;max-height:48px!important;min-height:22px;font-size:11px!important;line-height:1.4!important;width:auto!important;left:12px!important;right:12px!important;bottom:calc(var(--dock-h) + var(--safe-b) + 14px)!important;border-radius:4px;}
 #log div{padding:0!important;} #log div:nth-last-child(n+3){display:none!important;}
 #bottom{gap:6px!important;justify-content:center!important;padding:0 12px!important;flex-direction:column!important;align-items:center!important;flex-wrap:nowrap!important;bottom:calc(var(--safe-b) + 8px)!important;}
 /* 한 줄 독: 퀵슬롯 왼쪽 · 가방/자동/메뉴 오른쪽 · 동일 칸 크기 */
 #bottom.row1{flex-direction:row!important;justify-content:space-between!important;align-items:flex-end!important;gap:8px!important;padding:0 10px!important;--cell:var(--cellpx,40px);}
 #bottom.row1 #sidebtns{order:2;}#bottom.row1 #skillbar{order:1;}
 #bottom.row1 #skillbar{grid-auto-columns:var(--cell)!important;gap:3px!important;padding:3px!important;}
 #bottom.row1 .skill{width:var(--cell)!important;height:var(--cell)!important;}
 #bottom.row1 #sidebtns{width:auto!important;gap:3px!important;padding:3px;background:rgba(14,10,6,.8);border:1px solid #b8953f;box-shadow:0 0 0 1px rgba(0,0,0,.55);}
 #bottom.row1 .btn.sm{width:var(--cell)!important;height:var(--cell)!important;border:1px solid #6b5428!important;background:radial-gradient(circle at 50% 30%,#3a2a16,#0e0a06 75%)!important;}
 #bottom.row1 .btn.sm i{font-size:calc(var(--cell) * .38)!important;}
 #bottom.row1 .btn.sm{font-size:calc(var(--cell) * .2)!important;}
 /* A: 아이콘+키+수량, 이름 숨김 */
 #bottom.row1.dockA .skill b{display:none!important;} #bottom.row1.dockA .skill small{font-size:calc(var(--cell) * .22)!important;margin-top:calc(var(--cell) * .68)!important;} #bottom.row1.dockA .skill .sic{width:calc(var(--cell) * .5)!important;height:calc(var(--cell) * .5)!important;top:calc(var(--cell) * .12)!important;} #bottom.row1.dockA .skill .key{font-size:calc(var(--cell) * .17)!important;}
 /* B: 배운 스킬만 표시(다음 스킬 칸 숨김), 이름 표시 */
 #bottom.row1.dockB .skill.lock{display:none!important;} #bottom.row1.dockB .skill b{font-size:calc(var(--cell) * .19)!important;margin-top:calc(var(--cell) * .5)!important;max-width:calc(var(--cell) - 2px);} #bottom.row1.dockB .skill small{font-size:calc(var(--cell) * .17)!important;} #bottom.row1.dockB .skill .sic{width:calc(var(--cell) * .42)!important;height:calc(var(--cell) * .42)!important;top:calc(var(--cell) * .08)!important;}
 /* C: 버튼은 아이콘만(라벨 숨김), 슬롯은 아이콘+이름 */
 #bottom.row1.dockC .btn.sm{font-size:0!important;gap:0!important;} #bottom.row1.dockC .btn.sm i{font-size:calc(var(--cell) * .5)!important;} #bottom.row1.dockC .skill small{display:none!important;} #bottom.row1.dockC .skill b{font-size:calc(var(--cell) * .2)!important;margin-top:calc(var(--cell) * .6)!important;max-width:calc(var(--cell) - 2px);} #bottom.row1.dockC .skill .sic{width:calc(var(--cell) * .5)!important;height:calc(var(--cell) * .5)!important;top:calc(var(--cell) * .08)!important;}
 #skillbar{grid-auto-columns:var(--slot)!important;gap:3px!important;padding:4px!important;max-width:calc(var(--vw,1vw)*100);}
 .skill{width:var(--slot)!important;height:var(--slot)!important;border-width:1px!important;box-shadow:none!important;background:radial-gradient(circle at 50% 30%,#3a2a16,#0e0a06 75%)!important;overflow:hidden!important;}
 .skill:before{display:none!important;} .skill b{font-size:8.5px!important;margin-top:24px!important;max-width:42px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .skill small{font-size:7.5px!important;max-width:42px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .skill .sic{top:3px;width:20px;height:20px;} .skill .key{font-size:7px!important;padding:0 2px!important;left:2px!important;top:1px!important;}
 #sidebtns{position:static!important;display:flex;flex-direction:row!important;justify-content:space-between;align-items:center;align-self:center!important;gap:3px!important;width:var(--dockw,auto);pointer-events:none;}
 #sidebtns .btn{pointer-events:auto;}
 .btn.sm{width:var(--slot)!important;height:var(--slot)!important;border-width:1px!important;box-shadow:none!important;background:rgba(14,10,6,.8)!important;font-size:8.5px!important;gap:1px!important;padding:0!important;}
 .btn.sm i{font-size:15px!important;}
 .btn.sm.on{border-color:#6f6!important;color:#9f9!important;}
 #banner{font-size:clamp(15px,calc(var(--vw,1vw)*4.6),22px)!important;top:calc(var(--safe-t) + 150px)!important;bottom:auto!important;}
 @media (max-width:372px){.skill b{font-size:8px!important;margin-top:21px!important;max-width:38px;} .skill .sic{width:18px;height:18px;top:2px;} .skill small{display:none!important;}}
}
.coin{display:inline-block;width:13px;height:12px;vertical-align:-2px;background:var(--coin) center/contain no-repeat;image-rendering:pixelated;margin-right:1px;}

/* ===== UI 테두리 그림(2026-09-19 · 설정의 '창 테두리 그림' = OPTS.uiArt, 기본 꺼짐) =====
   그림(UI_IMG)은 부팅 때 --ui-* 변수로 들어온다(applyUiArt). 아홉 조각: 네 모서리는 그대로, 변은 늘린다.
   테두리는 border-image-outset으로 '창 바깥쪽'에 그려서 창 안의 내용 폭이 줄지 않는다(모서리 장식만 안쪽 여백으로 조금 들어온다). */
body.uiart .panel{border:4px solid transparent;border-image:var(--ui-panel) var(--ui-panel-s) / 26px / 9px stretch;background:var(--ui-panel-fill);box-shadow:0 10px 26px rgba(0,0,0,.6);}
body.uiart .panel:before,body.uiart .panel:after{display:none;}
body.uiart .overlay.titlemode .panel.bare{border-image:none!important;}
body.uiart .panel h2{display:table;margin:2px auto 12px;padding:5px 30px 6px;border-style:solid;border-color:transparent;border-width:0 18px;border-image:var(--ui-ribbon) 0 var(--ui-ribbon-s) fill / 0 18px / 0 stretch;font-size:17px;letter-spacing:1px;max-width:calc(100% - 64px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.uiart .ipop{border:3px solid transparent;border-image:var(--ui-tip) var(--ui-tip-s) / 13px / 5px stretch;background:var(--ui-tip-fill);box-shadow:0 10px 26px rgba(0,0,0,.75);}
body.uiart #pport{border:2px solid transparent;border-image:var(--ui-port) var(--ui-port-s) / 17px / 6px stretch;box-shadow:inset 0 0 14px #000;}
body.uiart #pport:after{display:none;}

/* ----- UI ② 버튼·칸(같은 토글 OPTS.uiArt) : 상태별로 border-image-source만 바꾼다. 가방 칸의 등급 색은 테두리 그림 위에 outline으로 남긴다 ----- */
body.uiart .btn{border:1px solid transparent;border-image:var(--ui2-btn) var(--ui2-btn-s) fill / 9px / 1px stretch;background:var(--ui2-btn-fill);background-clip:padding-box;box-shadow:none;}
body.uiart .btn.gold,body.uiart .btn.sel,body.uiart .tabs .btn.sel{border-image-source:var(--ui2-btnGold);background-color:var(--ui2-btnGold-fill);color:#2a1804;text-shadow:0 1px 0 rgba(255,240,190,.45);}
body.uiart .btn:active{border-image-source:var(--ui2-btnDown);background-color:var(--ui2-btnDown-fill);}
body.uiart .btn:disabled,body.uiart .btn.dis{border-image-source:var(--ui2-btnOff);background-color:var(--ui2-btnOff-fill);color:#d0d0d0;}
body.uiart .btn.on{box-shadow:0 0 10px rgba(80,255,80,.5);color:#c8ffc8;}
body.uiart .icell{border:1px solid transparent;border-image:var(--ui2-slot) var(--ui2-slot-s) fill / 9px / 0 stretch;box-shadow:none;}
body.uiart .icell.sel{border-image-source:var(--ui2-slotSel);box-shadow:0 0 8px rgba(232,199,106,.6);}
body.uiart .icell.r1{outline:1.5px solid #4fa04a;outline-offset:-4px;}
body.uiart .icell.r2{outline:1.5px solid #4a8ad8;outline-offset:-4px;}
body.uiart .icell.r3{outline:1.5px solid #a060d8;outline-offset:-4px;}
body.uiart .icell.r4{outline:1.5px solid #e8c040;outline-offset:-4px;}
body.uiart .icell.r5{outline:1.5px solid #ff8c1a;outline-offset:-4px;box-shadow:0 0 6px rgba(255,140,26,.5);}

/* ----- UI ③ 작은 아이콘(같은 토글 OPTS.uiArt): 이모지·기호 대신 그림. i.uic는 글자를 감추고 배경 그림만 보인다 ----- */
body.uiart .btn.sm i.uic{display:block;width:20px;height:20px;font-size:0;color:transparent;background:var(--ui3) center/contain no-repeat;image-rendering:auto;}
body.uiart .coin{background-image:var(--ui3-coin);width:14px;height:14px;vertical-align:-3px;image-rendering:auto;}

/* ----- NPC 대화 초상(2026-09-19 · 같은 토글 OPTS.uiArt): 초상 왼쪽, 대사 오른쪽. 초상은 대화창 배경색 위에 미리 합성된 그림이라 배경이 그 색일 때만 쓴다 ----- */
.npcport{display:flex;gap:10px;align-items:flex-end;margin:2px 0 2px;}
.npcport img{width:84px;flex:0 0 84px;display:block;image-rendering:auto;}   /* 66px에서는 얼굴이 작아 누구인지 잘 안 읽혔다 */
.npcport .lore{margin:0;flex:1;align-self:center;}