/* 3D 미니룸 (P1) — 진입 뱃지, 스테이지, 말풍선, 토스트 */
.miniroom-box .mr3d-enter{
  display:none; position:absolute; right:.6rem; bottom:.6rem; z-index:3;
  padding:.25rem .6rem; border:1px solid #ffffff; border-radius:1rem; cursor:pointer;
  font:700 11px/1.4 var(--mh-font, sans-serif); letter-spacing:.05em;
  background:var(--color-badge, #446efe); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.miniroom-box.mr3d-ready .mr3d-enter{display:block}
.miniroom-box.mr3d-ready{cursor:pointer}
.miniroom-box.is-3d .mr3d-enter{display:none}
/* 3D 방이 켜진 곳에서는 옛 2D 픽셀 미니미를 숨긴다 (3D 방 그림 위 아바타 옆에 겹쳐 유령처럼 보였다) */
.miniroom-box[data-miniroom] .me, .miniroom-box[data-mh3d] .me, .miniroom-box.mr3d-ready .me{display:none}
.miniroom-box .mr3d-stage{
  display:none; position:absolute; inset:0; z-index:5; overflow:hidden; cursor:default;
  background:linear-gradient(#fdf1f4, #eaf4fb);
}
.miniroom-box .mr3d-stage.on{display:block}
.mr3d-canvas{position:absolute; inset:0}
.mr3d-canvas canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
/* 닫기(✕) 버튼은 없다(viewer.js) — 미니홈피 3D 는 페이지를 열면 바로 켜지고, 공용 공간은 이동 허브의 '집으로'로 돌아온다 */
.mr3d-adoptbtn{position:absolute; left:.6rem; bottom:.6rem; z-index:3; padding:.35rem .8rem; border:0; border-radius:1rem; background:#ff7a9c; color:#fff; font:700 12px/1.4 sans-serif; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2)}
.mr3d-adoptbtn:hover{background:#ff5f88}
.mr3d-bubble{
  position:absolute; z-index:1; display:none; transform:translate(-50%, -100%); pointer-events:none;
  max-width:14rem; padding:.35rem .7rem; border:1px solid #e3e3e3; border-radius:1rem; background:#fffffff0;
  font-size:11px; line-height:1.4; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mr3d-bubble.is-dog{font-size:14px; color:#ee5a7a}
.mr3d-toast{
  position:absolute; left:50%; bottom:3rem; z-index:2; transform:translateX(-50%) translateY(8px); opacity:0; pointer-events:none;
  padding:.45rem 1rem; border-radius:1.2rem; background:#333d; color:#fff; font-size:12px; white-space:nowrap; transition:.2s;
}
.mr3d-toast.on{opacity:1; transform:translateX(-50%)}
@media (max-width:768px){ .miniroom-box .mr3d-enter{right:.4rem; bottom:.4rem} }

/* P2-a: 방 주인 도구 버튼(꾸미기·상태·퍼가기) — boot.js 가 붙임 */
.miniroom-box .mr3d-tools{position:absolute; left:.5rem; top:.5rem; z-index:6; display:flex; gap:.3rem}
.miniroom-box .mr3d-tools button{
  padding:.2rem .6rem; border:1px solid #ffffff; border-radius:1rem; cursor:pointer;
  font:700 11px/1.4 var(--mh-font, sans-serif); background:#ffffffe0; color:#444; box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.miniroom-box .mr3d-tools button:hover{background:#fff; color:#446efe}
/* 공용 공간(월드)에 들어가면 방 전용 버튼(꾸미기·상태·설정·퍼가기)은 숨긴다 — 광장 버튼과 겹치고 방 설정 창이 월드 위에 겹쳐 떴다 */
.miniroom-box.is-world .mr3d-tools{display:none}
/* 로딩 화면 — 라이믹스 boot.js·이온디 엔진 mh3d.js 공용 규칙:
 *   부트가 번들을 받는 동안 상자에 .mr3d-loading 을 붙이고, 문구는 data-mr3d-loading 속성(언어별)으로 넘긴다.
 *   그림·막대·문구는 모두 여기(상자의 ::before/::after)에서 그린다 — 부트 쪽에는 마크업을 만들지 않는다. */
.miniroom-box.mr3d-loading{cursor:progress}
.miniroom-box.mr3d-loading::before{
  content:""; position:absolute; inset:0; z-index:7; border-radius:inherit;
  background:
    linear-gradient(90deg, transparent 0 35%, var(--color-badge, #446efe) 35% 65%, transparent 65% 100%) 0 100% / 300% 4px no-repeat,
    linear-gradient(#fdf1f4f2, #eaf4fbf2);
  animation:mr3d-bar 1.3s linear infinite;
}
.miniroom-box.mr3d-loading::after{
  content:attr(data-mr3d-loading); position:absolute; left:50%; top:50%; z-index:8; transform:translate(-50%,-50%);
  padding-top:64px; min-width:12em; text-align:center; white-space:nowrap; pointer-events:none;
  font:700 12px/1.4 var(--mh-font, sans-serif); letter-spacing:.04em; color:#6b6478;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 5 59 19 32 33 5 19z' fill='%23ffe3ea'/%3E%3Cpath d='M5 19 32 33v26L5 45z' fill='%23f6a9bd'/%3E%3Cpath d='M59 19 32 33v26l27-14z' fill='%23a9d5f2'/%3E%3Cpath d='M40 40l9-4.6v11l-9 4.6z' fill='%23fff'/%3E%3Cpath d='M12 30l8 4v6l-8-4z' fill='%23fff8c9'/%3E%3C/svg%3E") 50% 0 / 54px 54px no-repeat;
  animation:mr3d-bob 1.1s ease-in-out infinite;
}
@keyframes mr3d-bar{from{background-position:150% 100%, 0 0}to{background-position:-50% 100%, 0 0}}
@keyframes mr3d-bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
@media (prefers-reduced-motion:reduce){.miniroom-box.mr3d-loading::before,.miniroom-box.mr3d-loading::after{animation:none}}
.mr3d-help{position:absolute; top:.5rem; right:.5rem; z-index:2; width:2rem; height:2rem; border:0; border-radius:50%; background:#ffffffd0; color:#555; font:700 15px/2rem sans-serif; cursor:pointer; padding:0; box-shadow:0 1px 4px rgba(0,0,0,.2)}
.mr3d-help:hover{background:#fff}
/* 사진기 — 도움말(?) 왼쪽, 늘 보인다 */
.mr3d-cam{position:absolute; top:.5rem; right:2.9rem; z-index:2; width:2rem; height:2rem; border:0; border-radius:50%; background:#ffffffd0; font:15px/2rem sans-serif; cursor:pointer; padding:0; box-shadow:0 1px 4px rgba(0,0,0,.2)}
.mr3d-cam:hover{background:#fff}.mr3d-cam:disabled{opacity:.5}
.mr3d-wfs .mr3d-cam{top:max(.5rem,env(safe-area-inset-top))}
.mr3d-hint{position:absolute; left:50%; bottom:.7rem; z-index:2; transform:translateX(-50%); opacity:0; pointer-events:none; padding:.25rem .8rem; border-radius:1rem; background:rgba(40,36,50,.78); color:#fff; font:600 12px/1.5 sans-serif; white-space:nowrap; transition:opacity .15s}
.mr3d-hint.on{opacity:1}