/* 마을 화면 모양. 시제품(행복동_프로토타입.html 40차)의 <style>을 옮겨 온 것 + 아래쪽에 실제 버전에서 더한 것 */
:root{--ink:#1F2A44;--cream:#FFF9EE;--blue:#3E6FD8;--orange:#F08A2C;--yellow:#FFD66B;--grass:#9CCB6B;--path:#EAD9AE}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#E9E6DF;font-family:'Gowun Dodum',sans-serif;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:var(--ink);cursor:pointer}
.jua{font-family:'Jua',sans-serif}
.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.nav button{height:40px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-family:'Jua',sans-serif;font-size:14px}
.nav button.on{background:var(--ink);color:#fff}
.phone{width:390px;max-width:100%;height:844px;border:3px solid var(--ink);border-radius:32px;overflow:hidden;background:var(--cream);display:flex;flex-direction:column;position:relative}
.screen{display:none;flex-direction:column;height:100%}
.screen.on{display:flex}
header.top{height:56px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:2px solid var(--ink);background:var(--cream)}
.back{display:flex;align-items:center;height:44px;padding:0 6px;font-weight:700;font-size:14px;background:none;border:none}
.pill{padding:3px 10px;border:2px solid var(--ink);border-radius:999px;font-size:12px;font-weight:700;background:#fff}
.title{flex-grow:1;text-align:center;font-family:'Jua',sans-serif;font-size:20px}
.abs{position:absolute}
.bld{position:absolute;width:144px;display:flex;flex-direction:column;align-items:center;background:none;border:none;padding:0}
.roof{width:144px;height:54px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.wall{width:128px;height:104px;background:#FFF6E6;border:3px solid var(--ink);border-top:none;display:flex;flex-direction:column;align-items:center;padding-top:8px;gap:6px}
.sign{padding:2px 10px;background:var(--ink);color:#fff;border-radius:6px;font-family:'Jua',sans-serif;font-size:15px}
.door{width:26px;height:34px;margin-top:auto;background:#B5651D;border:2px solid var(--ink);border-bottom:none;border-radius:6px 6px 0 0}
.av{position:absolute;width:140px;margin-left:-70px;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.bub{position:absolute;bottom:100%;width:max-content;max-width:130px;margin-bottom:8px;padding:5px 10px;background:#fff;border:2px solid var(--ink);border-radius:12px;font-size:12px;line-height:1.35;text-align:center}
.head{position:relative;width:28px;height:28px}
.face{position:absolute;inset:0;border-radius:50%;background:#F6D3B3;border:2px solid var(--ink)}
.hair{position:absolute;left:-1px;top:-3px;width:30px;height:14px;border-radius:15px 15px 4px 4px;border:2px solid var(--ink)}
.eye{position:absolute;top:15px;width:3px;height:3px;border-radius:50%;background:var(--ink)}
.body{width:24px;height:18px;margin-top:-2px;border-radius:8px 8px 4px 4px;border:2px solid var(--ink)}
.legs{width:18px;height:10px;border:2px solid var(--ink);border-top:none;border-radius:0 0 3px 3px}
.tag{margin-top:3px;padding:1px 7px;border-radius:8px;font-size:11px;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.92)}
.tag.me{background:var(--ink);color:#fff}
form.say{height:56px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 12px;background:#fff;border-top:2px solid var(--ink);margin:0}
form.say input{flex-grow:1;height:40px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;font-family:inherit;font-size:14px;background:var(--cream);color:var(--ink)}
.send{height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:var(--blue);color:#fff !important;font-family:'Jua',sans-serif;font-size:15px}
.tabbar{height:72px;flex-shrink:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.tabbar button{border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px}
.tabbar button.cur{color:#2B5BC4;font-weight:700}
.btn{height:44px;border:2px solid var(--ink);border-radius:10px;background:var(--cream);font-family:'Jua',sans-serif;font-size:14px}
.card{background:#fff;border:2px solid var(--ink);border-radius:6px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.sw{height:84px;border:2px solid var(--ink);border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0}
.sw.on{border:3px solid var(--orange)}
.pad{border:2px solid rgba(255,255,255,.85);background:rgba(20,24,40,.55);color:#fff;font-size:15px;border-radius:12px;padding:0;touch-action:none;cursor:pointer}.pad:active{background:rgba(62,111,216,.85)}
.dot{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink)}
.menubar{height:72px;flex-shrink:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:10px 15px 12px;background:#F0E6CF;border-top:3px solid #2B2B3A}
.menubar button{border:0;border-radius:0;margin:3px 0 0;background:#FBF2DF;box-shadow:0 -3px 0 #2B2B3A,0 3px 0 #2B2B3A,-3px 0 0 #2B2B3A,3px 0 0 #2B2B3A,inset -3px -3px 0 #E4D7B8,inset 3px 3px 0 #FFFDF6;font-family:'Jua',sans-serif;font-size:15px;color:#2B2B3A;padding:0 0 3px;cursor:pointer}
#meBox{display:flex;align-items:center;gap:8px;min-width:0;padding:0;border:0;background:none;text-align:left}
#meFace{width:42px;height:42px;flex:none;border-radius:0;background:#FFE9C7;box-shadow:0 -2px 0 #2B2B3A,0 2px 0 #2B2B3A,-2px 0 0 #2B2B3A,2px 0 0 #2B2B3A}
#meName{font-family:'Jua',sans-serif;font-size:16px;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#expBox{display:block;width:124px;height:8px;margin:5px 0 0 2px;border-radius:0;background:#fff;box-shadow:0 -2px 0 #2B2B3A,0 2px 0 #2B2B3A,-2px 0 0 #2B2B3A,2px 0 0 #2B2B3A;overflow:hidden}
#expBar{display:block;height:100%;width:0;background:#7CC86A;transition:width .4s}
#stateTxt{font-size:11px;font-weight:700;color:#4A5470;white-space:nowrap}
#main #townWrap #townLog{right:82px!important}
#chatBtn{position:absolute;right:13px;bottom:13px;width:56px;height:54px;border:0;border-radius:0;background:#FFF9EE;box-shadow:0 -3px 0 #2B2B3A,0 3px 0 #2B2B3A,-3px 0 0 #2B2B3A,3px 0 0 #2B2B3A,inset -3px -3px 0 #E4D7B8,inset 3px 3px 0 #FFFFFF;font-family:'Jua',sans-serif;font-size:15px;color:var(--ink);cursor:pointer;z-index:5}
#chatOv{position:absolute;left:8px;right:8px;bottom:8px;height:330px;display:none;flex-direction:column;background:rgba(34,30,44,.97);border-radius:0;box-shadow:0 -3px 0 #2B2B3A,0 3px 0 #2B2B3A,-3px 0 0 #2B2B3A,3px 0 0 #2B2B3A;z-index:25;color:#fff}
#chatOv .hd{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px;font-family:'Jua',sans-serif;font-size:15px}
#chatAll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 12px 10px;font-size:13px;line-height:1.55}
#chatAll b{font-family:'Jua',sans-serif;font-weight:400}
.xbtn{height:32px;padding:0 12px;border:0;border-radius:0;background:#FFE9A8;box-shadow:0 -2px 0 #2B2B3A,0 2px 0 #2B2B3A,-2px 0 0 #2B2B3A,2px 0 0 #2B2B3A,inset -2px -2px 0 #E2BE62,inset 2px 2px 0 #FFF6CF;font-family:'Jua',sans-serif;font-size:14px;color:var(--ink);cursor:pointer}
#sheet{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(20,24,40,.55);z-index:40}
#sheet.low{align-items:flex-end;padding:0 10px 10px}
#sheetBox{width:100%;max-width:340px;padding:16px 16px 14px;border-radius:0;background:#FFF9EE;box-shadow:0 -3px 0 #2B2B3A,0 3px 0 #2B2B3A,-3px 0 0 #2B2B3A,3px 0 0 #2B2B3A,0 9px 0 rgba(0,0,0,.25);display:flex;flex-direction:column;gap:10px}
#sheet.low #sheetBox{max-width:none}
#sheetTitle{font-family:'Jua',sans-serif;font-size:19px}
#sheetBody{font-size:14px;line-height:1.6}
#sheetBody .big{font-family:'Jua',sans-serif;font-size:22px;line-height:1.35}
#sheetBody .small{font-size:12px;color:#5C5A66}
#sheetBtns{display:flex;flex-direction:column;gap:8px}
#sheetBtns.row{flex-direction:row}
#sheetBtns button{flex:none;height:44px;margin:0 3px;border:0;border-radius:0;background:#fff;box-shadow:0 -2px 0 #2B2B3A,0 2px 0 #2B2B3A,-2px 0 0 #2B2B3A,2px 0 0 #2B2B3A,inset -3px -3px 0 #E4D7B8;font-family:'Jua',sans-serif;font-size:16px;color:var(--ink);cursor:pointer}
#sheetBtns.row button{flex:1}
#sheetBtns button.main{background:#FFE9A8;box-shadow:0 -2px 0 #2B2B3A,0 2px 0 #2B2B3A,-2px 0 0 #2B2B3A,2px 0 0 #2B2B3A,inset -3px -3px 0 #E2BE62,inset 3px 3px 0 #FFF6CF}
#sheetBtns button:active,.menubar button:active,#chatBtn:active{transform:translateY(2px)}
#saver{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0E0F16;color:#9A9BA3;z-index:60;cursor:pointer;font-size:13px}
#saver .m{font-family:'Jua',sans-serif;font-size:26px;color:#C9CAD2}

/* ---------- 실제 버전에서 더한 것 ---------- */
html,body{height:100%}
body{padding:0;gap:0;justify-content:center;overflow:hidden;overscroll-behavior:none}
.phone{height:min(844px,100dvh)}
#townWrap{flex:1 1 auto;height:auto!important;min-height:0}
#town{width:100%!important;height:100%!important}
/* 폰에서는 테두리 없이 화면 가득 */
@media (max-width:500px){
  body{background:var(--cream)}
  .phone{width:100%;height:100dvh;border:0;border-radius:0}
}
.gate{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:var(--cream);z-index:50;text-align:center}
.gate.on{display:flex}
.gate h1{margin:0;font-family:'Jua',sans-serif;font-size:34px;font-weight:400}
.gate p{margin:0;font-size:14px;line-height:1.6;color:#4A5470}
.gate .col{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.gate .lg{height:50px;border:0;border-radius:0;font-family:'Jua',sans-serif;font-size:17px;color:#2B2B3A;cursor:pointer;
  box-shadow:0 -3px 0 #2B2B3A,0 3px 0 #2B2B3A,-3px 0 0 #2B2B3A,3px 0 0 #2B2B3A}
.gate .lg:active{transform:translateY(2px)}
.gate .next{background:#FFE9A8}.gate .kakao{background:#FEE500}.gate .naver{background:#03C75A;color:#fff}.gate .google{background:#fff}.gate .dev{background:#E4D7B8}
.gate input{height:46px;padding:0 12px;border:2px solid var(--ink);border-radius:0;font-family:inherit;font-size:16px;background:#fff;color:var(--ink)}
.gate .err{min-height:20px;font-size:13px;color:#C0392B}
.gate .small{font-size:12px;color:#7A7F91}
#netState{position:absolute;left:50%;top:44px;transform:translateX(-50%);display:none;padding:4px 12px;background:#C0392B;color:#fff;font-size:12px;font-weight:700;z-index:6;white-space:nowrap}