/* ══════════════════════════════════════════════════════════════
   뮤나리자 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; }

/* 검수 전용 제작 전환 — 검수 바 48px 안에서 끝난다. 자리를 처음부터 예약해 두므로
   작업대 수를 1~4로 바꿔도 검수 바 높이가 튀거나 옆 칸이 밀리지 않는다.
   자연 플레이 화면이 아니라는 것이 글자(검수 전용 TEST)와 data 속성으로 함께 읽힌다. */
#reviewProductionTools {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 0 8px; height: 34px;
  border: 1px dashed #8a6f3c; border-radius: 6px;
}
#reviewProductionTools .review-only-tag {
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.4px; color: #d8b978; white-space: nowrap;
}
#reviewProductionTools .review-group { display: flex; align-items: center; gap: 3px; }
#reviewProductionTools button {
  background: #2e251b; color: #c9b891; border: 1px solid #57452c;
  border-radius: 5px; padding: 4px 7px; font-size: 11.5px; cursor: pointer; white-space: nowrap;
  min-width: 24px;
}
#reviewProductionTools button:hover:not(:disabled) { border-color: #d8b978; }
#reviewProductionTools button[data-on="true"] {
  background: #d8b978; color: #221c16; border-color: #d8b978; font-weight: 800;
}
#reviewProductionTools button:disabled { opacity: 0.4; cursor: default; }

/* ── 본문 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; }
/* 2026-08-18 개량(원문 6번): 위쪽 가로 잉크 표시는 화면에서 제거한다.
   잉크 정보는 왼쪽 세로 잉크통 하나로 합쳐졌다. 갱신 코드와 자리는 남겨 두되
   어떤 상태에서도 보이지 않는다. */
#inkPanel { display: none !important; }
[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; }

/* ── 중앙: 문 옆 잉크 카트리지 (2026-08-18 개량 · 비교판 v3 승인) ──
   왼쪽 세로 잉크통 문법(I2)은 유지하고 비례와 움직임을 고쳤다.
   폭 42 고정 · 언제나 작업대 묶음 왼쪽 38px 간격 · 세로는 묶음 높이와 같다.
   자리·크기는 중앙 작업칸의 칸수 표식(data-slots)을 따라 아래 칸수별 규칙이 정한다 —
   플레이어의 시선이 칸수와 무관하게 「잉크통 → 작업대」 한 방향으로 고정된다.
   쌓임 순서는 결과판(z-index 36)보다 아래라 작품별 결과 연출을 덮지 않는다. */
[data-anchor="ink-cartridge"] {
  position: absolute;
  width: 42px;
  z-index: 20;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55));
}
/* 칸수별 잉크통 자리 — 잉크통 오른쪽 끝에서 작업대 왼쪽 끝까지 언제나 38px이다. */
[data-anchor="center-workspace"][data-slots="1"] #inkCartridge {
  left: 235px; top: 250px; width: 42px; height: 480px;
}
[data-anchor="center-workspace"][data-slots="2"] #inkCartridge {
  left: 37px; top: 250px; width: 42px; height: 430px;
}
[data-anchor="center-workspace"][data-slots="3"] #inkCartridge,
[data-anchor="center-workspace"][data-slots="4"] #inkCartridge {
  left: 87px; top: 190px; width: 42px; height: 776px;
}
/* 상단 배관 — 천장에서 유리통으로 내려오는 관 */
.ink-pipe {
  position: absolute; left: 40%; top: -22px; width: 22%; height: 26px;
  background: #30281e; border: 2px solid #7d6848; border-bottom: 0; border-radius: 3px 3px 0 0;
}
/* 둥근 사각 유리통 — 액체는 아래에 고이고 소비하면 윗면이 내려간다.
   2026-08-18 개량: 위 0부터 아래 40px(수치판 34px + 틈) 안쪽까지 길게 늘여
   작업판 세로와 나란히 보이게 한다. */
.ink-tank {
  position: absolute; left: 10%; right: 10%; top: 0; bottom: 40px;
  border: 3px solid #806849; border-radius: 9px; background: #130d16; overflow: hidden;
}
.ink-tank::before {
  content: ""; position: absolute; left: 12%; top: 5%; bottom: 6%; width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  z-index: 3;
}
.ink-liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(90deg, #3f6b8a, #62b6d8 55%, #3f6b8a);
  transition: height 0.25s ease;
}
.ink-liquid::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: rgba(200, 240, 255, 0.75);
}
/* 아래 수치판 — 현재 잔량과 다음 한 번의 입력 비용을 함께 글자로 보여 준다 */
/* 2026-08-18 개량: 수치판은 34px 높이에 전체 물감량 퍼센트만 남긴다.
   다음 입력 비용과 주의·차단 문구는 화면에서 감춘다 — 경고는 아래 주의·차단
   「색」 규칙이 그대로 알린다 (동현 선택: 색으로만 경고). */
.ink-readout {
  position: absolute; left: -8%; right: -8%; bottom: 0; height: 34px;
  border: 2px solid #806849; border-radius: 5px; background: #2b2118;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1.2; overflow: hidden;
}
.ink-readout b { font-size: 14px; color: #f2d47f; }
.ink-readout small { font-size: 11.5px; font-weight: 800; color: #ead7b1; white-space: nowrap; }
.ink-readout span {
  font-size: 10.5px; color: #b09d7e; white-space: nowrap; height: 13px; line-height: 13px;
}
/* 퍼센트만 남긴다 — 다음 비용(#inkNextView)·상태 문구(#inkCartridgeState)는 감춘다. */
#inkNextView { display: none; }
#inkCartridgeState { display: none; }
/* 대기 — 제작할 작품이 없으면 장치를 소등한다 (자리·크기는 그대로다) */
[data-anchor="ink-cartridge"][data-state="idle"] { filter: saturate(0.15) brightness(0.6); }
/* 주의 — 문구 없이 색이 알린다 (테두리·액체색 변화) */
[data-anchor="ink-cartridge"][data-state="warn"] .ink-tank,
[data-anchor="ink-cartridge"][data-state="warn"] .ink-readout { border-color: #e5b94e; }
[data-anchor="ink-cartridge"][data-state="warn"] .ink-liquid {
  background: linear-gradient(90deg, #8d6524, #e4b747 55%, #8d6524);
}
[data-anchor="ink-cartridge"][data-state="warn"] .ink-readout span { color: #f0cf78; font-weight: 800; }
/* 차단 — 다음 입력 비용보다 잔량이 적다. 입력 전에 제작 전체가 멈춘다 */
[data-anchor="ink-cartridge"][data-state="blocked"] .ink-tank,
[data-anchor="ink-cartridge"][data-state="blocked"] .ink-readout { border-color: #d75a55; }
[data-anchor="ink-cartridge"][data-state="blocked"] .ink-liquid { background: #71312f; }
[data-anchor="ink-cartridge"][data-state="blocked"] .ink-readout b { color: #e79a7c; }
[data-anchor="ink-cartridge"][data-state="blocked"] .ink-readout span { color: #e79a7c; font-weight: 800; }

/* ── 중앙: 작업대 — 칸수를 따라 커지고 작아지는 독립 작업대들 ──
   2026-08-18 확정(비교판 v3 승인): 작업대 한 대의 크기는 칸수마다 다르다 —
   1개 480 · 2개 430 · 3·4개 380, 50px씩 일정하게 준다. 작품은 언제나 작업대의 90%다.
   컨테이너는 자리만 잡는 투명 상자이고, 나무 가구 겉모습은 bench-unit 한 대가 가진다.
   실제 배치(몇 열 몇 행인지, 어느 칸이 비는지)는 State.benchLayout(count)이 정하고
   화면은 그 결과를 grid 자리로만 옮긴다. 격자 칸의 크기는 --bench-size(작업대 한 대)다. */
[data-anchor="workbench"] {
  position: absolute;
  display: grid;
  justify-content: center; align-content: start;
  gap: 16px;
  cursor: ns-resize;
}
/* 칸수별 자리·크기 — 2026-08-18 동현 확정값. 2×2(3·4개)는 세로 공간 때문에 top 190으로
   올라가되, 위 y=190 위는 빨간 전화기 자리(y 14~174)라 넘지 않는다. */
[data-anchor="workbench"][data-slots="1"] {
  left: 315px; top: 250px; width: 480px; height: 480px;
  --bench-size: 480px; --bench-art-size: 432px;
}
[data-anchor="workbench"][data-slots="2"] {
  left: 117px; top: 250px; width: 876px; height: 430px;
  --bench-size: 430px; --bench-art-size: 387px;
}
[data-anchor="workbench"][data-slots="3"],
[data-anchor="workbench"][data-slots="4"] {
  left: 167px; top: 190px; width: 776px; height: 776px;
  --bench-size: 380px; --bench-art-size: 342px;
}
/* 작업대 한 대 자리 — 크기는 칸수별 --bench-size가 정한다. 안쪽은 절대 나누지 않는다. */
[data-anchor="workbench"] .bench-unit {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: var(--bench-size); height: var(--bench-size);
}
[data-anchor="workbench"] .bench-unit[hidden] { display: none; }
/* 칸 하나 = 작업대 한 대. 나무 상판(테두리)과 아래로 깔리는 받침(그림자)을 갖는다.
   가구는 「지금 서 있는 칸 수」에만 묶여 있다 — 도화지를 한 장도 올리지 않은 빈 상태에서도,
   한 장만 올린 상태에서도, 유리창 알바 중에도 같은 규격 작업대가 그대로 선다
   (2026-08-12 계약 11). 작품 수나 인쇄 모드로 가구를 켜고 끄지 않는다.
   겉모습은 승인된 비교판 v3의 나무 틀(12px)을 그대로 가져왔다. */
[data-anchor="workbench"][data-slots="1"] .bench-unit,
[data-anchor="workbench"][data-slots="2"] .bench-unit,
[data-anchor="workbench"][data-slots="3"] .bench-unit,
[data-anchor="workbench"][data-slots="4"] .bench-unit {
  background: #14100c;
  border: 12px solid #5b432c;
  border-radius: 6px;
  box-shadow: 0 7px 0 #4a3826, 0 13px 0 #2b2016, 0 18px 20px rgba(0, 0, 0, 0.4);
}
/* 유리창 알바는 작품이 아니라 알바 화면이라 나무 가구 대신 흰 창틀만 남긴다. */
[data-anchor="workbench"][data-bench="window"] .bench-unit {
  background: #f7fbff; border-color: #dfe8ef;
  box-shadow: 0 5px 0 #b9c6d0, 0 9px 14px rgba(0, 0, 0, 0.32);
}
[data-anchor="workbench"]:focus-visible { outline: 3px solid #d8b978; outline-offset: 2px; }
/* 작품 canvas — 작업대 한 대 안 가운데에 작품 크기(작업대의 90%)로 선다. */
[data-anchor="workbench"] canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: var(--bench-art-size); height: var(--bench-art-size); display: block;
  flex: 0 0 auto;
}
[data-anchor="workbench"] canvas[hidden] { display: none; }
/* 2026-08-19: 위쪽 공통 목재 밀대 스타일은 통째로 폐기됐다.
   밀대가 도화지 그림 안으로 들어가면서(v6 시안 D) 화면 요소 자체가 없어졌고,
   도화지마다 자기 밀대를 그림면 안에 그린다. */

/* 빈 작업대 안내 글 — 작품 폭 안에서 가운데 정렬되고 줄바꿈이 살아 있어야 한다.
   (2026-08-19 밀대 라운드에서 옆 규칙을 걷어내다 함께 지워진 것을 독립 검토가
   잡아내 되살렸다. width가 없으면 글이 작업대 안에서 가로로 퍼지고,
   white-space: pre-line이 없으면 두 줄짜리 안내가 한 줄로 뭉개진다.) */
[data-anchor="workbench"] .bench-empty {
  width: var(--bench-art-size);
  font-size: 14px; color: #f0e2c6; text-align: center; line-height: 1.7; padding: 0 12px;
  white-space: pre-line; 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; }

/* ── 유리창 보수 확률 — 모작 등급 확률표와 「같은 자리·같은 등장 방식」 ──
   0817 피드백 3번의 지시 그대로다. 좌표를 따로 정하지 않고 위 #probPanel과
   같은 값을 쓴다. 둘은 동시에 뜨지 않는다 — 도화지가 올라와 있으면 유리창
   알바를 할 수 없고, 유리창을 닦는 중에는 제작 중인 도화지가 없기 때문이다. */
#windowProbPanel {
  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;
}
#windowProbPanel[hidden] { display: none; }
#windowProbPanel h2 { font-size: 24px; color: #f4dc9a; margin-bottom: 10px; letter-spacing: 0.4px; }

/* ── 유리창 레벨 게이지 — 왼쪽 알바 버튼 안에 사는 진행 막대 ──
   자리는 언제나 예약돼 있어 레벨이 올라도 버튼 높이가 흔들리지 않는다
   (상태가 변해도 UI 구역의 위치·크기를 고정한다는 정본 규칙). */
.job-gauge { display: block; margin-top: 7px; }
.job-gauge-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.big-slot .slot-text .job-gauge-head #jobLevel {
  font-size: 12px; font-weight: 800; color: #d8b978;
}
.big-slot .slot-text .job-gauge-head #jobGaugeCount { font-size: 11px; color: #8d7b5f; }
.job-gauge-track {
  display: block; height: 8px; border-radius: 5px;
  background: #2a2118; border: 1px solid #3a2f24; overflow: hidden;
}
.job-gauge-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #6f9b4e, #9fc37a);
  transition: width 220ms ease-out;
}
/* 최대 레벨에서는 색을 바꿔 「더 오를 곳이 없다」를 색으로만 말한다. */
#jobBtn[data-window-maxed="true"] .job-gauge-fill {
  background: linear-gradient(90deg, #b08b3a, #f4dc9a);
}

/* ── D키 디버그 창 — 화면 한가운데 뜨는 자기 층 ──
   가장 위층(z-index 90)에 있어 무엇도 이 창을 덮지 않고, 닫히면 자리를
   차지하지 않아 다른 요소를 밀지 않는다. 게임을 멈추지 않으므로
   뒤 화면은 그대로 돌아간다. */
#debugPanel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 520px;
  background: rgba(16, 12, 8, 0.97); border: 2px solid #6a5a2c; border-radius: 14px;
  padding: 20px 24px 18px; z-index: 90;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
}
#debugPanel[hidden] { display: none; }
.debug-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #3a2f24; padding-bottom: 12px; margin-bottom: 14px;
}
.debug-head h2 { font-size: 22px; color: #f4dc9a; letter-spacing: 0.4px; }
#debugCloseBtn {
  font-size: 13px; color: #b09d7e; background: #241c14;
  border: 1px solid #4a3d2c; border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
#debugCloseBtn:hover { border-color: #d8b978; color: #f3e7c8; }
.debug-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0;
}
.debug-row + .debug-row { border-top: 1px solid #2a2118; }
.debug-label { font-size: 15px; color: #e8dcc4; font-weight: 700; }
.debug-label small { display: block; font-size: 11.5px; color: #8d7b5f; font-weight: 400; margin-top: 3px; }
.debug-ctl { display: flex; gap: 6px; flex: 0 0 auto; }
.debug-pick {
  font-size: 13px; color: #b09d7e; background: #241c14;
  border: 1px solid #4a3d2c; border-radius: 7px; padding: 7px 11px; cursor: pointer;
  min-width: 52px;
}
.debug-pick:hover { border-color: #d8b978; color: #f3e7c8; }
.debug-pick[data-on="true"] {
  background: #3d3020; border-color: #d8b978; color: #f4dc9a; font-weight: 800;
}
.debug-foot { font-size: 12px; color: #8d7b5f; margin-top: 12px; line-height: 1.5; }

/* ── 카탈로그 물건 — 위 프레임 밖에서 작업대로 낙하 → 클릭 → 슬롯 편입 ── */
#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;
}