:root { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }

/* 순수 검정 — 아트워크 가장자리 비네팅과 자연히 어우러진다. body padding 0으로 gap 없음 */
html, body { background: #000; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #eef;
  height: 100dvh;
  overflow: hidden;                 /* 무대는 항상 화면 안 — 상하 스크롤 없음 */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 모바일: 정확히 화면 폭. 데스크톱: 세로 핏이 폭을 결정(최대 768px) — 세로 스크롤 불가조건 */
.stage { position: relative; width: 100vw; height: 100dvh; z-index: 1; }
@supports not (height: 100dvh) { .stage { height: 100vh; } }
@supports not (height: 100dvh) and (height: 100vh) { .stage { height: -webkit-fill-available; } }
@media (min-width: 769px) {
  .stage { width: min(768px, calc(100dvh * 0.5627)); height: 100dvh; }
}
.art { position: relative; z-index: 1; }
.content { z-index: 2; }
.brand { z-index: 2; }
.art {
  display: block;
  width: 100%;
  height: auto;
  transition: filter .7s ease, transform .7s ease, opacity 1s ease;
}
.art.placeholder {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 30%, #1a1a2e 0%, #050508 40%, #000 75%);
}
video.art {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  height: 100svh;              /* iOS 안전 폴백 */
  object-fit: cover;
}
@supports not (height: 100svh) { video.art { height: 100vh; } }
video.art.hidden { display: none; }
/* 데스크톱: 모바일 세로영상을 화면폭으로 cover하면 상하가 잘린다 —
   아트워크와 같은 세로 컬럼(9:16)으로 제한하고 중앙 정렬 */
@media (min-width: 769px) {
  video.art, .art.placeholder {
    width: min(768px, calc(100dvh * 0.5627));
    height: 100dvh;
    left: 50%;
    transform: translateX(-50%);
  }
}
/* 첫 화면(이용권)은 선명하게, 이후 화면은 liquid glass용 블러 — scale은 블러 가장자리 은폐 */
body.beyond .art {
  filter: blur(18px) saturate(1.15) brightness(.55) contrast(1.05);
  transform: scale(1.06);
}

/* 브랜드(타이틀) — 포스터 상단의 어두운 구역 위 */
.brand {
  position: absolute;
  top: 7%;
  left: 0; right: 0;
  text-align: center;
  padding: 0 24px;
}
.brand h1 {
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 800;
  letter-spacing: .10em;
  color: #fff;
  text-shadow: 0 1px 24px rgba(0,0,0,.85);
}
.brand .sub {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: .12em; /* 라틴 문자열 — 한글식 넓은 자간 불필요 */
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 14px rgba(0,0,0,.8);
}

/* liquid glass 패널 — 테두리 없음(inset 하이라이트로 유리 능선만).
   iOS/안드로이드 최신 질감(backdrop-filter), 이전 OS는 @supports 폴백 */
/* 콘텐츠 — 패널 없음. 요소들이 이미지 위에 직접 뜬다(가독성은 그림자로) */
.content {
  position: absolute;
  left: 20px; right: 20px;
  bottom: max(7%, env(safe-area-inset-bottom));
  text-align: center;
}
.content h2 { font-size: 21px; letter-spacing: -.01em; margin: 10px 0 6px; color:#fff;
  text-shadow: 0 1px 16px rgba(0,0,0,.85); }
.content .sub { color: rgba(238,238,255,.85); font-size: 13.5px; line-height: 1.65; margin-bottom: 14px;
  text-shadow: 0 1px 10px rgba(0,0,0,.85); }
.emoji { font-size: 34px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.hidden { display: none !important; }

input[type=text] {
  width: 100%;
  padding: 14px;
  font-size: 18px;
  text-align: center;
  letter-spacing: .35em;
  text-indent: .35em;
  border-radius: 16px;
  border: 0;                                   /* 테두리 없음 — 유리 질감으로만 */
  background: rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08);
  color: #fff;
  text-transform: uppercase;
}
input[type=text]:focus { outline: 2px solid rgba(255,255,255,.45); }
input[type=text]::placeholder { letter-spacing: .02em; text-indent: 0; color: rgba(255,255,255,.4); }

button {
  width: 100%;
  margin-top: 12px;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 22px rgba(0,0,0,.35);
  transition: transform .12s ease, background .2s ease;
}
button:active { transform: scale(.98); }
button:disabled { opacity: .45; cursor: default; }
/* 6자 완성 — 짙은 노랑으로 활성 신호 */
button.ready {
  background: linear-gradient(180deg, #f7c518, #dd9e00);
  color: #201600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 26px rgba(221,158,0,.45);
}

.err { color: #ff9fb2; font-size: 13px; margin-top: 10px; min-height: 17px;
  text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.steps { color: rgba(255,255,255,.5); font-size: 11px; margin-top: 14px; letter-spacing: .06em;
  text-shadow: 0 1px 10px rgba(0,0,0,.8); }

.drop {
  margin: 4px 0 6px;
  border-radius: 18px;
  padding: 26px 16px;
  cursor: pointer;
  background: rgba(0,0,0,.24);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16);
  transition: box-shadow .15s ease, background .15s ease;
}
.drop.on { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.drop .big { font-size: 30px; }
.drop p { color: rgba(238,238,255,.72); font-size: 13px; margin-top: 8px; line-height: 1.6; }

.preview {
  width: 118px; height: 118px;
  object-fit: cover;
  border-radius: 16px;
  margin: 4px auto 2px;
  display: block;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}

.spinner {
  width: 32px; height: 32px;
  margin: 16px auto 10px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#result-video {
  width: 100%;
  max-width: 300px;
  border-radius: 16px;
  margin: 10px auto 2px;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* 블러 화면(대기 확인 s-wait 제외한 첫 화장 외 전부)에서는 화면 중앙을 적극 사용 —
   크리스탈을 피할 필요가 없다(뿌옇게 되므로). 첫 화면만 하단 배치 유지 */
body.beyond .content {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* 선택한 사진 썸네일 + 우상단 취소(X) — 유리 질감의 동그란 버튼 */
.preview-wrap { position: relative; width: 118px; margin: 6px auto 2px; }
.preview-wrap .preview { margin: 0; }
button.clear {
  position: absolute;
  top: -9px; right: -9px;
  width: 30px; height: 30px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: rgba(10,8,16,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.25);
}
button.clear:active { transform: scale(.92); }
/* 전역 상태 규약: disabled = 흐린 유리, enabled(준비완료) = 짙은 노랑 */
button:disabled { background: rgba(255,255,255,.06); }

/* 데스크톱: 버튼/입력창은 중앙 고정폭 300px — 반드시 각각 한 줄씩 */
@media (min-width: 769px) {
  .content input[type=text],
  .content button:not(.clear) {
    display: block;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 버튼 내장 에러 상태 — 잘못된 이용권이 유지되는 동안 버튼 안에 메시지 */
button.error {
  background: rgba(255, 76, 98, .16);
  color: #ffb3c0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
}