/* css/s-room.css — 담당: home. 우리 방(BUILD 5-3, UX K4, FUN 5-2·5-3·5-5). 접두 room- 만 정의.
   받은 것만 보임: 빈칸·실루엣·장수·숫자 없음. 끌기 없음(누르고 자리 누르기). */

.room-screen{
  /* #app 이 .app-screen(여백·최대 너비)이라 여기서는 세로 줄만 */
  display:flex; flex-direction:column; gap:12px;
  width:100%; max-width:480px; margin:0 auto;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 16px calc(var(--action-bottom, 30px) + 16px + env(safe-area-inset-bottom, 0px));
  overflow-x:hidden;
}
.app-screen > .room-screen{ width:auto; max-width:none; padding:0; margin:0 0 calc(-88px + var(--action-bottom, 30px) + 16px); }
.room-screen > *{ min-width:0; }

.room-head{ display:flex; align-items:center; gap:8px; min-height:var(--touch-child, 56px); }
.room-back.secondary-button{ width:auto; flex:none; padding:6px 16px; border-radius:var(--radius-pill, 999px); }
.room-title{
  flex:1; min-width:0; margin:0; text-align:right;
  font-family:var(--font-heading); font-size:var(--fs-section, 20px); font-weight:800; line-height:1.3; color:var(--color-ink, #5A3E2B);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.room-tabs .room-tab.ghost-button{ min-height:var(--touch-child, 56px); border-radius:var(--radius-pill, 999px); }
.room-tabs .room-tab.ghost-button:active{ background:rgba(90,62,43,.06); }
.room-tabs .room-tab[aria-selected="true"]{ background:var(--color-primary, #F6C85F); border-color:var(--color-ink, #5A3E2B); }

.room-panel{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.room-h2{ margin:0; font-family:var(--font-heading); font-size:var(--fs-section, 20px); font-weight:800; color:var(--color-ink, #5A3E2B); }
.room-h3{ margin:0; font-family:var(--font-heading); font-size:var(--fs-child-body, 18px); font-weight:800; color:var(--color-ink, #5A3E2B); }
.room-hint{
  margin:0; font-size:var(--fs-child-body, 18px); font-weight:600; line-height:1.4; color:var(--kid-guide, #7A6150);
  word-break:keep-all; overflow-wrap:anywhere;
}
.room-empty{ text-align:center; }

/* 새로 온 물건(칭호 고르기·방에 놓인 선물): 포장·상자 없이 놓여 있음 */
.room-newbox{
  display:flex; flex-direction:column; gap:10px;
  padding:14px; background:#fff;
  border:2px solid var(--kid-border, #EAD9C9); border-radius:var(--radius-card, 24px);
  box-shadow:var(--shadow-card);
}
.room-new-row{ display:flex; flex-wrap:wrap; gap:10px; }
.room-new.ghost-button{
  flex-direction:column; justify-content:flex-start; gap:4px;
  width:96px; height:auto; min-height:96px; padding:8px 6px;
  background:var(--kid-bg, #FFF6E8); border:2px solid var(--kid-border-press, #9C7F67); border-radius:20px;
}
.room-new-pic{ display:block; width:76px; height:76px; flex:none; }
.room-new-pic > *{ width:100%; height:100%; object-fit:contain; display:block; min-height:0; }
/* 고르는 물건 이름: 글자로 보임(그림만으로 고르지 않게) */
.room-new-name,.room-gift-name{
  display:block; max-width:100%;
  font-size:var(--fs-small, 14px); font-weight:700; line-height:1.3; text-align:center; color:var(--color-ink, #5A3E2B);
  word-break:keep-all; overflow-wrap:anywhere;
}
.room-gift-name{ align-self:center; font-size:var(--fs-child-body, 18px); }
.room-gift{ display:flex; flex-direction:column; gap:10px; }
.room-gift-pic{ display:flex; align-items:flex-end; gap:10px; }
.room-gift-item{ width:96px; height:96px; flex:none; }
.room-gift-item > *,.room-gift-ch > *{ width:100%; height:100%; object-fit:contain; display:block; min-height:0; }
.room-gift-ch{ width:72px; height:72px; flex:none; }
.room-gift-line{
  margin:0; font-size:var(--fs-child-body, 18px); font-weight:700; line-height:1.45; color:var(--color-ink, #5A3E2B);
  word-break:keep-all; overflow-wrap:anywhere;
}

/* 방 그림 + 자리 8개 */
.room-stage{
  position:relative; width:100%; aspect-ratio:880 / 1168; max-height:62vh; max-height:62dvh;
  margin:0 auto; overflow:hidden;
  border-radius:var(--radius-card, 24px);
  background:var(--kid-peach, #F7D6A5);
  box-shadow:var(--shadow-card);
}
@supports (aspect-ratio:1){ .room-stage{ width:auto; max-width:100%; height:min(62dvh, calc((100vw - 32px) * 1.327)); } }
.room-stage-bg{ position:absolute; inset:0; }
.room-stage-bg > *,.room-stage-bg img,.room-stage-bg svg{ position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover; display:block; border-radius:0; }
.room-stage .room-slot.ghost-button{
  position:absolute; z-index:2;
  min-width:var(--touch-child, 56px); min-height:0; aspect-ratio:1;
  padding:2px; transform:translate(-50%, -50%);
  background:transparent; border:2px dashed transparent; border-radius:18px;
}
.room-stage .room-slot.ghost-button:active{ background:rgba(255,255,255,.3); }
/* 빈 자리는 고르기 전에도 옅은 점선 원으로(어디에 놓을 수 있는지 보이게). 앨범(보기만)에서는 숨김 */
.room-stage:not(.is-choosing) .room-slot.ghost-button:not(.has-item){
  border-color:rgba(122,97,80,.45); border-radius:50%;
  background:rgba(255,255,255,.22);
}
.room-screen[data-album="1"] .room-stage .room-slot.ghost-button:not(.has-item){ border-color:transparent; background:transparent; }
/* 집어 든 물건(놓인 자리를 한 번 누름): 실선 테두리 + 옅은 바탕, 모양으로도 구분 */
.room-stage.is-choosing .room-slot.has-item.is-held{ border-width:3px; background:rgba(255,255,255,.7); }
.room-slot > *{ width:100%; height:100%; object-fit:contain; display:block; min-height:0; }
.room-stage.is-choosing .room-slot{
  border-color:var(--kid-border-press, #9C7F67);
  background:rgba(255,255,255,.55);
  animation:room-glow 2.4s ease-in-out infinite;   /* 낮은 대비, 2초 이상 */
}
.room-stage.is-choosing .room-slot.has-item{ border-style:solid; }
@keyframes room-glow{ 0%,100%{ box-shadow:0 0 0 0 rgba(246,200,95,0); } 50%{ box-shadow:0 0 0 5px rgba(246,200,95,.35); } }
.room-stage--empty{ margin-top:4px; }

.room-ch-wrap{ position:absolute; left:8%; bottom:3%; z-index:3; width:22%; min-width:var(--touch-child, 56px); }
.room-ch.ghost-button{ display:block; width:100%; min-height:0; aspect-ratio:1; padding:0; background:transparent; border:0; border-radius:50%; }
.room-ch.ghost-button:active{ background:transparent; }
.room-ch-pic{ display:block; width:100%; height:100%; }
.room-ch-pic img{ width:100%; height:100%; object-fit:contain; display:block; }
.room-ch-pic.is-hop{ animation:room-hop 420ms var(--ease-gentle) 1; }
@keyframes room-hop{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-4px); } }
.room-bubble{
  position:absolute; left:0; bottom:100%; z-index:4;
  width:max-content; max-width:min(60vw, 220px);
  padding:6px 12px; margin-bottom:4px;
  background:#fff; color:var(--color-ink, #5A3E2B);
  border:2px solid var(--kid-border-press, #9C7F67); border-radius:16px;
  font-size:16px; font-weight:700; line-height:1.35;
  word-break:keep-all; overflow-wrap:anywhere; pointer-events:none;
}
.room-bubble[hidden]{ display:none; }

/* 내 물건 줄: 누르면 고름(체크 + 굵은 테두리 + 바탕) */
.room-items{ display:flex; flex-wrap:wrap; gap:10px; }
.room-item.ghost-button{
  position:relative; width:76px; height:76px; min-height:0; padding:6px;
  background:#fff; border:2px solid var(--kid-border-press, #9C7F67); border-radius:18px;
}
.room-item > *{ width:100%; height:100%; object-fit:contain; display:block; min-height:0; }
.room-item[aria-pressed="true"]{ border:3px solid var(--color-ink, #5A3E2B); background:var(--kid-green, #CFE8C6); }
.room-item[aria-pressed="true"]::after{
  content:""; position:absolute; right:6px; top:4px;
  width:7px; height:13px; border:solid var(--color-ink, #5A3E2B); border-width:0 3px 3px 0; transform:rotate(45deg);
}
.room-item.is-placed:not([aria-pressed="true"])::before{   /* 방에 놓인 물건: 아래 작은 막대 모양 */
  content:""; position:absolute; left:50%; bottom:4px; width:18px; height:4px; margin-left:-9px;
  border-radius:2px; background:var(--kid-border-press, #9C7F67);
}

/* 선반: 조약돌 병(칸·눈금·숫자 없음) + 누르면 장소 이름을 읽는 조약돌 */
.room-shelf{
  display:flex; align-items:flex-end; gap:12px;
  padding:12px 14px 16px;
  background:#F3E3CF; border-radius:18px;
  box-shadow:inset 0 -8px 0 rgba(156,127,103,.35);
}
.room-jar{ flex:none; width:110px; height:140px; }
.room-jar > *,.room-jar svg{ width:100%; height:100%; display:block; }
.room-jar-css{
  position:relative; display:block; width:100%; height:100%;
  border:3px solid var(--color-ink, #5A3E2B); border-radius:22px 22px 26px 26px;
  background:rgba(255,255,255,.6); overflow:hidden;
}
.room-jar-fill{ position:absolute; left:0; right:0; bottom:0; background:var(--kid-peach, #F7D6A5); }
.room-pebbles{ flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-end; }
.room-pebble.ghost-button{ width:56px; height:56px; min-height:0; padding:10px; border-radius:50%; background:transparent; }
.room-pebble > *{ width:100%; height:100%; display:block; }
.room-pebble-css{ border-radius:48% 52% 45% 55%; border:2px solid rgba(90,62,43,.45); }

/* 도감: 책 그림 칸(받은 것이 있는 책만) */
.room-books{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.room-book.ghost-button{
  position:relative; flex-direction:column; gap:8px;
  min-height:120px; padding:14px 8px;
  background:#fff; border:2px solid var(--kid-border-press, #9C7F67); border-radius:var(--radius-task, 18px);
  font-size:var(--fs-child-body, 18px); font-weight:700; text-align:center;
}
.room-book-name{ word-break:keep-all; overflow-wrap:anywhere; line-height:1.3; }
.room-book-cover{
  position:relative; display:block; width:46px; height:58px;
  border:2px solid var(--color-ink, #5A3E2B); border-radius:5px 10px 10px 5px;
  background:var(--room-book, var(--kid-peach, #F7D6A5));
}
.room-book-spine{ position:absolute; left:6px; top:0; bottom:0; width:3px; background:rgba(90,62,43,.4); }
/* 책 표지 그림: 책마다 다른 모양(색만으로 구분하지 않음) */
.room-book-icon{ position:absolute; left:11px; right:3px; top:50%; height:30px; transform:translateY(-50%); }
.room-book-icon svg{ display:block; width:100%; height:100%; }
.room-book-icon svg *{ fill:rgba(255,255,255,.85); stroke:var(--color-ink, #5A3E2B); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.room-book-icon svg .ink{ fill:var(--color-ink, #5A3E2B); stroke:none; }
.room-book-icon svg .o{ fill:none; }
.room-book-cover[data-kind="scene"]{ --room-book:#F7D6A5; }
.room-book-cover[data-kind="face"]{ --room-book:#FFCCC2; }
.room-book-cover[data-kind="why"]{ --room-book:#CFE8C6; }
.room-book-cover[data-kind="pieces"]{ --room-book:#D9D2FF; }
.room-book-cover[data-kind="met"]{ --room-book:#A8B8FF; }
.room-book-cover[data-kind="stamps"]{ --room-book:#F6C85F; }
.room-book-cover[data-kind="story"]{ --room-book:#84C7AE; }
.room-book-cover[data-kind="notebook"]{ --room-book:#F3B7A0; }
.room-book-cover[data-kind="favors"]{ --room-book:#FFF0C2; }
.room-book-cover[data-kind="postcards"]{ --room-book:#E8DCCB; }
/* 새로 온 것: 모양(마름모) + 테두리, 글자는 aria-label에 */
.room-book-new{
  position:absolute; top:10px; right:12px;
  width:12px; height:12px; transform:rotate(45deg); border-radius:3px;
  background:var(--color-primary, #F6C85F); border:2px solid var(--color-ink, #5A3E2B);
}

/* 책 시트 안 */
.room-sheet-holder{ min-width:0; }
.room-sheet{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.room-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:10px; }
.room-tile.ghost-button{
  position:relative; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px;
  min-height:var(--touch-child, 56px); padding:10px 8px;
  background:#fff; border:2px solid var(--kid-border-press, #9C7F67); border-radius:var(--radius-task, 18px);
  font-size:var(--fs-body, 16px); font-weight:600; text-align:center;
}
.room-tile--wide.ghost-button{ grid-column:1 / -1; flex-direction:row; justify-content:flex-start; text-align:left; }
.room-tile-name{ font-size:var(--fs-body, 16px); font-weight:700; line-height:1.3; word-break:keep-all; overflow-wrap:anywhere; }
.room-tile-sub{ font-size:var(--fs-small, 14px); font-weight:600; color:var(--color-ink-soft, #8B6B5A); }
.room-face-name{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.room-face-name .room-feel-shape{ display:inline-block; flex:none; width:26px; height:26px; }
.room-favor-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.room-favor-what{ word-break:keep-all; overflow-wrap:anywhere; }
.room-tile-text{ flex:1; min-width:0; font-size:var(--fs-child-body, 18px); font-weight:600; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; }
.room-face,.room-stamp{ display:block; width:88px; height:88px; }
.room-face > *,.room-stamp > *{ width:100%; height:100%; object-fit:contain; display:block; min-height:0; }
.room-stamp.is-gold{ filter:drop-shadow(0 0 3px rgba(246,200,95,.9)); }
.room-why-chip{
  display:inline-flex; align-items:center; flex:none;
  padding:4px 10px; border-radius:999px;
  background:var(--kid-green, #CFE8C6); border:2px solid var(--color-ink, #5A3E2B);
  font-size:var(--fs-small, 14px); font-weight:700;
}
.room-why-chip[data-k="body"]{ background:var(--kid-pink, #FFCCC2); }
.room-why-chip[data-k="share"]{ background:var(--kid-purple, #D9D2FF); }
.room-sticker-pic{ display:flex; justify-content:center; gap:2px; width:100%; min-height:64px; padding:4px; border-radius:14px; background:var(--kid-bg, #FFF6E8); }
.room-sticker-ch{ width:64px; height:64px; }
.room-sticker-ch > *{ width:100%; height:100%; object-fit:contain; display:block; }
.room-sticker.is-new{ border-style:dashed; transform:rotate(-2deg); }
.room-sticker.is-stuck{ animation:room-stick 260ms var(--ease-gentle) 1 both; }
@keyframes room-stick{ to{ transform:translateY(6px) scale(.94); opacity:0; } }
.room-pieces{ display:flex; flex-direction:column; gap:8px; }
.room-piece-list{ display:flex; flex-direction:column; gap:8px; }
.room-piece-dot{ flex:none; width:16px; height:16px; border-radius:4px; transform:rotate(45deg); background:var(--kid-purple, #D9D2FF); border:2px solid var(--color-ink, #5A3E2B); }
.room-again.secondary-button{ align-self:flex-start; width:auto; }
.room-word.small-button{ align-self:flex-start; }
.room-notebook{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.room-note-ch{ flex:none; width:56px; height:56px; }
.room-note-ch > *{ width:100%; height:100%; object-fit:contain; display:block; }
.room-postcard{ position:relative; flex:none; width:96px; aspect-ratio:3 / 2; border-radius:10px; overflow:hidden; background:var(--kid-peach, #F7D6A5); }
.room-postcard > .room-postcard-art,.room-postcard > img,.room-postcard > .fallback-box,.room-postcard > .home-svg{ position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover; }
.room-postcard-ch{ position:absolute; right:4px; bottom:2px; width:40%; aspect-ratio:1; }
.room-postcard-ch > *{ width:100%; height:100%; object-fit:contain; display:block; }
.room-story-thumb{ flex:none; display:flex; width:96px; height:64px; border-radius:10px; overflow:hidden; background:var(--kid-green, #CFE8C6); justify-content:center; }
.room-story-thumb img{ width:100%; height:100%; object-fit:cover; }
.room-story-chars{ display:flex; height:100%; }
.room-story-chars > *{ height:100%; width:auto; max-width:48px; object-fit:contain; }
.room-tile .room-book-new{ top:8px; right:8px; }

.room-scene{ position:relative; width:100%; min-height:120px; border-radius:var(--radius-card, 24px); overflow:hidden; background:var(--kid-green, #CFE8C6); }
.room-scene > .scene{ border-radius:0; }
.room-scene > img,.room-scene > .room-story-art{ display:block; width:100%; height:auto; aspect-ratio:1024 / 688; object-fit:cover; }
.room-scene-row{ display:flex; justify-content:center; align-items:flex-end; gap:8px; padding:12px; min-height:120px; }
.room-scene-row > *{ width:96px; height:96px; object-fit:contain; }
.room-cap{
  margin:0; font-size:var(--fs-child-body, 18px); font-weight:600; line-height:1.5; color:var(--color-ink, #5A3E2B);
  word-break:keep-all; overflow-wrap:anywhere;
}
.room-cap.is-past{ color:var(--color-ink-soft, #8B6B5A); }
.room-cap--sub{ color:var(--kid-guide, #7A6150); }
.room-story-text{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; background:#fff; border:2px solid var(--kid-border, #EAD9C9); border-radius:18px; }
.room-story-ask{ font-weight:800; }
.room-story-chips{ gap:8px; }
.room-stampcard{ align-items:center; text-align:center; }
.room-stampcard-pic{ width:min(56vw, 200px); aspect-ratio:1; }
.room-stampcard-pic > *{ width:100%; height:100%; object-fit:contain; display:block; min-height:0; }
.room-stampcard-pic.is-gold{ filter:drop-shadow(0 0 6px rgba(246,200,95,.9)); }
.room-beats{ align-items:stretch; }
.room-beat-pic{ display:flex; justify-content:center; gap:8px; }
.room-beat-pic > *{ width:96px; height:96px; object-fit:contain; display:block; }

/* 앨범 모드(범위 밖 나이): 보기만 */
.room-screen[data-album="1"] .room-slot{ cursor:default; }

@media (prefers-reduced-motion: reduce){
  .room-stage.is-choosing .room-slot,.room-ch-pic.is-hop,.room-sticker.is-stuck{ animation:none; }
  .room-stage.is-choosing .room-slot{ border-width:3px; border-style:solid; }
}
.motion-reduce .room-stage.is-choosing .room-slot,.motion-reduce .room-ch-pic.is-hop,.motion-reduce .room-sticker.is-stuck{ animation:none; }
.motion-reduce .room-stage.is-choosing .room-slot{ border-width:3px; border-style:solid; }

/* 그림이 없을 때의 색 상자는 작은 자리에서 그 자리 크기에 맞춤 */
.room-screen .fallback-box,
.room-sheet .fallback-box{ min-height:0; height:100%; }
.room-sticker-fb{ width:64px; height:64px; border-radius:14px; }

/* 처음 켬 전(프로필 없음): 홈과 같은 한 화면(home-setup 모양을 같이 씀) */
.room-screen--setup{ min-height:70vh; min-height:70dvh; justify-content:center; }