/* ══════════════════════════════════════════════════════════════
   뮤나리자 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; }
[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-15 B 확정 · 승인 시안 A) ──
   2×2 작업대 전체 틀(left 315)의 왼쪽에 고정한다: 175 + 120 = 295 ≤ 315.
   높이는 예약 틀 높이의 62.5%(300 / 480)로, 승인 시안의 60~65% 관계를 지킨다.
   너비 120px는 작품 한 장(220px)보다 확실히 가늘다.
   세로 구간(330~630)은 왼쪽 원작 슬롯(16~112)·전화기(14~174)와 겹치지 않고,
   오른쪽 확률표(812~)·결과판(742~)과도 가로·세로 모두 떨어져 있다.
   작업대 수가 1~4로 바뀌어도 이 상자를 다시 계산해 옮기지 않는다.
   쌓임 순서도 결과판(z-index 36)보다 아래라 작품별 결과 연출을 덮지 않는다. */
[data-anchor="ink-cartridge"] {
  position: absolute; left: 175px; top: 330px;
  width: 120px; height: 300px;
  z-index: 20;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55));
}
/* 상단 배관 — 천장에서 유리통으로 내려오는 관 */
.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;
}
/* 둥근 사각 유리통 — 액체는 아래에 고이고 소비하면 윗면이 내려간다 */
.ink-tank {
  position: absolute; left: 10%; right: 10%; top: 4%; bottom: 27%;
  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);
}
/* 아래 수치판 — 현재 잔량과 다음 한 번의 입력 비용을 함께 글자로 보여 준다 */
.ink-readout {
  position: absolute; left: -8%; right: -8%; bottom: 0; height: 25%;
  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: 17px; 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;
}
/* 대기 — 제작할 작품이 없으면 장치를 소등한다 (자리·크기는 그대로다) */
[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; }

/* ── 중앙: 작업대 — 정중앙 고정 2×2 예약 틀 ──
   2026-08-15 C 확정: 예약 틀(left 315 / top 250 / 480×480)은 작업대가 1개든 4개든
   같은 자리·같은 크기다. 칸 수에 따라 틀을 다시 계산해 옮기지 않는다.
   안쪽(480 − 테두리 24 = 456)에 220px 작품 두 칸과 16px 간격이 정확히 들어간다.
   실제 배치(몇 열 몇 행인지, 어느 칸이 비는지)는 State.benchLayout(count)이 정하고
   화면은 그 결과를 grid 자리로만 옮긴다 — 정확한 픽셀 간격은 아직 미정이다. */
[data-anchor="workbench"] {
  position: absolute; left: 315px; top: 250px;
  width: 480px; height: 480px;
  /* 작품 표시 크기 공통 값 — 1~4개 상태가 이 하나만 참조한다 (상태별 축소 금지). */
  --bench-art-size: 220px;
  display: grid;
  grid-template-columns: var(--bench-art-size) var(--bench-art-size);
  grid-template-rows: var(--bench-art-size) var(--bench-art-size);
  justify-content: center; align-content: center;
  gap: 16px;
  background: #14100c; border: 12px solid #5b432c; border-radius: 6px;
  cursor: ns-resize;
}
/* 작품 자리 — 너비·높이는 공통 크기 값 하나를 그대로 쓴다.
   작업대 수마다 별도 축척값을 두지 않으므로 1개일 때와 4개일 때 작품 크기가 같다. */
[data-anchor="workbench"] .bench-unit {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: var(--bench-art-size); height: var(--bench-art-size);
}
[data-anchor="workbench"] .bench-unit[hidden] { display: none; }
/* 유리창 알바 중에는 작업대 틀도 흰색 클린 창문 껍데기가 된다 (v3 B안) */
[data-anchor="workbench"][data-bench="window"] { border-color: #f7fbff; background: #f7fbff; }
/* 칸 하나 = 작업대 한 대. 나무 상판(테두리)과 아래로 깔리는 받침(그림자)을 갖는다.
   가구는 「지금 서 있는 칸 수」에만 묶여 있다 — 도화지를 한 장도 올리지 않은 빈 상태에서도,
   한 장만 올린 상태에서도, 유리창 알바 중에도 같은 규격 작업대가 그대로 선다
   (2026-08-12 계약 11). 작품 수나 인쇄 모드로 가구를 켜고 끄지 않는다.
   크기는 위 공통 값 하나가 정하므로 여기서는 겉모습만 그린다. */
[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: #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"][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; }
[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: 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; }

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