*{box-sizing:border-box}
:root{
  --pink:#df7690;
  --deep:#b95470;
  --cream:#fffaf6;
  --line:#efb6c1;
  --ink:#4a3737;
}
html,body{margin:0;width:100%;min-height:100%}
body{
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:auto;
  background:linear-gradient(135deg,#ffdce4,#fff4ef 55%,#ffd8e1);
  color:var(--ink);
  font-family:Pretendard,"Noto Sans KR",Arial,sans-serif;
}
.page{
  width:min(94vw,1080px,calc(86vh * 1.20125));
  margin:auto;
  padding:14px 0;
}
.minihome{
  position:relative;
  width:100%;
  aspect-ratio:1343/1118;
  overflow:hidden;
  border-radius:15px;
  background:#fff7f2;
  box-shadow:0 14px 42px rgba(117,54,71,.20);
}
.minihome img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.hotspot{
  position:absolute;
  display:block;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  border-radius:10px;
  -webkit-tap-highlight-color:transparent;
}
.hotspot::after{
  content:"";
  position:absolute;
  inset:1px;
  border:2px solid transparent;
  border-radius:inherit;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .14s ease;
}
.hotspot:hover::after,
.hotspot:focus-visible::after{
  border-color:rgba(224,112,141,.86);
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 2px rgba(255,255,255,.86);
  transform:translateY(-1px);
}
.hotspot:focus-visible{outline:none}

/* 프로필: 캐릭터와 숫자 영역을 분리 */
.profile-card{left:3.0%;top:12.2%;width:12.0%;height:12.2%;border-radius:16px}
.counter-area{left:10.9%;top:17.1%;width:9.2%;height:6.7%;border-radius:8px}

/* 메뉴 행: 세로 간격과 높이를 실제 이미지에 맞춤 */
.menu-room,.menu-diary,.menu-photo,.menu-guest,.menu-gift{
  left:3.15%;
  width:17.75%;
  height:3.35%;
  border-radius:999px;
}
.menu-room{top:31.35%}
.menu-diary{top:34.95%}
.menu-photo{top:38.55%}
.menu-guest{top:42.15%}
.menu-gift{top:45.75%}

/* 링크 버튼 */
.link-button{
  left:3.05%;
  top:56.05%;
  width:18.2%;
  height:5.15%;
  border-radius:12px;
}

/* 뮤직 버튼: 그림 속 원형 버튼 각각에 맞춤 */
.music-button{
  top:76.85%;
  width:4.2%;
  height:5.05%;
  border-radius:50%;
}
.music-play{left:3.35%}
.music-pause{left:7.95%}
.music-stop{left:12.55%}
.music-next{left:17.15%}

/* 방 안 오브젝트 */
.concert{left:30.8%;top:14.55%;width:9.1%;height:17.0%;border-radius:5px}
.movie{left:68.05%;top:15.55%;width:10.3%;height:17.3%;border-radius:5px}
.sketch{left:29.4%;top:74.2%;width:18.0%;height:11.3%;border-radius:12px}
.computer{left:78.2%;top:48.3%;width:17.2%;height:19.0%;border-radius:12px}
.pets{left:38.4%;top:58.6%;width:30.8%;height:13.8%;border-radius:18px}
.ticket{left:51.7%;top:74.6%;width:20.2%;height:10.8%;border-radius:8px}

/* 팝업 */
.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:22px;
  background:rgba(68,38,45,.46);
  backdrop-filter:blur(5px);
  z-index:20;
}
.modal.open{display:grid}
.modal-card{
  position:relative;
  width:min(90vw,500px);
  max-height:min(76vh,650px);
  overflow:auto;
  padding:32px 28px 28px;
  border:3px solid var(--line);
  border-radius:20px;
  background:var(--cream);
  box-shadow:0 22px 60px rgba(61,31,39,.26);
  animation:popIn .18s ease-out;
}
@keyframes popIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.close{
  position:absolute;
  right:14px;
  top:12px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#f7cbd4;
  color:#9e4960;
  font-size:25px;
  line-height:36px;
  cursor:pointer;
}
.eyebrow{
  margin:0 0 6px;
  color:var(--deep);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
}
h2{
  margin:0 0 17px;
  color:var(--deep);
  font-size:clamp(23px,4vw,32px);
}
#modalBody{line-height:1.72;font-size:16px}
#modalBody p{margin:0 0 16px}
.hint,.coming{color:#80676d}
.go-link{
  display:block;
  margin-top:20px;
  padding:13px 17px;
  border:2px solid #e59aac;
  border-radius:14px;
  background:#f9cbd5;
  color:#843d52;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  box-shadow:0 4px 0 #d98ba0;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.go-link:hover,.go-link:focus-visible{
  transform:translateY(2px);
  box-shadow:0 2px 0 #d98ba0;
  background:#ffd7df;
}
.toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translate(-50%,18px);
  opacity:0;
  padding:11px 17px;
  border-radius:999px;
  background:#4f3a3f;
  color:#fff;
  font-size:14px;
  transition:.25s;
  z-index:30;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:760px){
  body{display:block;background:#fff3f6}
  .page{width:100%;max-width:none;padding:0}
  .minihome{width:100%;border-radius:0;box-shadow:none}
  .modal{padding:16px}
  .modal-card{width:min(94vw,500px);max-height:80vh;padding:30px 21px 23px}
}