/* ══════════════════════════════════════════════════════════════
   뮤나리자 B 플레이 데모 — 고정 무대 스타일.
   · 논리 해상도 1920×1080, 페이지 스크롤 없음, 작은 창은 JS 등비 축소.
   · 3열 = 왼쪽 구매줄 310px / 중앙 작업공간 1110px / 오른쪽 세로줄 360px.
   · 모든 고정 앵커(data-anchor)는 상태·오버레이 등장과 무관하게
     x/y/width/height가 변하지 않도록 절대 좌표로 잡는다.
   (phone-guided-ui-variants-2026-08-06/shared/base.css의 좌표 체계를 이어받음)
   ══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #17120d; }
body {
  color: #e8dcc4;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  word-break: keep-all;
}
button { font-family: inherit; }
[inert] { pointer-events: none; }

/* ── 1920×1080 고정 무대 ── */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  overflow: hidden;
  background: #221c16;
  padding: 16px 40px 14px;
}

/* ── 검수 상태바 — 높이 48px 상시 예약 ── */
#reviewBar {
  position: absolute; left: 40px; top: 16px;
  width: 1840px; height: 48px;
  display: flex; align-items: center; gap: 14px;
  background: #1b140f; border: 1px solid #57452c; border-radius: 8px;
  padding: 0 16px; font-size: 12.5px; color: #b09d7e;
}
#reviewBar h1 { font-size: 15px; color: #f0e3c2; letter-spacing: 0.4px; white-space: nowrap; }
#scopeNote { flex: 1 1 auto; font-size: 13.5px; color: #9fc37a; font-weight: 800; white-space: nowrap; overflow: hidden; }
#reviewBar .money { white-space: nowrap; font-size: 12px; }
#reviewBar .money b { font-size: 18px; color: #d8b978; margin-left: 4px; }
#resetArea { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 300px; }
#resetArea button {
  background: #2e251b; color: #c9b891; border: 1px solid #57452c;
  border-radius: 6px; padding: 6px 11px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#resetArea button:hover { border-color: #d8b978; }
#resetArea .reset-ask { color: #e0b0a0; font-size: 12px; white-space: nowrap; }
#resetConfirm { display: flex; align-items: center; gap: 8px; }
/* 검수 전용 돈 도구 — 실제 경제와 분리. 사용 표시 자리는 처음부터 폭을 예약해
   표시가 켜져도 옆 칸이 밀리지 않는다. */
#reviewMoneyTools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
#reviewMoneyTools button {
  background: #2e251b; color: #c9b891; border: 1px solid #57452c;
  border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#reviewMoneyTools button:hover:not(:disabled) { border-color: #d8b978; }
#reviewMoneyTools button:disabled { opacity: 0.45; cursor: default; }
#reviewMoneyNote {
  min-width: 116px; font-size: 12px; font-weight: 800; color: #e0b0a0; white-space: nowrap;
}
#resetConfirm[hidden] { display: none; }
#resetConfirmBtn { border-color: #8a4a3a; color: #e0b0a0; }

/* ── 본문 3열 — 절대 좌표 앵커 (상단 16+48+12 = 76부터) ── */
[data-anchor="left-rail"] {
  position: absolute; left: 40px; top: 76px;
  width: 310px; height: 988px;
  display: flex; flex-direction: column; gap: 12px;
  background: #191411; border: 1px solid #3a2f24; border-radius: 10px;
  padding: 14px;
  overflow: hidden;
}
[data-anchor="center-workspace"] {
  position: absolute; left: 380px; top: 76px;
  width: 1110px; height: 988px;
  background: radial-gradient(circle at 50% 42%, #34291e 0, #251e17 55%, #1d1712 100%);
  border: 1px solid #493a29; border-radius: 12px;
  box-shadow: inset 0 -20px 34px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
[data-anchor="right-rail"] {
  position: absolute; left: 1520px; top: 76px;
  width: 360px; height: 988px;
  display: flex; flex-direction: column; gap: 12px;
  background: #191411; border: 1px solid #3a2f24; border-radius: 10px;
  padding: 14px;
  overflow: hidden;
}

/* ── 왼쪽 구매줄: 전체 탭형 ── */
.rail-tabs { display: flex; gap: 6px; flex: 0 0 auto; }
.rail-tabs button {
  flex: 1 1 0; position: relative;
  background: #2e251b; color: #c9b891; border: 1px solid #57452c;
  border-radius: 6px; padding: 10px 8px; font-size: 15px; cursor: pointer;
}
.rail-tabs button:hover:not(:disabled) { border-color: #d8b978; }
.rail-tabs button.on {
  background: #d8b978; color: #221c16; font-weight: 800; border-color: #d8b978;
  box-shadow: inset 0 -3px 0 #8a6f3c;
}
/* 상점 탭 — 해금 전에는 자리만 지키고 보이지 않는다 (레이아웃 불변) */
#shopTabBtn[data-unlocked="false"] { visibility: hidden; pointer-events: none; }
/* 방금 해금됐는데 아직 열어보지 않았을 때 알림 점 */
.rail-tabs button[data-new="true"]::after {
  content: ""; position: absolute; top: 6px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: #e08a7a;
}

.rail-pane {
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
  flex: 1 1 auto; overflow: hidden;
  border-top: 1px dashed #3a2f24; padding-top: 10px;
}
.rail-pane[hidden] { display: none; }
.rail-title { font-size: 14px; color: #f0e3c2; letter-spacing: 0.4px; padding: 2px 2px 4px; }
.rail-note { font-size: 11.5px; color: #8d7b5f; line-height: 1.55; padding: 0 2px; }
.big-slot {
  width: 100%; height: 128px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: #241c14; border: 2px solid #6a563a; border-radius: 10px;
  padding: 12px 16px; cursor: pointer; color: #e8dcc4;
}
.big-slot:hover:not(:disabled) { border-color: #d8b978; }
.big-slot[data-ready="true"] {
  border-color: #f1d37e;
  box-shadow: 0 0 0 2px rgba(241, 211, 126, 0.24), 0 0 18px rgba(216, 176, 70, 0.34);
}
.big-slot:disabled { cursor: default; opacity: 0.75; }
.big-slot[hidden] { display: none; }
/* 잠긴 칸은 자리를 그대로 지킨 채 보이지만 않는다 — 열려도 레이아웃이 밀리지 않는다 */
.big-slot[data-locked="true"] { visibility: hidden; pointer-events: none; }
.big-slot canvas { image-rendering: pixelated; image-rendering: crisp-edges; flex: 0 0 auto; }
.big-slot .slot-text b { display: block; font-size: 17px; color: #f3e7c8; margin-bottom: 4px; }
.big-slot .slot-text span { font-size: 13.5px; color: #b09d7e; }
.big-slot .slot-text .gain { color: #9fc37a; font-weight: 800; }
.big-slot .slot-text .cost { color: #e08a7a; font-weight: 800; }
.big-slot .slot-sub { display: block; font-size: 11.5px; color: #8d7b5f; margin-top: 3px; }
#inkBtn[data-owned="true"] .slot-sub { color: #9fc37a; }
/* 작업대 상태 — 살 수 없는 읽기 전용 자리. 같은 크기를 차지해 좌표가 흔들리지 않는다. */
.bench-state { cursor: default; }
.big-slot.bench-state:hover { border-color: #6a563a; }
.bench-state[data-expanded="true"] { border-color: #6f8f5a; }
.bench-state[data-expanded="true"] .slot-sub { color: #9fc37a; }
.rail-back {
  margin-top: auto; flex: 0 0 auto;
  background: #2e251b; color: #c9b891; border: 1px solid #57452c;
  border-radius: 6px; padding: 10px 12px; font-size: 13.5px;
  cursor: pointer; text-align: left;
}
.rail-back:hover { border-color: #d8b978; }
.rail-count { font-size: 11.5px; color: #8d7b5f; margin-left: 6px; }

/* ── 상점: 업그레이드 4항목 선형 해금 목록 ──
   네 자리 모두 처음부터 높이를 차지한다. 열리면 내용만 켜지고 위치는 그대로다. */
.upg-list { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.upg-slot {
  height: 100px; flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  text-align: left; color: #e8dcc4; cursor: pointer;
  background: #241c14; border: 2px solid #6a563a; border-radius: 10px;
  padding: 10px 14px;
}
.upg-slot:hover:not(:disabled):not([data-state="locked"]) { border-color: #d8b978; }
.upg-slot .upg-name { font-size: 16px; color: #f3e7c8; }
.upg-slot .upg-effect { font-size: 12.5px; color: #b09d7e; line-height: 1.4; }
.upg-slot .upg-foot { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.upg-slot .upg-foot .cost { color: #e08a7a; font-weight: 800; }
/* 현재 단계는 가격 바로 옆 같은 줄에 놓는다. 카드 높이(100px)는 그대로다. */
.upg-slot .upg-foot .upg-level { color: #b09d7e; }
.upg-slot .upg-state { color: #8d7b5f; margin-left: auto; }
/* 아직 열리지 않은 자리 — 자물쇠 상태. 다음 차례라는 것만 알려 준다. */
.upg-slot[data-state="locked"] {
  border-style: dashed; border-color: #3a2f24; background: #1c1610; cursor: default;
}
.upg-slot[data-state="locked"] .upg-name { color: #5c5140; }
.upg-slot[data-state="locked"] .upg-effect,
.upg-slot[data-state="locked"] .upg-foot .cost { color: #4d4436; }
.upg-slot[data-state="ready"] {
  border-color: #f1d37e;
  box-shadow: 0 0 0 2px rgba(241, 211, 126, 0.22), 0 0 14px rgba(216, 176, 70, 0.3);
}
.upg-slot[data-state="owned"] { border-color: #6f8f5a; opacity: 0.9; cursor: default; }
.upg-slot[data-state="owned"] .upg-state { color: #9fc37a; font-weight: 800; }
/* 최종 단계에서는 가격 자리가 「강화 완료」라 붉은 지출색을 쓰지 않는다. */
.upg-slot[data-state="owned"] .upg-foot .cost { color: #9fc37a; }
.upg-slot[data-state="owned"] .upg-foot .upg-level { color: #9fc37a; }
.upg-slot[data-state="short"] { opacity: 0.8; cursor: default; }

/* ── 중앙: 원작 슬롯 — 좌상단 고정 (카탈로그가 여기로 편입된다) ── */
[data-anchor="original-selector"] {
  position: absolute; left: 20px; top: 16px;
  width: 240px; height: 96px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: #1d1712; border: 1px solid #57452c; border-radius: 10px;
  padding: 10px 12px; cursor: pointer; color: #e8dcc4;
}
/* 카탈로그 편입 전에는 자리만 지키고 보이지 않는다 (좌표 불변) */
[data-anchor="original-selector"][data-locked="true"] { visibility: hidden; pointer-events: none; }
[data-anchor="original-selector"]:hover:not(:disabled) { border-color: #d8b978; }
[data-anchor="original-selector"] canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: 72px; height: 72px; flex: 0 0 auto;
  border: 2px solid #5b432c; border-radius: 4px; background: #14100c;
}
[data-anchor="original-selector"] .sel-text b { display: block; font-size: 14px; color: #f3e7c8; margin-bottom: 3px; }
[data-anchor="original-selector"] .sel-text span { font-size: 11.5px; color: #9b8a6c; line-height: 1.4; display: block; }

/* ── 중앙: 빨간 회전식 전화기 — 우상단 고정, 상시 설명문 금지 ── */
[data-anchor="phone"] {
  position: absolute; left: 898px; top: 14px;
  width: 192px; height: 160px;
  background: transparent; border: 0; padding: 0;
  line-height: 0; cursor: pointer;
}
[data-anchor="phone"]:disabled { cursor: default; }
[data-anchor="phone"]:disabled canvas {
  filter: grayscale(0.72) saturate(0.3) brightness(0.58);
  opacity: 0.52;
}
[data-anchor="phone"] canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: 192px; height: 160px; display: block;
}
[data-anchor="phone"].ringing canvas { animation: phone-shake 0.45s linear infinite; }
[data-anchor="phone"].ringing::after {
  content: ""; position: absolute; inset: -8px; border-radius: 14px;
  border: 3px solid rgba(229, 72, 77, 0.75);
  animation: phone-glow 0.9s ease-in-out infinite; pointer-events: none;
}
@keyframes phone-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 1px) rotate(-2deg); }
  50% { transform: translate(2px, -1px) rotate(2deg); }
  75% { transform: translate(-1px, -1px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes phone-glow {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.95; }
}

/* ── 중앙: 잉크 표시 — 작업대(top 250) 바로 위 고정 자리 ──
   왼쪽 원작 슬롯(x 20~260)·오른쪽 전화기(x 898~1090)와 가로로 겹치지 않고,
   아래로도 작업대 위 8px 여백을 남긴다. 상태가 바뀌어도 이 상자는 그대로 있다.
   플레이어에게 보여 주는 값은 「현재 잉크 %」와 「완성 필요 100%」뿐이다. */
[data-anchor="ink-panel"] {
  position: absolute; left: 315px; top: 150px;
  width: 480px; height: 92px;
  display: flex; flex-direction: column; gap: 5px;
  background: #241c14; border: 2px solid #6a563a; border-radius: 10px;
  padding: 8px 14px;
}
.ink-head { display: flex; align-items: baseline; gap: 10px; }
.ink-head .ink-name { font-size: 13.5px; color: #b09d7e; }
.ink-head b { font-size: 19px; color: #62b6d8; }
.ink-head .ink-need { font-size: 14px; color: #c9b891; margin-left: auto; }
.ink-state {
  font-size: 12.5px; color: #8d7b5f; height: 17px; line-height: 17px;
  white-space: nowrap; overflow: hidden;
}
/* 잉크가 바닥난 미완성 상태 — 상자 크기는 그대로 두고 색과 문구만 바뀐다 */
/* 작업대에 도화지가 한 장도 없으면 잉크 표시를 끈다 — 자리는 그대로 예약해 두므로
   다시 켜져도 옆 패널이 밀리지 않는다 (라운드 005). */
[data-anchor="ink-panel"][hidden] { display: none; }
[data-anchor="ink-panel"][data-out="true"] { border-color: #e08a7a; }
[data-anchor="ink-panel"][data-out="true"] .ink-head b { color: #e08a7a; }
[data-anchor="ink-panel"][data-out="true"] .ink-state { color: #e08a7a; font-weight: 800; }
[data-anchor="ink-panel"][data-out="true"] .ink-fill { background: #6b4038; }

/* ── 중앙: 작업대 — 정중앙 고정 ── */
[data-anchor="workbench"] {
  position: absolute; left: 315px; top: 250px;
  width: 480px; height: 480px;
  display: flex; align-items: center; justify-content: center;
  background: #14100c; border: 12px solid #5b432c; border-radius: 6px;
  cursor: ns-resize;
}
/* 두 칸 작업대 — 같은 중심(305 + 500/2 = 555), 같은 top·높이.
   중앙 구역 안에서만 좌우로 나뉘고, 오른쪽 끝(805)이 확률표(812~) 앞에서 멈춘다.
   그래서 확장해도 확률표·잉크 상자·전화기·옆 패널을 하나도 덮지 않는다.
   안쪽 여백(500 − 테두리 24 = 476 = 220 + 36 + 220)에 그림면 둘이 나란히 들어간다.
   같은 작업대에 종이를 두 장 올린 셈이라 장당 그림면은 그만큼 작아진다. */
[data-anchor="workbench"][data-slots="2"] {
  left: 305px; top: 250px; width: 500px; height: 480px;
  gap: 36px;
}
/* 실제로 두 장을 함께 찍는 동안에만 그림면이 반씩 줄어든다 (data-sheets 기준).
   두 칸 작업대에 한 장만 올렸을 때는 그 한 장을 예전처럼 크게 쓴다.
   유리창 알바(data-bench="window")도 확장 뒤에 한 면을 크게 쓴다. */
[data-anchor="workbench"][data-sheets="2"][data-bench="print"] canvas {
  width: 220px; height: 220px;
}
[data-anchor="workbench"]:focus-visible { outline: 3px solid #d8b978; outline-offset: 2px; }
[data-anchor="workbench"] canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: 432px; height: 432px; display: block;
}
[data-anchor="workbench"] canvas[hidden] { display: none; }
/* 유리창 알바 중에는 작업대 틀도 흰색 클린 창문 껍데기가 된다 (v3 B안) */
[data-anchor="workbench"][data-bench="window"] { border-color: #f7fbff; background: #f7fbff; }
[data-anchor="workbench"] .bench-empty {
  font-size: 15px; color: #7d6c50; text-align: center; line-height: 1.8; padding: 0 40px;
  white-space: pre-line;
}
[data-anchor="workbench"] .bench-empty[hidden] { display: none; }
[data-anchor="workbench"].shake canvas { animation: bench-snap 0.28s linear; }
@keyframes bench-snap {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 1px); }
  50% { transform: translate(3px, -1px); }
  75% { transform: translate(-2px, 0); }
  100% { transform: translate(0, 0); }
}
.bench-caption {
  position: absolute; left: 295px; top: 742px; width: 520px; min-height: 46px;
  font-size: 18px; font-weight: 700; color: #d8c8a7; text-align: center; line-height: 1.45;
}
.bench-caption b { color: #f0e3c2; }

/* 등급 발표 배너 — 작업대 내부 absolute (레이아웃 불변) */
#gradeBanner {
  position: absolute; left: 0; right: 0; top: 42%;
  text-align: center; font-size: 34px; font-weight: 900;
  color: #f0e3c2; text-shadow: 0 2px 0 #14100c, 0 0 18px rgba(0, 0, 0, 0.8);
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
  letter-spacing: 1px;
}
#gradeBanner.show { opacity: 1; }
#gradeBanner.diamond { text-shadow: 0 0 10px #d8f5ff, 0 0 26px #62c7ff; }

/* 창문 완성 +20원 — 작업대 안에서 잠깐 떠오르는 짧은 결과 피드백 */
#windowPayFloat {
  position: absolute; left: 0; right: 0; top: 30%;
  text-align: center; font-size: 30px; font-weight: 900; color: #9fc37a;
  text-shadow: 0 2px 0 #14100c;
  opacity: 0; pointer-events: none;
}
#windowPayFloat.show { animation: pay-float 1.1s ease-out; }
@keyframes pay-float {
  0% { opacity: 0; transform: translateY(14px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px); }
}

/* 유리창 대성공(잭팟) — 작업대 안에서만 크게 터진다 (옆 패널을 가리지 않음) */
#jackpotFloat {
  position: absolute; left: 0; right: 0; top: 16%;
  text-align: center; font-size: 30px; font-weight: 900; color: #f4dc9a;
  text-shadow: 0 2px 0 #14100c, 0 0 16px #d8b046;
  opacity: 0; pointer-events: none; letter-spacing: 1px;
}
#jackpotFloat.show { animation: jackpot-pop 1.5s ease-out; }
@keyframes jackpot-pop {
  0% { opacity: 0; transform: scale(0.7); }
  16% { opacity: 1; transform: scale(1.14); }
  30% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

/* ── 유리창 대성공 오버레이 ── 무대 전체를 잠깐 어둡게 덮되 좌·중·우 구역의
   크기와 위치를 밀지 않는다 ── 고정 무대 안에 절대 배치하고 클릭도 가로채지 않는다 */
#jackpotOverlay {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background: rgba(8, 5, 3, 0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 95;
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease;
}
#jackpotOverlay[data-open="true"] { opacity: 1; }
#jackpotOverlay .jackpot-box { text-align: center; }
#jackpotOverlay .jackpot-title {
  font-size: 56px; font-weight: 900; color: #f4dc9a; letter-spacing: 3px;
  text-shadow: 0 3px 0 #14100c, 0 0 26px #d8b046;
}
#jackpotOverlay .jackpot-pay {
  font-size: 108px; font-weight: 900; color: #f4dc9a; margin-top: 10px;
  text-shadow: 0 4px 0 #14100c, 0 0 38px #d8b046;
}
#jackpotOverlay .jackpot-sub {
  font-size: 20px; color: #c9b891; margin-top: 14px;
}

/* ── 마감 알림 — 잉크가 바닥났을 때만 켜지는 고정 예약 자리 ── */
[data-anchor="finish-choice"] {
  position: absolute; left: 295px; top: 800px;
  width: 500px; height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(20, 15, 10, 0.94); border: 2px solid #6a5a2c; border-radius: 10px;
  padding: 10px 16px;
  visibility: hidden; pointer-events: none;
}
[data-anchor="finish-choice"][data-open="true"] { visibility: visible; pointer-events: auto; }
.finish-line { font-size: 15px; color: #f0e3c2; text-align: center; line-height: 1.4; }
.finish-buttons { display: flex; gap: 12px; }
.finish-buttons button {
  background: #3a2f22; color: #e8dcc4; border: 1px solid #6a563a;
  border-radius: 6px; padding: 9px 26px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.finish-buttons button:hover:not(:disabled) { border-color: #d8b978; }
.finish-buttons button:disabled { opacity: 0.45; cursor: default; }
#sellNowBtn { background: #d8b978; color: #221c16; border-color: #d8b978; font-weight: 800; }
[data-anchor="finish-choice"][data-open="true"] { border-color: #8a4a3a; }

/* ── 결과판 — 중앙 구역 안쪽 아래에 처음부터 예약된 자리 ──
   작업대(250~730) 아래, 중앙 구역(988) 안쪽에서 끝난다: 742 + 240 = 982.
   가로도 두 칸 작업면과 같은 폭(75~1035)이라 좌·우 옆 패널을 덮지 않는다.
   마감 알림과는 같은 시간에 켜지지 않게 화면 쪽에서 상태를 나눠 준다. */
[data-anchor="result-board"] {
  position: absolute; left: 75px; top: 742px;
  width: 960px; height: 240px;
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(20, 15, 10, 0.96); border: 2px solid #6a5a2c; border-radius: 10px;
  padding: 12px 18px; z-index: 36;
  visibility: hidden; pointer-events: none;
}
[data-anchor="result-board"][data-open="true"] { visibility: visible; pointer-events: auto; }
.board-title { font-size: 17px; font-weight: 800; color: #f0e3c2; }
/* 산 작품을 나란히 두고 각각 판매·전시를 고른다.
   한 장만 산 묶음에서는 오른쪽 카드가 빠지고 왼쪽 카드가 그 자리를 채운다. */
.board-works { display: flex; gap: 12px; flex: 1 1 auto; }
.board-works[hidden] { display: none; } /* 손실 결과가 이 자리를 쓸 때는 통째로 내린다 */
.board-work[hidden] { display: none; }
.board-work {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 8px;
  background: #241c14; border: 1px solid #57452c; border-radius: 8px; padding: 10px 14px;
}
.board-work .work-name { font-size: 13px; color: #b09d7e; }
.board-work .work-grade { font-size: 19px; font-weight: 800; color: #f0e3c2; }
.board-work .work-buttons { display: flex; gap: 8px; }
.board-work button {
  flex: 1 1 0;
  background: #3a2f22; color: #e8dcc4; border: 1px solid #6a563a;
  border-radius: 6px; padding: 8px 10px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.board-work button:hover:not(:disabled) { border-color: #d8b978; }
.board-work button:disabled { opacity: 0.4; cursor: default; }
.board-note { font-size: 12.5px; color: #8d7b5f; line-height: 1.45; margin-top: auto; }

/* 첫 판매 손실 결과 — 도화지값·판매가·손실을 한 줄에 나란히 두고 「확인」을 기다린다.
   결과판 안쪽만 쓰므로 바깥 좌표는 그대로다 (라운드 001). */
.board-loss { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; }
.board-loss[hidden] { display: none; }
.loss-lines { display: flex; gap: 12px; flex: 1 1 auto; }
.loss-line {
  flex: 1 1 0; display: flex; flex-direction: column-reverse; gap: 4px;
  background: #241c14; border: 1px solid #57452c; border-radius: 8px; padding: 12px 14px;
}
.loss-line span { font-size: 13px; color: #b09d7e; }
.loss-line b { font-size: 24px; font-weight: 800; color: #f0e3c2; }
.loss-line.loss-diff { border-color: #8a4f3a; }
.loss-line.loss-diff b { color: #e79a7c; }
#lossConfirmBtn {
  flex: 0 0 auto; min-width: 132px;
  background: #4a3a22; color: #f4dc9a; border: 1px solid #d8b046;
  border-radius: 8px; padding: 16px 18px; font-size: 17px; font-weight: 800; cursor: pointer;
}
#lossConfirmBtn:hover:not(:disabled) { border-color: #f4dc9a; }
#lossConfirmBtn:disabled { opacity: 0.4; cursor: default; }

/* ── 모작 등급 확률 — 제작 중인 도화지 위 호버에서만 뜨는 판 ──
   자리는 여기서 고정한다. 화면 쪽은 보이기만 켜고 끄며 좌표를 다시 쓰지 않는다 —
   포인터를 움직여도 표가 따라다니지 않는다 (라운드 001).
   포인터를 가로채면 작업대 호버가 끊기므로 클릭·호버를 통과시킨다. */
#probPanel {
  position: absolute; left: 812px; top: 250px;
  width: 284px;
  background: rgba(20, 15, 10, 0.94); border: 1px solid #6a5a2c; border-radius: 10px;
  padding: 14px 16px; z-index: 38;
  pointer-events: none;
}
#probPanel[hidden] { display: none; }
#probPanel h2 { font-size: 24px; color: #f4dc9a; margin-bottom: 10px; letter-spacing: 0.4px; }
.prob-badge {
  display: inline-block; vertical-align: middle;
  font-size: 12px; font-weight: 700; color: #b09d7e;
  border: 1px solid #6a5a2c; border-radius: 9px; padding: 2px 8px; margin-left: 6px;
}
.prob-table { width: 100%; border-collapse: collapse; }
.prob-table th { font-size: 18px; color: #b09d7e; border-bottom: 1px solid #3a2f24; padding: 5px 2px; text-align: left; }
.prob-table td { font-size: 19px; color: #e8dcc4; padding: 6px 2px; text-align: left; }
.prob-table th.num, .prob-table td.num { text-align: right; }
.prob-table td.num { color: #d8b978; font-weight: 700; }
.prob-foot { font-size: 12px; color: #8d7b5f; margin-top: 8px; line-height: 1.45; }

/* ── 카탈로그 물건 — 위 프레임 밖에서 작업대로 낙하 → 클릭 → 슬롯 편입 ── */
#catalogItem {
  position: absolute; left: 491px; top: 300px;
  width: 128px; height: 128px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  line-height: 0; z-index: 40;
}
#catalogItem[hidden] { display: none; }
#catalogItem canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: 128px; height: 128px; display: block;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35));
}
#catalogItem.falling { animation: catalog-fall 0.9s cubic-bezier(0.3, 0, 0.6, 1) both; pointer-events: none; }
@keyframes catalog-fall {
  0% { transform: translateY(-560px); }
  74% { transform: translateY(0); }
  86% { transform: translateY(-16px); }
  100% { transform: translateY(0); }
}
/* 내려앉아 클릭을 기다리는 카탈로그 — 도화지 구매 유도와 같은 금빛 테두리가
   반복해서 빛난다. 클릭하는 순간 landed가 벗겨지며 유도도 함께 사라진다.
   중앙 구역 안에서만 빛나므로 옆 패널을 가리지 않는다 (라운드 005). */
#catalogItem.landed {
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(241, 211, 126, 0.4), 0 0 22px rgba(216, 176, 70, 0.42);
  animation: catalog-call 1.2s ease-in-out infinite;
}
@keyframes catalog-call {
  0%, 100% { box-shadow: 0 0 0 2px rgba(241, 211, 126, 0.32), 0 0 16px rgba(216, 176, 70, 0.3); }
  50% { box-shadow: 0 0 0 3px #f1d37e, 0 0 30px #d8b046; }
}
#catalogItem.landed canvas { animation: catalog-bob 1.6s ease-in-out infinite; }
@keyframes catalog-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
#catalogItem.unlocking { pointer-events: none; }
#catalogItem.unlocking canvas {
  filter: drop-shadow(0 0 14px #f4dc9a) drop-shadow(0 0 30px #d8b046);
}
#catalogItem.docking {
  transition: left 0.55s ease-in, top 0.55s ease-in, transform 0.55s ease-in;
  left: 32px; top: 22px; transform: scale(0.55);
  transform-origin: top left; pointer-events: none;
}

/* 황금빛 「카탈로그 해금」 짧은 연출 */
#unlockFlash {
  position: absolute; left: 355px; top: 360px; width: 400px;
  text-align: center; pointer-events: none; opacity: 0; z-index: 41;
}
#unlockFlash span {
  display: inline-block; font-size: 30px; font-weight: 900; color: #f4dc9a;
  text-shadow: 0 0 14px #d8b046, 0 2px 0 #14100c; letter-spacing: 2px;
}
#unlockFlash.show { animation: unlock-flash 1s ease-out; }
@keyframes unlock-flash {
  0% { opacity: 0; transform: scale(0.7); }
  25% { opacity: 1; transform: scale(1.08); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ── 오른쪽 세로줄 — 레벨·공방 기록 ──
   두 상자 모두 처음부터 자리를 차지하므로, 플레이 중 위아래로 밀리지 않는다.
   (잉크 상자는 라운드 003에서 작업대 바로 위 중앙 고정 자리로 옮겼다.) */
[data-anchor="xp-panel"] {
  flex: 0 0 auto; height: 132px;
  background: #241c14; border: 2px solid #6a563a; border-radius: 10px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 7px;
}
.panel-head { display: flex; align-items: baseline; gap: 8px; }
.panel-head .panel-name { font-size: 14px; color: #b09d7e; }
.panel-head b { font-size: 19px; color: #d8b978; margin-left: auto; }
.panel-sub { font-size: 13px; color: #c9b891; }
.panel-note { font-size: 11.5px; color: #8d7b5f; line-height: 1.45; }
.xp-track, .ink-track {
  height: 14px; border-radius: 7px; background: #14100c;
  border: 1px solid #3a2f24; overflow: hidden; flex: 0 0 auto;
}
.xp-fill, .ink-fill { display: block; height: 100%; width: 0; }
.xp-fill { background: linear-gradient(90deg, #6f8f5a, #9fc37a); }
.ink-fill { background: linear-gradient(90deg, #3f6b8a, #62b6d8); }

.record-box {
  background: #241c14; border: 2px solid #6a563a; border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.record-box p { font-size: 14px; color: #b09d7e; }
.record-box b { font-size: 18px; color: #d8b978; margin: 0 2px; }
.record-box .rec-side { font-size: 12.5px; color: #8d7b5f; margin-left: 8px; }

/* ── 갤러리 칸 — 오른쪽 줄 안에서 높이를 고정해 아래 칸이 밀리지 않는다 ──
   해금 전에도 같은 자리를 차지하고 잠긴 모습으로만 보인다. */
[data-anchor="gallery-panel"] {
  flex: 0 0 auto; height: 210px;
  background: #241c14; border: 2px solid #6a563a; border-radius: 10px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 8px;
}
[data-anchor="gallery-panel"][data-unlocked="false"] {
  border-style: dashed; border-color: #3a2f24; background: #1c1610;
}
[data-anchor="gallery-panel"][data-unlocked="false"] .panel-name,
[data-anchor="gallery-panel"][data-unlocked="false"] .panel-head b { color: #5c5140; }
.gallery-slot {
  flex: 1 1 auto; display: flex; align-items: center; gap: 12px;
  background: #1d1712; border: 1px solid #57452c; border-radius: 8px; padding: 10px 12px;
}
.gallery-slot canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: 64px; height: 64px; flex: 0 0 auto;
  border: 2px solid #5b432c; border-radius: 4px; background: #14100c;
}
.gallery-text { min-width: 0; }
.gallery-text b { display: block; font-size: 14px; color: #f3e7c8; margin-bottom: 4px; }
.gallery-text span { font-size: 11.5px; color: #8d7b5f; line-height: 1.45; display: block; }
[data-anchor="gallery-panel"][data-filled="true"] .gallery-slot { border-color: #d8b978; }

/* ── 원작 선택 카탈로그 오버레이 ── */
#dexOverlay {
  position: absolute; inset: 0; z-index: 90;
  background: rgba(8, 5, 3, 0.62);
}
#dexOverlay[hidden] { display: none; }
#dexOverlay .dex-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 760px; background: #221c16; border: 2px solid #d8b978; border-radius: 14px;
  padding: 22px 26px;
}
#dexOverlay h2 { font-size: 18px; color: #f0e3c2; margin-bottom: 6px; }
#dexOverlay #dexMode { font-size: 13px; color: #b09d7e; margin-bottom: 14px; }
#dexOverlay #dexMode[data-selection-mode="next"] { color: #f4dc9a; font-weight: 800; }
#dexList { display: flex; gap: 16px; }
.dex-item {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #241c14; border: 2px solid #6a563a; border-radius: 10px;
  padding: 14px 10px; cursor: pointer; color: #e8dcc4; position: relative;
}
.dex-item:hover { border-color: #d8b978; }
.dex-item canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: 128px; height: 128px; border: 2px solid #5b432c; border-radius: 4px;
}
.dex-item b { font-size: 15px; color: #f3e7c8; }
.dex-item .dex-badge { font-size: 11.5px; color: #6f6047; min-height: 16px; }
.dex-item[data-current="true"] { border-color: #d8b978; }
.dex-item[data-current="true"] .dex-badge { color: #d8b978; font-weight: 800; }
.dex-item[data-next="true"] { border-color: #9fc37a; }
.dex-item[data-next="true"] .dex-badge { color: #9fc37a; font-weight: 800; }
#dexOverlay .dex-foot { display: flex; align-items: center; margin-top: 16px; gap: 10px; }
#dexOverlay .dex-foot span { font-size: 12.5px; color: #9b8a6c; margin-right: auto; }
#dexOverlay .dex-foot button {
  background: #d8b978; color: #221c16; border: 0; border-radius: 6px;
  padding: 9px 22px; font-size: 14px; font-weight: 800; cursor: pointer;
}

/* ── 전화 오버레이 — 최상위 fixed. 무대 앵커 좌표에 영향 없음 ── */
#phoneOverlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 5, 3, 0.72);
}
#phoneOverlay[hidden] { display: none; }
#phoneOverlay .phone-dialog {
  position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
  width: 1280px; min-height: 190px;
  display: flex; align-items: center; gap: 26px;
  background: #221c16; border: 2px solid #d8b978; border-radius: 14px;
  padding: 24px 30px;
}
#phoneOverlay .phone-text { flex: 1 1 auto; min-width: 0; }
#phoneOverlay .phone-text p { font-size: 19px; line-height: 1.75; color: #f0e3c2; min-height: 100px; }
#phoneOverlay .phone-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
#phoneOverlay .phone-controls span { font-size: 13px; color: #b09d7e; margin-right: auto; }
#phoneOverlay .phone-controls button {
  background: #3a2f22; color: #e8dcc4; border: 1px solid #6a563a;
  border-radius: 6px; padding: 9px 20px; font-size: 14px; cursor: pointer;
}
#phoneOverlay .phone-controls button:hover:not(:disabled) { border-color: #d8b978; }
#phoneOverlay .phone-controls button:disabled { opacity: 0.4; cursor: default; }
#phoneOverlay .phone-controls button.primary {
  background: #d8b978; color: #221c16; border-color: #d8b978; font-weight: 800;
}
#phoneOverlay canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: 176px; height: 56px; flex: 0 0 auto;
}

/* ── 시작 게이트 ── */
#startGate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 5, 3, 0.86);
}
#startGate[hidden] { display: none; }
#startGate button {
  background: #d8b978; color: #221c16; border: 0; border-radius: 12px;
  font-size: 26px; font-weight: 800; padding: 26px 60px; cursor: pointer;
}