/* style.css — 인생네컷 부스 (모바일 우선) */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink: #ff5e9c;
  --pink-d: #e8407f;
  --bg: #0e0e13;
  --panel: #17171f;
}

html, body { height: 100%; }
body {
  font-family: 'Pretendard', 'Malgun Gothic', system-ui, sans-serif;
  background: var(--bg);
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  overflow-x: hidden;
}
#camera { display: none; }

#app { min-height: 100vh; }

/* ── 화면 전환 ── */
.screen { display: none; min-height: 100vh; padding: 20px 16px; }
.screen.active { display: flex; flex-direction: column; align-items: center; }
.screen-title { font-size: 20px; font-weight: 800; margin: 6px 0 16px; }

.hidden { display: none !important; }

/* ── 버튼 공통 ── */
.primary-btn {
  background: linear-gradient(135deg, var(--pink), var(--pink-d));
  color: #fff; border: none; cursor: pointer;
  font-size: 17px; font-weight: 800;
  padding: 13px 30px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(255, 94, 156, 0.4);
}
.primary-btn:disabled { opacity: 0.4; box-shadow: none; cursor: default; }
.primary-btn:active:not(:disabled) { transform: scale(0.97); }
.ghost-btn {
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); cursor: pointer;
  font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: 999px;
}
.mini-btn {
  background: rgba(255,255,255,0.12); color: #fff; border: none;
  cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px;
}

/* ── ① 랜딩 ── */
#screen-landing.active { justify-content: center; }
.center-col { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
#screen-landing h1 { font-size: 32px; }
.sub { opacity: 0.8; line-height: 1.5; font-size: 15px; }
.err { color: #ff8a8a; min-height: 18px; font-size: 14px; }

/* ── ② 연예인 선택 ── */
.celeb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px; width: 100%; max-width: 640px;
}
.celeb-card {
  position: relative; border: none; cursor: pointer; padding: 0;
  aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.celeb-card:active { transform: scale(0.97); }
.celeb-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.celeb-card.no-thumb {
  background: linear-gradient(160deg, var(--accent), rgba(0,0,0,0.5));
}
.celeb-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 8px 10px; color: #fff;
  font-weight: 800; font-size: 17px; text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 22%, rgba(0,0,0,0.45) 62%, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.empty { opacity: 0.7; text-align: center; line-height: 1.6; }
.empty code { background: rgba(255,255,255,0.12); padding: 2px 6px; border-radius: 5px; }

/* ── ③ 촬영 ── */
#screen-booth.active { justify-content: center; gap: 14px; }
.booth-top {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 560px; justify-content: space-between;
}
.pill { background: rgba(255,255,255,0.14); padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.booth-name { font-size: 20px; font-weight: 800; }
.booth-stage {
  position: relative; display: inline-block;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,0.5);
}
#boothCanvas { display: block; max-height: 56vh; max-width: 92vw; width: auto; height: auto; }
.countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(70px, 18vw, 150px); font-weight: 900; color: #fff;
  text-shadow: 0 6px 24px rgba(0,0,0,0.7); pointer-events: none;
}
.flash {
  position: absolute; inset: 0; background: #fff; opacity: 0;
  pointer-events: none; transition: opacity 0.25s ease;
}
.flash.on { opacity: 1; transition: opacity 0.04s ease; }
.space-hint { font-size: 13px; opacity: 0.7; }

/* ── ④ 컷 선택 (레이아웃 + 프레임 미리보기) ── */
.layout-picker { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.layout-btn {
  background: rgba(255,255,255,0.07); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700;
}
.layout-btn.active { background: var(--pink); border-color: var(--pink); }

.cuts-body {
  display: flex; gap: 22px; align-items: flex-start; justify-content: center;
  flex-wrap: wrap; width: 100%; max-width: 820px;
}
.cuts-preview {
  flex: 0 0 auto; background: #fff; border-radius: 8px; line-height: 0;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.cuts-canvas { display: block; max-height: 50vh; max-width: min(90vw, 420px); width: auto; height: auto; }
.cuts-right { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; align-items: center; }

.hint { font-size: 13px; opacity: 0.75; margin-bottom: 12px; text-align: center; }
.shot-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 420px; margin-bottom: 16px; }
.shot-wrap {
  position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden;
  cursor: pointer; border: 3px solid transparent;
}
.shot-wrap.selected { border-color: var(--pink); }
.shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-badge {
  position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
}
.shot-wrap.selected .shot-badge { display: flex; }

/* ── ⑤ 꾸미기 ── */
#screen-compose.active { justify-content: flex-start; }
.compose-wrap {
  display: flex; gap: 20px; align-items: flex-start;
  flex-wrap: wrap; justify-content: center; width: 100%;
}
.compose-stage {
  position: relative; display: inline-block; line-height: 0;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.base-canvas { display: block; height: 62vh; width: auto; max-width: 90vw; }
.sticker-layer { position: absolute; inset: 0; }
.sticker-item {
  position: absolute; touch-action: none; cursor: move;
  outline: 1px dashed rgba(255,255,255,0.6);
}
.sticker-item img { width: 100%; height: 100%; display: block; pointer-events: none; }
.st-del {
  position: absolute; top: -10px; right: -10px;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: #ff4d4d; color: #fff; font-size: 14px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.st-handle {
  position: absolute; right: -8px; bottom: -8px;
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--pink); cursor: nwse-resize;
}
.compose-side { flex: 1 1 260px; min-width: 240px; max-width: 360px; }
.panel-title { font-size: 12px; opacity: 0.7; margin-bottom: 10px; line-height: 1.4; }
.sticker-palette {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px;
  background: var(--panel); padding: 10px; border-radius: 12px; margin-bottom: 18px;
}
.palette-item {
  aspect-ratio: 1; border: none; cursor: pointer;
  background: rgba(255,255,255,0.06); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 6px;
}
.palette-item:active { transform: scale(0.9); }
.palette-item img { width: 100%; height: 100%; object-fit: contain; }
.compose-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── 미리보기 확대 + 프레임색·문구·영상 컨트롤 ── */
.screen-sub { opacity: 0.75; font-size: 14px; margin: -8px 0 16px; text-align: center; }

/* 미리보기 크게 */
#boothCanvas { max-height: 66vh; max-width: 94vw; }
.cuts-canvas { max-height: 82vh; max-width: min(92vw, 620px); }
.base-canvas { height: auto; max-height: 80vh; max-width: min(90vw, 470px); }
@media (max-width: 719px) {
  .cuts-canvas { max-height: 54vh; }
  .base-canvas { max-height: 62vh; }
}
.compose-side { max-width: 420px; }

/* 프레임 색 / 문구 컨트롤 */
.ctrl-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.ctrl-label { font-size: 13px; font-weight: 700; opacity: 0.85; min-width: 62px; }
#frameColor { width: 40px; height: 32px; border: none; background: none; padding: 0; cursor: pointer; }
#captionInput {
  flex: 1; min-width: 140px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08);
  color: #fff; font-size: 14px;
}
.swatches { display: inline-flex; gap: 6px; }
.frame-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.45); cursor: pointer; }

.primary-btn.wide, .ghost-btn.wide { width: 100%; margin-top: 8px; }

/* 영상 */
.video-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.video-preview {
  max-height: 32vh; max-width: 46%; width: auto; height: auto;
  background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.video-side { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 150px; }
.video-status { font-size: 12px; opacity: 0.85; min-height: 16px; }

/* ── 정렬/크기 보정 ── */
/* 연예인 선택 카드 크게 + 가운데 */
.celeb-grid { grid-template-columns: repeat(auto-fill, 240px); justify-content: center; max-width: 780px; gap: 16px; }

/* 컷선택: 갤러리 2열로 키우고 세로 가운데 정렬(빈 공간 줄이기) */
.cuts-body { align-items: center; gap: 30px; max-width: 940px; }
.cuts-right { align-self: center; }
.shot-gallery { grid-template-columns: repeat(2, 1fr); max-width: 320px; gap: 10px; }

/* 꾸미기: 가운데 정렬 */
.compose-wrap { align-items: center; }