/* 캐릭터 만들기 패드 — 2026-10-23 사용자: 피그마 「[Google] Playtime 2026」 Section 5(163:51312) 키오스크(1024×1366)대로.
   검은 바탕, 큰 제목(64px) 뒤 프리즘 빛, 가운데 350px 픽셀 버튼, 아래 Google Play · playtime. 토큰 이름은 피그마 변수 그대로.
   예전(밝은 바탕) 스타일은 git 기록(2026-10-22) 참고 */
:root { --black: #000; --white: #fff; --soft: #2f2f2f; --surface: #252525; --muted: #ccc; --outline: rgba(255,255,255,.1);
  --blue: #3186ff; --green: #00af57; --red: #fc413d; --yellow: #ffbe00;
  --bevel: inset 0 2px 0 rgba(0,0,0,.25), inset 2px 0 0 rgba(0,0,0,.25), inset -2px 0 0 rgba(0,0,0,.25), inset 0 -4px 0 rgba(0,0,0,.25);
  --pressed: inset 0 4px 0 rgba(0,0,0,.25), inset 2px 0 0 rgba(0,0,0,.25), inset -2px 0 0 rgba(0,0,0,.25);
  --ts: 0 1px 0 rgba(255,255,255,.25); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
@font-face { font-family: "Google Sans Flex"; src: url("/assets/fonts/GoogleSansFlex.woff2") format("woff2-variations"), url("/assets/fonts/GoogleSansFlex.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Pretendard Web"; src: url("/assets/fonts/Pretendard.woff2") format("woff2-variations"), url("/assets/fonts/Pretendard.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
html, body { margin: 0; height: 100%; background: var(--black); color: var(--white); font-family: "Google Sans Flex", "Pretendard Web", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { overscroll-behavior: none; user-select: none; -webkit-user-select: none; overflow-x: hidden; }
input { user-select: text; -webkit-user-select: text; }
button, label.file { font: inherit; cursor: pointer; touch-action: manipulation; }

.pad { min-height: 100dvh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
/* 머리: 피그마에는 없음 — 운영용 「처음으로」만 오른쪽 위에 작게 */
.top { position: absolute; top: 16px; right: 16px; z-index: 20; }
.top .brand, .top .steps { display: none; }
main { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 24px 150px; }
.view { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; animation: in .25s ease; position: relative; }
@keyframes in { from { opacity: 0; } }

/* 제목 묶음(피그마 Frame 32): 위 120px, 위아래 40px, 64/80 굵게 + 24/34 보통, 뒤에 프리즘 빛 */
.ttl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; margin-top: 56px; text-align: center; isolation: isolate; }
.ttl h1, .ttl h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(40px, 6.25vw, 64px); line-height: 1.25; font-weight: 700; text-shadow: var(--ts); letter-spacing: 0; }
.ttl .lead { position: relative; z-index: 1; margin: 0; font-size: clamp(18px, 2.35vw, 24px); line-height: 34px; color: var(--white); text-shadow: var(--ts); }
.glow { position: absolute; left: 50%; top: calc(50% - 14.91px); width: 418.488px; height: 382.587px; transform: translate(-50%, -50%); mix-blend-mode: screen; pointer-events: none; z-index: 0;
  -webkit-mask: url("/assets/pixel/kiosk/glow-mask.svg") 0 0 / 418.488px 382.587px no-repeat; mask: url("/assets/pixel/kiosk/glow-mask.svg") 0 0 / 418.488px 382.587px no-repeat; }
.glow img { position: absolute; left: -470.958px; top: -471.063px; width: 1360.171px; height: 1324.615px; max-width: none; }
.glow img.ov { mix-blend-mode: overlay; }

/* 픽셀 버튼(Pixel/Button/Primary): 흰 테두리 2px + 색 판 + 베벨. 파랑 = 다음, soft = 보조 */
.primary, .ghost, label.file { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 350px; max-width: 100%; min-height: 56px; padding: 16px; border: 2px solid var(--white); border-top-width: 0; border-radius: 0; background: var(--blue); color: var(--white); font-size: 16px; line-height: 24px; font-weight: 700; text-decoration: none; text-shadow: var(--ts); box-shadow: var(--bevel), 0 2px 0 rgba(255,255,255,.25); }
.ghost, .ghost.small { background: var(--soft); }
.primary:active, .ghost:active, label.file:active { box-shadow: var(--pressed), 0 2px 0 rgba(255,255,255,.25); }
.primary:disabled, .ghost:disabled, label.file.off { opacity: .45; pointer-events: none; }
.ghost.small { width: auto; min-height: 44px; padding: 0 16px; font-size: 14px; }
.big { width: 350px; }
label.file input { display: none; }
.acts, .actions { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 0; width: 100%; }
.hint { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); text-align: center; text-shadow: var(--ts); }
.lead { color: var(--muted); }
.notice { margin: 0; padding: 12px 16px; border: 2px solid; font-size: 16px; font-weight: 700; max-width: 520px; text-align: center; }
.notice.bad { border-color: var(--red); color: #ff9a97; }
.notice.warn { border-color: var(--yellow); color: #ffd866; }
#error { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 30; background: var(--black); }

/* 바닥: Google Play(163×34) · playtime(118×28), 안쪽 여백 60px */
.foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 60px; pointer-events: none; z-index: 11; }
.foot .gp { width: 163px; height: 34.189px; } .foot .pt { width: 118px; height: 27.775px; mix-blend-mode: screen; }

/* 0. 시작: 프리즘 모양으로 자른 캐릭터 두 장(피그마 Mask group 127:40176 · 127:40177) */
.start { justify-content: flex-start; }
.intro-art { position: absolute; left: 50%; top: 0; width: 1024px; height: 1366px; transform: translateX(-50%); pointer-events: none; }
.intro-art .mask { position: absolute; width: 794.795px; height: 791.946px; -webkit-mask: url("/assets/pixel/kiosk/prism-mask.svg") no-repeat; mask: url("/assets/pixel/kiosk/prism-mask.svg") no-repeat; }
.intro-art .m1 { left: -179px; top: 400.6px; -webkit-mask-position: 111.357px 55.633px; mask-position: 111.357px 55.633px; -webkit-mask-size: 606.999px 597.283px; mask-size: 606.999px 597.283px; }
.intro-art .m2 { left: 457px; top: 352.6px; -webkit-mask-position: 93.033px -0.352px; mask-position: 93.033px -0.352px; -webkit-mask-size: 615.702px 583.876px; mask-size: 615.702px 583.876px; }
.intro-art img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.intro-art .hero img { image-rendering: auto; object-position: 50% 40%; }
.start .acts { position: absolute; left: 0; right: 0; bottom: 154px; z-index: 2; }
/* 2026-10-26 시작 화면 단순화: 제목 아래 캐릭터 한 명(피그마 픽셀 캐릭터, 회색 배경 그대로 둥근 틀) */
.intro-char { display: block; height: min(38vh, 480px); width: auto; margin: 8px auto 0; border-radius: 24px; image-rendering: pixelated; }
/* 2026-10-26 사용자: 진입 화면 — 두 프리즘 로고(브랜드 그대로) · 제목 · 예시 캐릭터 네 명(그림 그대로, 틀 없음) · 시작 */
.start-logo { display: block; width: min(380px, 52vw); height: auto; margin: 40px auto 0; }
.ttl-logo { display: block; width: min(220px, 40vw); height: auto; margin: 0 auto -4px; }   /* 다른 화면 제목 위 두 프리즘 로고 */
.start .ttl.noglow h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.3; }
.start .ttl.noglow { margin-top: 8px; padding: 0; }
.start-walk { position: relative; width: min(880px, 90vw); height: min(260px, 22vh); margin: 28px auto 0; }
.start-walk .wp { --h: 100%; position: absolute; bottom: 0; height: 100%; aspect-ratio: 145 / 352; transform: translateX(-50%); transition: left var(--t, 1.6s) linear; }
.start-walk .wp .turn { position: absolute; inset: 0; } .start-walk .wp.left .turn { transform: scaleX(-1); }
.start-walk .wp .fig { position: absolute; inset: 0; transform-origin: 50% 100%; animation: wbreathe 1.6s step-end infinite; }
.start-walk .wp .top, .start-walk .wp .legs { position: absolute; inset: 0; background: var(--img) center bottom / contain no-repeat; image-rendering: pixelated; }
.start-walk .wp .top { clip-path: inset(0 0 17% 0); } .start-walk .wp .legs { clip-path: inset(81% -20% 0 -20%); transform-origin: 50% 81%; }
.start-walk .wp .shadow { position: absolute; left: 18%; right: 18%; bottom: -6px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.12); }
.start-walk .wp.walk .fig { animation: wbob .34s step-end infinite; } .start-walk .wp.walk .legs { animation: wstride .34s step-end infinite; }
.start-walk .wp.cheer .fig { animation: wcheer .5s ease-in-out 2; }
@keyframes wbreathe { 0% { transform: translateY(0); } 50% { transform: translateY(-1.5%); } }
@keyframes wbob { 0% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5%) rotate(2deg); } }
@keyframes wstride { 0% { transform: skewX(12deg); } 50% { transform: skewX(-12deg); } }
@keyframes wcheer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18%); } }
@media (prefers-reduced-motion: reduce) { .start-walk .wp .fig, .start-walk .wp .legs { animation: none !important; } }
.start .acts { position: static; margin-top: 32px; }

/* 입력(Pixel/TextField): 라벨 12 굵게 · surface 판 · 10% 흰 선 · 안쪽 16 */
.form { display: flex; flex-direction: column; gap: 24px; width: 350px; max-width: 100%; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 18px; font-weight: 700; color: var(--white); }
.form input, .code-form input, .confirm .nick input { width: 100%; height: 54px; padding: 16px; border: 1px solid var(--outline); border-radius: 0; background: var(--surface); color: var(--white); font: inherit; font-size: 16px; font-weight: 400; outline: none; }
.form input::placeholder, .code-form input::placeholder, .confirm .nick input::placeholder { color: var(--muted); }
.form input:focus, .code-form input:focus, .confirm .nick input:focus { border-color: var(--blue); }
.card { background: var(--surface); border: 1px solid var(--outline); padding: 20px; }
#v-find .card.form { background: none; border: 0; padding: 0; }
#findResult { width: 350px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.pick-head { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.picks { display: flex; flex-direction: column; gap: 12px; }
/* 검색 결과(Pixel/ActionCard): 이름 20 굵게 · 회사 16 muted · 파란 버튼 */
.pick { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; background: var(--surface); border: 1px solid var(--outline); color: var(--white); text-align: left; width: 100%; }
.pick b { font-size: 20px; line-height: 28px; } .pick span { font-size: 16px; color: var(--muted); }
.pick em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--yellow); }
.pick small { font-size: 13px; color: #ffd866; }
.pick i { align-self: stretch; margin-top: 4px; font-style: normal; font-size: 16px; font-weight: 700; text-align: center; padding: 16px; background: var(--blue); border: 2px solid var(--white); border-top-width: 0; box-shadow: var(--bevel); text-shadow: var(--ts); }
.notice-card strong { font-size: 20px; } .notice-card p { margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
#registerCard { width: 350px; max-width: 100%; display: grid; gap: 16px; }
#registerCard strong { font-size: 16px; } #registerCard .form { gap: 16px; width: 100%; }

/* 촬영 · QR 틀(피그마 Frame 29 · 517×690, 모서리 24) */
.stage { display: flex; flex-direction: column; align-items: center; width: 100%; }
.frame { position: relative; width: min(517px, 86vw); aspect-ratio: 517 / 690; border-radius: 24px; overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.frame > video, .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame video { transform: scaleX(-1); }
.frame.scan { aspect-ratio: 1; width: min(460px, 80vw); }
.frame.scan video { transform: none; }
/* 얼굴 가이드: 피그마 무지개 타원(362×482, 위 92px) — 예전 링 그림은 숨김 */
.guide { position: absolute; inset: 0; pointer-events: none; }
#guide svg { display: none; }
/* 타원 밖 가림: 피그마 타원(중심 50% · 48.26%, 반지름 35.01% × 34.93%) 안만 카메라가 보인다 */
#guide:not(.qr)::before { content: ""; position: absolute; inset: 0; background: var(--surface);
  -webkit-mask: radial-gradient(ellipse 35.01% 34.93% at 50% 48.26%, transparent 99.4%, #000 100%); mask: radial-gradient(ellipse 35.01% 34.93% at 50% 48.26%, transparent 99.4%, #000 100%); }
/* 타원 둘레: 구글 4색 원뿔 그라디언트가 6초에 한 바퀴 돈다(--a 각도만 움직여 모양은 그대로). 테두리 두께 10px만 남기고 안은 비운다 */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
#guide .oval { position: absolute; left: 50%; top: 13.33%; width: 70.02%; height: 69.86%; transform: translateX(-50%); border-radius: 50%;
  background: conic-gradient(from var(--a), #3186ff, #00af57 30%, #ffbe00 55%, #fc413d 75%, #a142f4 90%, #3186ff);
  -webkit-mask: radial-gradient(ellipse farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); mask: radial-gradient(ellipse farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  animation: ovalSpin 6s linear infinite; }
@keyframes ovalSpin { to { --a: 360deg; } }
#guide.shooting .oval { animation: ovalSpin 6s linear infinite, ovalPulse .5s ease-in-out infinite alternate; }
@keyframes ovalPulse { to { filter: brightness(1.5) drop-shadow(0 0 12px rgba(255,255,255,.5)); } }
.guide-tip { position: absolute; left: 0; right: 0; bottom: 4%; margin: 0; padding: 0 16px; text-align: center; color: var(--white); font-size: 16px; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 4px rgba(0,0,0,.8); white-space: pre-line; }
.guide.qr svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.guide.qr .corner { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: square; }
.guide.qr .beam { stroke: var(--green); stroke-width: .9; animation: beam 2.2s ease-in-out infinite; }
@keyframes beam { 0%, 100% { transform: translateY(-18px); opacity: .25; } 50% { transform: translateY(18px); opacity: 1; } }
.guide.qr .guide-tip { bottom: auto; top: 74%; }
.count { position: absolute; font-size: 140px; font-weight: 800; color: var(--white); text-shadow: 0 6px 30px rgba(0,0,0,.6); z-index: 2; }
.frame:has(.guide:not([hidden])) .count { display: grid; }
.empty { color: var(--muted); text-align: center; font-size: 16px; line-height: 1.6; padding: 20px; }
/* 촬영 전 개인정보 동의(2026-10-22) */
.consent { display: flex; gap: 12px; align-items: flex-start; width: 520px; max-width: 100%; padding: 14px 16px; background: var(--surface); border: 1px solid var(--outline); font-size: 14px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.consent input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--blue); }
.consent b { display: block; color: var(--white); font-size: 16px; margin-bottom: 2px; }
.consent:has(input:checked) { border-color: var(--blue); }
#useDefault { background: none; border: 0; box-shadow: none; color: var(--muted); text-decoration: underline; width: auto; min-height: 40px; }

/* QR 확인 옆 카드: 번호 입력 · 이름 찾기 */
#v-scan .stage { gap: 24px; }
.actions.side { padding: 0; }
.card.side { display: grid; gap: 16px; width: 350px; max-width: 100%; }
/* 2026-10-26 사용자: 번호 칸 · 버튼이 카드 밖으로 삐져나옴 — .big(350px)이 카드 안쪽 폭(310px)보다 넓었다. 카드 안에서는 카드 폭에 맞춘다 */
.card.side .big, .card.side input { width: 100%; min-width: 0; }
.actions.side .card.side { width: 100%; }
.card.side h3 { margin: 0; font-size: 16px; font-weight: 700; }
.code-form { display: grid; gap: 12px; width: 100%; }
.code-form label { font-size: 12px; font-weight: 700; }
.code-form input { font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.code-form .big { width: 100%; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--outline); }

/* 정보 확인 · 별명 */
#confirmBox { width: 350px; max-width: 100%; }
.confirm { display: flex; flex-direction: column; gap: 24px; }
.confirm .who { display: grid; gap: 10px; padding: 20px; background: var(--surface); border: 1px solid var(--outline); }
.confirm .who b { font-size: 20px; line-height: 28px; } .confirm .who span { font-size: 16px; color: var(--muted); } .confirm .who small { font-size: 14px; color: #ffd866; }
.confirm .nick { display: grid; gap: 6px; } .confirm .nick span { font-size: 12px; line-height: 18px; font-weight: 700; }
.confirm .nick input { font-size: 20px; font-weight: 700; }
.confirm .row { display: flex; flex-direction: column; gap: 16px; } .confirm .row .big { width: 100%; }

/* 3. 생성 중(피그마 Frame 29 · 127:39793): 프리즘 두 개 + 「사진을 살펴보는 중」 + Made with Google Nano Banana */
.frame.result { width: min(565px, 80vw); aspect-ratio: 1; border-radius: 50%; padding: 10px; background: conic-gradient(from 200deg, #3186ff, #00af57 30%, #ffbe00 55%, #fc413d 75%, #a142f4 90%, #3186ff); overflow: visible; }
.frame.result > img { position: static; width: 100%; height: 100%; border-radius: 50%; background: #c9c9c9; object-fit: contain; image-rendering: pixelated; }
#v-make:has(#loading:not([hidden])) .ttl, #v-make:has(#loading:not([hidden])) .actions { visibility: hidden; }
#v-make:has(#loading:not([hidden])) .frame.result { background: none; }
.loading { position: fixed; inset: 0; z-index: 10; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
/* 로딩 영상(두 프리즘, 글자 포함)은 위쪽 블록으로 두고 글은 그 아래 — 겹치지 않게. .frame video의 거울상 규칙을 끈다 */
.frame .genvid, .genvid { position: static; width: 100%; height: 56vh; object-fit: cover; transform: none; pointer-events: none; }
.loading { gap: 12px; }
.genart { position: absolute; left: 50%; top: 0; width: 1024px; height: 1366px; transform: translateX(-50%); pointer-events: none; }
.genart[hidden] { display: none; }
@media (max-height: 1300px) { .genart { top: calc(50% - 683px); } }
.genart .g { position: absolute; mix-blend-mode: screen; overflow: visible; }
.genart .ga { left: -39.7px; top: 338.2px; width: 667.583px; height: 610.917px; -webkit-mask: url("/assets/pixel/kiosk/gen-mask-a.svg") 0 0 / 100% 100% no-repeat; mask: url("/assets/pixel/kiosk/gen-mask-a.svg") 0 0 / 100% 100% no-repeat; }
.genart .ga img { position: absolute; left: -751.419px; top: -752.093px; width: 2169.7px; height: 2115.3px; max-width: none; }
.genart .gb { left: 461.4px; top: 311px; width: 573.575px; height: 564.454px; -webkit-mask: url("/assets/pixel/kiosk/gen-mask-b.svg") 0 0 / 100% 100% no-repeat; mask: url("/assets/pixel/kiosk/gen-mask-b.svg") 0 0 / 100% 100% no-repeat; }
.genart .gb img { position: absolute; left: -751.362px; top: -751.69px; width: 2075.9px; height: 2067.7px; max-width: none; }
.genart img.ov { mix-blend-mode: overlay; }
.loading strong { position: relative; font-size: clamp(40px, 6.25vw, 64px); line-height: 80px; font-weight: 700; text-shadow: var(--ts); }
.loading #elapsed { position: relative; font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.loading #queue { position: relative; font-size: 18px; color: #ffd866; font-weight: 700; max-width: 460px; line-height: 1.5; }
.credit { position: relative; display: inline-flex; align-items: center; gap: 16px; font-size: 24px; line-height: 34px; color: var(--white); text-shadow: var(--ts); }
.credit i { display: none; } .credit b { font-weight: 700; }

/* 4. 완료 */
.done { justify-content: flex-start; }
.done-art { width: min(420px, 70vw); aspect-ratio: 1; border-radius: 50%; padding: 10px; background: conic-gradient(from 200deg, #3186ff, #00af57 30%, #ffbe00 55%, #fc413d 75%, #a142f4 90%, #3186ff); }
.done-art img { width: 100%; height: 100%; border-radius: 50%; background: #c9c9c9; object-fit: contain; image-rendering: pixelated; display: block; }
.done .ttl { margin-top: 56px; order: -1; }

/* 사진 없이: 기본 캐릭터 고르기 */
.defaults { display: grid; grid-template-columns: repeat(2, 200px); gap: 16px; justify-content: center; }
.dpick { padding: 0; border: 2px solid var(--white); background: #c9c9c9; overflow: hidden; aspect-ratio: 1; box-shadow: var(--bevel); }
.dpick:active { border-color: var(--blue); }
.dpick img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
#backToPhoto { width: 350px; }

/* 가로 화면(32인치 가로 등): 제목 위 여백만 줄인다 */
@media (orientation: landscape) {
  .ttl { margin-top: 20px; padding: 12px 0; }
  /* 2026-10-24 사용자: 가로 화면에서 캐릭터가 버튼 · 안내문을 가리지 않게 — 두 장을 양쪽 아래 구석으로, 가운데는 비운다(피그마 세로 배치와 다름) */
  .start .hint { max-width: 340px; margin: 0 auto; }
  /* 가로 화면: 캐릭터는 왼쪽, 제목 · 버튼은 오른쪽 */
  .start { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 48px; padding-bottom: 40px; }
  .start .ttl { width: 100%; margin-top: 24px; }
  .intro-char { height: min(40vh, 360px); margin: 0; }
  .start-logo { width: min(300px, 26vw); margin-top: 16px; }
  .ttl-logo { width: min(170px, 16vw); }
  .start .ttl.noglow h1 { font-size: clamp(28px, 3.2vw, 40px); }
  .start-walk { width: min(560px, 44vw); height: min(220px, 24vh); margin: 0; }
  .start .acts { position: static; width: 380px; }
  .genvid { object-position: center top; }
  .foot { padding: 32px 48px; }
  main { padding-bottom: 110px; }
  .start .acts { bottom: 100px; }
  /* 촬영 · QR · 결과: 틀과 버튼을 나란히, 틀은 화면 높이에 맞춘다 */
  .stage { flex-direction: row; justify-content: center; align-items: center; gap: 48px; }
  .frame { width: auto; height: calc(100dvh - 330px); max-height: 690px; }
  .frame.scan { width: auto; height: calc(100dvh - 330px); max-height: 520px; }
  .frame.result { width: auto; height: calc(100dvh - 300px); max-height: 565px; }
  .actions { width: 350px; padding: 0; }
  .consent { width: 350px; }
  .ttl h1, .ttl h2 { font-size: clamp(36px, 4.4vw, 64px); }
  .ttl .lead { font-size: 20px; line-height: 28px; }
  .done-art { width: auto; height: calc(100dvh - 420px); }
}