/* 냥이 방 모듈 스타일 */
/* 방은 항상 3:4. 가구·고양이 좌표가 이 비율을 전제로 한다 */
.room { position: relative; width: min(100%, calc((100dvh - 330px) * .75)); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); container-type: inline-size; touch-action: none; }
.room-item { position: absolute; transform: translateX(-50%); transform-origin: 50% 100%; }
.room-item > img { display: block; width: 100%; height: auto; pointer-events: none; }
.room-item.flip > img { transform: scaleX(-1); }
.room-item.wob { animation: room-wob .4s ease-out; }
@keyframes room-wob { 30% { transform: translateX(-50%) rotate(-3deg) scale(1.04); } 65% { transform: translateX(-50%) rotate(2deg); } }
.room-ph { display: flex; align-items: center; justify-content: center; text-align: center; aspect-ratio: 1; background: rgba(255, 255, 255, .8); border: 2px dashed var(--wall); border-radius: 12px; font-size: 11px; font-weight: 700; padding: 4px; }

/* 고양이: 위치와 몸짓은 room.js가 매 프레임 transform으로 넣는다 */
.room-cat { position: absolute; left: 0; top: 0; width: 17cqw; aspect-ratio: 1; transform-origin: 50% 100%; cursor: grab; will-change: transform; }
.rc-shadow { position: absolute; left: 18%; right: 18%; bottom: -3%; height: 13%; border-radius: 50%; background: rgba(75, 44, 63, .2); transform-origin: 50% 50%; }
.rc-body { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.room-cat.held .rc-body { transform-origin: 50% 12%; }
/* 세 자세 그림은 여백과 크기가 달라서, 발이 바닥에 닿고 머리 크기가 같아지게 맞춘다 */
.rc-img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.rc-img .cat { width: 100%; height: 100%; }
.rc-img.p-sit { transform: translateY(6.8%); }
.rc-img.p-walk { transform-origin: 50% 96%; transform: translateY(3.9%) scale(1.14); }
.rc-img.p-sleep { transform-origin: 50% 96%; transform: translateY(3.9%) scale(.92); }
.rc-body[data-pose="sit"] .p-sit, .rc-body[data-pose="walk"] .p-walk, .rc-body[data-pose="sleep"] .p-sleep { opacity: 1; }
.room-cat.gift::after { content: ""; position: absolute; left: 31%; top: -42%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b8 0 18%, #ffc93c 20% 100%); border: 2px solid #e39a1c; animation: room-bob 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes room-bob { 50% { transform: translateY(-18%); } }
.room-fx { position: absolute; z-index: 3000; transform: translate(-50%, 0); font: 400 15px var(--display); color: #c2527a; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; pointer-events: none; white-space: nowrap; animation: room-float 1.7s ease-out forwards; }
@keyframes room-float { from { opacity: 0; transform: translate(-50%, 4px) scale(.7); } 18% { opacity: 1; transform: translate(-50%, -4px) scale(1); } 70% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -24px) scale(1); } }
.room-bubble { position: absolute; z-index: 3001; transform: translate(-50%, -100%); background: #fff; border-radius: 14px; padding: 7px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 3px 10px rgba(75, 44, 63, .2); pointer-events: none; animation: room-pop .18s ease-out; }
.room-bubble b { font-family: var(--display); font-weight: 400; margin-right: 4px; }
@keyframes room-pop { from { opacity: 0; transform: translate(-50%, -80%) scale(.8); } }

/* 꾸미기 모드 */
.room.editing { box-shadow: 0 0 0 3px var(--yellow), var(--shadow); }
.room.editing .room-cat { opacity: .35; pointer-events: none; }
.room.editing .room-item { cursor: grab; }
.room.editing .room-item::after { content: ""; position: absolute; inset: -2px; border: 2px dashed rgba(90, 61, 74, .35); border-radius: 10px; }
.room.editing .room-item.sel::after { border: 3px solid #ffb62e; background: rgba(255, 215, 133, .18); }
.room-editbar { margin-top: 10px; }
.room-edithelp { margin: 0 4px 8px; font-size: 13px; color: var(--ink-soft); }
.room-edithelp b { font: 400 16px var(--display); color: var(--ink); margin-right: 6px; }
.room-tray { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; min-height: 76px; -webkit-overflow-scrolling: touch; }
.room-tray .room-opt { flex: none; width: 62px; }
.room-tray:empty::before { content: attr(data-empty); font-size: 13px; color: var(--ink-soft); padding: 18px 6px; }
.room-editbtns { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
.room-editbtns .btn:disabled { opacity: .4; }

.room-status { margin-top: 12px; }
.room-status > svg.ic { width: 34px; height: 34px; color: #e58aa6; }
.room-btns { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: 12px; }
.room-btns .btn { padding: 13px 10px; font-size: 17px; }
.tab.room-dot { position: relative; }
.tab.room-dot::after { content: ""; position: absolute; top: 2px; right: 22%; width: 10px; height: 10px; border-radius: 50%; background: #f06a6a; border: 2px solid #fff; }

/* 상점 */
.room-shopitem { position: relative; }
.room-thumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 72px; margin-bottom: 4px; }
.room-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.room-thumb .room-ph { width: 64px; }
.room-paw { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: #ffe3ec; color: #e0668c; display: flex; align-items: center; justify-content: center; }
.room-paw svg.ic { width: 16px; height: 16px; }
.room-paw.got { background: #fff; box-shadow: var(--shadow); }
.room-paw .cat { width: 22px; height: 22px; }
.meta-shopnote svg.ic { width: 15px; height: 15px; vertical-align: -2px; color: #e0668c; }
.room-bigprev { height: 130px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.room-bigprev img { max-height: 100%; max-width: 70%; object-fit: contain; border-radius: 12px; }
.room-hint { color: #c2527a; font-weight: 700; font-size: 14px !important; }
.room-hint svg.ic { width: 16px; height: 16px; vertical-align: -3px; }
.room-opt { background: #fff; border: 3px solid transparent; border-radius: 14px; box-shadow: var(--shadow); padding: 4px; }
.room-opt .room-thumb { height: 50px; margin: 0; }
.room-opt.on { border-color: var(--yellow); background: #fff8e6; }
.room-arrive .cat { width: 52px; height: 52px; flex: none; }
@media (prefers-reduced-motion: reduce) { .room-cat.gift::after, .room-item.wob { animation: none !important; } }