/* ─────────────────────────────────────────────────────────────
   내 월드 장면(전체 화면 카메라) · HUD · 폰 · 활동 지점 · 폰 상세 패널 · 배치 트레이
   장면 위치/크기는 life-ui.js 의 frameScene() 이 바닥 영역을 기준으로 계산해 px 로 넣는다.
   ───────────────────────────────────────────────────────────── */
.scene { position: absolute; inset: 0; overflow: hidden; background: #e9d2ae; user-select: none; -webkit-user-select: none; isolation: isolate; }
.scene-blur { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: 50% 60%; filter: blur(22px) saturate(0.9) brightness(0.8); pointer-events: none; z-index: 0; }
.scene-art { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; pointer-events: none; z-index: 1; will-change: transform; }
.scene.diorama .scene-art { border-radius: 40px; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55), 0 30px 60px rgba(60, 35, 10, 0.4); }
.scene:after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(120, 80, 30, 0.22); z-index: 2; }
#lifeStage { position: absolute; z-index: 3; }
.grid-overlay { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s; border-radius: 10px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.6) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: calc(100% / 12) calc(100% / 8); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
#lifeStage.placing .grid-overlay { opacity: 1; }
#lifeStage.placing { cursor: crosshair; }
#lifeStage.placing:before { content: ""; position: absolute; inset: 0; background: rgba(255, 248, 230, 0.28); border-radius: 10px; }

/* HUD */
.hud { position: absolute; z-index: 10; display: flex; gap: 8px; align-items: center; }
.hud-top { left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); }
.hud-spacer { flex: 1; }
.legend { position: absolute; right: 12px; bottom: calc(var(--dock-h) + 22px); z-index: 10; display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 14px; background: rgba(255, 252, 245, 0.92); font-size: 11.5px; font-weight: 800; color: var(--ink-2); box-shadow: var(--shadow-sm); border: 2px solid #fff; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.ok { background: #bfe8a7; } .sw.no { background: #f7b2b2; } .sw.spot { background: #a9d4ff; } .sw.sel { background: #fff; border: 1.5px dashed #4aa9f0; }

/* 활동 지점 */
.life-place { position: absolute; transform: translate(-50%, -50%); z-index: 1; display: grid; justify-items: center; gap: 2px; color: var(--ink-2); pointer-events: auto; }
.life-place i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 252, 245, 0.94); border: 2.5px solid #fff; box-shadow: 0 4px 0 rgba(185, 146, 106, 0.45), 0 6px 12px rgba(90, 60, 30, 0.2); }
.life-place svg { width: 22px; height: 22px; stroke-width: 2.2; }
.life-place.rest i { color: var(--lilac); } .life-place.work i { color: var(--coral); } .life-place.social i { color: var(--mint); }
.life-place span { font-size: 10.5px; font-weight: 900; background: rgba(255, 252, 245, 0.92); padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1.5px solid #fff; }
.life-place.blocked { opacity: 0.5; } .life-place.blocked i { filter: grayscale(1); }
.life-place.selected i { box-shadow: 0 0 0 3px var(--sky), 0 4px 10px rgba(90, 60, 30, 0.2); }
.life-wall { position: absolute; transform: translate(-50%, -50%); width: calc(100% / 12); height: calc(100% / 8); z-index: 1; display: grid; place-items: center; }
.life-wall:before { content: ""; width: 72%; height: 72%; border-radius: 8px; background: rgba(141, 115, 87, 0.6); border: 2px solid rgba(255, 255, 255, 0.7); box-shadow: 0 3px 0 rgba(90, 60, 30, 0.35); }
.cell-hint { position: absolute; width: calc(100% / 12); height: calc(100% / 8); transform: translate(-50%, -50%); border-radius: 6px; pointer-events: none; z-index: 0; }
.cell-hint.no { background: rgba(247, 150, 150, 0.55); }

/* 폰 */
.life-pawn { position: absolute; transform: translate(-50%, -82%); width: var(--pawn, 112px); z-index: 4; display: grid; justify-items: center; pointer-events: auto; }
.life-pawn canvas { width: var(--pawn, 112px); height: var(--pawn, 112px); pointer-events: none; filter: drop-shadow(0 10px 6px rgba(80, 50, 20, 0.3)); animation: bob 2.6s ease-in-out infinite; }
.life-pawn.moving canvas { animation: waddle 0.55s ease-in-out infinite; }
.life-pawn.resting canvas { animation: breathe 3.4s ease-in-out infinite; }
.life-pawn:after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 62%; height: 14px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(80, 50, 20, 0.3), transparent 70%); z-index: -1; }
.life-pawn .name { margin-top: -8px; font-size: calc(var(--pawn, 112px) * 0.115); font-weight: 900; padding: 2px 10px; border-radius: 999px; background: rgba(255, 252, 245, 0.96); border: 2px solid #fff; box-shadow: 0 3px 0 rgba(185, 146, 106, 0.4); white-space: nowrap; color: var(--ink); }
.life-pawn.visitor .name { background: var(--lilac-soft); color: #6a58c0; }
.life-pawn.chosen .name { background: linear-gradient(180deg, #86cdfb, #3f9ae8); color: #fff; border-color: #cfe8ff; box-shadow: 0 3px 0 var(--sky-3); }
.life-pawn.chosen canvas { filter: drop-shadow(0 10px 6px rgba(80, 50, 20, 0.3)) drop-shadow(0 0 7px rgba(74, 169, 240, 0.75)); }
.bubble { position: absolute; top: -4px; right: -6px; width: calc(var(--pawn, 112px) * 0.38); height: calc(var(--pawn, 112px) * 0.38); border-radius: 50% 50% 50% 14%; background: #fff; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(90, 60, 30, 0.22); display: grid; place-items: center; color: var(--ink-2); animation: pop 0.3s ease-out; }
.bubble svg { width: 55%; height: 55%; stroke-width: 2.2; }
.bubble.resting { color: var(--lilac); } .bubble.working, .bubble.assisting { color: var(--coral); } .bubble.talking, .bubble.listening { color: var(--sky-2); } .bubble.repairing, .bubble.repairListening { color: var(--leaf); } .bubble.moving { color: var(--ink-3); } .bubble.waiting { color: var(--butter); }
.life-pawn .mood { position: absolute; top: 100%; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--ink-2); background: rgba(255, 252, 245, 0.92); padding: 2px 8px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.life-pawn:hover .mood, .life-pawn.chosen .mood { opacity: 1; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes waddle { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-4px); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fx { position: absolute; z-index: 30; pointer-events: none; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 3px; font-weight: 900; font-size: 15px; color: #e0607e; text-shadow: 0 1px 0 #fff, 0 0 6px #fff; animation: fx-rise 1.6s ease-out forwards; }
.fx svg { width: 20px; height: 20px; fill: var(--pink-soft); stroke: #e0607e; stroke-width: 2.2; }
.fx.cool { color: var(--sky-2); } .fx.cool svg { fill: var(--sky-soft); stroke: var(--sky-2); }
@keyframes fx-rise { 0% { opacity: 0; transform: translate(-50%, -90%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -110%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.need-sum { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; line-height: 1.5; }
.log-day { list-style: none; font-size: 11.5px; font-weight: 900; color: var(--ink-3); padding: 6px 4px 0; letter-spacing: 0.3px; }

/* ── 폰 상세 패널 (데스크톱: 오른쪽 떠 있는 패널) ── */
.detail-panel { position: absolute; right: 12px; top: calc(66px + env(safe-area-inset-top)); z-index: 11; width: 330px; max-height: calc(100% - var(--dock-h) - 100px); overflow: auto; scrollbar-width: thin; display: grid; gap: 10px; align-content: start; padding: 14px; animation: pop-in 0.2s ease-out; }
.detail-top { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: center; }
.detail-top canvas { width: 60px; height: 60px; filter: drop-shadow(0 5px 4px rgba(80, 50, 20, 0.22)); }
.detail-top h3 { font-size: 19px; font-weight: 900; letter-spacing: -0.5px; }
.detail-top small { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 800; margin-top: 2px; }
.detail-top .close { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); background: #fff; border: 2px solid var(--line-2); box-shadow: 0 3px 0 var(--wood); align-self: start; }
.detail-top .close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood); }
.detail-top .close svg { width: 18px; height: 18px; stroke-width: 2.6; }
.switcher { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.switcher .lbl { font-size: 11.5px; color: var(--ink-3); font-weight: 800; margin-right: 2px; }
.switcher button { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 3px 0 var(--wood); padding: 0; overflow: hidden; display: grid; place-items: center; }
.switcher button canvas { width: 34px; height: 34px; }
.switcher button.on { border-color: var(--sky); box-shadow: 0 3px 0 var(--sky-3); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs button { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 900; color: var(--ink-3); white-space: nowrap; background: #fff; border: 2px solid var(--line); }
.tabs button svg { width: 16px; height: 16px; }
.tabs button.on { background: linear-gradient(180deg, #86cdfb, #3f9ae8); color: #fff; border-color: #c8e8ff; box-shadow: 0 2px 0 var(--sky-3); }
.tab-body { display: grid; gap: 10px; }
.now { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.now .ico { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--sky-2); box-shadow: 0 3px 0 var(--line-2); }
.now .ico svg { width: 24px; height: 24px; stroke-width: 2.2; }
.now strong { display: block; font-size: 14.5px; }
.now .bar { margin-top: 6px; height: 8px; }
.now small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; font-weight: 800; }
.needs { display: grid; gap: 8px; }
.need { display: grid; grid-template-columns: 44px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--ink-2); }
.need b { text-align: right; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-actions .gbtn { padding: 9px 8px; font-size: 12.5px; }
.rel-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 2px dashed var(--line-2); cursor: pointer; }
.rel-row:last-child { border-bottom: 0; }
.rel-row canvas { width: 44px; height: 44px; }
.rel-row strong { display: block; font-size: 14px; }
.rel-row small { font-size: 11.5px; color: var(--ink-3); font-weight: 800; }
.rel-row .mini { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }
.mini span { font-size: 11px; font-weight: 900; padding: 3px 8px; border-radius: 999px; }
.mini .aff { background: var(--pink-soft); color: #d2566f; } .mini .tru { background: var(--sky-soft); color: var(--sky-2); } .mini .con { background: #ffe8e0; color: #c95a3c; }
.mem-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 2px dashed var(--line-2); font-size: 13px; font-weight: 700; }
.mem-row:last-child { border-bottom: 0; }
.mem-row svg { width: 22px; height: 22px; color: var(--lilac); }
.mem-row small { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 800; margin-top: 2px; }
.trait-rows { display: grid; gap: 8px; }
.trait-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 13px; font-weight: 800; }
.trait-row .lvl { display: inline-flex; gap: 3px; }
.trait-row .lvl i { width: 14px; height: 8px; border-radius: 999px; background: #efe6d8; }
.trait-row .lvl i.on { background: var(--sky); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12.5px; color: var(--ink-2); margin: 0; }
.kv dt { font-weight: 900; color: var(--ink-3); } .kv dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }

/* ── 배치 트레이 ── */
.tray-panel { position: absolute; left: 12px; right: 12px; bottom: calc(var(--dock-h) + 18px); z-index: 11; max-width: 760px; margin: 0 auto; padding: 12px 14px; animation: slide-up 0.2s ease-out; }
.tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.tile { display: grid; justify-items: center; gap: 4px; padding: 8px 6px; border-radius: 16px; background: #fff; border: 2px solid var(--line); font-size: 12px; font-weight: 900; color: var(--ink-2); box-shadow: 0 3px 0 var(--line-2); }
.tile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-2); }
.tile.on { border-color: #8fcbf7; background: var(--sky-soft); color: var(--sky-2); box-shadow: 0 3px 0 #9bd0ff; }
.tile-art { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--cream); stroke-width: 2.2; }
.tile-art.rest { color: var(--lilac); background: var(--lilac-soft); } .tile-art.work { color: var(--coral); background: #ffe8e0; } .tile-art.social { color: var(--mint); background: var(--mint-soft); } .tile-art.wall { color: #8d7357; background: #efe3d3; }
.arrange-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.arrange-fields label:not(.check) { display: inline-flex; align-items: center; gap: 6px; }
.arrange-fields input[type="number"] { width: 64px; margin: 0; padding: 6px 8px; }
.arrange-fields .check { margin: 0; }

/* ── 팝업 안 목록·카드 ── */
#lifeLog { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.log-row { display: grid; grid-template-columns: 44px 40px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); }
.log-row:first-child { background: var(--sky-soft); border-color: #bfe0ff; }
.log-row time { font-size: 12px; font-weight: 900; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log-row .ico { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 var(--line-2); color: var(--ink-2); }
.log-row .ico svg { width: 20px; height: 20px; stroke-width: 2.2; }
.log-row.completed .ico { color: var(--leaf); } .log-row.declined .ico, .log-row.blocked .ico { color: var(--coral); } .log-row.accepted .ico { color: var(--sky-2); } .log-row.move .ico { color: var(--ink-3); } .log-row.limited .ico, .log-row.cancelled .ico { color: var(--butter); }
.log-row strong { display: block; font-size: 13.5px; line-height: 1.35; }
.log-row small { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 800; margin-top: 1px; }
.log-row .delta { color: #d2566f; }
.change-head { display: grid; grid-template-columns: 64px 44px 64px; justify-content: center; align-items: center; gap: 6px; margin: 4px 0 6px; }
.change-head canvas { width: 64px; height: 64px; filter: drop-shadow(0 5px 4px rgba(80, 50, 20, 0.22)); }
.change-head .arrow { display: grid; place-items: center; color: var(--pink); }
.change-head .arrow svg { width: 30px; height: 30px; fill: var(--pink-soft); }
.change-text { text-align: center; font-size: 13.5px; color: var(--ink-2); font-weight: 800; margin-bottom: 10px; }
.change-rows { display: grid; gap: 6px; }
.change-row { display: grid; grid-template-columns: 24px 1fr auto 18px; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 900; padding: 9px 12px; background: var(--cream); border-radius: 12px; border: 1px solid var(--line); }
.change-row svg { width: 18px; height: 18px; color: var(--pink); }
.change-row .v { font-variant-numeric: tabular-nums; }
.change-row .up { color: #39a66c; } .change-row .down { color: #d2566f; } .change-row .flat { color: var(--ink-3); }
.visit-body { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: center; }
.visit-portrait { display: grid; place-items: center; min-height: 100px; background: var(--cream); border-radius: var(--r-md); border: 2px solid #fff; box-shadow: 0 3px 0 var(--wood); }
.visit-portrait canvas { width: 84px; height: 84px; filter: drop-shadow(0 6px 4px rgba(80, 50, 20, 0.24)); }
.visit-portrait .ghost { width: 64px; height: 64px; border-radius: 50%; border: 3px dashed var(--line-2); }
.visit-state p { font-size: 13.5px; font-weight: 800; line-height: 1.5; }
.state-dots { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--ink-3); }
.state-dots li { display: flex; align-items: center; gap: 8px; }
.state-dots i { width: 12px; height: 12px; border-radius: 50%; background: #e9dfd0; }
.state-dots li.on { color: var(--ink); }
.state-dots li[data-k="enter"].on i { background: var(--pink); } .state-dots li[data-k="together"].on i { background: var(--mint); } .state-dots li[data-k="leave"].on i { background: var(--butter); }
.visit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.visit-actions .gbtn { padding: 9px 6px; font-size: 13px; }

/* ── 반응형: 모바일은 상세 패널이 독 위 바텀시트 ── */
@container game (max-width: 820px) {
  .detail-panel { left: 8px; right: 8px; top: auto; bottom: calc(var(--dock-h) + 14px); width: auto; max-height: 50vh; max-height: 50dvh; padding: 12px; border-radius: 24px; animation: slide-up 0.2s ease-out; }
  .detail-top { grid-template-columns: 50px 1fr auto; }
  .detail-top canvas { width: 50px; height: 50px; }
  .detail-top h3 { font-size: 17px; }
  .legend { right: 8px; bottom: calc(var(--dock-h) + 14px); font-size: 10.5px; gap: 6px; padding: 6px 8px; }
  .tray-panel { left: 8px; right: 8px; bottom: calc(var(--dock-h) + 12px); padding: 10px 12px; max-height: 48vh; max-height: 48dvh; overflow: auto; }
  .tray { gap: 6px; }
  .tile { padding: 6px 4px; font-size: 11px; }
  .tile-art { width: 34px; height: 34px; padding: 7px; }
  .life-place i { width: 36px; height: 36px; } .life-place svg { width: 18px; height: 18px; } .life-place span { font-size: 9.5px; }
  .life-pawn .mood { display: none; }
  .visit-body { grid-template-columns: 84px 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   A1 공간 정합 (PO-14 · DES-04)
   가구·장애물은 바닥 접점 앵커를 칸 중심에 맞춘다. 충돌은 1칸 논리 판정이고 그림은 표시용.
   가림 순서는 z-index = 4 + 칸 y (life-ui.js cellPos)
   ───────────────────────────────────────────────────────────── */
.life-place, .life-wall { position: absolute; width: 0; height: 0; transform: none; display: block; z-index: 4; }
.life-place .stage-art, .life-wall .stage-art { position: absolute; max-width: none; width: calc(160px * var(--fs, 0.8)); height: auto; left: calc(-80px * var(--fs, 0.8)); top: calc(-180px * var(--fs, 0.8)); pointer-events: auto; filter: drop-shadow(0 3px 3px rgba(90, 60, 30, 0.25)); }
.life-place .label { position: absolute; top: 4px; left: 0; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 1; }
#lifeStage.placing .life-place .label, .life-place:hover .label, .life-place:focus-visible .label { opacity: 1; }
.life-place.blocked .stage-art { filter: grayscale(0.85) opacity(0.55); }
.life-place.selected .stage-art { filter: drop-shadow(0 0 0 #4aa9f0) drop-shadow(0 0 6px #4aa9f0); }
.life-place.moving-from .stage-art, .life-wall.removing .stage-art { opacity: 0.32; }
.state-chip { position: absolute; left: 0; top: calc(-150px * var(--fs, 0.8)); transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 252, 245, 0.96); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(185, 146, 106, 0.45); font-size: 11px; font-weight: 900; color: var(--ink-2); white-space: nowrap; pointer-events: none; }
.state-chip img { width: 18px; height: 18px; }
.state-chip.blocked { color: #8a4b1c; }
.ghost, .ghost .stage-art { pointer-events: none; }
.ghost .stage-art { opacity: 0.62; }
#lifeStage.placing.tool .life-place, #lifeStage.placing.tool .life-wall, #lifeStage.placing.tool .life-pawn, #lifeStage.placing.tool .stage-art { pointer-events: none; }
.cell-preview { position: absolute; width: calc(100% / 12); height: calc(100% / 8); transform: translate(-50%, -50%); border-radius: 6px; pointer-events: none; box-sizing: border-box; }
.cell-preview.ok { border: 3px solid #3f9ae8; background: rgba(169, 212, 255, 0.35); }
.cell-preview.bad { border: 3px dashed #c4513a; background: repeating-linear-gradient(45deg, rgba(247, 150, 150, 0.5) 0 6px, rgba(255, 255, 255, 0.15) 6px 12px); }
.cell-badge { position: absolute; width: 30px; height: 30px; transform: translate(-50%, -135%); pointer-events: none; filter: drop-shadow(0 2px 2px rgba(60, 35, 10, 0.35)); }
.arrange-preview { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 6px 0; border-radius: 12px; background: #fff; border: 2px solid var(--line); font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.45; }
.arrange-preview img { width: 32px; height: 32px; flex: none; }
.arrange-preview.ok { border-color: #9bd0ff; }
.arrange-preview.bad { border-color: #e6a08a; border-style: dashed; }
.arrange-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 6px 0; }
.arrange-actions .check { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.tile img { width: 46px; height: 52px; object-fit: contain; }
.hint.small { font-size: 11.5px; margin: 6px 0 0; }
details.arrange-fields { display: block; margin-top: 4px; }
details.arrange-fields summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
details.arrange-fields[open] { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
details.arrange-fields[open] summary { flex-basis: 100%; }
.pause-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* PC: 트레이는 오른쪽 옆 패널(바닥을 가리지 않게 카메라가 그만큼 비켜 준다) */
.tray-panel { left: auto; right: 12px; top: 76px; bottom: auto; width: 330px; margin: 0; max-height: calc(100% - var(--dock-h) - 110px); overflow: auto; }
@container game (max-width: 820px) {
  .tray-panel { left: 8px; right: 8px; top: auto; width: auto; bottom: calc(var(--dock-h) + 12px); max-height: 42vh; max-height: 42dvh; }
  .tile img { width: 36px; height: 42px; }
  .cell-badge { width: 24px; height: 24px; }
}
.life-pawn.at-place { transform: translate(-50%, -100%); }
.life-pawn.at-place .name { visibility: hidden; }
#placeTray { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#placeTray .tile { min-width: 0; padding: 6px 3px; font-size: 11.5px; line-height: 1.25; text-align: center; word-break: keep-all; }
#lifeStage.placing:before { background: rgba(255, 248, 230, 0.12); }
#lifeStage.placing.tool .life-pawn { opacity: 0.5; }
/* 폰 가로(좁고 낮은 화면): 트레이·상세 패널을 아래가 아니라 오른쪽 옆에 둬서 바닥 높이를 지킨다 */
@media (orientation: landscape) and (max-height: 520px) {
  .tray-panel, .detail-panel { left: auto; right: 8px; top: 8px; bottom: calc(var(--dock-h) + 8px); width: 270px; max-height: none; border-radius: 20px; }
  .tray-panel .hint { display: none; }
  .tray-panel .arrange-preview { font-size: 12px; padding: 6px 8px; }
}
#placeTray .tile { overflow: hidden; }
#placeTray .tile span { max-width: 100%; overflow-wrap: anywhere; }
/* 행 높이가 24px 미만인 작은 바닥: 이름표를 숨기고 상태 표시만 남긴다 */
#lifeStage.compact .life-place .label { display: none; }
#lifeStage.compact .state-chip { font-size: 9.5px; padding: 1px 6px; }
#lifeStage.compact .state-chip img { width: 13px; height: 13px; }
/* 폰 걷기(2026-10-13 모션 수정): 한 칸 = tick 간격 동안 등속 이동. 뒤뚱거림 2번/칸, 걷는 방향으로 살짝 기울기 */
.life-pawn.moving canvas { animation-duration: calc(var(--step, 1000ms) / 2); rotate: var(--lean, 0deg); }
.life-pawn canvas { transition: rotate 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .life-pawn { transition: none !important; } .life-pawn canvas { rotate: 0deg; } }
/* 대화 말풍선(PO-REQ-001 §3): 폰과 같은 left/top·같은 이동 시간으로 따라간다. 뒷줄 폰 몸에 가려지지 않게 별도 최상위 층 */
.speech-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.speech { position: absolute; transform: translate(calc(-50% + var(--nudge, 0px)), calc(-100% - var(--pawn, 112px) * 0.98)); max-width: min(220px, 60vw); padding: 6px 11px; border-radius: 14px; background: #fffdf8; border: 2px solid #8d6a4a; color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.35; text-align: center; white-space: normal; word-break: keep-all; box-shadow: 0 3px 0 rgba(120, 80, 40, 0.25); pointer-events: auto; cursor: pointer; animation: pop 0.25s ease-out; }
.speech:after { content: ""; position: absolute; left: calc(50% - var(--nudge, 0px)); bottom: -9px; width: 12px; height: 12px; background: #fffdf8; border-right: 2px solid #8d6a4a; border-bottom: 2px solid #8d6a4a; transform: translateX(-50%) rotate(45deg); }
.speech.lift { transform: translate(calc(-50% + var(--nudge, 0px)), calc(-200% - var(--pawn, 112px) * 0.98)); }
.speech.out { opacity: 0; transition: opacity 0.25s; }
#lifeStage.placing .speech-layer { display: none; }
@container game (max-width: 820px) { .speech { font-size: 12px; padding: 5px 9px; max-width: 170px; } }
.speech { width: max-content; }
/* DES-09 말풍선: 본체 PNG 는 단순 둥근 사각형이라 브라우저 9-slice 이음선(조각 사이 가는 줄)이 보여
   본체는 PNG 에서 잰 값(외곽선 #624430 2px · 크림 #fcf4e1 · 둥근 모서리)으로 CSS 로 그리고, 꼬리만 PNG 를 쓴다(본체 하단선을 2px 덮어 이음새 없음). */
.speech { background: #fcf4e1; border: 2px solid #624430; border-radius: 12px; box-shadow: 0 2px 0 rgba(98, 68, 48, 0.18); }
.speech:after { width: 18px; height: 12px; bottom: -12px; background: url("./assets/ui/speech-tail.png") center / 100% 100% no-repeat; border: 0; transform: translateX(-50%); }

/* 칸 판(A1-10): 손가락으로 누를 수 있는 24px 칸 12×8. 바닥과 같은 판정·미리보기를 쓴다 */
details.arrange-board { display: block; margin: 4px 0; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
details.arrange-board summary { cursor: pointer; padding: 4px 0; }
.cell-board { display: grid; grid-template-columns: repeat(12, 24px); grid-auto-rows: 24px; gap: 1px; width: max-content; margin: 4px auto 2px; padding: 3px; border-radius: 10px; background: #d9c39d; }
.cell-board .cell { position: relative; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: #fbf3e2; cursor: pointer; }
.cell-board .cell:focus-visible { outline: 3px solid #4f86c6; outline-offset: 0; z-index: 1; }
.cell-board .cell img { width: 22px; height: 22px; object-fit: contain; pointer-events: none; }
.cell-board .cell.wall { background: #c9b79a; }
.cell-board .cell.place { background: #f3dfb8; }
.cell-board .cell.place.closed img { opacity: 0.45; }
.cell-board .cell.current { box-shadow: inset 0 0 0 2px #4f86c6; }
.cell-board .cell.pawn:after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 8px; height: 8px; border-radius: 50%; background: #7a5a3a; border: 1px solid #fff; }
.cell-board .cell.pick.ok { box-shadow: inset 0 0 0 3px #3f9a55; }
.cell-board .cell.pick.bad { box-shadow: inset 0 0 0 3px #c4473a; }
.board-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.board-legend .lg { display: inline-block; width: 11px; height: 11px; margin-right: 3px; border-radius: 3px; vertical-align: -1px; }
.board-legend .lg.place { background: #f3dfb8; border: 1px solid #c9a86a; }
.board-legend .lg.wall { background: #c9b79a; }
.board-legend .lg.pawn { background: #7a5a3a; border-radius: 50%; }
.board-legend .lg.pick { background: #fff; box-shadow: inset 0 0 0 2px #3f9a55; }
@media (orientation: landscape) and (max-height: 520px) {
  /* 폰 가로에서 배치하는 동안: 하단 독을 잠시 숨겨 칸 판이 한 화면에 들어오게 한다(끝내기는 패널 안) */
  .tray-panel { width: 324px; overflow: auto; }
  .game:has(#lifeStage.placing) .dock { display: none; }
  .game:has(#lifeStage.placing) .tray-panel { bottom: 8px; }
  #placeTray { gap: 6px; }
  #placeTray .tile { min-height: 0; padding: 4px 2px; }
  #placeTray .tile img { width: 26px; height: 26px; }
  #placeTray .tile span { font-size: 11px; line-height: 1.15; }
  .tray-panel .panel-head { margin-bottom: 4px; }
  .board-legend { display: none; }
  /* 편집 중 확대(PO-DEC-005): 패널은 좁게(가구 2×2), 칸 판은 JS 가 #boardFloat(바닥 자리)로 옮겨 크게 띄운다 */
  .game:has(#lifeStage.placing) .tray-panel { width: 236px; }
  .game:has(#lifeStage.placing) #placeTray { grid-template-columns: 1fr 1fr; }
  .game:has(#lifeStage.placing) #boardWrap { display: none; }
}

/* 바닥 자리에 띄운 칸 판(폰 가로 편집 중 확대). 위치·칸 크기는 placeBoard() 가 정한다 */
#boardFloat { position: absolute; z-index: 30; top: 50%; transform: translateY(-50%); }
#boardFloat[hidden] { display: none; }
#boardFloat .cell-board { grid-template-columns: repeat(12, var(--cell, 28px)); grid-auto-rows: var(--cell, 28px); margin: 0; box-shadow: 0 6px 18px rgba(80, 50, 20, 0.28); }
#boardFloat .cell-board .cell { width: var(--cell, 28px); height: var(--cell, 28px); }
#boardFloat .cell-board .cell img { width: calc(var(--cell, 28px) - 3px); height: calc(var(--cell, 28px) - 3px); }

/* 장면 상자는 절대 스크롤되지 않는다(포커스·scrollIntoView 로 바닥이 밀리던 문제, A1-10 확인 중 발견). clip 미지원 브라우저는 JS 가 0 으로 되돌린다 */
#scene { overflow: clip; }

/* 두 번째 방(PO-ROOM-001): 방 보기 전환·빈 방 안내·폰 옮기기 */
.plate-room { display: flex; gap: 4px; padding: 4px; }
.plate-room button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.plate-room button b { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: rgba(120, 90, 60, 0.12); font-size: 12px; text-align: center; }
.plate-room button.on { background: #4f86c6; color: #fff; box-shadow: 0 2px 0 #2f5f99; }
.plate-room button.on b { background: rgba(255, 255, 255, 0.28); }
.room-empty { position: absolute; left: 50%; top: 52%; z-index: 9; max-width: min(420px, 80%); margin: 0; padding: 12px 16px; transform: translate(-50%, -50%); border-radius: 16px; background: rgba(255, 250, 240, 0.94); box-shadow: 0 6px 18px rgba(80, 50, 20, 0.2); color: var(--ink); font-weight: 800; text-align: center; }
#roomMovePanel .cell-board { margin: 6px auto; }
@container game (max-width: 520px) { .plate-room button { padding: 4px 8px; font-size: 12px; min-height: 30px; gap: 4px; } }

/* 칸 판(305px)이 330px 패널 안에 넘치지 않게 */
#roomMovePanel, #arrangePanel { padding-left: 11px; padding-right: 11px; }

/* 좁은 화면: 방 전환을 두 번째 줄로(시계·속도 버튼이 밀려나지 않게) */
@container game (max-width: 520px) { .hud-top { flex-wrap: wrap; row-gap: 6px; } .plate-room { order: 10; } }

/* 일시정지: 걷던 폰도 제자리에 가만히 선다(걷기·통통·숨쉬기 모두 멈춤). 재개하면 다시 움직인다 */
#lifeStage.life-paused .life-pawn canvas { animation: none; }

/* 예전 가구 그림(러그·매트·작업대·화분 상자, 2026-10-13 복원). 그림 바닥이 칸 중심에 오도록 맞춘다 */
.life-place .stage-art, .life-wall .stage-art { width: calc(200px * var(--fs, 0.8)); left: 0; top: 0; transform: translate(-50%, -76%); }
.life-wall .stage-art { width: calc(180px * var(--fs, 0.8)); }
.life-place .stage-art.flat { width: calc(240px * var(--fs, 0.8)); transform: translate(-50%, -56%); }
/* 평소에는 가구·장애물이 눌리지 않는다(폰 선택 우선). 배치 모드에서만 고를 수 있다 */
#lifeStage:not(.placing) .life-place, #lifeStage:not(.placing) .life-wall, #lifeStage:not(.placing) .stage-art { pointer-events: none; }
/* 배치 모드에서는 반대로 폰이 눌리지 않는다(가구를 고르려다 폰이 눌려 배치가 끝나지 않게) */
#lifeStage.placing .life-pawn, #lifeStage.placing .speech { pointer-events: none; }