/* ══════════════════════════════════════════════════════════════
   뮤나리자 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; }
/* 방금 해금됐는데 아직 열어보지 않았을 때의 금빛 「NEW」 (2026-08-12 계약 9).
   예전 붉은 점을 대신한다 — 새 상품이 열렸다는 신호는 금빛 하나로 통일한다.
   카드 금빛 테두리와 짝을 이루고, 카드를 확인하면 둘이 함께 꺼진다. */
.rail-tabs button[data-new="true"]::after {
  content: "NEW"; position: absolute; top: 4px; right: 6px;
  padding: 1px 5px; border-radius: 4px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.6px; line-height: 1.4;
  color: #2a2113; background: #f4dc9a; border: 1px solid #d8b046;
  box-shadow: 0 0 8px rgba(244, 220, 154, 0.7);
}

.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; }
/* 방금 열린 새 상품 카드 — 금빛 테두리로 「이게 새 것」이라고 말한다 (2026-08-12 계약 9).
   상점을 열어 카드를 확인하면 꺼지고, 구매 전이어도 다시 켜지지 않는다 (계약 10).
   위쪽 탭 알림과는 별개의 두 번째 알림이라 규칙도 따로 둔다. */
.upg-slot[data-new="true"] {
  border-color: #f4dc9a;
  box-shadow: 0 0 0 3px rgba(244, 220, 154, 0.45), 0 0 20px rgba(216, 176, 70, 0.55);
}
.upg-slot[data-new="true"] .upg-name { color: #f4dc9a; }

/* ── 중앙: 원작 슬롯 — 좌상단 고정 (카탈로그가 여기로 편입된다) ── */
[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;
}
/* 작업대 한 대 = 칸 하나. 칸이 하나뿐일 때는 예전처럼 바깥 상자 자체가 작업대라
   따로 가구를 세우지 않고 그림면 자리만 잡는다. */
[data-anchor="workbench"] .bench-unit {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 432px; height: 432px;
}
[data-anchor="workbench"] .bench-unit[hidden] { display: none; }
/* 유리창 알바 중에는 작업대 틀도 흰색 클린 창문 껍데기가 된다 (v3 B안) */
[data-anchor="workbench"][data-bench="window"] { border-color: #f7fbff; background: #f7fbff; }
/* 두 칸 작업대 — 같은 중심(305 + 500/2 = 555), 같은 top·높이.
   중앙 구역 안에서만 좌우로 나뉘고, 오른쪽 끝(805)이 확률표(812~) 앞에서 멈춘다.
   그래서 확장해도 확률표·잉크 상자·전화기·옆 패널을 하나도 덮지 않는다.
   안쪽 여백(500 − 테두리 24 = 476 = 220 + 36 + 220)에 작업대 두 대가 나란히 들어간다.
   A안 문법이라 바깥 상자의 테두리·바탕은 지우고 칸마다 가구를 따로 세운다. */
[data-anchor="workbench"][data-slots="2"] {
  left: 305px; top: 250px; width: 500px; height: 480px;
  gap: 36px;
  border-color: transparent; background: transparent;
}
/* 칸 하나 = 작업대 한 대. 나무 상판(테두리)과 아래로 깔리는 받침(그림자)을 갖는다.
   가구는 「구매한 칸 수」에만 묶여 있다 — 도화지를 한 장도 올리지 않은 빈 상태에서도,
   한 장만 올린 상태에서도, 유리창 알바 중에도 같은 규격 두 대가 가로 한 줄로 선다
   (2026-08-12 계약 11). 작품 수나 인쇄 모드로 가구를 켜고 끄지 않는다. */
[data-anchor="workbench"][data-slots="2"] .bench-unit {
  width: 220px; height: 220px;
  background: #6b5233;
  border: 7px solid #8a6a44;
  border-radius: 5px;
  box-shadow: 0 7px 0 #4a3826, 0 13px 0 #2b2016, 0 18px 20px rgba(0, 0, 0, 0.4);
}
[data-anchor="workbench"]:focus-visible { outline: 3px solid #d8b978; outline-offset: 2px; }
[data-anchor="workbench"] canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: 100%; height: 100%; display: block;
}
[data-anchor="workbench"] canvas[hidden] { display: none; }
/* ── 위쪽 공통 수동 목재 밀대 하나 (2026-08-12 계약 12) ──
   두 작업대 위를 가로질러 함께 지나는 나무 손잡이 하나다. 한 번의 손 입력이 올라간
   작품 전부를 같이 민다는 것을 눈으로 말해 준다. 세로 위치는 화면 쪽에서 실제 인쇄
   진행률에 맞춰 내려 주고, 작품 캔버스 안에는 개별 밀대를 그리지 않는다. 그래서 칸이
   하나든 둘이든 화면에서 움직이는 수동 밀대는 언제나 이 하나뿐이다.
   중앙에 세로로 세우는 기둥도, 자동 설비 부품도 붙이지 않는다 — 손으로 미는 나무 가구다. */
[data-anchor="workbench"] .common-squeegee-bar {
  position: absolute; left: 8px; right: 8px; top: 12px; height: 18px; z-index: 3;
  background: linear-gradient(#b28a55, #7d5c34);
  border: 2px solid #5b422a; border-radius: 9px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
[data-anchor="workbench"] .common-squeegee-bar[hidden] { display: none; }
/* 가운데 손잡이 — 나무 밀대를 잡는 자리 하나뿐이다. */
[data-anchor="workbench"] .common-squeegee-grip {
  position: absolute; left: 50%; top: -13px; width: 74px; height: 15px;
  transform: translateX(-50%);
  background: #a8804d; border: 2px solid #5b422a; border-radius: 7px 7px 3px 3px;
}
/* 밀대 앞에 고인 잉크 둑 — 지금 미는 색판의 잉크색을 그대로 쓴다 (V6 시안 D 정본). */
[data-anchor="workbench"] .common-squeegee-ink {
  position: absolute; left: 4px; right: 4px; bottom: -5px; height: 4px;
  background: var(--ink, #22352c); border-radius: 0 0 4px 4px; opacity: 0.85;
}
[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"][data-slots="2"] .bench-empty {
  font-size: 15px; color: #f0e2c6; padding: 0 12px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
[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;
}