@font-face { font-family:Pretendard; src:url("./assets/fonts/PretendardVariable.woff2") format("woff2"); font-weight:45 920; font-style:normal; font-display:swap; }
:root {
	--paper:#fff5ff; --purple:#8751cb; --pink:#d583ee;
	--safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; min-height:100%; background:#f1e8f8; color:var(--purple); font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Noto Sans KR","Malgun Gothic",sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,input:focus-visible { outline:3px solid #9d64e2; outline-offset:3px; }
.hidden { display:none!important; }
#app { position:relative; width:100%; max-width:800px; min-height:100vh; min-height:100svh; margin:0 auto; background:var(--paper); }
.page-header { height:calc(116px + var(--safe-top)); padding:calc(25px + var(--safe-top)) 15px 25px; background:#f3e1fc; display:flex; align-items:center; justify-content:center; }
.page-header h1 { font-size:clamp(25px,6.2vw,35px); font-weight:650; letter-spacing:-1.5px; margin:0; }
.screen { width:100%; }
.onboarding { max-width:580px; margin:0 auto; padding:22px 30px calc(30px + var(--safe-bottom)); min-height:calc(100vh - 116px - var(--safe-top)); min-height:calc(100svh - 116px - var(--safe-top)); display:flex; flex-direction:column; align-items:center; }
.step-dots { display:flex; justify-content:center; gap:18px; margin:3px 0 30px; }
.step-dots i { width:5px; height:5px; border-radius:50%; background:#c5c6c7; align-self:center; }
.step-dots i.active { width:9px; height:9px; border:1px solid #babcc0; background:transparent; }
.instructions { width:100%; font-size:clamp(13px,3.25vw,18px); line-height:1.55; letter-spacing:-.6px; }
.instructions p { display:flex; gap:7px; margin:0 0 13px; }.instructions b { font-weight:500; }
.guide-map { display:block; width:100%; max-width:420px; height:auto; margin:7px auto 22px; }
.page-actions { width:100%; margin-top:auto; padding-top:20px; display:flex; flex-direction:column; gap:16px; align-items:center; }
.primary-button,.secondary-button { display:block; width:max-content; max-width:100%; min-width:168px; border:0; border-radius:40px; background:var(--pink); color:white; padding:12px 28px; min-height:45px; font-size:16px; font-weight:650; text-align:center; }
.secondary-button { background:#db93ef; font-size:14px; }
.text-button { background:none; border:0; color:#9869be; padding:5px 8px; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.zones { width:100%; display:flex; flex-direction:column; gap:33px; padding-top:8px; padding-bottom:23px; }
.zone { text-align:center; }.zone h2 { display:inline-block; color:white; border-radius:15px; margin:0 0 18px; font-size:15px; padding:2px 8px; font-weight:550; }
.joy h2 { background:#08acec; }.zoo h2 { background:#72a91a; }.flower h2 { background:#ea699c; }.bird h2 { background:#256d58; }
.hint-chips { display:flex; gap:6px; align-items:center; justify-content:center; }
.hint-chips span { background:linear-gradient(100deg,#bc79f9,#ec91e7); color:white; border-radius:7px; padding:8px 5px; flex:1; font-size:clamp(10px,2.7vw,14px); line-height:1.35; white-space:nowrap; }
.bird .hint-chips { max-width:80%; margin:0 auto; }
.blob { position:relative; width:100%; max-width:360px; min-height:275px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#f1d8fb; border-radius:49% 51% 52% 48% / 59% 57% 43% 41%; isolation:isolate; }
.blob:before { content:""; position:absolute; inset:7px -8px -3px 12px; z-index:-1; background:rgba(253,215,249,.53); border-radius:59% 41% 43% 57% / 44% 62% 38% 56%; transform:rotate(-14deg); }
.data-blob { gap:30px; margin:0 auto 28px; }
.data-blob label,.confirm-field { display:flex; flex-direction:column; gap:8px; align-items:center; width:100%; }
.data-blob label>span,.confirm-field>span { border-radius:20px; padding:3px 14px; font-size:14px; color:white; background:var(--pink); }
.data-blob input,.confirm-field strong { display:block; width:65%; min-height:39px; border:0; border-radius:14px; text-align:center; background:white; color:#29232b; padding:7px 14px; font-size:17px; font-weight:500; }
.privacy-note { width:100%; max-width:360px; font-size:14px; line-height:1.45; margin:8px auto 12px; letter-spacing:-.5px; }
#entryForm { width:100%; flex:1; display:flex; flex-direction:column; }
.consent { width:100%; max-width:360px; margin:10px auto 0; font-size:12px; }.consent label { display:flex; gap:8px; align-items:center; line-height:1.5; }.consent input { width:18px; height:18px; margin:0; accent-color:#a767d8; }.consent .text-button { margin-left:18px; }
.form-error { color:#af366d; font-size:13px; line-height:1.5; margin:8px auto 0; max-width:360px; }
.camera-art { width:85%; max-width:330px; height:auto; margin:0 auto; }
.ready-copy { text-align:center; font-size:17px; line-height:1.6; margin:18px 0 0; }.ready-copy small { font-size:13px; }
.start-ar { font-size:28px; min-width:240px; font-weight:500; padding:10px 30px; }
#engineState { font-size:12px; text-align:center; line-height:1.5; padding:0 8px; overflow-wrap:anywhere; }
.service-message { padding:12px 18px; background:#fff0d5; color:#865c1d; font-size:13px; line-height:1.6; display:flex; gap:12px; align-items:center; }.service-message span { flex:1; }.service-message button { flex-shrink:0; border:1px solid #dfc796; border-radius:8px; padding:7px 10px; background:white; color:#795723; }
.complete-blob { min-height:305px; margin:6px auto 16px; }.complete-blob h2 { font-size:41px; font-weight:500; line-height:1.15; margin:0 0 20px; }.complete-blob p { font-size:13px; line-height:1.4; margin:0; }
.complete-count { font-size:15px; }#completeScreen .page-actions { margin-top:0; }.gift-note { font-size:13px; letter-spacing:-.5px; line-height:1.5; margin-top:30px; align-self:stretch; }
.modal-layer { position:fixed; inset:0; z-index:100; background:#382342aa; display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto; }
.modal-card { background:#fff5ff; border-radius:26px; padding:30px 25px; width:100%; max-width:400px; max-height:calc(100vh - 40px); max-height:calc(100svh - 40px); overflow:auto; box-shadow:0 12px 60px #35104e40; }
.modal-card h2 { font-size:26px; line-height:1.3; margin:12px 0 22px; }.modal-eyebrow { font-size:12px; color:#b079cf; }
.permission-list { list-style:none; padding:0; margin:0; }.permission-list li { display:flex; flex-direction:column; gap:5px; padding:12px 0; border-bottom:1px solid #ead7f3; }.permission-list strong { font-size:15px; }.permission-list span { font-size:12px; line-height:1.5; color:#9b7aad; }
.modal-card p { font-size:13px; line-height:1.7; }.modal-card .primary-button { width:100%; margin-top:24px; }#infoBody { font-size:14px; line-height:1.8; white-space:pre-line; }
.toast { position:fixed; z-index:120; left:50%; transform:translateX(-50%); bottom:calc(40px + var(--safe-bottom)); background:#35223fec; color:white; border-radius:14px; padding:14px 20px; width:max-content; max-width:88%; font-size:14px; line-height:1.5; text-align:center; }
.ar-mode { overflow:hidden; background:#080a12; }.ar-mode #app { background:#080a12; height:100vh; height:100dvh; min-height:0; }.ar-mode .page-header { height:calc(80px + var(--safe-top)); padding:calc(15px + var(--safe-top)) 15px 15px; }.ar-mode .page-header h1 { font-size:27px; }
.ar-screen { position:absolute; inset:calc(80px + var(--safe-top)) 0 0; overflow:hidden; background:#090e18; }#camerafeed { width:100%; height:100%; display:block; position:absolute; inset:0; }
.hud { position:absolute; inset:0; pointer-events:none; color:white; }.top-bar { position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.collection-pill { background:#171c2bbd; border:1px solid #ffffff2b; border-radius:14px; padding:9px 12px; font-size:12px; backdrop-filter:blur(7px); }.collection-pill strong { font-size:24px; margin-left:6px; }.collection-pill>span { color:#cac4d3; }
.hud-buttons { display:flex; gap:6px; }.hud-buttons button,.bottom-note button { pointer-events:auto; border:1px solid #ffffff30; border-radius:10px; background:#161a26c9; color:white; padding:10px 9px; font-size:11px; }
.hunt-message { position:absolute; top:79px; left:5%; width:90%; text-align:center; padding:14px 18px; border-radius:18px; background:#171c2bba; backdrop-filter:blur(8px); line-height:1.5; }.hunt-message strong { display:block; font-size:15px; }.hunt-message span { display:block; font-size:12px; color:#ded4e8; margin-top:4px; }
.distance-panel { position:absolute; bottom:calc(93px + var(--safe-bottom)); left:20px; padding:13px 17px; background:#19202dbd; border:1px solid #ffffff20; border-radius:16px; min-width:125px; backdrop-filter:blur(8px); }.distance-panel>span { display:block; font-size:10px; color:#f4d6ff; max-width:190px; }.distance-panel strong { display:block; margin:3px 0; font-size:36px; font-weight:700; letter-spacing:-1px; }.distance-panel small { font-size:16px; }
.gps-info { position:absolute; bottom:calc(66px + var(--safe-bottom)); left:20px; right:20px; font-size:10px; text-shadow:0 1px 4px black; }.retry-location { position:absolute; left:50%; top:44%; transform:translateX(-50%); pointer-events:auto; border:0; border-radius:30px; padding:14px 25px; background:var(--pink); color:white; }
.bottom-note { position:absolute; left:14px; right:14px; bottom:calc(14px + var(--safe-bottom)); display:flex; align-items:center; justify-content:space-between; gap:10px; }.bottom-note>span { font-size:10px; text-shadow:0 1px 4px black; }
.scan-guide { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:82%; max-width:350px; padding:24px 20px; text-align:center; background:#171c2bdc; border-radius:24px; border:1px solid #ffffff2a; }.scan-guide strong,.scan-guide>span { display:block; margin-top:12px; }.scan-guide>span { font-size:12px; color:#d5c9df; }
.scan-orbit { height:48px; width:34px; border:3px solid #d5a0fd; border-radius:8px; margin:5px auto 20px; animation:scan 1.6s ease-in-out infinite alternate; }@keyframes scan { from{transform:rotate(-20deg)} to{transform:rotate(20deg)} }
.scan-progress { height:4px; background:#ffffff24; border-radius:8px; overflow:hidden; margin-top:20px; }.scan-progress i{display:block;height:100%;width:0;background:#daa0ff;}
.tap-hint { position:absolute; left:50%; top:65%; transform:translateX(-50%); border-radius:30px; background:#deb0ff; color:#4e2867; padding:10px 18px; font-size:14px; font-weight:700; }
.return-hint { position:absolute; left:14px; top:43%; max-width:calc(100% - 150px); padding:12px; border:1px solid #dcb9ff70; border-radius:14px; background:#171c2bdf; color:#f0dfff; font-size:12px; line-height:1.55; white-space:pre-line; text-align:center; }
.energy-panel { position:absolute; top:25%; right:12px; width:110px; pointer-events:auto; text-align:center; background:#131b28b8; border:1px solid #ffffff26; border-radius:13px; padding:10px 9px 4px; touch-action:none; user-select:none; -webkit-user-select:none; }
.energy-controls { display:flex; align-items:center; gap:14px; justify-content:center; }
.energy-track { position:relative; flex:none; width:14px; height:180px; border:1px solid #ffffff91; border-radius:10px; background:linear-gradient(to top,#f34b55 0%,#ee9b45 25%,#eddc5f 39.9%,#65dd7c 40%,#65dd7c 60%,#eddc5f 60.1%,#ee9b45 75%,#f34b55 100%); }.success-band { position:absolute; left:-4px; right:-4px; bottom:40%; height:20%; border-top:1px dashed white; border-bottom:1px dashed white; }
#energyMarker { position:absolute; left:-5px; right:-5px; height:3px; background:white; bottom:0; transform:translateY(50%); border-radius:3px; box-shadow:0 0 4px #261335; }
#rescueButton { flex:none; border:1px solid #eabfff; border-radius:50%; width:54px; height:54px; color:white; background:linear-gradient(#c57ce5,#9c5ec7); font-size:9px; line-height:1.4; padding:0; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }#rescueButton strong { font-size:15px; }#rescueButton:active{background:#8950b5;}
.cancel-rescue { margin-top:2px; min-height:44px; min-width:44px; padding:6px 12px; color:#e4d3ec; background:none; border:0; font-size:10px; }
.catch-layer { min-height:calc(100vh - 116px - var(--safe-top)); min-height:calc(100svh - 116px - var(--safe-top)); background:radial-gradient(ellipse at 50% 35%,#565661,#24252d 65%); color:white; display:flex; align-items:center; justify-content:center; padding:35px 25px calc(35px + var(--safe-bottom)); }.catch-content { width:100%; max-width:400px; text-align:center; }.catch-content img{width:76%;max-width:300px;height:260px;object-fit:contain;filter:drop-shadow(0 0 28px #bef6ff70);}
.catch-badge { display:inline-block; border:1px solid #78cedf80; border-radius:22px; color:#b8f1ff; padding:6px 12px; font-size:10px; letter-spacing:1px; margin:16px auto 5px; }.catch-content h2{font-size:22px;line-height:1.5;margin:14px 0;overflow-wrap:anywhere;}.catch-count { margin:12px 0 38px; color:#d6ccdf; }.catch-count strong{font-size:35px;color:white;}.catch-content .primary-button{width:100%;font-size:15px;padding:16px 12px;}
.catch-media { display:flex; align-items:center; justify-content:center; min-height:200px; }
.catch-media video { display:block; width:100%; max-height:42vh; max-height:42svh; object-fit:contain; background:#15151c; border-radius:12px; }
.video-play-button { margin:12px auto 0; min-height:44px; padding:10px 16px; border:1px solid #b2e7f080; border-radius:24px; color:white; background:#454653; font-size:13px; }
.catch-media-notice { margin:10px 0 0; font-size:12px; line-height:1.5; color:#dedbe5; }
.catch-media-notice:empty { display:none; }
.noscript { position:fixed; inset:0; z-index:150; background:white; padding:50px; color:#333; }
@media(min-width:600px) { .onboarding{padding-top:30px} .page-header{height:140px} .onboarding{min-height:calc(100svh - 140px)} .ar-mode .page-header{height:calc(80px + var(--safe-top))} }
@media(max-height:740px) { .onboarding{padding-top:16px} .step-dots{margin-bottom:20px} .guide-map{max-width:310px;margin-bottom:0}.zones{gap:24px}.zone h2{margin-bottom:13px}.data-blob{min-height:235px;margin-bottom:18px;gap:24px}.camera-art{max-width:255px}.complete-blob{min-height:250px}.energy-track{height:170px} }
@media(max-height:640px) { .energy-panel{top:160px} .energy-track{height:120px} }
@media(prefers-reduced-motion:reduce) { .scan-orbit{animation:none} }

/* 2026-10: 인트로와 관리자 힌트 */
.intro-screen { min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; background:var(--paper); opacity:1; transition:opacity .6s ease; }
.intro-screen.is-fading { opacity:0; }
.intro-screen img { display:block; max-width:100%; width:auto; height:100vh; height:100svh; object-fit:contain; }
.ball-art { position:relative; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; isolation:isolate; }
.ball-art img { display:block; position:absolute; width:117.8%; height:117.8%; max-width:none; left:-8.9%; top:-8.9%; object-fit:cover; }
.game-instructions { width:100%; margin:24px 0 0; padding:16px 0 0; border-top:1px solid #ead6f5; }
.game-instructions summary { cursor:pointer; text-align:center; font-size:14px; padding:8px; }
.game-instructions .instructions { padding-top:22px; }
.hints-intro { font-size:13px; margin:0 0 28px; text-align:center; }
.zones { gap:30px; }
.zone { width:100%; position:relative; border:1.5px solid #999; border-radius:20px; background:white; padding:30px 12px 16px; }
.zone h2 { position:absolute; top:-13px; left:50%; transform:translateX(-50%); margin:0; max-width:90%; overflow-wrap:anywhere; }
.zone.joy { border-color:#8871ed; }.zone.custom h2 { background:#8751cb; }
.hint-characters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 8px; align-items:start; }
.hint-character { margin:0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
.hint-character img { width:100%; aspect-ratio:1; object-fit:contain; }
.hint-character strong { font-size:11px; font-weight:600; color:#765185; text-align:center; overflow-wrap:anywhere; }
.hint-character figcaption { width:100%; background:linear-gradient(100deg,#bc79f9,#ec91e7); color:white; border-radius:8px; padding:8px 6px; font-size:12px; line-height:1.45; white-space:pre-line; overflow-wrap:anywhere; text-align:center; }
.hint-empty { grid-column:1/-1; margin:10px 0; font-size:13px; line-height:1.6; color:#8e799d; }

/* 발견 후 화면에 고정된 캐릭터와 카메라 위 포획 조작 */
.locked-character { position:absolute; top:25%; left:13%; width:54%; height:44%; pointer-events:auto; border:0; background:none; color:white; padding:0; }
.locked-character img { width:100%; height:88%; object-fit:contain; filter:drop-shadow(0 6px 15px #0008); }
.locked-character span { display:block; font-size:13px; text-shadow:0 1px 5px #000; }
.distance-panel,.gps-info { display:none!important; }
.ar-screen.is-selecting .hunt-message,.ar-screen.is-selecting .tap-hint { visibility:hidden; }
.rescue-stage { position:absolute; inset:0; z-index:40; width:100%; overflow:hidden; color:white; background:transparent; user-select:none; -webkit-user-select:none; pointer-events:none; }
.capture-instruction { position:absolute; top:76px; left:5%; width:90%; margin:0; padding:14px 12px; border-radius:16px; background:#171c2bc9; text-align:center; font-size:14px; line-height:1.5; transition:opacity .18s; }
.rescue-target-area { position:absolute; left:9%; top:26%; width:52%; height:42%; text-align:center; }
.rescue-target { position:relative; width:100%; height:85%; display:flex; align-items:center; justify-content:center; }
#rescueCharacterImage { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 15px #0005); }
.rescue-target-area h2 { margin:5px 0; font-size:18px; line-height:1.3; overflow-wrap:anywhere; text-shadow:0 1px 5px #000; }
#rescueStageMessage { margin:0; font-size:13px; line-height:1.5; text-shadow:0 1px 5px #000; }
.thrower-image { position:absolute; left:50%; bottom:7%; transform:translateX(-50%); width:44%; height:43%; object-fit:contain; opacity:0; filter:drop-shadow(0 6px 12px #0005); }
.rescue-ball { position:absolute; left:61%; bottom:33%; width:60px; height:60px; opacity:0; --ball-shift-x:0px; --ball-shift-y:-180px; }
.rescue-stage[data-thrower="capdori"] .rescue-ball { left:28%; }
.throw-ball { width:100%; height:100%; }
.throw-ball img { position:absolute; width:320%; height:auto; left:-109%; top:-199%; object-fit:initial; }
.ball-pulse { position:absolute; inset:-15%; border:2px solid #ffc896; border-radius:50%; opacity:0; }
.rescue-stage .energy-panel { top:27%; right:4%; width:30%; max-width:160px; min-width:100px; background:none; border:0; padding:6px; pointer-events:auto; }
.rescue-stage .energy-controls { gap:12px; }
.rescue-stage .energy-track { width:17px; height:clamp(125px,29vh,245px); height:clamp(125px,29svh,245px); }
.rescue-stage #rescueButton { width:60px; height:60px; }
.rescue-stage #rescueButton strong { font-size:17px; }
.rescue-stage .cancel-rescue { display:block; width:100%; font-size:11px; margin-top:4px; text-shadow:0 1px 5px #000; }
.capture-feedback { position:absolute; left:7%; right:7%; bottom:20%; margin:0; padding:14px; border-radius:12px; background:#802435ed; color:white; text-align:center; font-size:14px; line-height:1.5; }
.capture-feedback:empty { display:none; }
.rescue-stage.is-capturing .capture-instruction,.rescue-stage.is-capturing .energy-panel,.rescue-stage.is-capturing .rescue-target-area h2,.rescue-stage.is-capturing #rescueStageMessage { visibility:hidden; }
.rescue-stage.is-capturing .thrower-image { animation:thrower-motion 1.5s ease both; }
.rescue-stage.is-capturing .rescue-ball { animation:rescue-launch 1.5s cubic-bezier(.22,.7,.4,1) both; }
.rescue-stage.is-capturing #rescueCharacterImage { animation:rescue-absorb 1.5s ease both; }
.rescue-stage.is-capturing .ball-pulse { animation:rescue-pulse 1.5s ease both; }
@keyframes thrower-motion { 0%{opacity:0;transform:translate(-50%,18px) rotate(-6deg)} 15%{opacity:1;transform:translate(-50%,0) rotate(-6deg)} 35%{opacity:1;transform:translate(-50%,-10px) rotate(4deg)} 65%,100%{opacity:1;transform:translate(-50%,0) rotate(0deg)} }
@keyframes rescue-launch { 0%,17%{opacity:1;transform:translate(0,0) scale(1)} 36%{opacity:1;transform:translate(calc(var(--ball-shift-x)*.35),calc(var(--ball-shift-y)*.7 - 35px)) scale(.85)} 58%{opacity:1;transform:translate(var(--ball-shift-x),var(--ball-shift-y)) scale(.65) rotate(180deg)} 82%,100%{opacity:1;transform:translate(var(--ball-shift-x),var(--ball-shift-y)) scale(1.2) rotate(360deg)} }
@keyframes rescue-absorb { 0%,45%{transform:scale(1);opacity:1} 70%,100%{transform:scale(.05);opacity:0} }
@keyframes rescue-pulse { 0%,60%{opacity:0;transform:scale(.6)} 70%{opacity:.9;transform:scale(.8)} 100%{opacity:0;transform:scale(2)} }

/* 영상 비율을 유지하며 휴대폰 화면 전체에 재생합니다. */
.video-mode { overflow:hidden; }
.caught-video-stage { position:fixed; inset:0; width:100%; height:100%; height:100vh; height:100dvh; z-index:110; background:#000; display:flex; align-items:center; justify-content:center; }
.caught-video-stage video { width:100%; height:100%; max-height:none; object-fit:contain; border-radius:0; background:#000; }
.video-toolbar { position:absolute; top:calc(14px + var(--safe-top)); right:14px; left:14px; display:flex; justify-content:space-between; gap:12px; z-index:2; }
.video-toolbar button { min-height:44px; border:1px solid #ffffff66; border-radius:24px; background:#21162cbd; color:#fff; padding:10px 18px; font-size:13px; }
.caught-video-stage .video-play-button { position:absolute; z-index:2; left:50%; transform:translateX(-50%); bottom:calc(110px + var(--safe-bottom)); margin:0; width:max-content; max-width:90%; background:#713a94e8; }
.caught-video-stage .catch-media-notice { position:absolute; z-index:2; left:5%; right:5%; bottom:calc(65px + var(--safe-bottom)); margin:0; padding:8px; color:white; background:#000a; border-radius:12px; text-align:center; }
.mission-image-screen { min-height:100vh; min-height:100svh; background:#153018; display:flex; flex-direction:column; align-items:center; padding-bottom:calc(86px + var(--safe-bottom)); }
.mission-image-screen>img { display:block; width:100%; height:auto; }
.mission-image-actions { width:100%; max-width:800px; position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:10; padding:16px 20px calc(16px + var(--safe-bottom)); background:linear-gradient(#15301800,#153018f5 35%); display:flex; justify-content:center; }
.mission-image-actions .primary-button { min-height:50px; min-width:230px; background:#d78637; box-shadow:0 4px 18px #0004; }
@media(max-width:350px) { .onboarding{padding-left:18px;padding-right:18px} .hint-characters{grid-template-columns:repeat(2,minmax(0,1fr))} .rescue-stage .energy-controls{gap:8px} .rescue-stage #rescueButton{width:50px;height:50px} }
@media(orientation:landscape) and (max-height:600px) { .capture-instruction{top:15px;left:20%;width:60%;font-size:12px;padding:8px} .rescue-target-area{left:22%;top:27%;width:25%;height:55%} .rescue-stage .energy-panel{top:20%;right:7%;width:125px} .rescue-stage .energy-track{height:105px} .thrower-image{height:60%;width:25%;left:58%;bottom:3%} .capture-feedback{bottom:8%;left:20%;right:25%} }
@media(prefers-reduced-motion:reduce) { .rescue-stage.is-capturing .rescue-ball,.rescue-stage.is-capturing #rescueCharacterImage,.rescue-stage.is-capturing .ball-pulse,.rescue-stage.is-capturing .thrower-image{animation:none} .rescue-stage.is-capturing .thrower-image{opacity:1} .rescue-stage.is-capturing .rescue-ball{opacity:1;transform:translate(var(--ball-shift-x),var(--ball-shift-y))} .rescue-stage.is-capturing #rescueCharacterImage{opacity:.25} }

/* 2026-10-15 AI 시안: 휴대폰 베젤 없이 실제 화면으로 표시 */
.intro-screen { flex-direction:column; padding:24px; text-align:center; }
.intro-screen h2 { font-size:30px; margin:0 0 20px; }
.intro-screen img { width:min(76vw,330px); height:auto; aspect-ratio:1; object-fit:contain; }
.intro-screen p { font-size:14px; line-height:1.6; }
.map-download { display:block; margin:-10px auto 32px; padding:10px 23px; color:white; background:#e80038; border-radius:28px; font-size:15px; text-decoration:none; font-weight:650; }
.registration-fields { width:100%; max-width:390px; margin:0 auto; }
.registration-fields>label { display:flex; align-items:center; flex-direction:column; gap:10px; margin:0 auto 14px; }
.registration-fields>label>span { padding:5px 18px; background:linear-gradient(100deg,#bb79f8,#ee91e8); color:white; border-radius:14px; font-size:14px; }
.registration-fields input { width:85%; max-width:300px; border:1px solid #bbb2c2; border-radius:13px; padding:11px 14px; text-align:center; font-size:17px; background:white; color:#29232b; }
.registration-note { margin:14px 0 30px; font-size:13px; line-height:1.65; letter-spacing:-.3px; }
.registration-note p { margin:0 0 4px; }
.registration-note small { display:block; color:#8c739d; font-size:11px; margin-top:8px; }
.camera-lens { position:relative; width:min(85%,330px); margin:0 auto; }
.camera-lens .camera-art { width:100%; max-width:none; display:block; }
.camera-lens>span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:white; font-size:32px; font-weight:450; text-shadow:0 2px 6px #302541; }
.start-notes { width:100%; font-size:13px; line-height:1.65; margin:24px 0 0; }
.catch-congratulations { font-size:15px; line-height:1.6; margin:24px 0; }
.zone-progress { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; background:#fff; padding:10px 7px; border-radius:12px; margin:0 0 20px; }
.zone-tally { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:12px; color:#252130; }
.zone-tally span { display:block; color:white; background:#8751cb; border-radius:12px; padding:4px 2px; font-size:10px; line-height:1.2; }
.zone-tally.joy span{background:#08acec}.zone-tally.zoo span{background:#72a91a}.zone-tally.flower span{background:#ea699c}.zone-tally.bird span{background:#256d58}
.catch-count { margin-bottom:22px; }
.bottom-note button { border-radius:50%; width:52px; height:52px; background:var(--pink); font-size:12px; border:0; }
.bottom-note>span { text-align:center; }
@media(max-height:740px) { .registration-note{margin-bottom:22px} .camera-lens{max-width:250px} .onboarding .step-dots{margin-bottom:20px} }

/* 세션 확인·AR 바로 진입·종료 화면 */
.loading-screen { justify-content:center; text-align:center; font-size:14px; line-height:1.7; }
.ar-entry-layer { position:absolute; inset:0; z-index:45; display:flex; align-items:center; justify-content:center; padding:24px; background:#090e18f5; color:white; }
.ar-entry-card { width:100%; max-width:350px; text-align:center; }
.ar-entry-card p { font-size:15px; line-height:1.7; white-space:pre-line; }
.ar-entry-card button { margin:20px auto 0; }
.ar-entry-card .text-button { color:#e0c5ef; min-height:44px; }
.ar-exit-screen { justify-content:center; text-align:center; }
.ar-exit-screen h2 { font-size:24px; line-height:1.5; }
.ar-exit-screen p { font-size:16px; line-height:1.9; }
.ar-exit-screen .ar-exit-note { font-size:13px; color:#8c739d; }
.capture-instruction { word-break:keep-all; }
#captureStatus { display:block; font-size:11px; line-height:1.5; white-space:pre-line; margin-top:6px; }
#captureStatus:empty { display:none; }