/* ============================================================
   style.css — 클래식 메이플 클라이언트 UI (라이트 블루그레이 창 · 네이비 비트맵 제목)
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden}
body{font-family:Dotum,'돋움','Malgun Gothic','맑은 고딕',sans-serif;font-size:12px;color:#222;-webkit-font-smoothing:none;font-smooth:never}   /* 클래식 클라이언트처럼 글자 안티앨리어싱 끔 */
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
.d{color:#5b6b80;font-size:11px}
.key{display:inline-block;padding:0 5px;border:1px solid #8fa1b8;border-radius:3px;background:linear-gradient(#fff,#dfe5ec);font-size:10px;color:#2b4a75;line-height:15px;white-space:nowrap}
.bmp{display:inline-block;vertical-align:middle;image-rendering:pixelated}

#viewport{position:fixed;inset:0;background:#000}
#game{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;background:#000}
#cv{position:absolute;left:0;top:0;width:1280px;height:720px;display:block;image-rendering:pixelated}
#hud{position:absolute;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none}
#hud>*{pointer-events:auto}
#hud input,#hud textarea{user-select:text;-webkit-user-select:text}

/* ---------- 공용: 창 프레임 ---------- */
.win,.mmwin,.tr-left,.tr-right{background:linear-gradient(#fbfdfe,#f2f7fa);border:1px solid #79828f;border-radius:5px;box-shadow:inset 0 0 0 1px #ffffff,2px 2px 5px rgba(0,0,0,.45)}
/* 미니맵만 청회색 (기준 화면 실측: 위 #9dc0ce → 아래 #8b9caa) */
.mmwin{background:linear-gradient(#9fc2d0,#8a9ba9)}
.win{position:absolute;display:none;flex-direction:column;font-size:12px;z-index:50}
.win.open{display:flex}
.win.mini .win-body{display:none}
.win-title{height:20px;display:flex;align-items:center;padding:0 3px 0 6px;background:#fdfdff;border:1px solid #9aa6b4;border-radius:3px;cursor:move;user-select:none;margin:3px 3px 0;font-weight:bold;color:#27324a}
.win-btns{margin-left:auto;display:flex;gap:3px}
.wb{width:17px;height:16px;border:1px solid #8b2a22;border-radius:3px;padding:0;position:relative;background:linear-gradient(#ec6258,#c32a20)}
.wb.min::after{content:'';position:absolute;left:3px;right:3px;bottom:2px;height:2px;background:#fff}
.wb.close::before,.wb.close::after{content:'';position:absolute;left:5px;top:2px;width:2px;height:8px;background:#fff;transform:rotate(45deg)}
.wb.close::after{transform:rotate(-45deg)}
.win-body{padding:8px;flex:1}
.panel{background:#fff;border:1px solid #9fb0c7;border-radius:4px}
.pill{display:inline-block;background:linear-gradient(#5f93da,#2f5fb0);color:#fff;border-radius:10px;padding:2px 10px;font-weight:bold;font-size:11px;border:1px solid #1e3f78}
.sechead{background:linear-gradient(#6a9ae0,#2d5fae);color:#fff;border-radius:4px;padding:4px 8px;font-weight:bold;border:1px solid #1e3f78}
.btn{height:21px;padding:0 12px;border:1px solid #8a4a00;border-radius:4px;background:linear-gradient(#ffc45a,#f0901e);font-size:11px;font-weight:bold;color:#3a2000;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.btn.gray{background:linear-gradient(#fff,#cfd8e2);border-color:#7f93ad;color:#2b4a75}
.btn.blue{background:linear-gradient(#7fb0f0,#2f6fd0);border-color:#1e3f78;color:#fff}
.btn.green{background:linear-gradient(#d8f07a,#a8d02a);border-color:#4a6a10}
.btn.red{background:linear-gradient(#f08a7a,#d63a2a);border-color:#7a1a10;color:#fff}
.btn.sm{height:19px;padding:0 7px;font-size:10px}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.vscroll,.mm-scroll{width:20px;background:transparent;border-left:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0}
.vscroll{border:0}
.vscroll .arr,.mm-arrow{width:18px;height:18px;background:linear-gradient(#8fd0ff,#2b7fd8);border:1px solid #17558f;border-radius:4px;color:#fff;font-size:7px;line-height:16px;text-align:center;margin:0}
.vscroll .thumb,.mm-thumb{flex:none;height:56px;width:11px;margin:2px 0 auto;background:linear-gradient(90deg,#eaf6ff,#9cc8ee 40%,#6ba6d8);border:1px solid #5b87ab;border-radius:5px}

/* ---------- 미니맵 ---------- */
.mmwin{position:absolute;left:10px;top:13px;width:220px;overflow:hidden}
.mm-title{height:15px;display:flex;align-items:center;padding:0 2px 0 5px;background:#fdfdff;border:1px solid #9aa6b4;border-radius:3px;margin:5px 5px 0;user-select:none}
.mm-label{font:bold 11px 'Arial',sans-serif;color:#2c3642;letter-spacing:.5px}
.mm-btns{margin-left:auto;display:flex;gap:3px;align-items:center}
.mmb{width:13px;height:13px;border:1px solid #1e3f78;border-radius:2px;padding:0;position:relative;background:linear-gradient(#7fb0f0,#2f6fd0)}
.mmb.blue::after{content:'';position:absolute;left:3px;right:3px;bottom:2px;height:2px;background:#fff}
.mmb.gray{background:linear-gradient(#fff,#c9d3df);border-color:#7f93ad}
.mmb.gray::after{content:'';position:absolute;left:3px;top:3px;right:3px;bottom:3px;border:1.5px solid #5f7ba0}
.mm-world{height:15px;padding:0 7px;border:1px solid #8a4a00;border-radius:8px;background:linear-gradient(#ffc45a,#f0901e);display:flex;align-items:center}
.mm-body{padding:3px 5px 8px;background:transparent}
.mm-head{display:flex;align-items:center;gap:8px;height:58px;margin:4px 0 0;padding-left:3px}
.mm-emblem{width:51px;height:51px;background:#141b36;border:1px solid #070b18;border-radius:2px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.mm-emblem svg{width:47px;height:47px}
.mm-emblem canvas{display:block;image-rendering:pixelated}
.mm-region{font-weight:bold;color:#f2f6fa;font-size:17px;line-height:20px;letter-spacing:-.5px;text-shadow:-1px -1px 0 #38424c,1px -1px 0 #38424c,-1px 1px 0 #38424c,1px 1px 0 #38424c,0 2px 2px rgba(0,0,0,.35)}
.mm-name{color:#eaf0f6;font-size:16px;line-height:19px;margin-top:1px;letter-spacing:-.5px;text-shadow:-1px -1px 0 #38424c,1px -1px 0 #38424c,-1px 1px 0 #38424c,1px 1px 0 #38424c,0 2px 2px rgba(0,0,0,.35)}
.mm-mapwrap{position:relative;background:#6d737a;border:1px solid #8e97a2;box-shadow:inset 0 0 0 3px #fff;height:118px;display:flex;overflow:hidden;padding:5px 3px}
#mmCanvas{display:block;width:202px;height:106px}
.mmwin.collapsed .mm-body{display:none}
.mmwin.big{width:336px}
.mmwin.big #mmCanvas{width:318px;height:106px}

/* ---------- 확성기 ---------- */
#mega{position:absolute;left:50%;top:8px;transform:translateX(-50%);max-width:720px;padding:5px 12px 5px 36px;background:#fff;border:2px solid #2f6fd0;border-radius:6px;font-size:12px;color:#2a5cd8;box-shadow:0 2px 4px rgba(0,0,0,.3);white-space:nowrap}
.mega-icon{position:absolute;left:9px;top:5px;width:20px;height:16px;background:linear-gradient(#ffb63a,#ee8a10);clip-path:polygon(0 30%,50% 0,100% 0,100% 100%,50% 100%,0 70%)}

/* ---------- 채팅 ---------- */
#chat{position:absolute;left:105px;bottom:52px;width:713px}
#chatLog{height:40px;overflow:hidden;background:rgba(26,28,31,.45);border:1px solid rgba(255,255,255,.25);border-right:0;border-radius:4px 0 0 4px;padding:0 12px 3px;font-size:13px;line-height:18px;word-break:break-all;scrollbar-width:thin;text-shadow:1px 1px 0 rgba(0,0,0,.85);display:flex;flex-direction:column;justify-content:center}
#chat.expanded #chatLog{height:120px;overflow-y:auto;background:rgba(0,0,0,.5);border-radius:4px 4px 0 0;border-right:1px solid rgba(255,255,255,.25);padding:4px 8px;display:block;justify-content:flex-start}
#chatLog div{white-space:pre-wrap}
#chat:not(.expanded) #chatLog div{display:none}
#chat:not(.expanded) #chatLog div:last-child{display:block}
.c-all{color:#fff}.c-sys{color:#ff9ae0}.c-wh{color:#9dff9d}.c-mega{color:#9ecbff}.c-party{color:#ffb0a0}
#chatRow{display:none;height:24px;background:#2f3034;border:1px solid #131417;border-radius:0 0 3px 3px;overflow:hidden}
#chat.expanded #chatRow{display:flex}
#chatType{width:58px;border:0;border-right:1px solid #9fb0c7;background:linear-gradient(#fff,#dfe5ec);font-size:11px;padding:0;color:#1f3f7a;font-weight:bold}
#chatIn{flex:1;border:0;background:#f7f4ea;padding:0 6px;font-size:12px;outline:none;min-width:0;color:#1d1d20}
#chatSend{width:50px;border:0;border-left:1px solid #8a4a00;background:linear-gradient(#ffc45a,#f0901e);display:flex;align-items:center;justify-content:center}
#chatLog div{flex:none}

/* ---------- 아이콘 줄 ---------- */
#iconRow{position:absolute;left:818px;right:106px;bottom:52px;height:40px;display:flex;align-items:center;gap:6px;padding:0;background:rgba(26,28,31,.45);border:1px solid rgba(255,255,255,.25);border-left:0;border-radius:0 4px 4px 0}
.ib{width:34px;height:34px;border:2px solid #fdfdfd;border-radius:7px;background:linear-gradient(#5fb0f4,#1876d8 55%,#0f5cb4);padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 1px rgba(0,0,0,.35)}
.ib.cream{background:linear-gradient(#fffefa,#ece7d8)}
.ib.red{background:linear-gradient(#f2565c,#cf1020 55%,#ab0a18)}
.ib:hover{filter:brightness(1.1)}
.ib canvas{display:block}
.ib.chat{width:20px;height:20px;border:1px solid #1d7ba8;border-radius:3px;background:linear-gradient(#bdf0ff,#4cc0ee 55%,#1e9bd2);margin-right:2px;position:relative;flex:none}
.ib.chat::before{content:'';position:absolute;left:8px;top:4px;width:4px;height:12px;background:#fff;border-radius:1px}
.ib.chat::after{content:'';position:absolute;left:4px;top:8px;width:12px;height:4px;background:#fff;border-radius:1px;border:0}
.ib-group{display:flex;gap:4px;align-items:center;height:36px;padding:0 2px;margin-left:auto;background:linear-gradient(#fbfaf8,#dcd7d4);border:1px solid #9a9590;border-radius:4px}
/* 채팅 막대 오른쪽의 작은 위/아래 화살표 두 개 */
.ib-arrows{display:flex;flex-direction:column;gap:1px;flex:none}
.ib-arrows i{width:14px;height:9px;border:1px solid #7f8892;border-radius:2px;background:linear-gradient(#f4f6f8,#cdd3d9);position:relative}
.ib-arrows i::after{content:'';position:absolute;left:4px;top:3px;border:3px solid transparent;border-bottom-color:#4a545e}
.ib-arrows i:last-child::after{border-bottom-color:transparent;border-top-color:#4a545e;top:2px}

/* ---------- 상태바 ---------- */
#status{position:absolute;left:105px;right:106px;bottom:0;height:52px;background:linear-gradient(#b9c4cc 0 2px,#59616a 2px 4px,#39414a 4px 14px,#2f363c 14px 68%,#272e34 100%);border:1px solid #13171b;border-bottom:0;border-radius:5px 5px 0 0;padding:0}
.st-lv{position:absolute;left:9px;top:5px;width:95px;height:42px;display:flex;align-items:center;justify-content:flex-start;gap:4px;padding:0 0 0 7px;background:linear-gradient(#242730,#15171b);border:1px solid #0a0b0d;border-radius:6px;box-shadow:inset 0 1px 0 #4a515b}
.lv-label{font:bold italic 15px Arial,sans-serif;color:#fff;text-shadow:1px 1px 0 #000}
.lv-num{display:flex;align-items:center;background:#0d0f13;border:1px solid #342a12;border-radius:3px;padding:2px 4px;min-height:20px}
.st-name{position:absolute;left:117px;top:5px;width:168px;height:42px;display:flex;flex-direction:column;justify-content:center;color:#fff;font:bold 14px 'Malgun Gothic',sans-serif;line-height:19px;text-shadow:1px 1px 0 #000,-1px 0 0 rgba(0,0,0,.75),0 -1px 0 rgba(0,0,0,.75)}
.st-name #stJob{order:-1;font-size:14px;color:#fff}
.st-bar{position:absolute;top:4px}
.st-bar.hp{left:291px;width:144px}
.st-bar.mp{left:440px;width:139px}
.st-bar.exp{left:583px;width:160px}
.st-label{display:flex;align-items:flex-end;gap:3px;height:21px;margin-bottom:1px;white-space:nowrap}
.bl{font:bold 13px Arial,sans-serif;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.9);line-height:14px}
.st-label span{font:11px Arial,sans-serif;color:#c8ced6;letter-spacing:-.2px;padding-bottom:1px}
.bar{height:18px;border:1px solid #101216;border-radius:4px;background:linear-gradient(#aeb3ba,#d2d6dc 45%,#b6bbc2);box-shadow:inset 0 1px 1px rgba(0,0,0,.22);overflow:hidden;padding:1px}
.bar .fill{height:100%;width:100%;transition:width .2s;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.hp .fill{background:linear-gradient(#ff6a58,#ec2422 48%,#c00f0e)}
.mp .fill{background:linear-gradient(#8ad8ff,#2ba0fc 48%,#0a74d6)}
.exp .fill{background:linear-gradient(#f2ff86,#dff102 48%,#aabf00)}
.exp .bar{background:linear-gradient(#aeb3ba,#d2d6dc 45%,#b6bbc2)}
.bigbtn{position:absolute;top:3px;width:100px;height:46px;border:1px solid #0d1119;border-radius:6px;color:#fff;font:bold 11px Arial,sans-serif;text-shadow:1px 1px 0 rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.5);white-space:nowrap}
.bigbtn:hover{filter:brightness(1.08)}
.bigbtn:active{transform:translateY(1px)}
.bigbtn i{width:30px;height:22px;border-radius:4px;display:block;flex:none}
.bigbtn.cash{left:761px;background:linear-gradient(#e8485c,#cc0a20 55%,#a40016)}
.bigbtn.cash i{background:linear-gradient(#ffd24a,#ee8a10);clip-path:polygon(15% 35%,85% 35%,100% 100%,0 100%);border-radius:0}
.bigbtn.menu{left:863px;background:linear-gradient(#4a9de8,#0f6fd0 55%,#0a55a8)}
.bigbtn.menu i{background:#fff3c0;box-shadow:inset 0 0 0 3px #ffb21a,inset 0 0 0 5px #fff3c0,inset 0 0 0 7px #ffb21a}
.bigbtn.short{left:967px;background:linear-gradient(#4a9de8,#0f6fd0 55%,#0a55a8)}
.bigbtn.short i{background:linear-gradient(#e6f0ff,#9ec3ff);border:2px solid #fff}
.qs{position:absolute;left:968px;top:528px;width:200px;height:104px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:2px;background:linear-gradient(#9ca5af 0 1px,#4e565f 1px 3px,#2b3138 3px 100%);border:1px solid #0c0f12;border-radius:5px;padding:3px}
.qs-slot{position:relative;background:linear-gradient(#ffffff,#f0f3f6);border:1px solid #9aa3ad;border-radius:4px;overflow:hidden;cursor:pointer}
.qs-slot>span{position:absolute;left:3px;top:1px;font:bold 11px Arial,sans-serif;color:#9099a2;text-shadow:1px 1px 0 #fff}
.qs-slot canvas{position:absolute;right:2px;bottom:1px;width:30px;height:30px;image-rendering:pixelated}
.qs-slot .qcnt{position:absolute;left:auto;right:3px;top:1px;font:bold 10px Arial,sans-serif;color:#2b5fd0;text-shadow:1px 1px 0 #fff}
.qs-slot:hover{background:#fff}

/* ---------- 아이템창 ---------- */
.inv-tabs{display:flex;gap:1px;margin:0;border-bottom:4px solid #dd2434}
.inv-tabs button{flex:1;height:27px;border:1px solid #6d7684;border-bottom:0;background:linear-gradient(#eaf1f8,#bccbdb);font:bold 13px 'Malgun Gothic',sans-serif;padding:0;border-radius:4px 4px 0 0;color:#f6f9fc;text-shadow:-1px -1px 0 #5d6874,1px -1px 0 #5d6874,-1px 1px 0 #5d6874,1px 1px 0 #5d6874}
.inv-tabs button.on{background:linear-gradient(#f07b90,#d8283f);border-color:#4a1520;color:#fff;text-shadow:-1px -1px 0 #8d1626,1px -1px 0 #8d1626,-1px 1px 0 #8d1626,1px 1px 0 #8d1626}
.inv-wrap{display:flex;gap:4px;margin-top:5px}
.inv-grid{display:grid;grid-template-columns:repeat(4,48px);grid-auto-rows:45px;align-content:start}
/* 아이템 칸 — 실제 클라이언트처럼 베이지 바탕에 빈 칸은 회색 타원 */
.slot{position:relative;background:#eceed9;border:1px solid #b9b7a6;border-radius:2px;box-shadow:inset 1px 1px 0 #fbfcf2,inset -1px -1px 0 rgba(160,158,140,.4);display:flex;align-items:center;justify-content:center;width:42px;height:42px;cursor:pointer}
.inv-grid .slot{width:48px;height:45px}
.slot.empty{cursor:default}
.slot.empty::after{content:'';width:20px;height:9px;border-radius:50%;background:linear-gradient(#cdc9bc,#e4e1d6);box-shadow:0 1px 0 rgba(255,255,255,.8)}
.slot canvas{image-rendering:pixelated;display:block}
.slot .qty{position:absolute;right:2px;bottom:1px;font-size:10px;color:#222;text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 2px #fff}
.slot:not(.empty):hover{background:#fffdf6}
/* 실제 클라이언트식 아이템 칸 격자 — 낱개 칸이 1px 격자선으로 나뉘고 빈 칸에는 회색 타원 (교환창·아이템창·창고 공통) */
.tr-grid,.inv-grid{gap:1px;background:#dedcc9;border:1px solid #b2b0a0;border-radius:1px;padding:1px;box-shadow:inset 1px 1px 2px rgba(90,86,74,.18)}
.tr-grid .slot,.inv-grid .slot{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
.tr-grid .slot:not(.empty),.inv-grid .slot:not(.empty){background:#f2f4e2;box-shadow:inset 1px 1px 0 #fdfef5,inset -1px -1px 0 rgba(160,158,140,.4)}
/* 기준 화면의 아이템창 빈 칸은 아무 표식이 없다 (회색 타원은 교환창에만) */
.inv-grid .slot.empty::after{display:none}
.meso-row{display:flex;align-items:center;gap:5px;margin-top:7px}
.meso-label{font-size:13px;color:#1c2736;font-weight:bold}
.coin{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe680,#e8b52a 60%,#a8760e);border:1px solid #6b4a12;display:inline-block;flex:none}
.coin.gray{background:radial-gradient(circle at 40% 35%,#f4f4f4,#bdbdbd 60%,#7a7a7a);border-color:#555}
.meso-num{flex:1;height:24px;line-height:22px;background:#fff;border:1px solid #9aa6b4;border-radius:3px;text-align:right;padding:0 6px;font:bold 15px 'Malgun Gothic',sans-serif;color:#1a1a1a}

/* ---------- 캐릭터 정보 / 장비 ---------- */
.stat-top{display:flex;gap:8px;align-items:flex-start}
.stat-top canvas,#eqPortrait{background:linear-gradient(#bfe3f7,#e9f6fd);border:1px solid #9fb0c7;border-radius:4px;flex:none}
.stat-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #9fb0c7}
.stat-table td{padding:3px 6px;border-bottom:1px solid #e6ecf2;font-size:11px}
.stat-table td:first-child{color:#fff;width:64px;background:linear-gradient(#5f93da,#2f5fb0);font-weight:bold}
.ap-btn{width:18px;height:16px;padding:0;font-size:11px;line-height:12px;margin-left:8px;background:linear-gradient(#ffc45a,#f0901e);border:1px solid #8a4a00;border-radius:3px;font-weight:bold}
.eq-wrap{display:flex;gap:10px}
.eq-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.eq-label{width:34px;font-size:11px;color:#2b4a75;font-weight:bold}

/* ---------- 스킬 / 퀘스트 / 친구 / 도움말 / 설정 ---------- */
.skill-row{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #c9d3df;border-radius:4px;padding:6px;margin-bottom:5px}
.skill-row canvas{width:30px;height:30px;background:#eef1f5;border:1px solid #b9c5d3;border-radius:3px;flex:none;image-rendering:pixelated}
.q-empty{background:#fff;border:1px solid #c9d3df;padding:14px;text-align:center;line-height:18px}
.q-row{background:#fff;border:1px solid #c9d3df;padding:8px;line-height:18px}
.q-ready{color:#c0392b;font-weight:bold}.q-done{color:#1e8a1e;font-weight:bold}
.friend-list{max-height:320px;overflow-y:auto;background:#fff;border:1px solid #9fb0c7}
.friend-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-bottom:1px solid #e6ecf2}
.friend-row>span{flex:1}
.help-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #9fb0c7}
.help-table td{padding:3px 8px;border-bottom:1px solid #e6ecf2;font-size:11px}
.help-table td:first-child{width:130px;background:#eef2f6}
.set-row{margin:6px 0;display:flex;align-items:center;gap:8px}
.set-row label{display:flex;align-items:center;gap:6px}
#winMenu .win-body{padding:4px}
#winMenu .mi{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #dfe5ec;background:#fff;padding:6px 10px;font-size:12px}
#winMenu .mi:hover{background:#ffd27a}
.world-wrap{position:relative;height:200px;background:#8fcdf3;border:1px solid #6f7d8e;border-radius:4px;overflow:hidden}
.world-node{position:absolute;width:110px;padding:8px 0;text-align:center;background:#fff;border:2px solid #2f6fd0;border-radius:20px;font-weight:bold;cursor:pointer;user-select:none}
.world-node:hover{background:#ffe680}
.world-line{position:absolute;height:4px;background:#2f6fd0}

/* ---------- 미용실 ---------- */
.look-wrap{display:flex;gap:12px}
.look-preview{background:linear-gradient(#bfe3f7,#e9f6fd);border:1px solid #9fb0c7;border-radius:4px;flex:none}
.look-opts{flex:1}
.look-row{display:flex;align-items:center;gap:6px;margin:5px 0;font-size:11px;flex-wrap:wrap}
.look-row label{width:44px;color:#2b4a75;font-weight:bold;flex:none}
.look-row input{height:20px;border:1px solid #9fb0c7;padding:0 6px;width:140px}
.sw{display:inline-block;width:18px;height:18px;border:1px solid #333;border-radius:3px;margin:1px;cursor:pointer;vertical-align:middle}
.sw.on{outline:2px solid #ee8a1a}

/* ---------- NPC 대화 ---------- */
.npc-body{display:flex;gap:10px}
.npc-portrait{width:130px;text-align:center;flex:none}
.npc-portrait canvas{width:120px;height:120px;background:linear-gradient(#bfe3f7,#e9f6fd);border:1px solid #9fb0c7;border-radius:4px}
.npc-name{margin-top:4px;background:linear-gradient(#5f93da,#2f5fb0);color:#fff;border-radius:3px;font-size:11px;padding:2px;border:1px solid #1e3f78}
.npc-text{flex:1;background:#fff;border:1px solid #9fb0c7;border-radius:4px;padding:8px;min-height:130px;line-height:18px}
.npc-opts{margin-top:8px}
.npc-opt{display:block;color:#1a3fd0;text-decoration:underline;cursor:pointer;margin:3px 0}
.npc-opt:hover{color:#c0392b}
.npc-btns{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}

/* ---------- 상점 / 창고 ---------- */
.shop-head{display:flex;align-items:center;margin-bottom:6px;font-size:11px;color:#2b4a75}
.shop-tabs{margin-left:auto;display:flex;gap:2px}
.shop-tabs button{height:19px;padding:0 10px;border:1px solid #8fa1b8;background:linear-gradient(#e9eef4,#c9d3df);font-size:11px;border-radius:3px;color:#2b4a75}
.shop-tabs button.on{background:#fff;font-weight:bold;color:#111}
.shop-list{max-height:300px;overflow-y:auto;background:#fff;border:1px solid #9fb0c7}
.shop-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-bottom:1px solid #e6ecf2}
.shop-row canvas{width:28px;height:28px;background:#eef1f5;border:1px solid #b9c5d3;border-radius:3px;image-rendering:pixelated;flex:none}
.shop-row .nm{flex:1}
.shop-row .pr{color:#c0392b;width:92px;text-align:right;white-space:nowrap}
.stor-title{font-weight:bold;margin-bottom:4px;color:#2b4a75}
.stor-grid{grid-template-columns:repeat(4,42px)}

/* ---------- 교환창 (기준 스크린샷: 3x3 칸 · 왼쪽만 수수료표까지) ---------- */
.tradewin{background:transparent;border:0;box-shadow:none}
.tradewin .win-body{padding:0;background:transparent}
.tr-wrap{display:flex;align-items:flex-start;gap:0}
.tr-left,.tr-right{
  background:#f3f5f7;
  border:1px solid #8d97a3;
  box-shadow:inset 0 0 0 1px #ffffff, 1px 2px 2px rgba(0,0,0,.28);
}
.tr-left{width:404px;padding:7px 9px 10px;border-radius:3px 0 0 3px}
.tr-right{width:336px;padding:7px 8px 8px;border-left:0;border-radius:0 3px 3px 0}
.tr-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  height:146px;background:#f4f2ea;border:1px solid #d0cbbf;border-radius:2px;
  padding:2px 2px 0;box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7);
}
.tr-char{width:150px;text-align:center;position:relative}
.tr-char canvas{display:block;margin:0 auto;width:146px;height:124px}
.tr-plate{
  display:inline-block;min-width:64px;max-width:140px;margin:-1px auto 0;padding:1px 12px 2px;
  background:linear-gradient(#24508c,#16356e);color:#fff;border:1px solid #0c244c;border-radius:1px;
  font:bold 12px 'Malgun Gothic',Dotum,sans-serif;letter-spacing:.2px;line-height:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.tr-plate.other{background:linear-gradient(#8ec4fb,#5aa0ea);border-color:#2f74c4;color:#fff}
.tr-mid{display:flex;flex-direction:column;align-items:center;gap:5px;padding-bottom:28px;flex:none}
.tr-btn{width:74px;height:18px;border-radius:2px;font:bold 11px 'Malgun Gothic',Dotum,sans-serif;padding:0}
.tr-grids{display:flex;justify-content:space-between;margin-top:6px;padding:0 2px}
.tr-grid{display:grid;grid-template-columns:repeat(3,46px);grid-auto-rows:42px;gap:1px;background:#cfcab8;border:1px solid #b7b29f;padding:1px;border-radius:0}
.tr-grid .slot.empty::after{display:block;width:22px;height:7px;border-radius:50%;background:linear-gradient(#bdb8a8,#d4d0c4);box-shadow:inset 0 1px 0 rgba(90,80,60,.25)}
.tr-mesos{display:flex;justify-content:space-between;margin-top:5px;padding:0 1px;gap:10px}
.tr-meso{width:186px;display:flex;flex-direction:column;gap:2px}
.tr-mrow{display:flex;align-items:center;gap:4px}
.tr-coin{width:16px;height:16px;flex:none;image-rendering:pixelated}
.tr-mrow input,.tr-mrow .ro{
  flex:1;height:20px;border:1px solid #b7bec6;background:#fff;text-align:right;padding:0 6px;
  font:13px 'Malgun Gothic',Dotum,sans-serif;color:#1a1a1a;line-height:18px;letter-spacing:.3px;
  font-variant-numeric:tabular-nums;min-width:0;
}
.tr-fee{
  margin-top:8px;background:#f3f0e6;border:1px solid #cfc9ba;border-radius:3px;
  padding:8px 16px 10px;box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(170,160,140,.28);
}
.tr-fee p{margin:0 0 7px;line-height:16px;font-size:12px;color:#3a342c;text-align:center;word-break:keep-all}
.tr-fee table{width:100%;border-collapse:collapse;background:#fff}
.tr-fee th,.tr-fee td{border:1px solid #c9c3b4;padding:0 8px;height:18px;font-size:12px;font-weight:normal;text-align:center;color:#333}
.tr-fee th{color:#d41818;background:#fff}
.tr-logwrap{display:flex;height:292px;background:#fff;border:1px solid #c5ccd3;border-radius:1px}
.tr-log{flex:1;min-width:0;overflow-y:auto;padding:4px 6px;font-size:12px;line-height:16px;scrollbar-width:none}
.tr-log::-webkit-scrollbar{display:none}
.tr-log .sys{color:#d2258e}
.tr-logwrap .vscroll{flex:none;border:0;border-left:1px solid #d5dbe2;border-radius:0;width:16px;background:#f4f6f8}
.tr-chatrow{display:flex;gap:4px;align-items:center;margin-top:6px}
.tr-chatrow input{flex:1;height:22px;border:1px solid #b7bec6;padding:0 6px;font-size:12px;min-width:0;background:#fff}
.tr-face{width:26px;height:22px;flex:none;position:relative}
.tr-enter{width:54px;height:22px;flex:none;display:flex;align-items:center;justify-content:center}

/* ---------- 툴팁 / 컨텍스트 / 토스트 ---------- */
#tooltip{position:absolute;z-index:1000;background:rgba(20,24,32,.93);color:#fff;border:1px solid #8fa1b8;border-radius:4px;padding:6px 8px;font-size:11px;max-width:230px;pointer-events:none;line-height:15px}
#tooltip b{display:block;font-size:12px;margin-bottom:3px}
#tooltip .d{color:#cfd9e4}
#ctxMenu{position:absolute;z-index:900;background:#dfe5ec;border:1px solid #37527d;border-radius:4px;box-shadow:2px 3px 6px rgba(0,0,0,.4);min-width:130px;padding:2px}
#ctxMenu .hd{background:linear-gradient(#5f93da,#2f5fb0);color:#fff;padding:4px 8px;font-size:11px;border-radius:3px 3px 0 0}
#ctxMenu .hd .d{color:#cfe0ff}
#ctxMenu button{display:block;width:100%;text-align:left;border:0;background:none;padding:5px 8px;font-size:12px}
#ctxMenu button:hover{background:#ffd27a}
#toast{position:absolute;left:50%;top:150px;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#ffe680;padding:8px 18px;border-radius:6px;font-size:13px;border:1px solid #ffe680;z-index:1100;white-space:nowrap}

/* ---------- 장비창 / 아이템 도감 ---------- */
.eq-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;flex:1}
.eq-row{margin-bottom:0}
.db-head{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.db-head input[type=text],.db-head input:not([type]){flex:1;min-width:160px;height:22px;border:1px solid #9fb0c7;padding:0 6px;font-size:12px}
.db-head select{height:22px;border:1px solid #9fb0c7;font-size:11px;background:#fff}
.db-list{height:330px;overflow-y:auto;background:#fff;border:1px solid #9fb0c7}
.db-foot{display:flex;align-items:center;gap:8px;margin-top:6px}
.db-pages{display:flex;align-items:center;gap:6px;margin-left:auto}
.db-foot .meso-num{flex:none;width:120px}

/* ---------- 편집 모드 ---------- */
#editBar{position:absolute;left:284px;top:8px;display:flex;gap:5px;align-items:center;background:#dfe5ec;border:1px solid #37527d;border-radius:6px;padding:4px 8px;box-shadow:inset 0 0 0 1px #fff,2px 2px 5px rgba(0,0,0,.4);z-index:80;white-space:nowrap}
#editBar[hidden]{display:none}
#editBar .eb-title{font-weight:bold;color:#c0392b;margin-right:4px}
#editBar button,#editBar .eb-file{height:22px;padding:0 9px;border:1px solid #37527d;border-radius:4px;background:linear-gradient(#fff,#cfd8e2);font-size:11px;font-weight:bold;color:#1f3f7a;cursor:pointer;display:inline-flex;align-items:center}
#editBar select{height:22px;border:1px solid #9fb0c7;font-size:11px}
#editBar .eb-exit{background:linear-gradient(#ffc45a,#f0901e);border-color:#8a4a00;color:#3a2000}
#editBar button:hover,#editBar .eb-file:hover{filter:brightness(1.06)}
body.editing #cv{cursor:crosshair}
body.editing .slot.editable{outline:1px dashed #c0392b;cursor:pointer}
body.editing [contenteditable="true"]{outline:1px dashed #c0392b;outline-offset:1px}
.ed-sec{background:#fff;border:1px solid #c9d3df;border-radius:4px;padding:6px;margin-bottom:6px}
.ed-sec h4{margin:0 0 5px;font-size:11px;color:#1f3f7a;border-bottom:1px solid #dfe5ec;padding-bottom:3px}
.ed-row{display:flex;align-items:center;gap:5px;margin:3px 0;font-size:11px;flex-wrap:wrap}
.ed-row label{width:58px;color:#2b4a75;font-weight:bold;flex:none}
.ed-row input[type=text],.ed-row input[type=number],.ed-row textarea,.ed-row select{flex:1;min-width:60px;height:20px;border:1px solid #9fb0c7;padding:0 5px;font-size:11px;font-family:inherit}
.ed-row textarea{height:44px;resize:vertical;padding:3px 5px}
.ed-row .btn.sm{height:18px}
.ed-item{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.ed-item canvas{width:22px;height:22px;background:#eef1f5;border:1px solid #b9c5d3;border-radius:3px;flex:none}
.ed-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-list{height:220px;overflow-y:auto;background:#fff;border:1px solid #9fb0c7;margin-top:4px}
.pk-row{display:flex;align-items:center;gap:6px;padding:3px 6px;border-bottom:1px solid #eef1f5;cursor:pointer;font-size:11px}
.pk-row:hover{background:#ffe9b8}
.pk-row canvas{width:24px;height:24px;flex:none}
.pk-row .d{margin-left:auto;white-space:nowrap}
.ed-chatline{display:flex;gap:4px;align-items:center;margin:2px 0}
.ed-chatline select{width:70px;height:20px;font-size:11px}
.ed-chatline input{flex:1;height:20px;border:1px solid #9fb0c7;padding:0 5px;font-size:11px}
body.editing #mega{top:44px}
.ed-inline{position:absolute;z-index:1200;max-width:240px;background:#fff;border:2px solid #ff3030;border-radius:5px;padding:4px 8px;font-size:11px;line-height:14px;color:#000;white-space:pre-wrap;word-break:break-all;outline:none;box-shadow:0 2px 6px rgba(0,0,0,.35)}

/* ---------- 메이플 마켓 (경매장) ---------- */
.mkwin{overflow:visible}
.mk-owl{position:absolute;right:26px;top:-62px;width:68px;height:68px;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.mk-search{display:flex;align-items:center;gap:5px;margin-bottom:6px}
.mk-lens{width:16px;height:16px;border-radius:50%;border:2px solid #37527d;position:relative;flex:none}
.mk-lens::after{content:'';position:absolute;left:10px;top:11px;width:7px;height:3px;background:#37527d;transform:rotate(45deg)}
.mk-search > input{flex:1;height:22px;border:1px solid #9fb0c7;padding:0 6px;font-size:12px;min-width:80px}
.mk-exact input{flex:none;width:auto;margin:0}
.mk-search .meso-num{flex:none;width:110px}
.mk-exact{font-size:11px;color:#2b4a75;white-space:nowrap;display:flex;align-items:center;gap:3px}
.mk-orange{background:linear-gradient(#ffc45a,#f0901e);border-color:#8a4a00;color:#3a2000}
.mk-pink{background:linear-gradient(#ff9ac4,#e8478a);border-color:#8a1a4a;color:#fff}
.mk-blue{background:linear-gradient(#7fb0f0,#2f6fd0);border-color:#1e3f78;color:#fff}
.mk-tabs{display:flex;gap:2px;border-bottom:2px solid #d8392b;margin-bottom:4px}
.mk-tabs button{height:22px;padding:0 14px;border:1px solid #9fb0c7;border-bottom:0;border-radius:5px 5px 0 0;background:linear-gradient(#f4f6f8,#cfd8e2);font-size:11px;font-weight:bold;color:#2b4a75}
.mk-tabs button.on{background:linear-gradient(#ff9ac4,#e8478a);border-color:#8a1a4a;color:#fff}
.mk-head{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#6a9ae0,#2d5fae);color:#fff;font-weight:bold;border:1px solid #1e3f78;border-radius:4px;padding:3px 8px;font-size:12px}
.mk-cols{display:grid;grid-template-columns:44px 1fr 130px 100px;gap:6px;padding:3px 6px;font-size:11px;color:#2b4a75;background:#eef2f6;border:1px solid #c9d3df;border-top:0;text-align:center}
.mk-cols span{cursor:pointer;grid-column:span 1}
.mk-cols span:first-child{grid-column:1 / span 2}
.mk-cols span.on{color:#c0392b;font-weight:bold}
.mk-cols span i{font-style:normal;font-size:9px}
.mk-list{height:296px;overflow-y:auto;background:#fff;border:1px solid #9fb0c7}
.mk-row{display:grid;grid-template-columns:44px 1fr 130px 100px;gap:6px;align-items:center;padding:3px 6px;border-bottom:1px solid #e6ecf2;font-size:12px;cursor:pointer;position:relative;min-height:36px}
.mk-row:nth-child(even){background:#f4f8fc}
.mk-row:hover{background:#fff3d6}
.mk-row.sel{background:#ffe1a8;outline:1px solid #f0901e}
.mk-row.mine .mk-name{color:#1a3fd0}
.mk-ic{width:36px;height:36px;background:#eef1f5;border:1px solid #b9c5d3;border-radius:3px;display:flex;align-items:center;justify-content:center}
.mk-ic canvas{image-rendering:pixelated}
.mk-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-name small{color:#5b6b80;font-size:10px}
.mk-who{display:block;color:#8a96a8;font-size:10px}
.mk-price{text-align:right;line-height:13px}
.mk-price b{color:#1a3fd0;font-size:12px;display:block}
.mk-price i{color:#1e8a1e;font-style:normal;font-size:10px}
.mk-time{text-align:center;color:#333;font-size:11px}
.mk-edit{position:absolute;right:6px;top:2px;color:#c0392b;font-size:11px}
.mk-empty,.mk-pad{padding:14px;text-align:center;color:#5b6b80}
.mk-addrow{padding:6px;text-align:center;color:#c0392b;font-weight:bold;cursor:pointer;background:#fff7e6;border-top:1px dashed #c0392b}
.mk-foot{display:flex;align-items:center;gap:6px;margin-top:6px}
.mk-pages{margin-left:auto;margin-right:auto;font-size:12px;display:flex;gap:4px;align-items:center}
.mk-pages a{cursor:pointer;color:#1f3f7a;padding:0 2px}
.mk-pages a.on{color:#c0392b;font-weight:bold}
.mk-pages span{color:#9fb0c7}
.mk-sub-head{background:linear-gradient(#6a9ae0,#2d5fae);color:#fff;font-weight:bold;padding:3px 8px;font-size:11px}
.mk-buy{color:#1e8a1e}.mk-sell{color:#c0392b}
.mk-row.hist,.mk-row.mine{cursor:default}
.mk-regwrap{padding:6px}
.mk-inv{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0;max-height:150px;overflow-y:auto;background:#f6f8fa;border:1px solid #c9d3df;padding:4px}
.mk-invslot{position:relative;width:40px;height:40px;background:#eef1f5;border:1px solid #b9c5d3;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mk-invslot.sel{outline:2px solid #e8478a}
.mk-invslot .qty{position:absolute;right:2px;bottom:1px;font-size:10px;text-shadow:0 0 2px #fff,0 0 2px #fff}
.mk-regrow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:6px 0}
.mk-regrow input{width:110px;height:22px;border:1px solid #9fb0c7;padding:0 5px;font-size:12px}
.mk-editrow{padding:6px}
.mk-adv-head{background:linear-gradient(#6a9ae0,#2d5fae);color:#fff;font-weight:bold;padding:4px 8px;border-radius:4px;border:1px solid #1e3f78;margin-bottom:6px;font-size:12px}
.mk-arow{display:flex;align-items:center;gap:4px;margin:4px 0}
.mk-pill{display:inline-block;background:linear-gradient(#ff9ac4,#e8478a);color:#fff;font-size:10px;font-weight:bold;border-radius:9px;padding:2px 7px;white-space:nowrap;min-width:64px;text-align:center;border:1px solid #8a1a4a}
.mk-arow select,.mk-arow input{flex:1;min-width:0;height:20px;border:1px solid #9fb0c7;font-size:11px;padding:0 4px;background:#fff}
.mk-tilde{color:#5b6b80}
.mk-adv-sub{display:flex;align-items:center;gap:6px;margin:8px 0 4px;font-size:11px}
.mk-adv-sub label{display:flex;align-items:center;gap:2px}
.mk-stat{display:flex;gap:4px;margin:3px 0}
.mk-stat select{flex:1;height:20px;border:1px solid #9fb0c7;font-size:11px;background:#fff}
.mk-stat input{width:60px;height:20px;border:1px solid #9fb0c7;font-size:11px;padding:0 4px}
.mk-adv-foot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px}
.mk-adv-foot label{flex:1;display:flex;align-items:center;gap:3px}

/* ---------- 월드 맵 창 ---------- */
.wm-head{display:flex;gap:5px;align-items:center;margin-bottom:5px}
.wm-head input#wmQ{flex:1;height:20px;border:1px solid #9fb0c7;padding:0 6px;font-size:11px;min-width:0}
.wm-head select{height:20px;border:1px solid #9fb0c7;font-size:11px}
.wm-head label{display:flex;align-items:center;gap:3px;white-space:nowrap}
.wm-list{height:300px;overflow-y:auto;background:#fff;border:1px solid #9fb0c7;border-radius:2px}
.wm-row{display:flex;align-items:center;gap:6px;padding:2px 6px;font-size:11px;cursor:pointer;border-bottom:1px solid #eef1f5}
.wm-row:hover{background:#dfeaff}
.wm-row.on{background:#ffe9b0}
.wm-row.off{color:#98a4b4;cursor:default}
.wm-row.off:hover{background:#fff}
.wm-area{flex:none;width:62px;color:#2b4a75;font-weight:bold}
.wm-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-id{flex:none;width:72px;text-align:right;color:#8794a6}
.wm-st{flex:none;width:44px;text-align:right;color:#c0392b}
.wm-foot{margin-top:5px}

/* ============================================================
   게임 옆 설정 패널 — 게임 화면 밖(오른쪽)에 붙는다.
   패널이 열리면 ui.js 의 fit() 이 그만큼 뺀 영역에 게임을 다시 맞춘다.
   ============================================================ */
:root{--panel-w:360px}
#sidePanel{position:fixed;right:0;top:0;bottom:0;width:var(--panel-w);background:#dfe5ec;border-left:2px solid #1f3f7a;box-shadow:-3px 0 8px rgba(0,0,0,.5);display:none;flex-direction:column;z-index:2000;font-size:12px;color:#222}
body.panel-on #sidePanel{display:flex}
#spOpen{position:fixed;right:8px;top:8px;z-index:2001;opacity:.82;transform:scale(.88);transform-origin:100% 0}
#spOpen:hover{opacity:1}
body.panel-on #spOpen{display:none}
.sp-head{height:28px;display:flex;align-items:center;padding:0 6px 0 9px;background:linear-gradient(#ffffff,#cfd8e2);border-bottom:1px solid #9fb0c7;font-weight:bold;color:#1f3f7a;flex:none}
.sp-title{flex:1}
.sp-x{width:20px;height:20px;padding:0;border:1px solid #8d3c07;background:linear-gradient(#ffc97e,#ef922b);color:#5a2405;font-weight:bold;line-height:16px;cursor:pointer}
.sp-body{flex:1;overflow-y:auto;padding:8px}
.sp-foot{flex:none;display:flex;gap:6px;padding:7px 8px;border-top:1px solid #9fb0c7;background:#cfd8e2}
.sp-sec{background:#fff;border:1px solid #9fb0c7;border-radius:3px;margin-bottom:8px;overflow:hidden}
.sp-sec > h4{margin:0;padding:5px 8px;background:linear-gradient(#6a9ae0,#2d5fae);color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}
/* 접기 화살표는 CSS 삼각형으로 — 글꼴 글리프는 크기가 들쭉날쭉하다 */
.sp-sec > h4::before{content:'';width:0;height:0;flex:none;border:4px solid transparent;border-top-color:#fff;margin-top:4px}
.sp-sec.closed > h4::before{border-top-color:transparent;border-left-color:#fff;margin:0 0 0 2px}
.sp-sec.closed .sp-c{display:none}
.sp-c{padding:7px 8px}
.sp-row{display:flex;align-items:center;gap:6px;margin:4px 0}
.sp-row > label{width:76px;flex:none;color:#2b4a75;font-weight:bold;font-size:11px}
.sp-row input[type=text],.sp-row input[type=number],.sp-row select{flex:1;min-width:0;height:22px;border:1px solid #9fb0c7;padding:0 5px;font-family:inherit;font-size:12px;background:#fff}
.sp-row input[type=range]{flex:1;min-width:0;height:20px}
.sp-row input[type=checkbox]{width:16px;height:16px;flex:none;margin:0}
.sp-row input[type=color]{width:36px;height:22px;padding:0;border:1px solid #9fb0c7;flex:none;background:#fff}
.sp-row .d{flex:none}
.sp-list{max-height:250px;overflow-y:auto;border:1px solid #c9d3df;background:#fff}
.sp-item{display:flex;align-items:center;gap:5px;padding:3px 5px;border-bottom:1px solid #eef1f5}
.sp-item:last-child{border-bottom:0}
.sp-item > canvas{width:28px;height:28px;flex:none;image-rendering:pixelated;background:#f6f4ee;border:1px solid #c9c4b6;cursor:pointer}
.sp-item .nm{flex:1;min-width:0;height:20px;border:1px solid #cfd8e2;padding:0 4px;font-size:11px;font-family:inherit}
.sp-item .qt{width:62px;height:20px;border:1px solid #cfd8e2;padding:0 4px;font-size:11px;text-align:right;font-family:inherit}
.sp-item .idx{width:16px;flex:none;color:#8a96a8;font-size:10px;text-align:right}
.sp-tabs{display:flex;gap:2px;margin-bottom:5px}
.sp-tabs .btn{flex:1;padding:0 4px}
.sp-hint{color:#5b6b80;font-size:11px;line-height:15px;margin:0 0 6px}
.sp-empty{padding:12px;text-align:center;color:#8a96a8;font-size:11px}
/* ---------- 아이템창 (기준: 창 230,30~466,414 / 격자 241,96~433,366 / 스크롤 437~457) ---------- */
#winInv{width:236px}
#winInv .win-body{padding:4px 3px 5px}
#winInv .inv-wrap{gap:0;padding:0 5px 0 7px}
#winInv .meso-row{margin:7px 5px 0 7px}

/* ---------- 퀘스트 알림이 (기준 화면 795,48 ~ 1055,72) ---------- */
#questBar{position:absolute;left:795px;top:48px;width:260px;height:26px;display:flex;align-items:center;gap:5px;padding:0 3px 0 4px;background:linear-gradient(#fdfeff,#dde5ec);border:1px solid #8e99a6;border-radius:5px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.3)}
.qb-icon{width:18px;height:18px;flex:none;border:1px solid #6d7a4a;border-radius:3px;background:linear-gradient(#e6f08a,#9dbb2e);box-shadow:inset 0 0 0 2px #f7fbd8}
.qb-text{font:bold 13px 'Malgun Gothic',sans-serif;color:#2b3340;white-space:nowrap}
.qb-auto{height:15px;margin-left:auto;padding:0 5px;border:1px solid #8a4a00;border-radius:3px;background:linear-gradient(#ffc45a,#ef8c18);font:bold 9px Arial,sans-serif;color:#5a2800}
.qb-b{width:16px;height:16px;flex:none;border:1px solid #1d7ba8;border-radius:3px;background:linear-gradient(#bdf0ff,#43b6e8);position:relative;padding:0}
.qb-b.min::after{content:'';position:absolute;left:3px;right:3px;top:6px;height:3px;background:#fff}
.qb-b.close::before,.qb-b.close::after{content:'';position:absolute;left:6px;top:3px;width:2px;height:8px;background:#fff;transform:rotate(45deg)}
.qb-b.close::after{transform:rotate(-45deg)}

/* ---------- 우상단 버튼 2개 (기준 화면 1150,18 / 1212,18) ---------- */
#sysBtns{position:absolute;right:8px;top:12px;display:flex;gap:8px}
.sysb{width:50px;height:52px;border:0;border-radius:11px;background:rgba(92,104,114,.62);position:relative;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.sysb:hover{background:rgba(92,104,114,.8)}
.sysb.people::before{content:'';position:absolute;left:14px;top:13px;width:12px;height:12px;border-radius:50%;background:#fff}
.sysb.people::after{content:'';position:absolute;left:11px;top:26px;width:18px;height:13px;border-radius:9px 9px 3px 3px;background:#fff;box-shadow:12px -9px 0 -3px #fff,9px 1px 0 -2px #fff}
.sysb.more::before{content:'';position:absolute;left:11px;top:12px;width:28px;height:28px;border:3px solid #fff;border-radius:50%}
.sysb.more::after{content:'';position:absolute;left:18px;top:24px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:7px 0 0 #fff,14px 0 0 #fff}
.sysb.out::before{content:'';position:absolute;left:11px;top:14px;width:14px;height:20px;border:2px solid #fff;border-radius:1px}
.sysb.out::after{content:'';position:absolute;left:22px;top:22px;width:16px;height:3px;background:#fff;box-shadow:10px -4px 0 -1px #fff,10px 4px 0 -1px #fff}

/* ==========================================================================
   실제 클라이언트 맞춤 (기준: 메이플랜드 v62 플레이 스크린샷 — ref/maple-land/)
   채팅창 · 툴팁 · 캐릭터 스탯 · 스킬창 · 장비창 · NPC 대화창
   ========================================================================== */

/* ---------- 채팅창 ----------
   실제 화면: 로그 배경은 투명하고, **일반 채팅 줄만 분홍 띠**가 깔린다.
   시스템/귓속말/획득 메시지는 띠 없이 장면 위에 바로 얹힌다. 글씨는 검정 + 흰 외곽선. */
#chat.expanded #chatLog{
  height:102px;padding:0 16px 0 0;background:none;border:0;border-radius:0;
  display:block;overflow-y:auto;overflow-x:hidden;
  font:13px 'Dotum','돋움','Malgun Gothic',sans-serif;line-height:17px;
  text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff;
  scrollbar-width:none;
}
#chat.expanded #chatLog::-webkit-scrollbar{width:0}
#chat.expanded #chatLog div{
  padding:0 8px;min-height:17px;color:#181818;white-space:pre-wrap;word-break:break-all;
}
/* 일반 채팅(다른 유저 말) — 분홍 띠 */
#chat.expanded #chatLog .c-all,
#chat.expanded #chatLog .c-mega{background:rgba(240,180,200,.86)}
#chat.expanded #chatLog .c-all{color:#181818}
#chat.expanded #chatLog .c-sys{color:#181818}
#chat.expanded #chatLog .c-wh{color:#0d5f10}          /* 귓속말 — 초록 */
#chat.expanded #chatLog .c-party{color:#8a3b00}       /* 파티 — 갈색 */
#chat.expanded #chatLog .c-mega{color:#7a0d5f}        /* 확성기 — 자주 */
/* 채널 뱃지 · 메달 아이콘 */
.ch-badge{display:inline-block;height:12px;line-height:12px;padding:0 3px;margin:0 2px;border:1px solid #b34a6a;border-radius:2px;
  background:linear-gradient(#f79ab6,#e0537e);color:#fff;font:bold 9px Arial,sans-serif;vertical-align:1px;text-shadow:none}
.ch-medal{display:inline-block;width:11px;height:11px;margin-right:2px;border:1px solid #8c2a12;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd9a0,#e8641c 60%,#b8390a);vertical-align:-1px;text-shadow:none}

/* 로그 오른쪽 스크롤바 (실제 화면의 파란 화살표 2개 + thumb) */
#chatScroll{position:absolute;right:0;top:0;width:15px;height:102px;display:none;flex-direction:column;
  background:rgba(228,233,238,.75);border:1px solid #8ea0b2;border-radius:2px;box-sizing:border-box}
#chat.expanded #chatScroll{display:flex}
#chatScroll .cs-btn{height:14px;flex:none;border:1px solid #2f6f9e;border-radius:2px;margin:1px;padding:0;
  background:linear-gradient(#bfe8fb,#4aa8dd);position:relative;cursor:pointer}
#chatScroll .cs-btn::after{content:'';position:absolute;left:3px;top:4px;border-left:3px solid transparent;border-right:3px solid transparent}
#chatScroll .cs-btn.up::after{border-bottom:4px solid #fff}
#chatScroll .cs-btn.dn::after{border-top:4px solid #fff}
#chatScroll .cs-track{flex:1;margin:0 2px;position:relative}
#chatScroll .cs-thumb{position:absolute;left:0;right:0;top:0;height:34px;border:1px solid #2f6f9e;border-radius:2px;
  background:linear-gradient(90deg,#cfeeff,#5cb4e4)}

/* 입력 줄 — 흰 바탕 + 왼쪽 남색 이름칸 */
#chat.expanded #chatRow{height:40px;align-items:center;padding:0 2px;background:linear-gradient(#fdfeff,#e8eef4);border:1px solid #93a2b2;border-right:0;border-radius:3px 0 0 3px}
/* 로그를 펼치면 오른쪽 아이콘 줄도 같은 흰 띠가 된다 (접으면 원래의 어두운 띠) */
#chat.expanded ~ #iconRow{background:linear-gradient(#fdfeff,#e8eef4);border:1px solid #93a2b2;border-left:0;border-radius:0 3px 3px 0}
#chat.expanded ~ #iconRow .ib-arrows i{border-color:#8f99a4}
#chatType{width:86px;height:22px;flex:none;border:1px solid #17356a;border-radius:2px;margin:0 4px 0 2px;
  background:linear-gradient(#5d86c8,#22447f);color:#fff;font:bold 11px 'Malgun Gothic',sans-serif;text-shadow:0 1px 0 rgba(0,0,0,.45)}
#chatIn{height:22px;background:#fff;border:1px solid #b9c6d4;margin:0;border-radius:2px}
#chatSend{width:22px;height:22px;flex:none;margin:0 2px 0 4px;border:1px solid #2f6f9e;border-radius:2px;background:linear-gradient(#bfe8fb,#4aa8dd)}
#chatSend .bmp{display:none}
#chatSend::after{content:'';width:8px;height:8px;border:1px solid #fff;border-radius:1px}

/* ---------- 아이템 툴팁 ----------
   실제 화면: 남색 그라데이션 + 밝은 테두리, 가운데 정렬 굵은 흰 제목,
   그 아래 분홍 분류줄, 왼쪽에 반투명 회색 사각 안 큰 아이콘, 오른쪽에 설명. */
#tooltip{
  background:linear-gradient(160deg,rgba(28,38,86,.94),rgba(12,18,48,.96));
  border:1px solid #6f86c8;border-radius:5px;padding:7px 9px 9px;max-width:290px;width:max-content;min-width:168px;
  color:#fff;font:12px 'Dotum','돋움','Malgun Gothic',sans-serif;line-height:16px;
  box-shadow:0 0 0 1px rgba(0,0,0,.55),2px 3px 8px rgba(0,0,0,.5)
}
#tooltip .tt-name{display:block;text-align:center;font:bold 14px 'Malgun Gothic',sans-serif;color:#fff;margin-bottom:2px;text-shadow:0 1px 2px rgba(0,0,0,.7)}
#tooltip .tt-sub{display:block;text-align:center;font:bold 11px 'Malgun Gothic',sans-serif;color:#ff96c8;margin-bottom:6px}
#tooltip .tt-rule{height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));margin:5px 0}
#tooltip .tt-main{display:flex;gap:9px;align-items:flex-start}
#tooltip .tt-icon{width:70px;height:70px;flex:none;background:rgba(190,195,210,.32);border-radius:3px;
  display:flex;align-items:center;justify-content:center}
#tooltip .tt-icon canvas{image-rendering:pixelated}
#tooltip .tt-desc{flex:1;min-width:0;color:#fff;font-size:12px}
#tooltip .tt-line{color:#e4e9f5;font-size:12px;white-space:nowrap}
#tooltip .tt-line .v{color:#ffdf6e}          /* 능력치 수치 — 노랑 */
#tooltip .tt-line.up .v{color:#7dff7d}       /* 주문서로 올라간 값 — 초록 */
#tooltip .tt-line.req{color:#ff8a8a}         /* 요구 조건 미달 — 빨강 */
#tooltip b{display:block;font-size:12px;margin-bottom:3px}
#tooltip .d{color:#cfd9e4}

/* ---------- CHARACTER STAT ----------
   실제 화면: 분홍 라벨(이름/직업/레벨/길드/HP/MP/경험치/인기도) + ABILITY POINT +
   연두 라벨 STR/DEX/INT/LUK + 오른쪽 아래 DETAIL 버튼. */
#winStat{width:238px}
#winStat .win-body{padding:5px 6px 6px}
.cs-grid{display:grid;grid-template-columns:58px 1fr;gap:2px 4px;align-items:stretch}
.cs-lb{display:flex;align-items:center;padding:0 6px;height:20px;border:1px solid #b35f86;border-radius:3px;
  background:linear-gradient(#f4a8c6,#e076a0);color:#fff;font:bold 11px 'Malgun Gothic',sans-serif;
  text-shadow:0 1px 0 rgba(0,0,0,.28)}
.cs-lb.g{background:linear-gradient(#d3ea92,#9ec93f);border-color:#6f9430;color:#3b5210;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.cs-lb.b{background:linear-gradient(#a9d2f2,#5b9ede);border-color:#3a6f9e;color:#12344f;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.cs-v{display:flex;align-items:center;gap:4px;height:20px;padding:0 5px;background:#fbfcfe;border:1px solid #c3ccd8;border-radius:3px;
  font:12px 'Malgun Gothic',sans-serif;color:#1d2430;overflow:hidden;white-space:nowrap}
.cs-plus{width:15px;height:15px;flex:none;margin-left:auto;padding:0;border:1px solid #8b93a2;border-radius:3px;
  background:linear-gradient(#fdfefe,#c9d2dd);position:relative;cursor:pointer}
.cs-plus::before,.cs-plus::after{content:'';position:absolute;background:#46505f}
.cs-plus::before{left:3px;right:3px;top:6px;height:3px}
.cs-plus::after{top:3px;bottom:3px;left:6px;width:3px}
.cs-plus:disabled{opacity:.42;cursor:default}
.cs-ap{display:flex;align-items:center;gap:6px;margin:7px 0 5px;padding:5px 2px 0;border-top:1px solid #d3dae3}
.cs-ap .ttl{font:bold 12px Arial,sans-serif;color:#1f3f7a;letter-spacing:.3px}
.cs-ap .num{width:44px;height:19px;background:#fff;border:1px solid #98a4b3;border-radius:2px;text-align:center;
  font:bold 12px 'Malgun Gothic',sans-serif;line-height:19px;color:#1d2430}
.cs-ap .auto{margin-left:auto;height:21px;padding:0 9px;border:1px solid #9aa4b2;border-radius:3px;
  background:linear-gradient(#e9eef3,#c3ccd7);color:#7b8695;font:bold 11px 'Malgun Gothic',sans-serif}
.cs-ap .auto:enabled{background:linear-gradient(#ffe89a,#f0b431);border-color:#a3740d;color:#4a3200;cursor:pointer}
.cs-foot{display:flex;margin-top:6px}
.cs-detail{margin-left:auto;height:19px;padding:0 8px;border:1px solid #7d7f22;border-radius:3px;
  background:linear-gradient(#f2f39a,#c9cc38);color:#3f4106;font:bold 10px Arial,sans-serif;letter-spacing:.5px;cursor:pointer}
/* 세부 정보 패널 */
#winStatDetail{width:190px}
#winStatDetail .win-body{padding:5px 6px 6px}
.cd-grid{display:grid;grid-template-columns:78px 1fr;gap:2px 4px}
.cd-foot{display:flex;margin-top:6px}
.cd-back{margin-left:auto;width:26px;height:19px;border:1px solid #7d7f22;border-radius:3px;
  background:linear-gradient(#f2f39a,#c9cc38);position:relative;cursor:pointer}
.cd-back::after{content:'';position:absolute;left:9px;top:5px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:6px solid #3f4106}

/* ---------- SKILL INVENTORY ---------- */
#winSkill{width:224px}
#winSkill .win-body{padding:4px 5px 6px}
.sk-tabs{display:flex;gap:1px;padding:0 1px}
.sk-tab{height:19px;min-width:44px;padding:0 9px;border:1px solid #9aa4b2;border-bottom:0;border-radius:4px 4px 0 0;
  background:linear-gradient(#fdfeff,#c7d0db);color:#41505f;font:bold 11px 'Malgun Gothic',sans-serif;cursor:pointer}
.sk-tab.on{background:linear-gradient(#f2607e,#d8243f);border-color:#a01a2e;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.sk-rule{height:4px;background:linear-gradient(#e8455f,#c11e35);border-radius:1px;margin-bottom:4px}
.sk-wrap{display:flex;gap:3px}
.sk-list{flex:1;min-width:0;height:224px;overflow:hidden;position:relative;background:#fbfcfe;border:1px solid #c3ccd8;border-radius:3px}
.sk-inner{position:absolute;left:0;right:0;top:0}
.sk-row{display:flex;align-items:center;gap:6px;height:44px;padding:0 4px;border-bottom:1px solid #eaeff4;cursor:pointer}
.sk-row:hover{background:#eef5fd}
.sk-row canvas{width:32px;height:32px;flex:none;image-rendering:pixelated;
  background:#f6f4ea;border:1px solid #b9b19a;border-radius:2px}
.sk-row .nm{flex:1;min-width:0;font:12px 'Malgun Gothic',sans-serif;color:#1d2430;line-height:16px;overflow:hidden}
.sk-row .nm b{display:block;font-weight:normal;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.sk-row .nm i{display:block;font-style:normal;color:#43506a}
.sk-sb{width:15px;flex:none;display:flex;flex-direction:column;background:#e6ebf1;border:1px solid #9fabb9;border-radius:2px}
.sk-sb .cs-btn{height:14px;flex:none;border:1px solid #2f6f9e;border-radius:2px;margin:1px;padding:0;
  background:linear-gradient(#bfe8fb,#4aa8dd);position:relative;cursor:pointer}
.sk-sb .cs-btn::after{content:'';position:absolute;left:3px;top:4px;border-left:3px solid transparent;border-right:3px solid transparent}
.sk-sb .cs-btn.up::after{border-bottom:4px solid #fff}
.sk-sb .cs-btn.dn::after{border-top:4px solid #fff}
.sk-sb .tr{flex:1;margin:0 2px;position:relative}
.sk-sb .th{position:absolute;left:0;right:0;border:1px solid #2f6f9e;border-radius:2px;background:linear-gradient(90deg,#cfeeff,#5cb4e4)}
.sk-foot{display:flex;align-items:center;gap:6px;margin-top:5px;padding-top:5px;border-top:1px solid #d3dae3}
.sk-foot .ttl{font:bold 12px Arial,sans-serif;color:#1f3f7a;letter-spacing:.3px}
.sk-foot .num{margin-left:auto;width:44px;height:19px;background:#fff;border:1px solid #98a4b3;border-radius:2px;
  text-align:center;font:bold 12px 'Malgun Gothic',sans-serif;line-height:19px;color:#1d2430}

/* 스킬 툴팁 — 실제 화면의 갈색 띠 */
#tooltip.sk-tip{background:linear-gradient(#3a2a1c,#1d1409);border-color:#c79a5a;max-width:252px}
#tooltip.sk-tip .tt-name{color:#ffe9c0}
#tooltip.sk-tip .tt-sub{color:#f0b46a}

/* ---------- EQUIPMENT INVENTORY — 실제 배치(종이인형) ---------- */
#winEquip{width:190px}
#winEquip .win-body{padding:5px 6px 7px}
.eq-doll{position:relative;width:180px;height:222px;background:#fbfcfe;border:1px solid #c3ccd8;border-radius:3px}
.eq-doll .slot{position:absolute;width:38px;height:31px}
.eq-doll .slot canvas{transform:scale(.86);transform-origin:center}
.eq-total{display:flex;align-items:center;gap:5px;margin-top:6px;font:11px 'Malgun Gothic',sans-serif;color:#33404f}

/* ---------- NPC 대화창 ----------
   실제 화면: 바깥 둥근 은색 2중 테두리 + 회색 몸통, 왼쪽 초상화 + 남색 이름표,
   오른쪽 흰 글상자, 선택지는 ▸ + 파란 글씨(마우스 올리면 분홍 띠),
   왼쪽 아래 올리브색 '대화 그만하기'. */
.npcwin{background:linear-gradient(#eef1f4,#dfe4ea);border:1px solid #8b949f;border-radius:9px;
  box-shadow:inset 0 0 0 2px #fbfcfd,inset 0 0 0 3px #aeb6bf,3px 4px 10px rgba(0,0,0,.45)}
.npcwin .win-body{padding:9px 10px 8px}
.npc-body{display:flex;gap:10px;align-items:stretch}
.npc-portrait{width:150px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.npc-portrait canvas{width:140px;height:150px;background:none;border:0;border-radius:0}
.npc-name{margin-top:5px;width:140px;box-sizing:border-box;padding:3px 0;border:1px solid #101f3d;border-radius:3px;
  background:linear-gradient(#3f5f95,#1b3059);color:#fff;font:bold 13px 'Malgun Gothic',sans-serif;text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,.5)}
.npc-text{flex:1;min-width:0;background:#fdfdfd;border:1px solid #b9c0c9;border-radius:4px;padding:14px 16px;
  min-height:170px;box-sizing:border-box;font:14px 'Malgun Gothic',sans-serif;line-height:23px;color:#14181f;
  box-shadow:inset 0 0 0 1px #fff}
.npc-sec{display:flex;align-items:center;gap:6px;margin:16px 0 8px;font:bold 14px 'Malgun Gothic',sans-serif;color:#e0356b}
.npc-sec .bk{width:17px;height:13px;flex:none;border:1px solid #b8325e;border-radius:2px;
  background:linear-gradient(#ffd7e4,#f39ab8)}
.npc-opts{margin-top:4px}
.npc-opt{display:flex;align-items:center;gap:7px;margin:3px 0 3px 12px;padding:2px 8px 2px 2px;border-radius:3px;
  color:#1f49c8;font:14px 'Malgun Gothic',sans-serif;text-decoration:none;cursor:pointer;width:fit-content}
.npc-opt::before{content:'';width:0;height:0;flex:none;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid #9aa3b0}
.npc-opt:hover{background:#f7bdd0;color:#c8103c}
.npc-opt:hover::before{border-left-color:#c8103c}
.npc-btns{display:flex;align-items:center;gap:7px;margin-top:9px}
.npc-btns .npc-end{margin-right:auto;height:22px;padding:0 10px;border:1px solid #7d7f22;border-radius:3px;
  background:linear-gradient(#e9ec7e,#b9bc2e);color:#3f4106;font:bold 12px 'Malgun Gothic',sans-serif;cursor:pointer}