/* 색은 0화 첫 프레임 기준: 깊은 파랑 물, 금빛 반사. 글자 #F6F3EC(한글)·#C8C4BA(영문). */
:root {
  --deep: #0b1420;
  --ink: #F6F3EC;
  --ink-soft: #C8C4BA;
  --gold: #F2B45A;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "PingFang SC", "Noto Sans KR", sans-serif;
  color: var(--ink);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--deep); }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; background: var(--deep); touch-action: none; }
#scene video, #scene canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#scene video { object-fit: cover; }

/* 시작 화면: 젖은 아스팔트의 청회색 위에 글 한 줄. 화면 전체가 버튼입니다. 설명 화면은 없습니다. */
.start { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 32px 28px calc(32px + env(safe-area-inset-bottom)); border: 0; text-align: center; cursor: pointer; color: var(--ink);
  background: radial-gradient(120% 90% at 50% 100%, #1a2d42 0%, #0b1420 55%, #060b12 100%); transition: opacity .6s; }
.start.is-off { opacity: 0; pointer-events: none; }
.wordmark { font-size: 12px; font-weight: 600; letter-spacing: .42em; color: var(--ink-soft); }
.start-line { font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; word-break: keep-all; }
.start-tap { font-size: 13px; color: var(--ink-soft); opacity: .8; }
.drop { width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gold); opacity: .7; animation: drip 2.6s ease-in-out infinite; }
@keyframes drip { 0% { transform: translateY(-16px) rotate(-45deg); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(20px) rotate(-45deg); opacity: 0; } }

/* 체험 중 UI: 힌트 한 줄, 자막 한 줄. 사무 문구 없음. */
.ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hint { position: absolute; left: 50%; top: calc(26px + env(safe-area-inset-top)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px);
  padding: 9px 16px; border-radius: 999px; background: rgba(11, 20, 32, .5); font-size: 14px; color: var(--ink-soft); text-align: center;
  backdrop-filter: blur(8px); opacity: 0; transition: opacity .5s; }
.hint.is-on { opacity: 1; }
.caption { position: absolute; color: var(--ink); left: 24px; right: 24px; bottom: calc(170px + env(safe-area-inset-bottom)); font-size: 22px; font-weight: 400; line-height: 1.5;
  text-align: center; word-break: keep-all; text-shadow: 0 1px 10px rgba(0, 0, 0, .75), 0 0 32px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .9s; }
.caption:lang(en) { color: var(--ink-soft); }
.caption.is-on { opacity: 1; }
.notice { position: absolute; left: 24px; right: 24px; bottom: calc(40px + env(safe-area-inset-bottom)); font-size: 12px; line-height: 1.5; color: var(--ink-soft);
  text-align: center; opacity: .8; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }

/* 나가기 화면: 카메라와 웅덩이는 그대로 두고 아래쪽에만 얹습니다. */
.end { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 36px 24px calc(28px + env(safe-area-inset-bottom)); text-align: center;
  background: linear-gradient(to top, rgba(11, 20, 32, .92), rgba(11, 20, 32, .6) 70%, rgba(11, 20, 32, 0)); opacity: 0; transition: opacity 1.2s; }
.end.is-on { opacity: 1; }
.end.is-early { padding-top: 20px; background: linear-gradient(to top, rgba(11, 20, 32, .55), rgba(11, 20, 32, 0)); }
.end.is-early .mark, .end.is-early .end-line, .end.is-early .end-fortune { display: none; }
.end-fortune { margin-bottom: 10px; font-size: 22px; font-weight: 500; line-height: 1.5; color: var(--ink); word-break: keep-all; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.end-fortune:empty { display: none; }
.mark { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mark img { max-width: 220px; max-height: 80px; }
.mark-text, .mark-reflect { font-size: 22px; font-weight: 600; letter-spacing: .42em; color: var(--ink-soft); }
.mark-reflect { transform: scaleY(-1); opacity: .32; filter: blur(.8px); -webkit-mask-image: linear-gradient(to top, transparent 15%, #000 100%); mask-image: linear-gradient(to top, transparent 15%, #000 100%); }
.end-line { font-size: 17px; color: var(--ink); word-break: keep-all; }
.btn-share { margin-top: 4px; padding: 14px 32px; border: 1px solid rgba(246, 243, 236, .35); border-radius: 999px; background: rgba(246, 243, 236, .1);
  font-size: 16px; font-weight: 600; backdrop-filter: blur(6px); pointer-events: auto; }
.btn-share:active { transform: scale(.97); }
.btn-share.is-rec { background: rgba(226, 80, 70, .85); border-color: rgba(226, 80, 70, .9); }
.share-hint { margin-top: -6px; font-size: 12px; color: var(--ink-soft); opacity: .75; }
.end.is-rec .mark, .end.is-rec .end-line { visibility: hidden; }  /* 녹화 중엔 버튼만 남깁니다(결과물에는 워드마크가 합성됩니다) */

.tag { position: absolute; right: 18px; top: calc(22px + env(safe-area-inset-top)); font-size: 11px; letter-spacing: .3em; color: rgba(200, 196, 186, .55); }

.err { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--deep); text-align: center; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }