/* 첫 화면 '나만의 스튜디오' 새 판(STUDIO_3D — 대표 지시 10-02 11:4x, templates/_landing_studio.html).
   실사 스튜디오 영상 무대. site.css 색 토큰·글꼴 그대로, 흰 바탕(영상 가장자리도 흰빛으로 녹는다), 어두운 판 없음.
   폰: 제목 → 무대(화면 가득, 세로 4:5) → 대화 → 끝 줄. 태블릿: 무대 가운데 560px. PC(900px~): 왼쪽 글·대화·끝 줄, 오른쪽 무대.
   무대는 비율을 먼저 잡아 두어 영상이 늦게 와도 화면이 밀리지 않는다. */
.s3d-in{display:grid;gap:22px;grid-template-areas:"head" "stage" "chat" "note"}
.s3d-head{grid-area:head;min-width:0}
.s3d-stage{grid-area:stage;position:relative;margin:0 calc(-1 * var(--gutter));aspect-ratio:4/5;background:#fff;overflow:hidden;isolation:isolate}
.s3d-poster,.s3d-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.s3d-video{opacity:0;transition:opacity .9s ease}
.s3d-poster{transition:opacity .9s ease}
.s3d-live .s3d-video{opacity:1}
.s3d-live .s3d-poster{opacity:0}
.s3d-chat{grid-area:chat}
.s3d-note{grid-area:note;min-width:0}

/* 기록 점 — 조각(바닥·배경막·조명·카메라·모니터) 하나가 완성될 때마다 금빛으로 찬다. 영상이 돌기 전·정지 그림은 모두 찬 상태.
   5초 B판(10-02)은 마지막 점(4.65초)과 반복(5.13초) 사이가 짧아 차고 비는 시간을 .35초로 줄였다(예전 16초 판 .8초) */
.s3d-rec{position:absolute;left:50%;bottom:clamp(12px,3.4%,22px);transform:translateX(-50%);display:flex;gap:13px;align-items:center;list-style:none;margin:0;padding:0;z-index:2}
.s3d-rec::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:var(--line);z-index:-1}
.s3d-rec li{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);transition:background-color .35s ease,box-shadow .35s ease}
.s3d-live .s3d-rec li{background:#fff}
.s3d-live .s3d-rec li.on{background:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 0 0 3px rgba(155,123,55,.13)}

/* 말풍선은 영상이 실제로 돌기 시작한 뒤(s3d-sync)에만 숨겼다가 영상 시각에 맞춰 차례로 보인다
   (스크립트가 없거나 자동 재생이 막히면 글이 늘 보인다) */
.s3d-sync .s3d-chat .own-msg{opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.s3d-sync .s3d-chat .own-msg.s3d-show{opacity:1;transform:none}

@media (min-width:640px){
  .s3d-stage{margin:0 auto;width:100%;max-width:560px}
}
/* 760px 부터 글이 왼쪽 정렬(site.css .own) — 무대도 왼쪽에 맞춘다 */
@media (min-width:760px) and (max-width:899px){.s3d-stage{margin-left:0}}
@media (min-width:900px){
  /* 왼쪽 글 묶음(제목·대화·끝 줄)은 오른쪽 무대 높이의 가운데에 */
  .s3d-in{grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-rows:1fr auto auto auto 1fr;
    grid-template-areas:". stage" "head stage" "chat stage" "note stage" ". stage";column-gap:56px;row-gap:22px}
  .s3d-stage{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .s3d-video{display:none}
  .s3d-sync .s3d-chat .own-msg{opacity:1;transform:none;transition:none}
}