@font-face {
  font-family: 'Galmuri11';
  src: url('fonts/Galmuri11.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --booth-red: #b5342a;
  --booth-red-dark: #8c241d;
  --cream: #f2e8d5;
  --ink: #1a1512;
  --stripe-a: #131313;
  --stripe-b: #1f1f1f;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh; /* 모바일 주소창 높이 변화 대응 */
  overflow: hidden;
  background: #0e0c0a;
  font-family: 'Galmuri11', monospace;
  color: var(--cream);
  image-rendering: pixelated;
}

.scene {
  position: absolute; inset: 0;
  display: none;
}
.scene.active { display: block; }

.hidden { display: none !important; }
.invisible { visibility: hidden !important; }

/* ---------- 공용 픽셀 버튼 ---------- */
.pixel-btn {
  font-family: inherit;
  font-size: 17px;
  padding: 12px 26px;
  color: var(--ink);
  background: var(--cream);
  border: none;
  cursor: pointer;
  box-shadow:
    0 -4px 0 0 var(--cream), 0 4px 0 0 var(--cream),
    -4px 0 0 0 var(--cream), 4px 0 0 0 var(--cream),
    0 -4px 0 4px var(--ink), 0 4px 0 4px var(--ink),
    -4px 0 0 4px var(--ink), 4px 0 0 4px var(--ink),
    0 8px 0 4px var(--ink);
  transition: transform .06s;
}
.pixel-btn:hover { background: #fff8e8; }
.pixel-btn:active { transform: translateY(4px); }

.pixel-btn-dark {
  background: #3a332b; color: var(--cream);
  box-shadow:
    0 -4px 0 0 #3a332b, 0 4px 0 0 #3a332b,
    -4px 0 0 0 #3a332b, 4px 0 0 0 #3a332b,
    0 -4px 0 4px var(--ink), 0 4px 0 4px var(--ink),
    -4px 0 0 4px var(--ink), 4px 0 0 4px var(--ink),
    0 8px 0 4px var(--ink);
}
.pixel-btn-dark:hover { background: #4a4137; }

/* ---------- 장면 1: 공원 ---------- */
#scene-park { background: #87c5e8; }
#park-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  display: block;
}
#park-hint {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  color: #fff;
  background: rgba(20, 16, 12, .8);
  padding: 10px 18px;
  box-shadow:
    0 -4px 0 0 rgba(20,16,12,.8), 0 4px 0 0 rgba(20,16,12,.8),
    -4px 0 0 0 rgba(20,16,12,.8), 4px 0 0 0 rgba(20,16,12,.8),
    0 -4px 0 4px #fff, 0 4px 0 4px #fff,
    -4px 0 0 4px #fff, 4px 0 0 4px #fff;
  animation: hint-blink 1.6s steps(2) infinite;
  pointer-events: none;
}
@keyframes hint-blink { 50% { opacity: .35; } }

/* 배경 전환 (◀ NAME ▶) */
#bg-switch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(20, 16, 12, .72);
  box-shadow:
    0 -3px 0 0 rgba(20,16,12,.72), 0 3px 0 0 rgba(20,16,12,.72),
    -3px 0 0 0 rgba(20,16,12,.72), 3px 0 0 0 rgba(20,16,12,.72),
    0 -3px 0 3px #fff, 0 3px 0 3px #fff,
    -3px 0 0 3px #fff, 3px 0 0 3px #fff;
  z-index: 5;
}
#bg-name {
  min-width: 74px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  color: #fff;
}
.bg-arrow {
  font-family: inherit;
  font-size: 14px;
  color: #ffd94a;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
}
.bg-arrow:hover { color: #fff; }
.bg-arrow:active { transform: scale(.85); }

/* ---------- 장면 2: 부스 내부 (검정 스트라이프) ---------- */
#scene-booth { background: var(--stripe-a); }

.curtain {
  position: absolute; top: 0; bottom: 0; width: 11%;
  background: repeating-linear-gradient(90deg,
    #0a0a0a 0 16px, #222 16px 32px);
  z-index: 2;
}
.curtain-left { left: 0; box-shadow: inset -12px 0 0 rgba(0,0,0,.6); }
.curtain-right { right: 0; box-shadow: inset 12px 0 0 rgba(0,0,0,.6); }

.booth-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: repeating-linear-gradient(90deg,
    var(--stripe-a) 0 28px, var(--stripe-b) 28px 56px);
}
/* 어떤 요소가 사라져도 화면 크기가 절대 변하지 않도록 고정 */
.booth-inner > *,
.booth-console > *,
.crt, .crt-screen,
.side-panel > * { flex-shrink: 0; }

.booth-sign {
  font-size: 20px;
  letter-spacing: 4px;
  color: #ffd977;
  background: #0c0906;
  padding: 10px 32px;
  box-shadow:
    0 -4px 0 0 #0c0906, 0 4px 0 0 #0c0906,
    -4px 0 0 0 #0c0906, 4px 0 0 0 #0c0906,
    0 -4px 0 4px #ffd977, 0 4px 0 4px #ffd977,
    -4px 0 0 4px #ffd977, 4px 0 0 4px #ffd977,
    0 8px 0 4px #000;
  text-shadow: 0 0 8px rgba(255, 217, 119, .7);
}

/* --- 콘솔 배치: 왼쪽 패널 / CRT / 오른쪽 패널 --- */
.booth-console {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* --- 아날로그 TV --- */
.crt {
  display: flex;
  background: #4a3b2d;
  padding: 20px;
  gap: 16px;
  box-shadow:
    0 -6px 0 0 #4a3b2d, 0 6px 0 0 #4a3b2d,
    -6px 0 0 0 #4a3b2d, 6px 0 0 0 #4a3b2d,
    0 -6px 0 6px #2b2118, 0 6px 0 6px #2b2118,
    -6px 0 0 6px #2b2118, 6px 0 0 6px #2b2118,
    0 14px 0 6px #000;
}
.crt-screen {
  position: relative;
  height: min(52vh, 60vw);
  aspect-ratio: 3 / 4;
  background: #0b0f0b;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 5px #1c1710,
    inset 0 0 34px rgba(0, 0, 0, .95);
}
#video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* 전면 카메라는 거울 모드 */
  filter: sepia(.1) saturate(.9) contrast(1.06) brightness(1.08);
}
#video.no-mirror { transform: none; } /* 후면 카메라는 반전 없음 */

/* 카메라 전환(전면/후면) 버튼 */
.crt-flip {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 5;
  width: 42px; height: 42px;
  font-size: 20px;
  color: #ffd977;
  background: rgba(16, 12, 8, .62);
  border: 2px solid rgba(255, 217, 119, .55);
  cursor: pointer;
  line-height: 1;
}
.crt-flip:hover { background: rgba(16, 12, 8, .88); }
.crt-flip:active { transform: scale(.92); }
.crt-glare {
  position: absolute; inset: 0;
  background: linear-gradient(118deg,
    rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 22%,
    transparent 34%);
  pointer-events: none;
  z-index: 3;
}
/* 동전 넣기 전 화면에 깜빡이는 안내 */
#screen-msg {
  position: absolute;
  left: 0; right: 0;
  bottom: 12%;
  text-align: center;
  font-size: 17px;
  letter-spacing: 3px;
  color: #cfe3a8;
  text-shadow: 0 0 10px rgba(190, 230, 140, .8);
  animation: hint-blink 1.2s steps(2) infinite;
  pointer-events: none;
  z-index: 4;
}

/* 동전 투입 후 화면에 뜨는 시작 프롬프트 (화면 탭으로 촬영) */
#screen-start {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 0, 0, .85);
  background: rgba(0, 0, 0, .12);
  animation: hint-blink 1.2s steps(2) infinite;
  pointer-events: none; /* 탭은 뒤의 crt-screen이 받음 */
  z-index: 4;
}
#screen-start span {
  font-size: 46px;
  line-height: 1;
  text-shadow: 0 0 16px rgba(255, 255, 255, .5), 0 0 12px rgba(0, 0, 0, .85);
}
.crt-screen.tappable { cursor: pointer; }

#countdown {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(80px, 16vh, 150px);
  color: #fff;
  text-shadow: 6px 6px 0 rgba(0,0,0,.55);
  pointer-events: none;
  z-index: 4;
}
#camera-off-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 2;
  background: #101210; color: #9fb59b; font-size: 14px;
  z-index: 1;
}

/* --- 사이드 패널 공통 --- */
.side-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 사용방법 스티커 */
.sticker {
  background: var(--cream);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 2;
  transform: rotate(-3deg);
  box-shadow:
    0 -4px 0 0 var(--cream), 0 4px 0 0 var(--cream),
    -4px 0 0 0 var(--cream), 4px 0 0 0 var(--cream),
    0 6px 0 4px rgba(0,0,0,.5);
}
.sticker-title {
  font-size: 13px;
  text-align: center;
  border-bottom: 2px dashed #9c8c6e;
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.sticker-mini {
  background: #ffd977;
  padding: 8px 12px;
  font-size: 13px;
  transform: rotate(3deg);
  box-shadow:
    0 -4px 0 0 #ffd977, 0 4px 0 0 #ffd977,
    -4px 0 0 0 #ffd977, 4px 0 0 0 #ffd977,
    0 6px 0 4px rgba(0,0,0,.5);
}

/* 샘플 스트립 */
.sample-strip {
  background: #0d0c0b;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: rotate(2deg);
  box-shadow:
    0 -3px 0 0 #0d0c0b, 0 3px 0 0 #0d0c0b,
    -3px 0 0 0 #0d0c0b, 3px 0 0 0 #0d0c0b,
    0 6px 0 3px rgba(0,0,0,.5);
}
.sample-frame {
  width: 44px; height: 58px;
  background:
    radial-gradient(circle at 50% 42%, #cfc2a8 0 8px, transparent 8px),
    linear-gradient(180deg, #8f8570 0 70%, #6e6552 70%);
}

/* 동전 패널 */
.coin-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #23201c;
  padding: 18px 16px;
  box-shadow:
    0 -4px 0 0 #23201c, 0 4px 0 0 #23201c,
    -4px 0 0 0 #23201c, 4px 0 0 0 #23201c,
    0 -4px 0 4px #4d4740, 0 4px 0 4px #4d4740,
    -4px 0 0 4px #4d4740, 4px 0 0 4px #4d4740,
    0 8px 0 4px #000;
}
.coin-label {
  font-size: 12px;
  color: #cbb68c;
  letter-spacing: 2px;
}
.coin-slot-hole {
  width: 8px; height: 40px;
  background: #000;
  box-shadow:
    inset 2px 0 0 #3d3831,
    0 0 0 4px #57503f,
    0 4px 0 4px #16130f;
}
.coin-price {
  font-size: 13px;
  color: #ffd977;
}
.coin-return {
  width: 30px; height: 30px;
  background: #57503f;
  border-radius: 4px;
  box-shadow:
    inset 0 -5px 0 #38321f,
    inset 0 5px 0 #6e6552;
  cursor: pointer;
}
.coin-return:active { transform: translateY(2px); }
.coin-return-label {
  font-size: 10px;
  color: #8d8672;
}

/* 클릭해서 넣는 동전 */
#coin {
  width: 46px; height: 46px;
  margin-top: 10px;
  background: #e8c34f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #7a5c14;
  cursor: pointer;
  box-shadow:
    inset -4px -4px 0 #b8922e,
    inset 4px 4px 0 #f7dd8a,
    0 4px 0 #16130f;
  animation: coin-bob 1.4s steps(2) infinite;
}
@keyframes coin-bob { 50% { transform: translateY(-3px); } }
#coin:hover { background: #f2cf5e; }
#coin.inserting {
  animation: coin-in .55s ease-in forwards;
  pointer-events: none;
}
@keyframes coin-in {
  40%  { transform: translateY(-96px) scaleX(1); opacity: 1; }
  75%  { transform: translateY(-150px) scaleX(.3); opacity: 1; }
  100% { transform: translateY(-162px) scaleX(.08); opacity: 0; }
}
/* 자리는 그대로 두고 보이지만 않게 → 레이아웃 변동 없음 */
#coin.spent { visibility: hidden; animation: none; }
.coin-hint {
  margin-top: 8px;
  font-size: 9px;
  color: #cbb68c;
  letter-spacing: 1px;
  animation: hint-blink 1.6s steps(2) infinite;
}
.coin-hint.off { visibility: hidden; }

/* 동전 투입 후 반짝이며 나타나는 START */
#btn-start.lit {
  animation: btn-pop .25s steps(3), btn-glow 1.6s steps(2) infinite .25s;
}
@keyframes btn-pop {
  0% { transform: scale(.7); }
  100% { transform: scale(1); }
}
@keyframes btn-glow {
  50% {
    background: #fff8e0;
    box-shadow:
      0 -4px 0 0 #fff8e0, 0 4px 0 0 #fff8e0,
      -4px 0 0 0 #fff8e0, 4px 0 0 0 #fff8e0,
      0 -4px 0 4px #ffd977, 0 4px 0 4px #ffd977,
      -4px 0 0 4px #ffd977, 4px 0 0 4px #ffd977,
      0 8px 0 4px var(--ink);
  }
}

/* 촬영 슬롯 (세로 프레임) */
.shot-slots { display: flex; gap: 14px; }
.shot-slot {
  width: 58px; height: 78px;
  background: #0a0a0a;
  border: 3px dashed #5a544a80;
  overflow: hidden;
}
.shot-slot canvas { width: 100%; height: 100%; display: block; }
.shot-slot.filled { border: 3px solid var(--cream); }

#flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
#flash.boom { animation: flash-anim .45s ease-out; }
@keyframes flash-anim { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 장면 3: 필터 선택 ---------- */
#scene-filter {
  background: repeating-linear-gradient(90deg,
    var(--stripe-a) 0 28px, var(--stripe-b) 28px 56px);
}
.filter-inner {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 40px;
}
.filter-options { display: flex; gap: 70px; }
.filter-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 26px;
  cursor: pointer;
  transition: transform .1s;
}
.filter-card:hover { transform: translateY(-6px); }
.filter-card canvas {
  height: min(48vh, 380px);
  background: #000;
  box-shadow:
    0 -5px 0 0 #2c2c2c, 0 5px 0 0 #2c2c2c,
    -5px 0 0 0 #2c2c2c, 5px 0 0 0 #2c2c2c,
    0 -5px 0 5px #4a4a4a, 0 5px 0 5px #4a4a4a,
    -5px 0 0 5px #4a4a4a, 5px 0 0 5px #4a4a4a,
    0 12px 0 5px #000;
}

/* ---------- 장면 4: 인화 (실사 금속 질감) ---------- */
#scene-print { background: #111; }
.print-wall {
  height: 100%;
  background:
    radial-gradient(ellipse at 32% 18%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.5), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px),
    #171716;
  display: flex; flex-direction: column;
  align-items: center;
  padding-top: 4vh;
  gap: 3vh;
}

/* 브러시드 스틸 간판 */
.metal-sign {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    linear-gradient(178deg, #e9e9e6 0%, #cfcfcb 40%, #b7b7b2 75%, #d8d8d4 100%);
  color: #161616;
  text-align: center;
  padding: 18px 40px 14px;
  border: 1px solid #91918d;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 6px 14px rgba(0,0,0,.45);
}
.metal-sign-logo { font-size: 12px; letter-spacing: 2px; margin-bottom: 10px; color: #2c2c2a; }
.metal-sign-text { font-size: 26px; letter-spacing: 3px; line-height: 1.45; }
.metal-sign-text span { font-size: 13px; letter-spacing: 1px; }
.metal-sign-arrow { font-size: 18px; margin-top: 8px; }

/* 크롬 베벨 프레임 */
.dispenser {
  background: linear-gradient(155deg,
    #f4f4f2 0%, #a2a29e 16%, #e3e3e0 34%,
    #7c7c78 55%, #cfcfcb 76%, #8e8e8a 92%, #b5b5b1 100%);
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #555552;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.8),
    inset 0 -3px 6px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.55);
}

/* 움푹 들어간 스테인리스 배출구 */
.dispenser-inner {
  width: min(46vw, 300px);
  height: 56vh;
  border-radius: 8px;
  border: 7px solid transparent;
  border-image: linear-gradient(160deg, #3b3b39, #6f6f6b 30%, #2c2c2a 60%, #565652) 1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.10), transparent 65%),
    linear-gradient(180deg, #3f3f3d 0%, #6a6a66 32%, #555551 60%, #2f2f2d 100%);
  box-shadow:
    inset 0 16px 26px rgba(0,0,0,.8),
    inset 0 -10px 18px rgba(0,0,0,.55),
    inset 6px 0 14px rgba(0,0,0,.45),
    inset -6px 0 14px rgba(0,0,0,.45);
  overflow: hidden;
  display: flex;
  justify-content: center;
  position: relative;
}
/* 상단 배출 슬롯 */
.dispenser-inner::before {
  content: '';
  position: absolute; top: 6px; left: 7%; right: 7%;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0a0a09, #1d1d1b);
  box-shadow: 0 2px 2px rgba(255,255,255,.10), inset 0 2px 3px #000;
  z-index: 3;
}
#strip-canvas {
  position: relative;
  z-index: 2;
  height: 92%;
  margin-top: 2%;
  transform: translateY(-105%) rotate(0deg);
  filter: drop-shadow(6px 8px 6px rgba(0,0,0,.5));
}
#strip-canvas.printing {
  animation: strip-out 5s steps(60, end) forwards;
}
@keyframes strip-out {
  0%   { transform: translateY(-105%) rotate(0deg); }
  80%  { transform: translateY(2%) rotate(3deg); }
  100% { transform: translateY(4%) rotate(4deg); }
}

.print-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 94vw; }
.print-actions .pixel-btn { font-size: 14px; padding: 10px 16px; }

/* ---------- 자르기: CROP ---------- */
#crop-modal, #video-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.crop-panel {
  background: #191816;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: min(92vw, 480px);
  max-height: 94vh;
  box-shadow:
    0 -4px 0 0 #191816, 0 4px 0 0 #191816,
    -4px 0 0 0 #191816, 4px 0 0 0 #191816,
    0 -4px 0 4px var(--cream), 0 4px 0 4px var(--cream),
    -4px 0 0 4px var(--cream), 4px 0 0 4px var(--cream);
}
.crop-title {
  font-size: 18px;
  letter-spacing: 4px;
  color: #ffd977;
}
.crop-hint {
  font-size: 11px;
  color: #8d8672;
  text-align: center;
  line-height: 1.6;
}
.crop-stage {
  width: min(78vw, 360px);
  height: 54vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#crop-canvas {
  image-rendering: auto;
  touch-action: none;
  cursor: ns-resize;
  box-shadow: 0 0 0 2px #3f3c34;
}
.crop-frames {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.crop-frame-btn {
  font-family: inherit;
  font-size: 14px;
  min-width: 42px;
  padding: 8px 12px;
  background: #2b2924;
  color: #8d8672;
  border: 2px solid #3f3c34;
  cursor: pointer;
}
.crop-frame-btn.active {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
#crop-full {
  background: #2b2924;
  color: #cfc4ae;
  border-color: #5a5348;
}
#crop-full:hover { background: #37342d; }
.crop-actions { display: flex; gap: 16px; }
.crop-actions .pixel-btn { font-size: 13px; padding: 9px 20px; }

/* 영상 스트립 스테이지 */
.video-stage {
  height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#video-canvas {
  height: 100%;
  box-shadow: 0 0 0 2px #3f3c34;
}

/* ---------- 관리자 비밀번호 (도트 디자인) ---------- */
#pass-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
}
.pass-panel {
  background: #191816;
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 90vw;
  box-shadow:
    0 -4px 0 0 #191816, 0 4px 0 0 #191816,
    -4px 0 0 0 #191816, 4px 0 0 0 #191816,
    0 -4px 0 4px #ffd977, 0 4px 0 4px #ffd977,
    -4px 0 0 4px #ffd977, 4px 0 0 4px #ffd977;
}
/* 도트로 그린 자물쇠 (2px 픽셀 그리드) */
.pass-lock {
  position: relative;
  width: 44px; height: 40px;
  margin-bottom: 4px;
}
.pass-lock i:nth-child(1) { /* 고리 */
  position: absolute; top: 0; left: 12px;
  width: 20px; height: 20px;
  border: 4px solid #ffd977;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}
.pass-lock i:nth-child(2) { /* 몸통 */
  position: absolute; bottom: 0; left: 4px;
  width: 36px; height: 24px;
  background: #ffd977;
}
.pass-lock i:nth-child(3) { /* 열쇠구멍 */
  position: absolute; bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 10px;
  background: #191816;
}
.pass-title {
  font-size: 20px;
  letter-spacing: 5px;
  color: #ffd977;
  text-shadow: 0 0 8px rgba(255, 217, 119, .6);
}
.pass-msg {
  font-size: 14px;
  color: #cfc4ae;
  text-align: center;
}
.pass-input {
  font-family: inherit;
  font-size: 20px;
  text-align: center;
  letter-spacing: 4px;
  padding: 12px 14px;
  width: 220px; max-width: 68vw;
  color: var(--ink);
  background: var(--cream);
  border: none;
  outline: none;
  box-shadow:
    0 -3px 0 0 var(--cream), 0 3px 0 0 var(--cream),
    -3px 0 0 0 var(--cream), 3px 0 0 0 var(--cream),
    0 -3px 0 3px #6b5d45, 0 3px 0 3px #6b5d45,
    -3px 0 0 3px #6b5d45, 3px 0 0 3px #6b5d45;
}
.pass-error {
  font-size: 12px;
  color: #ff8a7a;
  animation: hint-blink 1s steps(2) 3;
}
.pass-actions { display: flex; gap: 16px; margin-top: 4px; }
.pass-actions .pixel-btn { font-size: 14px; padding: 10px 22px; }

/* ---------- 관리자 모드: FILM LAB ---------- */
#admin-toggle {
  position: fixed;
  right: 14px; bottom: 14px;
  width: 40px; height: 40px;
  font-size: 20px;
  background: rgba(20, 18, 15, .55);
  color: rgba(242, 232, 213, .5);
  border: 2px solid rgba(242, 232, 213, .25);
  cursor: pointer;
  z-index: 90;
  transition: opacity .15s, color .15s;
}
#admin-toggle:hover { color: var(--cream); border-color: var(--cream); }

#admin-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.admin-panel {
  background: #191816;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: min(92vw, 700px);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow:
    0 -4px 0 0 #191816, 0 4px 0 0 #191816,
    -4px 0 0 0 #191816, 4px 0 0 0 #191816,
    0 -4px 0 4px var(--cream), 0 4px 0 4px var(--cream),
    -4px 0 0 4px var(--cream), 4px 0 0 4px var(--cream);
}
.admin-title {
  font-size: 18px;
  letter-spacing: 4px;
  color: #ffd977;
  text-align: center;
}
.admin-tabs { display: flex; gap: 10px; justify-content: center; }
.admin-tab {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 22px;
  background: #2b2924;
  color: #8d8672;
  border: 2px solid #3f3c34;
  cursor: pointer;
}
.admin-tab.active {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.admin-body { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
#admin-preview {
  width: 240px; height: 320px;
  background: #000;
  border: 3px solid #3f3c34;
  flex-shrink: 0;
}
#admin-sliders {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  min-width: 260px;
}
.admin-row input[type="range"] { width: 100%; min-width: 0; }
.admin-row {
  display: grid;
  grid-template-columns: 110px 1fr 48px;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #cfc4ae;
}
.admin-row input[type="range"] {
  accent-color: #ffd977;
  height: 20px;
  cursor: pointer;
}
.admin-val {
  text-align: right;
  color: #ffd977;
  font-size: 11px;
}
.admin-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.admin-actions .pixel-btn { font-size: 13px; padding: 9px 20px; }
.admin-io { margin-top: 4px; padding-top: 14px; border-top: 2px dashed #3f3c34; }
.admin-io .pixel-btn { font-size: 11px; padding: 8px 16px; }

/* ============================================================
   모바일 반응형 (좁은 화면: ~640px 이하)
   ============================================================ */
@media (max-width: 900px) {
  /* --- 부스 내부: 가로 3분할 → 세로 스택 + 세로 스크롤 --- */
  .booth-inner {
    gap: 14px;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2.5vh 10px calc(4vh + env(safe-area-inset-bottom));
  }
  /* 필름 선택 / 인화 화면도 짧은 화면에서 스크롤 가능하게 */
  .filter-inner, .print-wall {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(4vh + env(safe-area-inset-bottom));
  }
  .booth-console {
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }
  /* 장식용 왼쪽 패널(사용법 스티커 + 샘플 필름) 숨김 */
  .panel-left { display: none; }
  .crt { order: 1; padding: 12px; gap: 0; width: auto; }
  .crt-screen { height: min(46vh, 74vw); }
  /* 동전 패널을 TV 아래에 세로 형태 그대로 배치 */
  .panel-right { order: 2; gap: 12px; }
  .coin-panel { padding: 12px 16px; gap: 8px; }
  .coin-slot-hole { height: 32px; }
  .sticker-mini { font-size: 11px; }
  .booth-sign { font-size: 16px; letter-spacing: 2px; padding: 8px 20px; }
  /* 모바일: 하단 START 버튼 숨김 → 화면 탭으로 시작 (스크롤 불필요) */
  #btn-start { display: none !important; }
  .shot-slot { width: 46px; height: 62px; }
  .shot-slots { gap: 10px; }
  .crt-flip { width: 36px; height: 36px; font-size: 17px; }

  /* --- 필름 선택: 카드 2개 나란히 → 폭 기준으로 축소해 한 줄 유지 --- */
  .filter-inner { gap: 22px; }
  .filter-options { gap: 16px; }
  .filter-card { gap: 14px; }
  .filter-card canvas { height: auto; width: 40vw; max-width: 220px; }
  .filter-card .pixel-btn { font-size: 13px; padding: 9px 12px; }

  /* --- 인화 화면 --- */
  .dispenser-inner { width: min(60vw, 260px); height: 52vh; }
  .metal-sign { padding: 12px 22px 10px; }
  .metal-sign-text { font-size: 18px; letter-spacing: 2px; }
  .metal-sign-text span { font-size: 10px; }
  .print-actions .pixel-btn { font-size: 12px; padding: 9px 12px; }

  /* --- 모달(FILM LAB / CROP / VIDEO) --- */
  .admin-body { flex-direction: column; align-items: center; }
  #admin-preview { width: 180px; height: 240px; }
  #admin-sliders { min-width: 0; width: 100%; }
  .admin-row { grid-template-columns: 92px 1fr 40px; font-size: 10px; }
  .admin-panel { padding: 18px 16px; gap: 12px; }
  .crop-stage { width: min(84vw, 320px); height: 46vh; }
  .video-stage { height: 52vh; }
}

/* ---------- 부스 나가기 (좌측 상단) ---------- */
.booth-exit {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 6;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 9px 13px;
  color: var(--cream);
  background: rgba(20, 16, 12, .72);
  border: 2px solid rgba(242, 232, 213, .45);
  cursor: pointer;
}
.booth-exit:hover { border-color: var(--cream); background: rgba(20, 16, 12, .9); }
.booth-exit:active { transform: scale(.94); }

/* ---------- RETURN 이스터에그 ---------- */
.coin-panel { position: relative; }
#refund-note {
  position: absolute;
  bottom: 66px; left: 50%;
  transform: translateX(-50%);
  background: var(--cream);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 9px;
  white-space: nowrap;
  box-shadow:
    0 -3px 0 0 var(--cream), 0 3px 0 0 var(--cream),
    -3px 0 0 0 var(--cream), 3px 0 0 0 var(--cream),
    0 5px 0 3px rgba(0,0,0,.45);
  z-index: 7;
  pointer-events: none;
}
#refund-note.pop { animation: refund-pop .16s steps(2); }
@keyframes refund-pop {
  0% { transform: translateX(-50%) scale(.5); }
  100% { transform: translateX(-50%) scale(1); }
}

/* ---------- 추억의 벽 (배경이 살짝 보이는 오버레이) ---------- */
#wall-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 8, 6, .42); /* 뒤로 야외 배경이 은은하게 비침 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5vh 4vw calc(3.5vh + env(safe-area-inset-bottom));
  z-index: 95;
}
.wall-frame {
  width: min(94vw, 1200px);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 12px solid #8c5a35;
  box-shadow:
    inset 0 0 0 4px #6e4527,
    0 14px 0 rgba(0, 0, 0, .35);
  background:
    radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px),
    #d9b98a;
  background-size: 7px 7px, auto;
}
.wall-head-spacer { min-width: 56px; }
.wall-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #8c5a35;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
  flex-shrink: 0;
}
#wall-back { font-size: 12px; padding: 8px 12px; }
.wall-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  letter-spacing: 4px;
  color: #ffe9c9;
  text-shadow: 2px 2px 0 #5f3f24;
}
.wall-count { min-width: 56px; text-align: right; font-size: 11px; color: #e8d4ae; }
#wall-board {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 18px calc(36px + env(safe-area-inset-bottom));
}
#wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 84px); /* 작은 고정 폭 — 넓을수록 여러 장 */
  justify-content: center;
  gap: 22px 16px;
}
.wall-item {
  position: relative;
  background: #0d0c0b;
  transform: rotate(var(--tilt, 0deg));
  cursor: pointer;
  transition: transform .15s;
  box-shadow: 3px 5px 0 rgba(0, 0, 0, .3);
}
.wall-item img { width: 100%; display: block; }
.wall-item:hover { transform: rotate(0deg) scale(1.06); z-index: 3; }
.wall-pin {
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  /* 광택 있는 블랙 압정 (좌상단 하이라이트) */
  background: radial-gradient(circle at 34% 28%,
    #9a9a9a 0%, #4a4a4a 30%, #161616 65%, #000 100%);
  box-shadow:
    inset -1px -2px 2px rgba(0, 0, 0, .7),
    0 2px 0 rgba(0, 0, 0, .4);
  z-index: 2;
}
.wall-loading, #wall-empty {
  text-align: center;
  color: #7a5a34;
  font-size: 14px;
  line-height: 2.2;
  padding-top: 9vh;
}

/* 성공/안내 토스트 */
#toast {
  position: fixed;
  bottom: 7vh; left: 50%;
  transform: translateX(-50%);
  background: var(--cream);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 12px 20px;
  white-space: pre-line; /* \n 줄바꿈 허용 (한/영 병기) */
  text-align: center;
  line-height: 1.8;
  max-width: 86vw;
  box-shadow:
    0 -4px 0 0 var(--cream), 0 4px 0 0 var(--cream),
    -4px 0 0 0 var(--cream), 4px 0 0 0 var(--cream),
    0 -4px 0 4px var(--ink), 0 4px 0 4px var(--ink),
    -4px 0 0 4px var(--ink), 4px 0 0 4px var(--ink),
    0 8px 0 4px rgba(0, 0, 0, .45);
  z-index: 130;
  pointer-events: none;
}
#toast.pop { animation: refund-pop .18s steps(2); }

/* 입력창 안내문은 작게 (한/영 병기가 잘리지 않게) */
.pass-input::placeholder {
  font-size: 13px;
  letter-spacing: 1px;
  color: #9a8c6e;
}

/* 한/영 병기 보조 문구 */
.hint-en {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: #8d8672;
  letter-spacing: 0;
}

/* PIN IT 모달 부가 */
.pin-consent { font-size: 10px; color: #8d8672; }
#pin-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
}

/* 벽 사진 크게 보기 */
#wall-view {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .84);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 112;
}
.wall-view-panel {
  background: #191816;
  padding: 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 92vw;
  max-height: 94vh;
  box-shadow:
    0 -4px 0 0 #191816, 0 4px 0 0 #191816,
    -4px 0 0 0 #191816, 4px 0 0 0 #191816,
    0 -4px 0 4px var(--cream), 0 4px 0 4px var(--cream),
    -4px 0 0 4px var(--cream), 4px 0 0 4px var(--cream);
}
#wall-view-img {
  height: min(56vh, 500px);
  box-shadow: 0 0 0 2px #3f3c34;
}
.wall-view-meta { text-align: center; font-size: 13px; color: #cfc4ae; line-height: 1.9; }
#wall-view-nick { color: #ffd977; }
#wall-view-date { font-size: 11px; color: #8d8672; }

@media (max-width: 900px) {
  #wall-grid { grid-template-columns: repeat(4, 1fr); gap: 18px 12px; } /* 모바일은 4장 (6장은 너무 작아짐) */
  #wall-overlay { padding: 2vh 3vw calc(2vh + env(safe-area-inset-bottom)); }
  /* 사진을 살짝 줄이고 옆 여백 확보 */
  #wall-board { padding: 24px 30px calc(32px + env(safe-area-inset-bottom)); }
  .wall-title { font-size: 14px; letter-spacing: 2px; }
  .booth-exit { top: 10px; left: 10px; font-size: 11px; padding: 8px 10px; }
}
}

/* MONO 카드 프레임(2x2, 가로형)은 폭 기준으로 표시 */
#strip-canvas.wide {
  height: auto;
  width: 94%;
  margin-top: 24%;
}

/* ---------- FRAME 선택 모달 (모노 전용) ---------- */
#frame-modal {
  position: fixed; inset: 0;
  background: rgba(8, 6, 5, .84);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  padding: 16px;
}
.frame-options {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 14px 0 4px;
}
.frame-opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 10px 8px;
  background: #0d0b09;
  cursor: pointer;
  border: 3px solid #2a241f;
}
.frame-opt:hover { border-color: #6b5f52; }
.frame-opt.active { border-color: #ffd94a; }
.frame-opt canvas { display: block; image-rendering: auto; }
.frame-opt-label {
  font-size: 13px;
  letter-spacing: 2px;
  color: #cbbfae;
}
.frame-opt.active .frame-opt-label { color: #ffd94a; }
@media (max-width: 900px) {
  .frame-options { gap: 8px; }
  .frame-opt { padding: 6px 6px 5px; }
  .frame-opt canvas { max-height: 34vh; width: auto !important; height: auto !important; max-width: 26vw; }
}