/* 행복동 마을 화면 꾸밈 (hb_skin.css)
   프로토타입의 마을 화면(#main) 틀을 도트 게임 느낌으로 바꾼다(밝은 판에 굵은 남색 테두리). 모양만 바꾸고 구조·크기·기능은 건드리지 않는다.
   붙이는 법: 프로토타입의 </head> 바로 앞에 한 줄 -> <link rel="stylesheet" href="hb_skin.css">   떼려면 그 줄만 지우면 된다.
   만든 곳: 아바타 세션. 자세한 것은 claude/마을_화면_꾸밈_사용법.md
   아이콘 그림(--hbic): 한 줄에 12칸(칸 168x168. 화면에서는 32로 줄여 씀 -> 크기 384px 32px, n번 칸 = -32n px)
   0 마을, 1 내 모임, 2 옷장, 3 내 정보, 4 표정, 5 지도, 6 동전, 7 로고, 8 게시판, 9 내 건물, 10 더 보기, 11 대화(8~11은 2026-10-08 추가, claude/icons_add.py)
   2026-10-08: 마을 40차 화면(윗줄의 내 얼굴·경험치, 아래 메뉴 줄, 대화 단추, 작은 화면, 절전 화면)에 맞춤. 요청: claude/마을_화면_꾸밈_요청.md */
:root{
  --hbi:#2B2B3A;
  /* 판 색: 여기 여섯 줄만 바꾸면 화면 전체의 바탕색이 바뀐다. 지금은 크림색(프로토타입이 원래 쓰던 색)
     흰색으로 하려면 차례로 #FFFFFF, #ECE8DE, #F8F6F0, #F6F3EC, #FFFFFF, #DAD5C9 */
  --hbb:#FFF9EE;   /* 윗줄·말하기 줄의 판 */
  --hbb2:#F0E6CF;  /* 판 아래 그늘 줄, 메뉴 줄의 바닥 */
  --hbt:#FBF2DF;   /* 아래 메뉴 단추 */
  --hbin:#FFFFFF;  /* 말하기 입력 칸 */
  --hbp:#FFF9EE;   /* 이름표·단추·고른 탭 */
  --hbs:#E4D7B8;   /* 이름표·단추의 그늘 */
  --hbic:url(https://d2ol7oe51mr4n9.cloudfront.net/user_3Jzp9qbsn0cp6F28V14c9SVZ0fh/73cea24e-ef3f-49f8-be63-601f1df853d0.webp);
  --hbol:0 -3px 0 var(--hbi),0 3px 0 var(--hbi),-3px 0 0 var(--hbi),3px 0 0 var(--hbi);
  --hbol2:0 -2px 0 var(--hbi),0 2px 0 var(--hbi),-2px 0 0 var(--hbi),2px 0 0 var(--hbi);
  --hbcoin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%238A6508' d='M3 0h3v1h2v2h1v3h-1v2h-2v1h-3v-1h-2v-2h-1v-3h1v-2h2z'/%3E%3Cpath fill='%23F2C12E' d='M3 1h3v1h1v1h1v3h-1v1h-1v1h-3v-1h-1v-1h-1v-3h1v-1h1z'/%3E%3Cpath fill='%23FFF0A8' d='M3 2h2v1h-2zM2 3h1v2h-1z'/%3E%3C/svg%3E");
}

/* 오류 고침(모든 화면): 보내기 단추가 눌려 글자가 세로로 꺾이던 것 */
form.say input{min-width:0;width:0}
.send{flex-shrink:0;white-space:nowrap}

/* ---------- 윗줄: 밝은 판, 내 얼굴·이름·레벨·경험치(왼쪽), 돈·상태(오른쪽) ---------- */
#main header.top{padding:0 13px 5px 11px;background:var(--hbb);box-shadow:inset 0 -5px 0 var(--hbb2);border-bottom:3px solid var(--hbi)}
#main header.top .pill{display:inline-flex;align-items:center;gap:5px;margin:2px;padding:5px 9px;border:0;border-radius:0;font-family:Jua,sans-serif;font-weight:400;font-size:13.5px;line-height:1.2;color:var(--hbi);white-space:nowrap;background:#9AD4FF!important;box-shadow:var(--hbol2),inset -2px -2px 0 #5FA9E0,inset 2px 2px 0 #D2ECFF}
#main header.top #coin1{background:#FFE9A8!important;box-shadow:var(--hbol2),inset -2px -2px 0 #E2BE62,inset 2px 2px 0 #FFF6CF}
#main header.top #coin1::before{content:"";flex:none;width:14px;height:14px;background:var(--hbcoin) center/contain no-repeat}
#main #meBox{gap:10px;padding:0 0 0 2px;cursor:pointer;color:var(--hbi)}
#main #meBox:active{transform:translateY(2px)}
#main #meFace{width:40px;height:40px;margin-top:2px;background:#FFE9C7;image-rendering:pixelated;box-shadow:var(--hbol2),inset -2px -2px 0 #F2CF9C,inset 2px 2px 0 #FFF6E4,0 4px 0 rgba(43,43,58,.3)}
#main #meName{font-size:15.5px;color:var(--hbi);letter-spacing:.3px}
#main header.top #lv1{margin:0 2px;padding:2px 6px 3px;font-size:11.5px;box-shadow:var(--hbol2),inset -2px -2px 0 #5FA9E0}
#main #expBox{width:118px;height:9px;margin:6px 0 1px 2px;background:#3D3B4E;box-shadow:var(--hbol2)}
#main #expBar{background:#7CC86A;box-shadow:inset 0 2px 0 #B8EC9E,inset 0 -2px 0 #4E9A42}
#main header.top>div:last-child{gap:3px!important}
#main #stateTxt{margin-right:3px;font-family:Jua,sans-serif;font-weight:400;font-size:11.5px;color:#C2571A;letter-spacing:.2px}

/* ---------- 지도 위: 이름표, 안내 ---------- */
#main #townWrap>.pill,#main #mapOv .pill,#main #busOv .pill{margin:2px;padding:5px 9px;border:0;border-radius:0;font-family:Jua,sans-serif;font-weight:400;font-size:13px;line-height:1.2;color:var(--hbi);background:var(--hbp);box-shadow:var(--hbol2),inset -2px -2px 0 var(--hbs),inset 2px 2px 0 #fff}
#main #hint{left:12px!important;right:auto!important;top:48px!important;font-size:12px!important;background:rgba(43,43,58,.88)!important;color:#fff!important;box-shadow:var(--hbol2)!important}

#main #mapOv button.pill,#main #busOv button.pill{background:#FFE9A8!important;box-shadow:var(--hbol2),inset -2px -2px 0 #E2BE62,inset 2px 2px 0 #FFF6CF}
#main #mapCv{border-radius:0!important;border:0!important;box-shadow:0 -3px 0 #fff,0 3px 0 #fff,-3px 0 0 #fff,3px 0 0 #fff}

/* 방향키는 꾸미지 않는다(사용자 의견: 지도가 비쳐 보이는 원래 것이 낫다) */

/* ---------- 표정·지도 단추 ---------- */
#main #emBtn,#main #mapBtn{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1px;right:13px!important;width:56px!important;height:56px!important;padding:0 0 2px;border:0!important;border-radius:0!important;background:var(--hbp)!important;color:var(--hbi)!important;font-size:12.5px!important;line-height:1.1;box-shadow:var(--hbol),inset -3px -3px 0 var(--hbs),inset 3px 3px 0 #fff,0 7px 0 rgba(43,43,58,.35)!important}
#main #emBtn{bottom:165px!important}
#main #mapBtn{bottom:96px!important}
#main #emBtn::before,#main #mapBtn::before{content:"";flex:none;width:32px;height:32px;background:var(--hbic) -128px 0/384px 32px no-repeat}
#main #mapBtn::before{background-position:-160px 0}
#main #emBtn:active,#main #mapBtn:active{transform:translateY(2px)}
#main #emBtn[style*="display: none"],#main #emBtn[style*="display:none"]{display:none!important}
#main #emOv{right:13px!important;bottom:234px!important;border-radius:0!important;background:rgba(43,43,58,.94)!important;box-shadow:var(--hbol2)}
#main #emList button{border:0!important;border-radius:0!important;box-shadow:var(--hbol2),inset -2px -2px 0 rgba(0,0,0,.14),inset 2px 2px 0 rgba(255,255,255,.55);margin:2px}

/* ---------- 채팅 글 상자 ---------- */
#main #townLog{left:11px!important;right:11px!important;bottom:10px!important;padding:6px 10px!important;border-radius:0!important;background:rgba(34,30,44,.86)!important;font-size:12.5px!important;line-height:1.5!important;box-shadow:var(--hbol2),inset 0 0 0 2px rgba(255,255,255,.14);text-shadow:1px 1px 0 rgba(0,0,0,.45)}
#main #townLog b{font-family:Jua,sans-serif;font-weight:400;letter-spacing:.3px}
/* 글이 길어 네 줄이 넘으면 방향키와 단추를 덮으므로 아래 세 줄만 보인다(오래된 줄부터 가려짐) */
#main #townLog{display:flex;flex-direction:column;justify-content:flex-end;max-height:69px;overflow:hidden}

/* ---------- 말하기 줄 ---------- */
#main form.say{gap:10px;padding:0 12px 0 13px;background:var(--hbb);box-shadow:none;border-top:3px solid var(--hbi)}
#main form.say input{height:36px;padding:0 11px;border:0;border-radius:0;background:var(--hbin);color:var(--hbi);box-shadow:var(--hbol),inset 3px 3px 0 rgba(0,0,0,.08);outline:0}
#main form.say input::placeholder{color:#8C8576}
#main form.say .send{height:36px;margin-right:2px;padding:0 13px 2px;border:0;border-radius:0;background:#F08A2C;font-size:15px;text-shadow:1px 1px 0 #8A4310;box-shadow:var(--hbol),inset -3px -3px 0 #B85C12,inset 3px 3px 0 #FFB15E}
#main form.say .send:active{transform:translateY(2px)}

/* ---------- 대화 단추(채팅 글 상자 오른쪽), 지난 대화 ---------- */
#main #chatBtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;right:13px;bottom:12px;width:56px;height:56px;padding:0 0 2px;background:var(--hbp);color:var(--hbi);font-size:12.5px;line-height:1.1;box-shadow:var(--hbol),inset -3px -3px 0 var(--hbs),inset 3px 3px 0 #fff,0 7px 0 rgba(43,43,58,.35)}
#main #chatBtn::before{content:"";flex:none;width:32px;height:32px;background:var(--hbic) -352px 0/384px 32px no-repeat}
#main #chatOv{background:rgba(34,30,44,.95);box-shadow:var(--hbol2),inset 0 0 0 2px rgba(255,255,255,.14)}
#main #chatOv .hd{border-bottom:2px solid rgba(255,255,255,.14);margin:0 4px 6px;padding:8px 6px 7px}

/* ---------- 아래 메뉴 줄: 옷장, 게시판, 내 건물, 더 보기 ---------- */
#main .menubar{gap:10px;padding:8px 15px 10px;background:var(--hbb2);border-top:3px solid var(--hbi);box-shadow:inset 0 3px 0 #FBF4E2}
#main .menubar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;margin:3px 0 0;padding:1px 0 3px;font-size:12.5px;line-height:1.1;color:var(--hbi);background:var(--hbt);box-shadow:var(--hbol),inset -3px -3px 0 var(--hbs),inset 3px 3px 0 #FFFDF6,0 5px 0 rgba(43,43,58,.3)}
#main .menubar button::before{content:"";flex:none;width:32px;height:32px;background:var(--hbic) -64px 0/384px 32px no-repeat}
#main .menubar #mBoard::before{background-position:-256px 0}
#main .menubar #mBld::before{background-position:-288px 0}
#main .menubar #mMore::before{background-position:-320px 0}
#main .menubar button:active{transform:translateY(2px);box-shadow:var(--hbol),inset -3px -3px 0 var(--hbs),inset 3px 3px 0 #FFFDF6,0 3px 0 rgba(43,43,58,.3)}

/* ---------- 작은 화면(돌아왔을 때, 내 정보, 게시판·내 건물 안내, 더 보기, 나가기) ---------- */
#sheet{background:rgba(20,24,40,.6)}
#sheetBox{color:var(--hbi);background:var(--hbp);box-shadow:var(--hbol),inset -4px -4px 0 var(--hbs),inset 4px 4px 0 #fff,0 9px 0 rgba(0,0,0,.28)}
#sheetTitle{display:flex;align-items:center;gap:8px;padding:0 0 8px;color:var(--hbi);border-bottom:3px dotted var(--hbs)}
#sheetTitle::before{content:"";flex:none;width:10px;height:10px;background:#F08A2C;box-shadow:var(--hbol2)}
#sheetBody{color:#3B3946}
#sheetBody .big{color:var(--hbi)}
#sheetBody .small{color:#6E6878}
#sheetBtns{padding-top:2px}
#sheetBtns button{background:#fff;box-shadow:var(--hbol2),inset -3px -3px 0 var(--hbs),inset 3px 3px 0 #fff,0 4px 0 rgba(43,43,58,.25)}
#sheetBtns button.main{color:#fff;background:#F08A2C;text-shadow:1px 1px 0 #8A4310;box-shadow:var(--hbol2),inset -3px -3px 0 #B85C12,inset 3px 3px 0 #FFB15E,0 4px 0 rgba(43,43,58,.25)}
#sheetBtns button:active{transform:translateY(2px)}

/* ---------- 절전 화면 ---------- */
#saver{gap:12px;background:#0E0F16;color:#8C8D97;font-family:Jua,sans-serif;font-size:13px;letter-spacing:.3px}
#saver .m{display:flex;align-items:center;gap:10px;padding:8px 16px 9px;font-size:26px;color:#E6D9A8;background:#191A24;box-shadow:0 -3px 0 #3A3B4A,0 3px 0 #3A3B4A,-3px 0 0 #3A3B4A,3px 0 0 #3A3B4A}
#saver .m::before{content:"";flex:none;width:24px;height:24px;background:var(--hbcoin) center/contain no-repeat;opacity:.85}
#saver #saverXp{color:#9FC79A}
#saver #saverState{color:#6C6D78}