/* =====================================================================
   room.css : 집 안 실내 배경 (타로의 집 · 토정 한옥 · 달빛 카페 · 별빛 공원)
   ---------------------------------------------------------------------
   <body data-room="tarot|hanok|cafe|park"> 만 붙이면 그 집의 실내가 깔려요.
   실내 그림은 rooms/ 폴더에 넣어요:  rooms/{room}-wide.webp (PC), rooms/{room}-tall.webp (휴대폰)
   그림이 아직 없으면 아래 색 그라데이션이 대신 보여요.
   ===================================================================== */
body[data-room] { background: #0b0a18; }

.room-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  animation: roomIn 1.1s ease-out both, roomBreathe 24s ease-in-out 1.1s infinite alternate;
}
/* 글을 읽기 쉽게 가운데를 조금 어둡게 */
.room-shade {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 75% at 50% 45%, rgba(8, 7, 20, .72), rgba(8, 7, 20, .45) 60%, rgba(8, 7, 20, .25) 100%),
    linear-gradient(180deg, rgba(8, 7, 20, .35), rgba(8, 7, 20, 0) 25%, rgba(8, 7, 20, 0) 75%, rgba(8, 7, 20, .6));
}
.room-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
@keyframes roomIn { from { opacity: 0; transform: scale(1.12); filter: blur(6px) brightness(1.4); } to { opacity: 1; transform: scale(1.02); filter: none; } }
@keyframes roomBreathe { from { transform: scale(1.02); } to { transform: scale(1.06); } }

/* ── 그림 (PC 가로 / 휴대폰 세로) + 그림이 없을 때의 색 ── */
body[data-room="tarot"] .room-bg {
  background-image: url("rooms/tarot-wide.webp"),
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(197, 139, 216, .35), transparent 70%),
    radial-gradient(ellipse 40% 30% at 15% 85%, rgba(255, 170, 90, .28), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 85%, rgba(255, 170, 90, .28), transparent 70%),
    linear-gradient(180deg, #1d1033, #2a1440 60%, #160b24);
}
body[data-room="hanok"] .room-bg {
  background-image: url("rooms/hanok-wide.webp"),
    radial-gradient(ellipse 55% 40% at 50% 25%, rgba(255, 207, 122, .28), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 220, 160, .05) 0 2px, transparent 2px 90px),
    linear-gradient(180deg, #2b1d18, #1f1612 60%, #140e0b);
}
body[data-room="cafe"] .room-bg {
  background-image: url("rooms/cafe-wide.webp"),
    radial-gradient(ellipse 50% 40% at 30% 30%, rgba(255, 200, 120, .3), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 70%, rgba(200, 120, 70, .25), transparent 70%),
    linear-gradient(180deg, #2a1c1a, #1d1416 60%, #120d10);
}
body[data-room="park"] .room-bg {
  background-image: url("rooms/park-wide.webp"),
    radial-gradient(ellipse 60% 35% at 50% 0%, rgba(120, 150, 255, .3), transparent 70%),
    linear-gradient(180deg, #070a24, #121a45 55%, #1b2340);
}
@media (max-width: 760px), (orientation: portrait) and (max-width: 1000px) {
  body[data-room="tarot"] .room-bg { background-image: url("rooms/tarot-tall.webp"), radial-gradient(ellipse 70% 40% at 50% 25%, rgba(197, 139, 216, .35), transparent 70%), radial-gradient(ellipse 60% 25% at 50% 95%, rgba(255, 170, 90, .3), transparent 70%), linear-gradient(180deg, #1d1033, #2a1440 60%, #160b24); }
  body[data-room="hanok"] .room-bg { background-image: url("rooms/hanok-tall.webp"), radial-gradient(ellipse 70% 35% at 50% 20%, rgba(255, 207, 122, .28), transparent 70%), linear-gradient(180deg, #2b1d18, #1f1612 60%, #140e0b); }
  body[data-room="cafe"] .room-bg { background-image: url("rooms/cafe-tall.webp"), radial-gradient(ellipse 70% 35% at 50% 25%, rgba(255, 200, 120, .3), transparent 70%), linear-gradient(180deg, #2a1c1a, #1d1416 60%, #120d10); }
  body[data-room="park"] .room-bg { background-image: url("rooms/park-tall.webp"), radial-gradient(ellipse 80% 30% at 50% 0%, rgba(120, 150, 255, .3), transparent 70%), linear-gradient(180deg, #070a24, #121a45 55%, #1b2340); }
}

/* ── 문패 (어느 집에 들어왔는지) ── */
.room-plaque {
  display: inline-flex; align-items: center; gap: .5em; align-self: center;
  padding: .35em 1em; border-radius: 8px; font-size: .82rem; letter-spacing: .06em;
  font-family: 'Gowun Batang', serif; color: #ffe6b0;
  background: repeating-linear-gradient(90deg, #4a2e1c 0 5px, #55351f 5px 9px);
  border: 1.5px solid #c9a15a; box-shadow: inset 0 0 0 2px #2e1b10, 0 6px 18px rgba(0, 0, 0, .45);
}
.room-plaque a { color: inherit; text-decoration: none; opacity: .8; }
.room-plaque a:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .room-bg { animation: none; } }