/* 화면 = 홈페이지(yeoulgame.com) 디자인: 색·글꼴·모서리·카드·단추·머리줄(.yh)·바닥줄(.yf)은 앞에 불러온 홈페이지 portal.css 의 값(--bg --ink --dim --faint --line --accent --card --radius --font)을 그대로 씀.
   여기는 웹게임에만 있는 것(막대·채팅·캐릭터 상자·지도)과 홈페이지 값을 못 읽었을 때의 기본값만. 게임 아이콘·캐릭터 그림은 그대로. */
:root{--wg-soft:#f5f5f4;--hp:#d0423b;--sp:#3f9a4e;--mp:#3b6fc4}
*{box-sizing:border-box}
body{margin:0;background:var(--bg,#fff);color:var(--ink,#222);font-family:var(--font,"IBM Plex Sans KR","Malgun Gothic",sans-serif);padding-bottom:230px}
.wgbar{max-width:860px;margin:14px auto 0;padding:0 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.wgbar .wgname{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink,#222)}
.who{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--dim,#555)}
main{max-width:860px;margin:0 auto;padding:12px 16px 16px}
.card{background:var(--card,#fff);border:1px solid var(--line,#dadada);border-top:3px solid var(--accent,#c2410c);border-radius:var(--radius,4px);padding:16px 18px;margin:0 0 14px;display:block;color:var(--ink,#222)}
.card.narrow{max-width:420px;margin:24px auto}
h1,h2,h3{margin:0 0 8px;font-weight:700;color:var(--ink,#222)}h1{font-size:22px}h2{font-size:19px}h3{font-size:15px;color:var(--accent,#c2410c)}
.acct{margin:12px 0 4px;padding:9px 12px;font-size:13.5px;line-height:1.55;color:var(--ink,#222);background:#fff7f2;border:1px solid #f0d2c2;border-left:3px solid var(--accent,#c2410c);border-radius:var(--radius,4px)}
.tag{color:var(--dim,#555);margin-top:0}.small{font-size:13px;color:var(--dim,#555)}.big{font-size:19px;font-weight:700}.err{color:#c62828}
label{display:block;margin:10px 0;font-size:14px;color:var(--dim,#555)}label.row{display:flex;justify-content:space-between;align-items:center}
input,select{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line,#dadada);border-radius:var(--radius,4px);background:#fff;color:var(--ink,#222);font:inherit}
input:focus,select:focus{outline:2px solid var(--accent,#c2410c);outline-offset:-1px}
input[type=color]{width:60px;height:34px;padding:2px;display:inline-block;margin:0}
button{font:inherit;font-size:14px;padding:7px 14px;border-radius:var(--radius,4px);border:1px solid var(--line,#dadada);background:#fff;color:var(--ink,#222);cursor:pointer}
button:hover{border-color:#999}
button.main{background:var(--accent,#c2410c);border-color:var(--accent,#c2410c);color:#fff;width:100%;margin-top:6px;font-weight:600}
button.main:hover{filter:brightness(1.08)}
.tabs{display:flex;gap:6px;margin:0 0 14px;overflow-x:auto;border-bottom:1px solid var(--line,#dadada);padding-bottom:10px}
.tabs a,.tabs span{font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid transparent;text-decoration:none;color:var(--dim,#555);white-space:nowrap}
.tabs a:hover{color:var(--ink,#222)}
.tabs a.on{color:var(--accent,#c2410c);border-color:var(--accent,#c2410c);font-weight:700}.tabs .off{opacity:.45;cursor:not-allowed}
.bar{display:grid;grid-template-columns:64px 1fr 92px;gap:8px;align-items:center;margin:6px 0;font-size:14px}
.track{height:10px;border-radius:999px;background:var(--wg-soft);border:1px solid var(--line,#dadada);overflow:hidden}.track i{display:block;height:100%}
.bar.hp i{background:var(--hp)}.bar.sp i{background:var(--sp)}.bar.mp i{background:var(--mp)}.nv{text-align:right;color:var(--dim,#555)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.kv div{background:var(--wg-soft);border:1px solid var(--line,#dadada);border-radius:var(--radius,4px);padding:6px 10px}.kv b{display:block;font-size:12px;color:var(--faint,#858585);font-weight:400}
ul.items,ul.lv{list-style:none;margin:0;padding:0}
ul.items li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line,#dadada)}
ul.lv li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line,#dadada)}
li.empty{color:var(--faint,#858585)}
.ic{width:28px;height:28px;image-rendering:pixelated;flex:none}.ic.none{display:inline-block;background:var(--wg-soft);border-radius:4px}
.sl{font-size:12px;color:var(--faint,#858585);min-width:62px}.n{color:var(--dim,#555)}
.panel{border-color:var(--accent,#c2410c)}.panel p{margin:4px 0}
.grow{flex:1}ul.items li .act{margin-left:auto}
.head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
button.act{color:var(--accent,#c2410c);border-color:#e7c7b5;background:#fff}button.act:hover{border-color:var(--accent,#c2410c)}
button.act:disabled{opacity:.45;cursor:not-allowed;color:var(--faint,#858585)}
#wmap{display:block;width:100%;height:auto;border-radius:var(--radius,4px);margin:8px 0;image-rendering:pixelated;background:var(--wg-soft);border:1px solid var(--line,#dadada)}
ul.log{list-style:none;margin:0;padding:0;font-size:14px}ul.log li{padding:4px 0;border-bottom:1px dashed var(--line,#dadada)}
#toast{position:fixed;left:50%;bottom:240px;transform:translateX(-50%);background:#222;color:#fff;padding:7px 14px;border-radius:var(--radius,4px);opacity:0;transition:opacity .3s;pointer-events:none;max-width:90vw;z-index:9}#toast.show{opacity:1}
#dollw{max-width:828px;margin:0 auto 14px;display:flex;justify-content:center;align-items:center;background:#fff}
#dollbox{display:flex;justify-content:center;align-items:flex-end;min-height:120px}
#dollbox img.doll{image-rendering:pixelated;image-rendering:crisp-edges;background:none;outline:0;border:0;max-width:none}
@media (max-width:860px){#dollw{margin:0 16px 14px}}
#chatw{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;min-height:0;transform:none;display:block;overflow:visible;margin:0;border-radius:0;border:0;border-top:1px solid var(--line,#dadada);background:#fafafa;padding:6px 12px 10px;z-index:5;max-width:none;box-shadow:0 -6px 18px -12px rgba(0,0,0,.25)}
#chatw .ctabs{display:flex;gap:4px;overflow-x:auto}#chatw .ctabs button{padding:3px 11px;font-size:13px;color:var(--dim,#555);border-radius:999px;background:#fff}#chatw .ctabs button.on{color:var(--accent,#c2410c);border-color:var(--accent,#c2410c);font-weight:700}
#chatw .clog{height:130px;overflow-y:auto;font-size:13.5px;line-height:1.5;margin:6px 0;background:#fff;border:1px solid var(--line,#dadada);padding:4px 8px;border-radius:var(--radius,4px)}
#chatw .cin{display:flex;gap:6px}#chatw .cin input{margin:0}#chatw .cin button{flex:none}
#ygf .yf{margin-top:10px}
@media (max-width:520px){.bar{grid-template-columns:52px 1fr 78px}.wgbar{margin-top:10px}#chatw .clog{height:84px}body{padding-bottom:180px}}