/* ── 메뉴 줄 (menubar.js): 렌더한 그림 단추 + 밑 한글 이름 + '더보기' 서랍 ──
   그림은 ui/menu.png 17칸 (tools/blender/ui_art.py menu). 칸 크기와 상관없이 % 로 자른다: 너비 1700%, 칸 i 는 i/16 자리.
   game.css 의 옛 칸 크기 규칙(460px·420px … 10칸)보다 이기도록 id 두 개로 쓴다. */
.mi-party { --i: 10; } .mi-soul { --i: 11; } .mi-help { --i: 12; } .mi-settings { --i: 13; } .mi-gwihwan { --i: 14; } .mi-gamjeong { --i: 15; } .mi-more { --i: 16; }
#hud #tmenu button.mi, #hud #mini button.mi, #hud #tbtns .tb.mi {
  background: url("../ui/menu.png?v=17") no-repeat !important; background-size: 1700% 100% !important; background-position: calc(var(--i) * 6.25%) 0 !important;
  border: none !important; border-radius: 50% !important; padding: 0 !important; color: transparent !important; font-size: 0 !important; }

/* 이름표: 그림 바로 밑, 작게. 줄(#tmenu·#mini)은 그만큼 아래가 넓어서 표적 패 비키기(ui.js hudObstacles)에 이름표까지 들어간다 */
.minimenu { padding-bottom: 13px; }
#hud .minimenu button { position: relative; overflow: visible; flex: 0 0 auto; }
.minimenu .ml { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1px; pointer-events: none; white-space: nowrap;
  font: 700 10.5px/1.1 var(--font); letter-spacing: -0.03em; color: #f3e3b8; text-shadow: 0 0 2px #000, 0 0 4px #000, 0 1px 1px #000; }
body.pc #mini .ml { font-size: 11px; }
#hud .minimenu button.on .ml { color: #ffd27a; }

/* 알림: 숫자(남은 점수) 또는 붉은 점(신문고 답·동행 청·서랍 안에 알림) */
.minimenu button[data-badge]::before { content: attr(data-badge); position: absolute; top: -3px; right: -4px; z-index: 1; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; font: 700 10px/16px var(--font); color: #fff4dc; background: radial-gradient(circle at 40% 35%, #e4553a, #9a1a10); border: 1px solid #2a0a06;
  box-shadow: 0 0 6px rgba(255,90,50,0.7); text-shadow: 0 1px 1px #000; pointer-events: none; }
.minimenu button[data-badge=""]::before { min-width: 11px; width: 11px; height: 11px; padding: 0; top: -1px; right: -1px; animation: mmPing 1.6s ease-in-out infinite; }
@keyframes mmPing { 50% { box-shadow: 0 0 10px 2px rgba(255,90,50,0.9); } }
body.voc-new .minimenu .setb::after { display: none !important; }   /* hudx.css 의 점 대신 위 알림 */
/* 귀환 부적 장 수 (ui.js .scn): 그림 오른쪽 아래 */
.minimenu .scb .scn { right: -4px; bottom: 6px; z-index: 1; }

/* '더보기' 서랍: 나전 테 옻칠 판 위에 단추를 바둑판으로 */
.mm-drawer { position: absolute; z-index: 30; display: none; grid-template-columns: repeat(4, 48px); gap: 20px 14px; padding: 6px 6px 18px;
  border: 14px solid transparent; border-image: url("../ui/frame_najeon.png") 58 stretch; background: rgba(12,8,6,0.95); background-clip: padding-box; box-shadow: 0 10px 30px #000; }
.minimenu.mm-open .mm-drawer { display: grid; animation: mmIn 0.14s ease-out; }
@keyframes mmIn { from { opacity: 0; } }
#hud #tmenu .mm-drawer button, #hud #mini .mm-drawer button { width: 48px; height: 48px; }
.mm-drawer .lay { display: none !important; }
#tmenu .mm-drawer, body.tablet #mini .mm-drawer { top: calc(100% - 4px); right: 0; }
body.phone.portrait #tmenu .mm-drawer { top: 0; right: calc(100% + 10px); grid-template-columns: repeat(3, 48px); }
body.pc #mini .mm-drawer { bottom: calc(100% + 4px); right: -8px; }   /* 펼친 부채 바로 위 */
#hud .minimenu .mm-more.on { filter: brightness(1.3) drop-shadow(0 0 6px #ffcf7a); }

/* 기기별 간격: 세로 휴대폰은 오른쪽 세로줄 (이름표 자리만큼 띄운다) */
#tmenu { gap: 10px; }
body.phone.portrait #tmenu { gap: 15px; padding-bottom: 13px; }
body.tablet #mini { gap: 10px; }
/* 메뉴 줄이 이름표만큼 길어져서 밑의 것들을 조금 내린다 */
body.tablet #tracker { top: 86px; }
body.phone.short #sysbox { top: 68px; }
/* PC: 아래 가운데 메뉴 줄이 캐릭터 발밑 땅을 가린다 — 단추 사이 틈은 땅으로 클릭이 지나가고, 마우스가 없을 땐 조금 비친다 */
body.pc #mini { pointer-events: none; opacity: 0.72; transition: opacity 0.15s; }
body.pc #mini > *, body.pc #mini .mm-drawer, body.pc #mini .mm-drawer * { pointer-events: auto; }
body.pc #mini:hover, body.pc #mini:focus-within, body.pc #mini.open { opacity: 1; }