/* 세 시안이 함께 쓰는 바탕: 서체, 색, 시안용 상태 띠 */
@font-face{font-family:"Allimjang";src:url(fonts/Allimjang-R.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Allimjang";src:url(fonts/Allimjang-B.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Pretendard Variable";src:url(https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--paper:#FBF7F0;--ink:#1E1A17;--ink2:#5E554D;--sky:#B5CDE3;--peach:#ECC3AC;--butter:#F7E7AC;--mint:#AFDECC;--pink:#ECACBA;--pop:#C5F638;--night:#2C2733;
 --f-disp:"Allimjang","Pretendard Variable",system-ui,sans-serif;--f-body:"Pretendard Variable",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow-x:hidden}
body{font-family:var(--f-body);color:var(--ink);font-size:15px;line-height:1.45;word-break:keep-all}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}
b{font-weight:700}
/* 시안용 상태 띠(실제 체험판에는 없음) */
#demo{height:30px;display:flex;align-items:center;gap:4px;padding:0 10px;font-size:11px;background:#111;color:#9a948c;position:relative;z-index:50;white-space:nowrap}
#demo span{margin-right:2px}
#demo button{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid #444;color:#cfc8be}
#demo button.on{background:#FBF7F0;color:#1E1A17;border-color:#FBF7F0;font-weight:700}
.app{height:calc(100dvh - 30px);min-height:780px;position:relative;overflow:hidden}
#mm{position:relative}
#mm .mm-top button,#mm .mm-btns button{font-family:var(--f-body)}
/* 말풍선 공통 동작 */
[data-line]{display:block}
[data-line].in{animation:lineIn .35s ease-out}
@keyframes lineIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
[data-dots]{display:inline-flex;gap:4px;align-items:center}
[data-dots] i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.25}
[data-dots] i.on{opacity:.9}
#veil{position:fixed;inset:30px 0 0 0;z-index:60;background:rgba(20,17,15,.45)}
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;transform:translateY(110%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.9,.3,1),visibility 0s .32s}
#sheet.on{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.9,.3,1)}


/* ===== 시안 A3: 세 겹(빌리지 배경 / 목각 타이틀·금빛 무대·줄전구 / 말하는 인물) ===== */
body{background:#17121f}
.app{max-width:480px;margin:0 auto;isolation:isolate;color:#F6EFE3;background:#17121f;--sw:min(100vw,480px);--sh:calc((var(--sw) - 32px)*905/764);--st:62px}
#demo{overflow-x:auto;gap:3px;padding:0 5px}
#demo button{padding:3px 5px;flex:none;letter-spacing:-.3px}
#demo button[data-act]{border-color:#C5F638;color:#C5F638}
#demo select{flex:none;font:inherit;font-size:11px;color:#cfc8be;background:#111;border:1px solid #444;border-radius:999px;padding:2px 0 2px 4px;width:88px;letter-spacing:-.3px}
.ease{transition:transform .42s cubic-bezier(.5,0,.25,1) var(--dl,0ms),opacity .3s var(--dl,0ms)}

/* --- 맨 뒤: 9:16 미로빌리지. 평소에는 어둡고 흐리게, 전환 때만 선명하게 --- */
.bg{position:absolute;inset:-12px;z-index:-3;background:#17121f 50% 50%/cover no-repeat;filter:blur(5px) brightness(.4) saturate(.8);transition:filter .9s ease-out,transform .75s cubic-bezier(.6,0,.2,1)}
#bgB{transform:translateX(102%)}
body.cine-dark .bg{filter:brightness(.2) saturate(.4);transition:filter .45s}
body.cine-clear .bg{filter:none;transition:filter 1.3s ease-out,transform .75s cubic-bezier(.6,0,.2,1)}
body.cine-mid .bg{filter:brightness(.6) saturate(.9);transition:filter .7s ease-out}
body.slide #bgA{transform:translateX(-102%)}body.slide #bgB{transform:none}
body.noanim .bg{transition:none!important}
.app::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(23,18,31,.55),rgba(23,18,31,0) 22%,rgba(23,18,31,0) 60%,rgba(23,18,31,.6));transition:opacity .6s}
body.cine-clear .app::before{opacity:.5}

/* --- 타이틀: 확정 BI를 색 대신 나무로 깎은 모양. 틀 윗선 가운데에 겹쳐 얹는다 --- */
.sign{position:absolute;left:50%;top:0;width:196px;margin-left:-98px;z-index:6;aspect-ratio:640/359;transition:transform .42s cubic-bezier(.5,0,.25,1),filter 1.4s;filter:drop-shadow(0 3px 0 rgba(30,14,4,.85)) drop-shadow(0 7px 7px rgba(0,0,0,.6))}
.sign img{position:absolute;inset:0;width:100%;height:100%}
.sign h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
body.out .sign{transform:translateY(-140%)}
body[data-b="1"] .sign{filter:grayscale(.8) brightness(.62) drop-shadow(0 3px 0 rgba(20,16,14,.85)) drop-shadow(0 7px 7px rgba(0,0,0,.6))}
body[data-b="2"] .sign{filter:grayscale(.5) brightness(.8) drop-shadow(0 3px 0 rgba(30,14,4,.85)) drop-shadow(0 7px 7px rgba(0,0,0,.6))}
body[data-b="4"] .sign{filter:brightness(1.05) drop-shadow(0 3px 0 rgba(30,14,4,.85)) drop-shadow(0 0 10px rgba(255,214,120,.7))}
/* 수첩: 다녀온 스팟이 담기는 곳 */
.note{position:absolute;right:10px;top:6px;width:40px;z-index:9;transition:transform .42s cubic-bezier(.5,0,.25,1);filter:drop-shadow(0 4px 4px rgba(0,0,0,.6))}
.note img{display:block;width:100%}
.note b{position:absolute;right:-5px;bottom:-4px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--ink);color:#FFF6E2;border:1.5px solid #FFE9AA;font-size:12px;font-weight:800;line-height:17px;text-align:center}
.note.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(1)}}
body.out:not(.playing) .note{transform:translateY(-160%)}

/* --- 금빛 무대(왼쪽으로 빠짐) --- */
.stage{position:absolute;left:16px;right:16px;top:var(--st);height:var(--sh);--dl:40ms}
body.out .stage{transform:translateX(-118%) rotate(-6deg)}
.well-wrap{position:absolute;left:3.4%;right:3.4%;top:10%;bottom:3.2%;border-radius:50% 50% 0 0 / 37% 37% 0 0;overflow:hidden;background:#120F17;z-index:1}
#mm{position:absolute;inset:0 12px 0 12px}
.well-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 26px 10px rgba(0,0,0,.7);z-index:5}
#mm .mm-top{display:none}
.well-wrap #mm .mm-btns{display:none}
.frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;transition:filter 1.4s;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
body[data-b="1"] .frame{filter:grayscale(.8) brightness(.6) drop-shadow(0 6px 8px rgba(0,0,0,.6))}
body[data-b="2"] .frame{filter:grayscale(.5) brightness(.78) drop-shadow(0 6px 8px rgba(0,0,0,.6))}
body[data-b="3"] .frame{filter:grayscale(.12) brightness(.96) drop-shadow(0 0 10px rgba(255,205,110,.35)) drop-shadow(0 6px 8px rgba(0,0,0,.5))}
body[data-b="4"] .frame{filter:brightness(1.06) drop-shadow(0 0 16px rgba(255,214,120,.75)) drop-shadow(0 6px 8px rgba(0,0,0,.45))}
/* 틀 안 지도 버튼(지금 여기 / 전체 보기) */
.mapbtns{position:absolute;right:9%;bottom:8.5%;z-index:4;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.mapbtns button,.fm-close{height:31px;padding:0 11px;border-radius:10px;font-size:12.5px;font-weight:700;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);white-space:nowrap}
.mapbtns [data-here]{background:var(--pop)}
body[data-phase=intro] .mapbtns{display:none}
/* 처음: 틀 안에 방금 QR을 찍은 자리 사진 */
.spot{position:absolute;inset:0;z-index:4;transition:opacity .9s ease-out;background:#120F17}
.spot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.75)}
.spot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,23,.5),rgba(18,15,23,0) 35%,rgba(18,15,23,0) 55%,rgba(18,15,23,.75))}
.spot .tag{position:absolute;left:0;right:0;top:20%;z-index:2;text-align:center;line-height:1.25}
.spot .tag small{display:inline-block;font-size:12px;font-weight:700;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:999px;padding:2px 11px}
.spot .tag b{display:block;margin:5px 30px 0;font-family:var(--f-disp);font-size:21px;line-height:1.2;color:#FFF6E2;-webkit-text-stroke:1.2px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}
.spot [data-startdone]{position:absolute;right:9%;bottom:10%;z-index:2;height:36px;padding:0 14px;border-radius:12px;font-size:13.5px;font-weight:800;color:var(--ink);background:var(--pop);border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);white-space:nowrap}
body:not([data-phase=intro]) .spot{opacity:0;pointer-events:none}

/* 놀이판: 틀 장식이 물러나고 사진이 최대한 커진다. 전구 상자와 말풍선은 아래로 내려간다 */
.pad{position:absolute;left:10px;right:10px;top:112px;bottom:166px;z-index:7;border-radius:22px;overflow:hidden;background:#120F17;border:1.5px solid #1E1A17;box-shadow:0 0 0 2px #E2B24A,0 0 0 3.5px #1E1A17,0 18px 26px -8px rgba(0,0,0,.8);opacity:0;transform:scale(.86);pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.3,1.2,.5,1)}
body.playing .pad{opacity:1;transform:none;pointer-events:auto}
.pad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pad [data-padafter]{opacity:0;transition:opacity .6s}
.pad.done [data-padafter]{opacity:1}
.pad .ptag{position:absolute;left:12px;top:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.pad .ptag b{font-family:var(--f-disp);font-size:14px;font-weight:700;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:999px;padding:3px 12px 2px;box-shadow:0 2px 0 var(--ink)}
.pad .ptag span{font-size:12.5px;font-weight:700;color:#FFF6E2;background:rgba(18,15,23,.78);border-radius:999px;padding:2px 10px}
.pad [data-playend]{position:absolute;right:12px;bottom:12px;z-index:2;height:38px;padding:0 16px;border-radius:12px;font-size:14px;font-weight:800;color:var(--ink);background:var(--pop);border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.pad.done .ptag,.pad.done [data-playend]{opacity:0;transition:opacity .2s}
.pad::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(60% 45% at 50% 45%,rgba(255,255,255,.95),rgba(255,236,170,.55) 45%,rgba(255,236,170,0) 75%)}
body.playing .pad.pop{transform:scale(1.06);transition:transform .24s cubic-bezier(.3,1.5,.5,1);box-shadow:0 0 0 2px #FFE9AA,0 0 0 3.5px #1E1A17,0 0 40px 10px rgba(255,226,150,.75)}
.pad.pop::after{animation:flash .56s ease-out}
@keyframes flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
body.playing .pad.fly{transition:transform .55s cubic-bezier(.55,0,.8,.45),opacity .18s .4s;opacity:0}
body.playing .stage{opacity:0;transform:scale(1.04);pointer-events:none}
body.playing .ticket{opacity:0}
body.playing .boxwrap,body.playing .bubble{transform:translateY(190px)}
.boxwrap{transition:transform .42s cubic-bezier(.5,0,.25,1)}
body.playing .bubble{transition:opacity .22s,transform .42s cubic-bezier(.5,0,.25,1)}
.play.got{background:#EFE9DD}
/* 달로와 팔레트 */
.dclip{position:absolute;left:5%;bottom:0;width:160px;height:150px;overflow:hidden;z-index:2;pointer-events:none}
.dwrap{position:absolute;inset:0;transform:translateY(104%);transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
body[data-who=d] .dwrap{transform:none}
.dwrap .dalo{position:absolute;left:0;bottom:0;width:94px;transition:filter 1s}
body[data-b="4"] .dwrap .dalo{filter:drop-shadow(0 0 8px rgba(255,226,150,.9))}
.hpal{position:absolute;left:70px;bottom:27px;width:82px;aspect-ratio:300/218;transform:rotate(-12deg);isolation:isolate;filter:drop-shadow(0 4px 4px rgba(0,0,0,.55))}
.hpal img{position:absolute;inset:0;width:100%;height:100%}
.hpal i{position:absolute;width:23%;height:29%;margin:-14.5% 0 0 -11.5%;border-radius:50%;mix-blend-mode:multiply;background:#9C8565;transition:background .9s}
.hpal i:nth-of-type(1){left:24%;top:33.7%}.hpal i:nth-of-type(2){left:50.3%;top:21.9%}.hpal i:nth-of-type(3){left:76.4%;top:33.6%}
.hpal i[data-well=miro].on{background:#9FC4EA}.hpal i[data-well=garo].on{background:#F2B48F}.hpal i[data-well=sero].on{background:#FBE27E}

/* 통로·냥이 표(오른쪽으로 빠짐) */
.ticket{position:absolute;right:30px;top:calc(var(--st) + var(--sh) - 21px);z-index:5;--dl:110ms;font-family:var(--f-disp);font-size:13px;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:10px;padding:5px 11px 4px;box-shadow:0 2px 0 var(--ink),0 8px 12px -4px rgba(0,0,0,.6);rotate:-1.5deg;white-space:nowrap}
.ticket b{font-size:17px}.ticket i{font-style:normal;opacity:.4;margin:0 5px}
body.out .ticket{transform:translateX(130vw)}

/* --- 전구 상자: 전구가 하나씩 좌우로 빠진다 --- */
.boxwrap{position:absolute;left:8px;right:8px;bottom:8px;height:212px;z-index:7}
.boxbg{position:absolute;inset:0;z-index:2;border-radius:18px;background:linear-gradient(180deg,#2E2646,#221B36);border:1.5px solid #0e0a18;box-shadow:inset 0 0 0 1.5px rgba(226,178,74,.55),inset 0 12px 18px -10px rgba(255,255,255,.12),0 12px 18px -6px rgba(0,0,0,.7);--dl:230ms}
body.out .boxbg{opacity:0;transform:scale(.94)}
.box{position:absolute;inset:0;z-index:3;padding:5px 6px 0;display:flex;flex-direction:column}
.line{position:relative;display:flex;align-items:flex-start;gap:2px;height:67px}
.line::before{content:"";position:absolute;left:56px;right:2px;top:-8px;height:16px;border-bottom:1.5px solid rgba(255,255,255,.3);border-radius:0 0 50% 50%/0 0 100% 100%;transition:opacity .25s}
body.out .line::before{opacity:0}
.dong{flex:none;width:50px;height:42px;margin:13px 4px 0 0;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-disp);font-size:16px;font-weight:700;line-height:1.05;color:var(--ink);border:1.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);position:relative;z-index:2}
.dong small{font-family:var(--f-body);font-weight:700;font-size:12px}
.dong.sky{background:var(--sky)}.dong.pink{background:var(--pink)}.dong.mint{background:var(--mint)}
.line.here .dong{box-shadow:0 2px 0 var(--ink),0 0 0 2.5px #FFE9AA,0 0 12px rgba(255,233,170,.8)}
body.out .dong{transform:translateX(-130vw) rotate(-18deg)}
.bulb{flex:1 1 0;min-width:0;max-width:64px;height:67px;position:relative;transform-origin:50% 4px}
.bulb:nth-child(even){transform:rotate(-4deg);top:4px}.bulb:nth-child(odd){transform:rotate(3deg);top:5px}
.bulb:nth-child(2){top:1px}.bulb:last-child{top:2px}
body.out .bulb{transform:translateX(calc(var(--dx)*130vw)) rotate(calc(var(--dx)*28deg))}
.bulb img{position:absolute;left:50%;top:0;width:44px;margin-left:-22px;transition:opacity .8s,filter .8s}
.bulb .off{filter:brightness(.6) contrast(1.15)}
.bulb .on{opacity:0}
.bulb.lit .on{opacity:1}.bulb.lit .off{opacity:0}
.line.sky .bulb.lit .on{filter:drop-shadow(0 0 7px #B5CDE3) drop-shadow(0 0 16px rgba(181,205,227,.8))}
.line.pink .bulb.lit .on{filter:drop-shadow(0 0 7px #ECACBA) drop-shadow(0 0 16px rgba(236,172,186,.8))}
.line.mint .bulb.lit .on{filter:drop-shadow(0 0 7px #AFDECC) drop-shadow(0 0 16px rgba(175,222,204,.8))}
.bulb span{position:absolute;left:50%;top:32px;transform:translateX(-50%);padding:1px 4px 0;border-radius:7px;background:rgba(14,10,24,.72);font-size:12.5px;font-weight:800;letter-spacing:-.4px;line-height:1.3;color:#fff;white-space:nowrap;transition:color .8s,background .8s}
.bulb.lit span{color:var(--ink);background:rgba(255,255,255,.45)}
/* 시작 자리의 전구는 살짝 깜빡인다 */
.bulb.start::after{content:"";position:absolute;left:50%;top:19px;width:50px;height:50px;margin-left:-25px;border-radius:50%;border:2px solid #FFE9AA;box-shadow:0 0 12px #FFE9AA,inset 0 0 10px rgba(255,233,170,.6);animation:blink 1.3s ease-in-out infinite}
.bulb.start .off{filter:brightness(.95) contrast(1.05)}
@keyframes blink{0%,100%{opacity:.25;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}
/* 찍찍이 */
.mclip{position:absolute;right:12px;bottom:calc(100% - 4px);width:84px;height:84px;overflow:hidden;z-index:1;pointer-events:none}
.mouse{position:absolute;left:0;top:0;width:84px;transform:translateY(104%);transition:transform .3s cubic-bezier(.3,1.3,.5,1);filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}
body[data-who=m] .mouse{transform:none}

/* --- 맨 앞: 구석 말풍선(짧은 한마디) --- */
.bubble{position:absolute;left:12px;right:12px;top:calc(var(--st) + var(--sh) + 12px);min-height:80px;z-index:6;text-align:left;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:20px;padding:10px 14px 8px;box-shadow:0 3px 0 var(--ink),0 12px 16px -6px rgba(0,0,0,.6);display:flex;flex-direction:column;justify-content:space-between;gap:5px;transition:opacity .22s,transform .22s,padding .2s}
body[data-who=""] .bubble,body.out .bubble{opacity:0;transform:scale(.96);pointer-events:none}
body.playing[data-who=""] .bubble{transform:translateY(190px) scale(.96)}
.bubble::before{content:"";position:absolute;left:58px;top:-9px;width:16px;height:16px;background:#FFFDF8;border-left:1.5px solid var(--ink);border-top:1.5px solid var(--ink);transform:rotate(45deg);border-radius:4px 0 0 0}
body[data-who=m] .bubble{padding-right:96px;border-radius:20px 20px 8px 20px}
body[data-who=m] .bubble::before{left:auto;right:102px;top:auto;bottom:-9px;transform:rotate(225deg)}
.bubble [data-line]{font-size:14.5px;line-height:1.45}
.foot{display:flex;justify-content:space-between;align-items:center;color:var(--ink2);font-size:12px}
.foot b,.who{font-family:var(--f-disp);color:var(--paper);background:var(--ink);font-size:12px;font-weight:400;border-radius:999px;padding:1px 10px 0;margin-right:8px}
body[data-who=m] .bubble .foot b{background:#5E6FB0}
.bubble .foot em{font-style:normal;font-family:var(--f-disp);font-size:13px;color:var(--ink);border-bottom:1.5px solid var(--ink);line-height:1.1}

/* --- 큰 장면: 틀과 전구가 빠진 빌리지 위에 달로 전신 --- */
#cine{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity .35s}
#cine.on{opacity:1;pointer-events:auto}
.cbox{position:absolute;left:0;right:0;top:9%;text-align:center;padding:0 16px}
[data-csub]{display:inline-block;font-size:14px;font-weight:700;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:999px;padding:3px 14px;box-shadow:0 2px 0 var(--ink)}
[data-cbig]{display:block;margin-top:10px;font-family:var(--f-disp);font-weight:700;font-size:46px;line-height:1.1;color:#FFF6E2;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink),0 0 24px rgba(0,0,0,.55)}
#cine[data-col=sky] [data-cbig]{color:#D6E6F5}#cine[data-col=pink] [data-cbig]{color:#F9CAD5}#cine[data-col=mint] [data-cbig]{color:#CDEFE0}
#cine.story .cbox{display:none}
.cfull,.fm-dalo{position:absolute;left:2px;bottom:-8px;height:318px;transform:translateY(106%) rotate(-4deg);transform-origin:50% 100%;transition:transform .4s cubic-bezier(.3,1.35,.5,1),filter 1s;filter:drop-shadow(0 0 16px rgba(0,0,0,.6))}
body[data-b="1"] .cfull,body[data-b="1"] .fm-dalo{filter:brightness(.62) saturate(.5) drop-shadow(0 0 16px rgba(0,0,0,.6))}
body[data-b="2"] .cfull,body[data-b="2"] .fm-dalo{filter:brightness(.85) saturate(.8) drop-shadow(0 0 16px rgba(0,0,0,.6))}
body[data-b="4"] .cfull,body[data-b="4"] .fm-dalo{filter:drop-shadow(0 0 16px rgba(255,226,150,.8))}
.cline,.fm-line{position:absolute;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink),0 12px 16px -6px rgba(0,0,0,.6);opacity:0;transform:translateY(8px);transition:opacity .3s .18s,transform .3s .18s}
.cline{left:16px;right:16px;bottom:326px;border-radius:22px;padding:14px 16px 13px;font-size:15.5px;line-height:1.55}
.cline::after{content:"";position:absolute;left:92px;bottom:-9px;width:16px;height:16px;background:#FFFDF8;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);border-radius:0 0 4px 0}
#cine.story .cline{font-size:16px;padding:16px 18px}
#cine.withdalo .cfull,#fullmap.withdalo .fm-dalo{transform:none}
#cine.withdalo .cline,#fullmap.withdalo .fm-line{opacity:1;transform:none}
.chint{position:absolute;right:16px;bottom:14px;font-size:12px;font-weight:600;color:#FFF6E2;text-shadow:0 1px 3px #000,0 0 6px #000}

/* --- 전체 보기: 화면 가득 지도 + 달로 --- */
#fullmap{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity .3s}
#fullmap.on{opacity:1;pointer-events:auto}
.fm-map{position:absolute;left:8px;right:8px;top:8px;bottom:200px;border-radius:20px;overflow:hidden;background:#120F17;border:1.5px solid #0e0a18;box-shadow:0 0 0 2px rgba(226,178,74,.75),0 16px 24px -8px rgba(0,0,0,.8)}
.fm-map #mm{inset:0}
.fm-map #mm .mm-btns{right:10px;bottom:10px}
.fm-map #mm .mm-me{display:none}
.fm-close{position:absolute;right:18px;top:18px;z-index:3}
.fm-dalo{height:236px;left:0}
.fm-line{left:138px;right:12px;bottom:58px;border-radius:20px 20px 20px 6px;padding:12px 14px;font-size:14.5px;line-height:1.5}
.fm-cnt{position:absolute;left:18px;top:18px;z-index:3;font-family:var(--f-disp);font-size:13px;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:10px;padding:5px 11px 4px;box-shadow:0 2px 0 var(--ink)}
.fm-cnt b{font-size:17px}

/* 놀이 칸 쪽지 */
#sheet{background:#FFFDF8;color:var(--ink);border:1.5px solid var(--ink);border-bottom:0;border-radius:26px 26px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 0 #E2B24A,0 -12px 30px rgba(0,0,0,.6);max-width:480px;margin:0 auto}
#sheet .hd{display:flex;justify-content:space-between;align-items:flex-end}
#sheet [data-st]{font-size:12.5px;color:var(--ink2)}
#sheet [data-sn]{font-family:var(--f-disp);font-weight:700;font-size:24px;line-height:1.2}
#sheet .x{font-size:13px;border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px}
#sheet [data-sp]{display:flex;gap:10px;margin:14px 0 10px}
.play{flex:1;text-align:left;border:1.5px solid var(--ink);border-radius:16px;padding:12px 14px;background:var(--butter);box-shadow:0 3px 0 var(--ink);display:flex;flex-direction:column;gap:2px}
.play b{font-family:var(--f-disp);font-size:17px}.play small{font-size:12.5px;color:var(--ink2)}
#sheet [data-sh]{font-size:12.5px;color:var(--ink2);margin:0}

/* 움직임 줄이기 설정이면 미끄러짐 없이 바로 바뀐다 */
@media (prefers-reduced-motion: reduce){
 .ease,.sign,.note,.pad,.boxwrap,.bg,.dwrap,.mouse,.bubble,#cine,#fullmap,.cfull,.fm-dalo,.cline,.fm-line,.frame,.spot,.line::before{transition:none!important}
 body.out .sign,body.out .stage,body.out .ticket,body.out .boxwrap{transform:none;visibility:hidden}
 [data-line].in,.bulb.start::after,.note.bump,.pad.pop::after{animation:none}
 .bulb.start::after{opacity:1}
}


/* ===== 시안 A4 덧입힘: 구성은 A3 그대로. 가벼운 움직임(transform·opacity만)과 소리 ===== */
/* 배경: 큰 그림에 blur 필터를 움직이지 않는다. 선명한 그림 위에 "미리 흐려 둔 어두운 그림"을 얹고 그 투명도만 바꾼다 */
.bg{filter:none!important;inset:-5%;transition:transform .75s cubic-bezier(.6,0,.2,1);animation:drift 48s ease-in-out infinite alternate}
#dim{position:absolute;inset:-5%;z-index:-3;background:#17121f 50% 50%/cover no-repeat;transition:opacity .55s ease;animation:drift 48s ease-in-out infinite alternate}
body.cine-clear #dim{opacity:0}
body.cine-mid #dim{opacity:.5}
body.peek #dim{opacity:.35}
@keyframes drift{from{scale:1.01}to{scale:1.07}}
/* 화면이 제자리에서 바뀔 때: 요소가 잠깐 물러나 빌리지가 비쳤다가 다음 화면이 들어온다(0.45초) */
.stage,.ticket,.boxwrap,.sign,.note{transition:transform .45s cubic-bezier(.4,0,.2,1) var(--dl,0ms),opacity .45s ease}
body.peek .stage,body.peek .ticket,body.peek .boxwrap,body.peek .sign,body.peek .note{opacity:0;transform:scale(.965);transition:none}
body.peek .bubble{opacity:0;transition:none}
/* 말하는 동안: 숨 쉬듯 위아래 2~3px, 고개 살짝. 말이 끝나면 멈춘다 */
.dwrap .dalo,.cfull,.fm-dalo,.mouse{transform-origin:50% 90%}
body[data-talk=d] .dwrap .dalo,body[data-talk=D] .cfull,body[data-talk=D] .fm-dalo{animation:talk .78s ease-in-out infinite alternate}
body[data-talk=m] .mouse{animation:talk .62s ease-in-out infinite alternate}
@keyframes talk{0%{translate:0 0;rotate:-.7deg}100%{translate:0 -2.6px;rotate:.9deg}}
.hpal{animation:hold 3.6s ease-in-out infinite alternate}
@keyframes hold{from{translate:0 0}to{translate:0 -1.5px}}
/* 글자는 한 자씩 나타난다(자리는 미리 잡아 둬서 말풍선이 덜컹거리지 않는다) */
.tw i{font-style:normal;opacity:0}.tw i.on{opacity:1}
[data-line].in{animation:none}
/* 전구 불빛의 느린 숨 */
.bulb.lit::before{content:"";position:absolute;left:50%;top:14px;width:58px;height:58px;margin-left:-29px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,214,.75),rgba(255,244,214,0));animation:glow 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--dl,0ms)*-9);pointer-events:none}
@keyframes glow{from{opacity:.25;scale:.9}to{opacity:.9;scale:1.06}}
/* 금빛 틀의 은은한 빛 흐름: 틀 모양으로 오려 낸 창 안에서 빛 띠가 지나간다 */
.shine{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;-webkit-mask:url(img/frame_gold.png) center/100% 100% no-repeat;mask:url(img/frame_gold.png) center/100% 100% no-repeat}
.shine i{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,250,225,.75) 50%,rgba(255,255,255,0));transform:translateX(-140%);animation:sweep 7.5s ease-in-out infinite}
@keyframes sweep{0%,55%{transform:translateX(-140%)}100%{transform:translateX(420%)}}
body[data-b="1"] .shine{display:none}
body[data-b="2"] .shine{opacity:.45}
/* 소리 버튼 */
.snd{position:absolute;left:10px;top:8px;z-index:9;height:28px;padding:0 10px 0 8px;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);display:flex;align-items:center;gap:5px;transition:opacity .3s}
.snd s{width:14px;height:12px;background:var(--ink);clip-path:polygon(0 30%,35% 30%,75% 0,75% 100%,35% 70%,0 70%);text-decoration:none}
.snd.off{background:#D9D2C6;color:#5E554D}.snd.off s{background:#5E554D}
body.out .snd{opacity:.55}
@media (prefers-reduced-motion: reduce){
 .bg,#dim,.hpal,.bulb.lit::before,.shine i,body[data-talk] .dalo,body[data-talk] .cfull,body[data-talk] .fm-dalo,body[data-talk] .mouse{animation:none!important}
 .shine{display:none}
 #dim,.stage,.ticket,.boxwrap,.sign,.note{transition:none!important}
 .tw i{opacity:1}
}


/* ===== 시연판(한 장면씩) 추가분 2차: 화면 높이 680에서도 한 화면, 전구 한 줄, 금빛 타이틀, 실제 놀이판, 영상, 설문 ===== */
#demo{display:none}
/* 화면 높이에 맞춰 무대가 내려온다(680에서 42px, 844에서 약 108px). 스크롤 없이 한 화면 */
.app{height:100dvh;min-height:640px;--st:clamp(42px,calc(42px + (100dvh - 680px)*.4),108px)}
#veil{inset:0}
#mm .mm-pop,.mm-pop{display:none!important}
.snd{top:6px;left:8px}
.nextbtn{position:absolute;left:8px;top:38px;z-index:40;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;color:#FFF6E2;background:rgba(23,18,31,.72);border:1.5px solid rgba(255,246,226,.55);white-space:nowrap}
.note{top:5px;right:8px;width:36px}

/* 타이틀: 틀과 같은 금빛 조각. 틀 꼭대기에 붙은 문패처럼 작게 얹고, 같은 빛이 흐른다 */
.sign{width:152px;margin-left:-76px;top:calc(var(--st) - 42px);aspect-ratio:520/323;filter:drop-shadow(0 3px 0 rgba(60,34,4,.9)) drop-shadow(0 7px 7px rgba(0,0,0,.6))}
body[data-b="1"] .sign{filter:grayscale(.8) brightness(.6) drop-shadow(0 3px 0 rgba(20,16,14,.85)) drop-shadow(0 7px 7px rgba(0,0,0,.6))}
body[data-b="2"] .sign{filter:grayscale(.5) brightness(.78) drop-shadow(0 3px 0 rgba(40,26,8,.9)) drop-shadow(0 7px 7px rgba(0,0,0,.6))}
body[data-b="3"] .sign{filter:grayscale(.12) brightness(.96) drop-shadow(0 3px 0 rgba(60,34,4,.9)) drop-shadow(0 0 8px rgba(255,205,110,.35))}
body[data-b="4"] .sign{filter:brightness(1.06) drop-shadow(0 3px 0 rgba(60,34,4,.9)) drop-shadow(0 0 12px rgba(255,214,120,.75))}
.sign .shine{-webkit-mask:url(img/title_gold.png) center/100% 100% no-repeat;mask:url(img/title_gold.png) center/100% 100% no-repeat;z-index:1}
.sign .shine i{animation-delay:.6s}

/* 틀 안 구석의 달로를 조금 더 크게 */
.dclip{width:190px;height:176px}
.dwrap .dalo{width:114px}
.hpal{left:88px;bottom:28px;width:88px}
.spot .tag b{font-size:23px}

/* 전구 상자: 지금 있는 동의 한 줄. 전구 6개, 글자 없음, 전구마다 다른 색 */
.boxwrap{height:86px}
.box{padding:6px 8px 0}
.line{height:72px;gap:0}
.line::before{left:62px;right:6px;top:-6px}
.dong{width:52px;height:50px;margin:10px 6px 0 0;gap:5px}
.dots{display:flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(30,26,23,.25);border:1px solid rgba(30,26,23,.55)}
.dots i.cur{background:#FFFDF8}.dots i.full{background:var(--ink)}
.bulb{max-width:none;height:70px}
.bulb img{width:46px;margin-left:-23px}
.bulb .off{filter:brightness(.72) contrast(1.1)}
.bulb.lit::before{top:16px}
.bulb.c0.lit .on{filter:drop-shadow(0 0 7px #B5CDE3) drop-shadow(0 0 16px rgba(181,205,227,.8))}
.bulb.c1.lit .on{filter:drop-shadow(0 0 7px #ECACBA) drop-shadow(0 0 16px rgba(236,172,186,.8))}
.bulb.c2.lit .on{filter:drop-shadow(0 0 7px #AFDECC) drop-shadow(0 0 16px rgba(175,222,204,.8))}
.bulb.c3.lit .on{filter:drop-shadow(0 0 7px #F7E7AC) drop-shadow(0 0 16px rgba(247,231,172,.8))}
.bulb.c4 .on{filter:hue-rotate(48deg) saturate(1.15)}
.bulb.c4.lit .on{filter:hue-rotate(48deg) saturate(1.15) drop-shadow(0 0 7px #CDB9EC) drop-shadow(0 0 16px rgba(205,185,236,.8))}
.bulb.c5 .on{filter:hue-rotate(-24deg) saturate(1.5)}
.bulb.c5.lit .on{filter:hue-rotate(-24deg) saturate(1.5) drop-shadow(0 0 7px #ECC3AC) drop-shadow(0 0 16px rgba(236,195,172,.8))}
/* 누를 수 있는 전구는 살짝 흔들린다 */
.bulb.can{animation:sway 1.5s ease-in-out infinite}
.bulb.can .off{filter:brightness(.98) contrast(1.05)}
@keyframes sway{0%,100%{rotate:-6deg}50%{rotate:6deg}}
.bulb.start::after{top:17px;width:52px;height:52px;margin-left:-26px}
/* 한 동을 다 밝히면 그 줄이 옆으로 빠지고 다음 동의 줄이 들어온다 */
body.rowout .box .line{transform:translateX(-115%);opacity:0;transition:transform .4s cubic-bezier(.5,0,.8,.4),opacity .3s .1s}
body.rowin .box .line{animation:rowin .5s cubic-bezier(.2,.9,.3,1)}
@keyframes rowin{from{transform:translateX(115%);opacity:0}to{transform:none;opacity:1}}

/* 놀이판: 무대 자리에서 그대로. 전구 상자와 말풍선은 제자리(상자가 작아져서 내릴 필요가 없다) */
body.playing .boxwrap,body.playing .bubble{transform:none}
body.playing[data-who=""] .bubble{transform:scale(.96)}
.pad{top:calc(var(--st) + 62px);bottom:auto;height:calc(var(--sh) - 70px)}
body.hasgame .pad{top:calc(var(--st) + 62px + (var(--sh) - 70px - (var(--sw) - 20px)*.75)/2);bottom:auto;height:auto;aspect-ratio:4/3}
body.hasgame [data-playend]{display:none}
.gamebox{position:absolute;inset:0;z-index:2}
.pad .ptag{pointer-events:none}
.pad .ptag span{display:none}
.pad.done .gamebox .strip,.pad.done .gamebox canvas{opacity:0;transition:opacity .5s}
.ghint{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;text-align:center;pointer-events:none;font-size:13px;font-weight:700;color:#FFF6E2;background:rgba(18,15,23,.8);border-radius:999px;padding:5px 12px;transition:opacity .2s}
.ghint:empty{display:none}.ghint.bad{color:#FFC2B4}
.pad.done .ghint{opacity:0}
.strip{position:absolute;left:0;width:100%;overflow:hidden;z-index:2;cursor:pointer}
.strip img{position:absolute;left:0;width:100%;height:auto;inset:auto;object-fit:fill;opacity:0;transition:opacity .7s}
.strip.on img{opacity:1}
.strip.next::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent) no-repeat;background-size:55% 100%;animation:stripsweep 1.7s infinite}
@keyframes stripsweep{0%{background-position:-90% 0}100%{background-position:230% 0}}
.paintcv{position:absolute;inset:0;width:100%;height:100%;z-index:3;touch-action:none;cursor:crosshair}
/* 숨은 고양이: 작은 집의 어두운 입구가 누르는 자리(표시 없음). 못 찾으면 입구 안이 살짝 움찔한다 */
.hidezone{position:absolute;z-index:5;padding:0;border:0;background:none;border-radius:50%;overflow:hidden;cursor:pointer}
.hidezone i{position:absolute;inset:0;background-size:454.5% 294.1%;background-position:50% 59.1%;opacity:0}
.hidezone.wig i{opacity:1;animation:wig .7s ease-in-out}
@keyframes wig{0%,100%{transform:none}30%{transform:translate(-3%,2%) rotate(-3deg) scale(1.06)}65%{transform:translate(3%,-1%) rotate(3deg) scale(1.04)}}
.pad.done .hidezone{display:none}

/* 눌러야 다음으로 가는 곳을 알려 주는 버튼 */
.prompt{position:absolute;left:50%;top:calc(var(--st) + var(--sh)*.5);transform:translateX(-50%);z-index:7;height:44px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:800;color:var(--ink);background:var(--butter);border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink),0 0 22px rgba(255,233,170,.75);white-space:nowrap;animation:wob 1.1s ease-in-out infinite}
@keyframes wob{0%,100%{rotate:-1.6deg}50%{rotate:1.6deg}}
body.out .prompt,body.playing .prompt{display:none}
[data-full].nudge{animation:nudge 1.1s ease-in-out infinite;box-shadow:0 2px 0 var(--ink),0 0 0 3px #FFE9AA,0 0 14px rgba(255,233,170,.9)}
@keyframes nudge{0%,100%{scale:1}50%{scale:1.07}}

/* 큰 장면: 글과 말풍선을 화면 위쪽으로 올려 잘 읽히게. 달로 전신은 화면 높이에 맞춰 줄어든다 */
.cbox{top:5%}
[data-cbig]{font-size:42px;margin-top:8px}
.cline{bottom:auto;top:calc(5% + 108px)}
#cine.story .cline{top:9%}
.cfull,#thx .thx-dalo{height:min(318px,43dvh)}
.fm-dalo{height:min(236px,33dvh)}
.fm-map{bottom:min(200px,28dvh)}
.fm-line{bottom:34px}
.fm-cnt{left:auto;right:96px}
/* 전체 지도의 달로: 말하는 동안 붓을 든 쪽으로 몸을 살짝 기울였다 편다 */
body[data-talk=D] .fm-dalo{animation:gesture 1.1s ease-in-out infinite alternate!important}
@keyframes gesture{0%{translate:0 0;rotate:-2.4deg}50%{translate:0 -3px;rotate:1.2deg}100%{translate:0 -1px;rotate:3deg}}

/* 영상 */
#vid{position:absolute;inset:0;z-index:20;background:#000}
#vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#vidcap{position:absolute;left:0;right:0;top:44px;text-align:center;color:#fff;font-family:var(--f-disp);font-size:17px;text-shadow:0 1px 4px #000;pointer-events:none}
#vidskip{position:absolute;right:14px;bottom:18px;background:rgba(0,0,0,.55);color:#fff;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;padding:8px 14px;font-size:14px}
/* 달로의 인사(설문 앞, 엔딩 뒤) */
#thx{position:absolute;inset:0;z-index:19}
#thx .tline{position:absolute;left:16px;right:16px;top:13%;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:22px;padding:14px 16px 13px;font-size:16px;line-height:1.55;box-shadow:0 3px 0 var(--ink),0 12px 16px -6px rgba(0,0,0,.6)}
#thx .thx-dalo{position:absolute;left:2px;bottom:-8px;transform:translateY(106%) rotate(-4deg);transform-origin:50% 100%;transition:transform .4s cubic-bezier(.3,1.35,.5,1);filter:drop-shadow(0 0 16px rgba(255,226,150,.7))}
#thx.on .thx-dalo{transform:none}
#thx .tbtn{position:absolute;right:16px;bottom:84px;height:46px;padding:0 22px;border-radius:14px;font-size:15.5px;font-weight:800;color:var(--ink);background:var(--pop);border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
/* 설문: 쪽지 모양 */
#sv{position:absolute;inset:0;z-index:21;background:rgba(23,18,31,.6);display:flex;padding:70px 12px 12px}
.svcard{flex:1;display:flex;flex-direction:column;gap:9px;overflow-y:auto;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:22px;padding:14px 14px 12px;box-shadow:0 4px 0 #E2B24A,0 5.5px 0 var(--ink),0 16px 24px rgba(0,0,0,.6)}
.svcard h2{margin:0;font-family:var(--f-disp);font-size:17px;line-height:1.35}
.svq b{display:block;font-size:14px;margin-bottom:5px}
.svo{display:flex;flex-wrap:wrap;gap:6px}
.svo button{font-size:13px;padding:7px 11px;border-radius:999px;border:1.5px solid var(--ink);background:#fff}
.svo button[aria-pressed=true]{background:var(--butter);box-shadow:0 2px 0 var(--ink);font-weight:800}
#svt{width:100%;font:inherit;font-size:14px;padding:9px 12px;border:1.5px solid var(--ink);border-radius:12px;background:#fff}
#svmsg{font-size:12.5px;color:#B4432F;min-height:18px}
.svrow{display:flex;gap:8px}
.svrow button{flex:1;height:44px;border-radius:14px;font-size:15px;font-weight:800;border:1.5px solid var(--ink)}
#svgo{background:var(--pop);box-shadow:0 3px 0 var(--ink)}#svskip{flex:0 0 96px;background:#fff;font-weight:600}
@media (prefers-reduced-motion: reduce){.prompt,[data-full].nudge,.strip.next::after,.bulb.can,.hidezone.wig i,body.rowin .box .line,body[data-talk=D] .fm-dalo{animation:none}#thx .thx-dalo,body.rowout .box .line{transition:none}}

/* 전환 때 타이틀은 화면 위로 완전히 빠진다 */
body.out .sign{transform:translateY(-320%)}

/* ===================== 3차(대표 댓글) ===================== */
/* 밝아지는 느낌: 진행할수록(--lum 0→1) 배경·틀·타이틀·달로가 단계적으로 밝아진다 */
#dim{opacity:calc(1 - var(--lum,0)*.66)}
.frame{filter:grayscale(calc(.88 - var(--lum,0)*.88)) brightness(calc(.5 + var(--lum,0)*.58)) drop-shadow(0 0 calc(var(--lum,0)*18px) rgba(255,214,120,calc(var(--lum,0)*.85))) drop-shadow(0 6px 8px rgba(0,0,0,.55))!important}
.sign{filter:grayscale(calc(.88 - var(--lum,0)*.88)) brightness(calc(.5 + var(--lum,0)*.58)) drop-shadow(0 3px 0 rgba(50,30,6,.9)) drop-shadow(0 0 calc(var(--lum,0)*12px) rgba(255,214,120,calc(var(--lum,0)*.8)))!important}
.dwrap .dalo{filter:brightness(calc(.74 + var(--lum,0)*.4)) saturate(calc(.6 + var(--lum,0)*.5))!important}
.boxbg{filter:brightness(calc(.82 + var(--lum,0)*.3))}
.shine{opacity:var(--lum,0)}
body[data-b="2"] .shine{opacity:var(--lum,0)}
/* "오, 보인다!" 하는 순간 불이 들어온다 */
#flare{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(75% 52% at 50% 36%,rgba(255,238,190,.9),rgba(255,214,130,.4) 45%,rgba(255,214,130,0) 78%)}
body.flare #flare{animation:flare 1.7s ease-out}
@keyframes flare{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
/* 달로 몸의 별이 미세하게 반짝인다(작은 점 몇 개가 차례로) */
.stars{position:absolute;pointer-events:none;left:0;bottom:0;width:114px;aspect-ratio:247/303}
body:not(.lit) .stars{display:none}
.stars i{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,226,150,.95) 45%,rgba(255,226,150,0));opacity:0;animation:twk 3.2s ease-in-out infinite}
@keyframes twk{0%,62%,100%{opacity:0;scale:.5}74%{opacity:1;scale:1.25}86%{opacity:.35;scale:.8}}
.stars i:nth-child(1){left:36%;top:33%}.stars i:nth-child(2){left:62%;top:29%;animation-delay:.55s}.stars i:nth-child(3){left:21%;top:55%;animation-delay:1.1s}
.stars i:nth-child(4){left:80%;top:57%;animation-delay:1.65s}.stars i:nth-child(5){left:40%;top:90%;animation-delay:2.2s}.stars i:nth-child(6){left:14%;top:84%;animation-delay:2.75s}
.bstars i{width:8px;height:8px;margin:-4px}
.bstars i:nth-child(1){left:38%;top:27%}.bstars i:nth-child(2){left:20%;top:44%}.bstars i:nth-child(3){left:74%;top:44%}.bstars i:nth-child(4){left:16%;top:84%}.bstars i:nth-child(5){left:34%;top:93%}.bstars i:nth-child(6){left:8%;top:68%}

/* 큰 장면·전체 지도·인사에 쓰는 달로: 상반신을 크게 */
.cfull,#thx .thx-dalo,.fm-dalo{left:-8px;bottom:-4px;width:auto;transform:translateY(106%);filter:drop-shadow(0 0 16px rgba(0,0,0,.55))!important}
.cfull,#thx .thx-dalo{height:min(310px,41dvh)}
.fm-dalo{height:min(200px,28dvh)}
#cine.withdalo .cfull,#fullmap.withdalo .fm-dalo,#thx.on .thx-dalo{transform:none}
#cine .bstars,#thx .bstars{left:-8px;bottom:-4px;width:auto;height:min(310px,41dvh);aspect-ratio:640/733}
#fullmap .bstars{left:-8px;bottom:-4px;width:auto;height:min(200px,28dvh);aspect-ratio:640/733}
#cine:not(.withdalo) .bstars,#fullmap:not(.withdalo) .bstars,#thx:not(.on) .bstars{display:none}
body[data-talk=D] .cfull,body[data-talk=D] .fm-dalo,body[data-talk=D] .thx-dalo{animation:talk .78s ease-in-out infinite alternate}
.fm-line{left:164px}
.fm-note{position:absolute;left:18px;bottom:calc(min(200px,28dvh) + 12px);z-index:3;font-size:12px;font-weight:700;color:#FFF6E2;background:rgba(23,18,31,.78);border-radius:999px;padding:3px 10px}
#thx .tbtn{bottom:64px}

/* 타이틀: 15% 줄이고 내려서 틀 꼭대기와 맞물리게 */
.sign{width:129px;margin-left:-64.5px;top:calc(var(--st) - 31px)}

/* 동 이름표를 누르면 다른 동의 전구 줄이 보인다 */
.dong{cursor:pointer}
.dong::after{content:"";position:absolute;right:-5px;top:50%;width:0;height:0;margin-top:-4px;border:4px solid transparent;border-left-color:rgba(30,26,23,.7)}
.gpeek{position:absolute;right:8px;top:8px;z-index:6;height:30px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.glay{opacity:0;transition:opacity .8s;z-index:1;pointer-events:none}
.gcover{position:absolute;inset:0;z-index:3;cursor:pointer}
.gfound{position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 0 2px #FFE9AA,0 0 12px rgba(255,233,170,.85);transition:opacity .8s}
.pad.done .gcover,.pad.done .gpeek{display:none}

/* 수첩: 어디까지 했고 누가 남았나를 한눈에 */
.note{cursor:pointer}
#nb{position:absolute;inset:0;z-index:22;background:rgba(23,18,31,.6);display:flex;padding:66px 12px 12px}
.nbcard{flex:1;overflow-y:auto;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:22px;padding:14px 14px 16px;box-shadow:0 4px 0 #E2B24A,0 5.5px 0 var(--ink),0 16px 24px rgba(0,0,0,.6)}
.nbhd{display:flex;justify-content:space-between;align-items:center}
.nbhd h2{margin:0;font-family:var(--f-disp);font-size:22px}
.nbhd button{font-size:13px;border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px}
.nbcard h3{margin:14px 0 7px;font-family:var(--f-disp);font-size:16px}
.nbcard h3 small{font-family:var(--f-body);font-size:12.5px;font-weight:600;color:var(--ink2);margin-left:6px}
.nbrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nbrow figure{margin:0}
.nbrow img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1.5px solid var(--ink)}
.nbrow figure.no img{filter:brightness(.28) saturate(.2)}
.nbrow figcaption{font-size:12px;font-weight:700;line-height:1.3;margin-top:4px}
.nbrow figcaption small{display:block;font-size:12px;font-weight:500;color:var(--ink2)}
.nbempty{grid-column:1/-1;font-size:13px;color:var(--ink2);border:1.5px dashed #CFC4B3;border-radius:10px;padding:12px;text-align:center}
.nbtools{display:flex;gap:6px;flex-wrap:wrap}
.nbtools span{font-family:var(--f-disp);font-size:14px;padding:4px 13px 3px;border-radius:999px;border:1.5px dashed #CFC4B3;color:#A99D8D}
.nbtools span.on{border:1.5px solid var(--ink);background:var(--butter);color:var(--ink)}
@media (prefers-reduced-motion: reduce){body.flare #flare,.stars i{animation:none}.stars i{opacity:.7}}

/* ===================== 4차(대표 댓글) ===================== */
/* 밝기: 처음은 캄캄하고(달로 눈·말풍선·눌러야 할 버튼만 또렷), 미션 하나를 끝낼 때마다 10%씩(--lum .1) 일정하게 밝아진다 */
.app::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#05040a;opacity:calc(.8 - var(--lum,0)*.8);transition:opacity 1.2s}
body.cine-clear .app::after{opacity:0}
body.cine-mid .app::after{opacity:calc(.45 - var(--lum,0)*.45)}
#dim{opacity:calc(1 - var(--lum,0)*.8)}
.frame{filter:grayscale(calc(.92 - var(--lum,0)*.92)) brightness(calc(.24 + var(--lum,0)*.84)) drop-shadow(0 0 calc(var(--lum,0)*18px) rgba(255,214,120,calc(var(--lum,0)*.85))) drop-shadow(0 6px 8px rgba(0,0,0,.55))!important}
.sign{filter:grayscale(calc(.92 - var(--lum,0)*.92)) brightness(calc(.24 + var(--lum,0)*.84)) drop-shadow(0 3px 0 rgba(50,30,6,.9)) drop-shadow(0 0 calc(var(--lum,0)*12px) rgba(255,214,120,calc(var(--lum,0)*.8)))!important}
.spot img{filter:brightness(calc(.3 + var(--lum,0)*.5)) saturate(calc(.4 + var(--lum,0)*.5))!important;transition:filter 1.2s}
.well-wrap #mm{filter:brightness(calc(.42 + var(--lum,0)*.58));transition:filter 1.2s}
.dwrap .dalo{filter:brightness(calc(.4 + var(--lum,0)*.74)) saturate(calc(.5 + var(--lum,0)*.6))!important}
.hpal{filter:brightness(calc(.45 + var(--lum,0)*.55)) drop-shadow(0 4px 4px rgba(0,0,0,.55));transition:filter 1.2s}
.boxbg{filter:brightness(calc(.45 + var(--lum,0)*.65));transition:filter 1.2s}
.dong,.ticket,.note{filter:brightness(calc(.5 + var(--lum,0)*.5));transition:filter 1.2s}
.bulb .off{filter:brightness(calc(.36 + var(--lum,0)*.5)) contrast(1.1)}
.bulb.can .off,.bulb.start .off{filter:brightness(1) contrast(1.05)}
/* 다 밝힌 모습 보기 */
.allbtn{position:absolute;left:8px;top:68px;z-index:40;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800;color:var(--ink);background:var(--butter);border:1.5px solid var(--ink);white-space:nowrap}
.allbtn.on{background:var(--pop)}
body.out .allbtn,body.playing .allbtn{display:none}
body.allon .bulb .on{opacity:1}body.allon .bulb .off{opacity:0}
body.allon .bulb::before{content:"";position:absolute;left:50%;top:16px;width:58px;height:58px;margin-left:-29px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,214,.75),rgba(255,244,214,0));pointer-events:none}
body.allon .hpal i{background:#9FC4EA}body.allon .hpal i:nth-of-type(2){background:#F2B48F}body.allon .hpal i:nth-of-type(3){background:#FBE27E}

/* 타이틀: 틀의 윗테두리가 로고의 세로 가운데를 지나가게(로고가 테두리에 걸침) */
.sign{top:calc(var(--st) - 12px)}

/* 글: 낱말 중간에서 줄이 바뀌지 않게, 굵은 글씨와 얇은 글씨가 구분되게 */
[data-line],.cline,.fm-line,.tline,[data-cbig],[data-csub],.svcard h2,.nbrow figcaption{word-break:keep-all;text-wrap:balance}
.bubble [data-line],.cline,.fm-line,#thx .tline{font-weight:500}
.bubble [data-line] b,.cline b,.fm-line b,#thx .tline b{font-weight:800}
.fm-line{background:#FFFDF8!important;border:1.5px solid var(--ink)!important;border-radius:20px 20px 20px 6px;padding:12px 14px;box-shadow:0 3px 0 var(--ink),0 12px 16px -6px rgba(0,0,0,.6)}

/* 버튼류는 색을 넣고 굵게 */
.mapbtns [data-full]{background:var(--butter);font-weight:800}
.fm-close{background:var(--pink);font-weight:800}
#vidskip{background:var(--pop);color:var(--ink);border:1.5px solid var(--ink);font-weight:800;box-shadow:0 2px 0 var(--ink)}
.nbhd button{background:var(--pink);font-weight:800;box-shadow:0 2px 0 var(--ink)}
#svskip{background:var(--sky);font-weight:800}
.fm-map #mm .mm-btns button{font-weight:800}
.nextbtn{font-weight:800}

/* 달로: 가만히 서 있지 않게(숨·고개). 말할 때는 더 크게 움직인다 */
.dwrap .dalo{animation:idleb 3.6s ease-in-out infinite alternate}
#cine.withdalo .cfull,#fullmap.withdalo .fm-dalo,#thx.on .thx-dalo{animation:idleb 3.6s ease-in-out infinite alternate}
@keyframes idleb{0%{translate:0 0;rotate:-.5deg}100%{translate:0 -2.5px;rotate:.7deg}}
body[data-talk=d] .dwrap .dalo{animation:talk .7s ease-in-out infinite alternate!important}
body[data-talk=D] #cine .cfull,body[data-talk=D] #thx .thx-dalo,body[data-talk=D] #fullmap .fm-dalo{animation:talkb .8s ease-in-out infinite alternate!important}
@keyframes talkb{0%{translate:0 0;rotate:-1.6deg}100%{translate:0 -4px;rotate:1.8deg}}
#cine .bstars,#thx .bstars,#fullmap .bstars{aspect-ratio:700/760}

/* 전구가 바람에 살짝 흔들린다(다음에 누를 곳 표시보다 훨씬 약하게) */
.bulb{animation:breeze 4.8s ease-in-out infinite;animation-delay:calc(var(--dl,0ms)*-13)}
@keyframes breeze{0%,100%{rotate:-1.6deg}50%{rotate:1.6deg}}
.bulb.can{animation:sway 1.5s ease-in-out infinite}

/* 설문 권유: 버튼을 화면 가운데에, 찍찍이가 그 위에서 눌러 달라는 손짓을 되풀이한다 */
#thx .thx-mouse{display:none}
#thx.ask .tbtn{left:50%;right:auto;top:50%;bottom:auto;translate:-50% 0;height:52px;padding:0 28px;font-size:17px;box-shadow:0 3px 0 var(--ink),0 0 22px rgba(197,246,56,.6)}
#thx.ask .thx-mouse{display:block;position:absolute;left:50%;top:calc(50% - 84px);width:86px;margin-left:-20px;transform-origin:50% 100%;animation:press 1s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
@keyframes press{0%,100%{translate:0 0;rotate:-6deg}45%{translate:-4px 9px;rotate:4deg}}

/* 수첩: 흰 쪽지가 아니라 시장 전경 위에. 미션이 찰수록 배경도 밝아져 있다 */
#nb{background:#0b0910 center/cover no-repeat;padding:62px 14px 12px}
#nb::before{content:"";position:absolute;inset:0;background:#07050c;opacity:calc(.86 - var(--lum,0)*.6)}
.nbcard{position:relative;background:none;border:0;box-shadow:none;color:#FFF6E2;padding:0 2px 12px}
.nbhd h2{color:#FFF6E2;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.nbhd button{color:var(--ink)}
.nbcard h3{color:#FFE9AA;text-shadow:0 1px 3px #000}
.nbcard h3 small{color:#E6DDF0}
.nbrow img{border-color:#FFE9AA;box-shadow:0 6px 10px rgba(0,0,0,.6)}
.nbrow figcaption{color:#FFF6E2;text-shadow:0 1px 3px #000}
.nbrow figcaption small{color:#D9D0E6}
.nbempty{color:#E6DDF0;border-color:rgba(255,246,226,.45);background:rgba(11,9,16,.5)}
.nbtools span{color:#B7ADC4;border-color:rgba(255,246,226,.4);background:rgba(11,9,16,.5)}
@media (prefers-reduced-motion: reduce){.bulb,.dwrap .dalo,#cine.withdalo .cfull,#fullmap.withdalo .fm-dalo,#thx.on .thx-dalo,#thx.ask .thx-mouse{animation:none!important}}

/* 구석 달로: 장면의 대사에 맞춘 표정 그림(밝기는 위의 필터로 따로) */
.dwrap .dalo{width:118px}
.dwrap .stars{width:118px;aspect-ratio:300/350}
.hpal{left:92px}

/* 캄캄한 처음에도 달로의 얼굴(표정)은 알아볼 수 있게 */
.dwrap .dalo{filter:brightness(calc(.72 + var(--lum,0)*.4)) saturate(calc(.7 + var(--lum,0)*.4))!important}

/* ===================== 5차(대표 댓글) ===================== */
/* 달로의 밝기·별빛: 시작 25% → 한 동을 다 밝힐 때마다 25%씩(--glow). 화면 전체의 미션별 10% 밝기와는 별개 */
.dwrap .dalo{filter:brightness(calc(.5 + var(--glow,.25)*.62)) saturate(calc(.45 + var(--glow,.25)*.7))!important}
.cfull,#thx .thx-dalo,.fm-dalo,.p100wrap img{filter:brightness(calc(.56 + var(--glow,.25)*.5)) saturate(calc(.5 + var(--glow,.25)*.6)) drop-shadow(0 0 16px rgba(0,0,0,.55))!important}
body[data-glow="4"] .dwrap .dalo{filter:brightness(1.12) saturate(1.15) drop-shadow(0 0 7px rgba(255,236,170,.95)) drop-shadow(0 0 16px rgba(255,214,120,.7))!important}
body[data-glow="4"] .cfull,body[data-glow="4"] #thx .thx-dalo,body[data-glow="4"] .fm-dalo,body[data-glow="4"] .p100wrap img{filter:brightness(1.1) saturate(1.15) drop-shadow(0 0 12px rgba(255,236,170,.95)) drop-shadow(0 0 38px rgba(255,214,120,.7))!important}
/* 별: 25%에 둘, 50%에 넷, 75%에 여섯, 100%에는 여섯 모두 크고 빠르게 */
body .stars{display:block}
.stars i{display:none}
body[data-glow="1"] .stars i:nth-child(-n+2),body[data-glow="2"] .stars i:nth-child(-n+4),body[data-glow="3"] .stars i,body[data-glow="4"] .stars i{display:block}
body[data-glow="2"] .stars i{animation-duration:2.8s}
body[data-glow="3"] .stars i{animation-duration:2.3s;width:6px;height:6px}
body[data-glow="4"] .stars i{animation-duration:1.5s;width:8px;height:8px;margin:-4px}
body[data-glow="3"] .bstars i{width:10px;height:10px;margin:-5px}body[data-glow="4"] .bstars i{width:13px;height:13px;margin:-6.5px}
/* 100%: 머리 뒤로 은은한 후광(빛 번짐) */
.halo,.bhalo{position:absolute;pointer-events:none;border-radius:50%;opacity:0;transition:opacity 1.2s;background:radial-gradient(closest-side,rgba(255,240,190,.9),rgba(255,220,140,.5) 45%,rgba(255,214,120,.18) 70%,rgba(255,214,120,0))}
.halo{left:-22px;bottom:14px;width:162px;height:162px}
body[data-glow="4"] .halo{opacity:1;animation:halo 3.2s ease-in-out infinite alternate}
#cine,#thx{--bh:min(310px,41dvh)}#fullmap{--bh:min(200px,28dvh)}
.bhalo{left:calc(-8px - var(--bh)*.07);bottom:calc(-4px + var(--bh)*.02);width:calc(var(--bh)*1.2);height:calc(var(--bh)*1.2)}
body[data-glow="4"] #cine.withdalo .bhalo,body[data-glow="4"] #fullmap.withdalo .bhalo,body[data-glow="4"] #thx.on .bhalo,body[data-glow="4"] #p100.on .bhalo{opacity:1;animation:halo 3.2s ease-in-out infinite alternate}
@keyframes halo{from{scale:.94;opacity:.75}to{scale:1.05;opacity:1}}
/* 한 동을 다 밝힌 순간: 달로에게 빛이 한 번 번진다 */
body.glowup .cfull,body.glowup .dwrap .dalo{animation:glowup 1.8s ease-out!important}
@keyframes glowup{0%{filter:brightness(.7)}25%{filter:brightness(1.7) drop-shadow(0 0 26px rgba(255,236,170,1))}100%{filter:brightness(1)}}
/* 100% 달로 크게 보기 */
#p100{position:absolute;inset:0;z-index:19;--bh:min(470px,60dvh);pointer-events:none}
.p100wrap{position:absolute;left:50%;bottom:-6px;width:calc(var(--bh)*.921);height:var(--bh);translate:-50% 0}
.p100wrap img{position:absolute;inset:0;width:100%;height:100%;transform:translateY(104%);transition:transform .45s cubic-bezier(.3,1.3,.5,1);animation:idleb 3.6s ease-in-out infinite alternate}
#p100.on .p100wrap img{transform:none}
.p100wrap .bhalo{left:calc(var(--bh)*-.07);bottom:calc(var(--bh)*.03);width:calc(var(--bh)*1.2);height:calc(var(--bh)*1.2)}
.p100wrap .bstars{left:0;bottom:0;width:100%;height:100%;aspect-ratio:auto}
#p100:not(.on) .bstars{display:none}
.pline{position:absolute;left:16px;right:16px;top:104px;color:var(--ink);background:#FFFDF8;border:1.5px solid var(--ink);border-radius:22px;padding:13px 16px;font-size:16px;line-height:1.55;font-weight:500;text-align:center;text-wrap:balance;box-shadow:0 3px 0 var(--ink),0 12px 16px -6px rgba(0,0,0,.6)}
.pline b{font-weight:800}
body.pv2 .allbtn{display:block}

/* 전구가 살랑살랑: 모든 전구 줄에(꺼진 전구, 다른 동 줄, 다 켜진 줄 모두). 조금 더 보이게 */
.bulb{animation:breeze 3.6s ease-in-out infinite!important;animation-delay:calc(var(--dl,0ms)*-13)!important}
@keyframes breeze{0%,100%{rotate:-3.2deg}50%{rotate:3.2deg}}
.bulb.can{animation:sway 1.3s ease-in-out infinite!important}
@keyframes sway{0%,100%{rotate:-9deg}50%{rotate:9deg}}
.line::before{animation:wire 3.6s ease-in-out infinite}
@keyframes wire{0%,100%{translate:0 0}50%{translate:0 1.5px}}

/* 의견 남기기: 찍찍이가 아래의 버튼을 가리킨다 */
#thx.ask .thx-mouse{left:50%;top:calc(50% - 106px);width:90px;margin-left:-34px;transform-origin:50% 0;animation:pressdn 1s ease-in-out infinite}
@keyframes pressdn{0%,100%{translate:0 -6px}45%{translate:0 5px}}
@media (prefers-reduced-motion: reduce){.bulb,.line::before,.halo,.bhalo,.p100wrap img,body.glowup .cfull,body.glowup .dwrap .dalo{animation:none!important}}

/* 인물은 한 화면에 한 번만: 큰 장면·전체 지도·인사·100% 보기처럼 무대가 빠진 화면에서는 구석 달로와 전구 상자 뒤 찍찍이를 내린다 */
body.out .mouse,body.out .dwrap{transform:translateY(110%)!important}
#nb:not([hidden])~.boxwrap .mouse{transform:translateY(110%)!important}

/* ===================== 6차 ===================== */
/* 프레임을 세로로 늘린다: 타이틀을 화면 위로 붙이고, 그만큼 금색 틀과 지도 영역을 위로 늘려 꽉 차 보이게(680에서도 한 화면) */
.app{--st:24px;--sh:calc((var(--sw) - 32px)*905/764 + clamp(18px,calc(18px + (100dvh - 680px)*.4),84px))}
.well-wrap{top:9%}

/* 광고 게첨 팝업: 위에서 내려와 화면 위쪽 3/4을 덮는다(타이틀도 가린다). 아래 1/4에는 가로와 말풍선 */
#addim{position:absolute;inset:0;z-index:58;background:rgba(10,8,14,.6);opacity:0;pointer-events:none;transition:opacity .3s}
body.adopen #addim{opacity:1;pointer-events:auto}
#ad{position:absolute;left:0;right:0;top:0;z-index:60;height:75%;background:var(--paper);color:var(--ink);border-radius:0 0 26px 26px;box-shadow:0 0 0 1.5px #1E1A17,0 4px 0 #E2B24A,0 18px 40px rgba(0,0,0,.6);transform:translateY(-104%);transition:transform .42s cubic-bezier(.3,.9,.3,1);display:flex;flex-direction:column;overflow:hidden}
body.adopen #ad{transform:none}
.adhero{position:relative;flex:none;background:#14110f}
.adslides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.adslides::-webkit-scrollbar{display:none}
.adslide{flex:0 0 100%;scroll-snap-align:center}
.adslide img{width:100%;aspect-ratio:4/3;max-height:30dvh;object-fit:contain;display:block}
.adtag{position:absolute;left:12px;top:12px;z-index:2;font-size:12px;font-weight:700;background:rgba(30,26,23,.82);color:#fff;border-radius:999px;padding:3px 10px}
.adx{position:absolute;right:10px;top:10px;z-index:3;background:var(--pop);color:var(--ink);font-weight:800;font-size:14px;border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px;box-shadow:0 2px 0 var(--ink)}
.addots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px}
.addots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}.addots i.on{background:#fff}
.adttl{flex:none;background:#FFD21F;color:#12349B;border-block:1.5px solid var(--ink);padding:9px 14px 8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.adttl h2{margin:0;font-family:var(--f-disp);font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.5px;color:#12349B}
.adttl p{margin:0;font-size:14px;font-weight:400;color:#1E1A17}
.adbody{flex:1;min-height:0;overflow:auto;padding:12px 14px 16px;display:flex;flex-direction:column;gap:12px}
.adbody h3{margin:0 0 4px;font-size:15px;font-weight:700}.adbody h3 small{font-weight:400;font-size:12px;color:var(--ink2)}
.adchips{display:flex;flex-wrap:wrap;gap:6px}
.adchips span{font-size:12.5px;border:1.5px solid var(--ink);border-radius:999px;padding:2px 10px;background:#fff}.adchips span.g{background:var(--butter)}
.adprice{border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff}
.adprice div{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;font-size:14.5px}
.adprice div+div{border-top:1px dashed #E6DCCD}
.adprice b{font-variant-numeric:tabular-nums;font-weight:900;white-space:nowrap;color:#D3261C;font-size:16px}
.adinfo{font-size:13.5px;color:var(--ink2);margin:0}
.adlinks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.adlk{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:1.5px solid var(--ink);border-radius:14px;padding:9px 12px;background:#fff;box-shadow:0 3px 0 var(--ink);color:var(--ink);font-weight:700;font-size:15px}
.adlk small{font-weight:400;font-size:12px;color:var(--ink2)}
.adlk.ig{background:#FBD9E3}.adlk.yt{background:#FBD3CB}.adlk.mp{background:#D5EED9}.adlk.tl{background:#D9E6F5}
.adperk{border:1.5px solid var(--ink);border-radius:14px;padding:9px 12px;background:#D3261C;color:#fff;font-size:14.5px;box-shadow:0 3px 0 var(--ink)}
.adperk b{color:#FFD21F;font-weight:900}
.adguide{position:absolute;left:0;right:0;bottom:0;height:25%;z-index:61;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;padding:0 10px 0 12px;opacity:0;transform:translateY(20px);transition:opacity .3s .2s,transform .35s .2s;pointer-events:none}
body.adopen .adguide{opacity:1;transform:none;pointer-events:auto}
.adguide img{height:calc(25dvh - 14px);min-height:130px;width:auto;display:block;align-self:end;margin-bottom:-14px;transform-origin:50% 100%;animation:adbob 2.6s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
@keyframes adbob{50%{transform:translateY(-3px) rotate(-1.5deg)}}
.adbub{position:relative;align-self:center;margin:0 0 34px 0;background:#FFFDF8;color:var(--ink);border:1.5px solid var(--ink);border-radius:18px;padding:9px 13px;font-size:14px;line-height:1.5;box-shadow:0 3px 0 var(--ink);text-wrap:balance;word-break:keep-all}
.adbub .who{display:block;font-size:12px;font-weight:700;color:#8a5a12}
.adbub::before{content:"";position:absolute;right:-7px;bottom:16px;width:12px;height:12px;background:#FFFDF8;border-right:1.5px solid var(--ink);border-top:1.5px solid var(--ink);transform:rotate(45deg)}
#adtoast{position:absolute;left:50%;top:calc(75% + 8px);transform:translateX(-50%);z-index:62;background:rgba(30,26,23,.92);color:#fff;border-radius:999px;padding:7px 14px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
#adtoast.on{opacity:1}
/* 팝업이 열려 있는 동안: 달로·찍찍이·기존 말풍선·전구 줄을 내려 인물이 겹쳐 보이지 않게. 다음 장면 버튼은 아래 칸으로 */
body.adopen .dwrap,body.adopen .mouse,body.adopen .bubble,body.adopen .boxwrap,body.adopen .fm-dalo,body.adopen .fm-line,body.adopen .bstars,body.adopen .bhalo,body.adopen .prompt,body.adopen .fm-ad,body.adopen .fm-note{display:none!important}
body.adopen .nextbtn{top:auto;bottom:8px;z-index:63}
/* 전체 지도에서: 반짝이는 가게를 눌러 보라는 안내 */
.fm-ad{position:absolute;right:18px;bottom:calc(min(200px,28dvh) + 12px);z-index:9;font-size:12px;font-weight:700;color:var(--ink);background:var(--butter);border:1.5px solid var(--ink);border-radius:999px;padding:3px 10px;display:none}
#fullmap.on~.fm-ad{display:block}
@media (prefers-reduced-motion: reduce){#ad,#addim,.adguide{transition:none!important}.adguide img{animation:none}}

/* 가게 안내의 이름표는 글자만 */
.adbub .who{background:none;padding:0;margin:0;border-radius:0;font-family:var(--f-body)}

/* ---- 가동판에서 더한 놀이 ---- */
.gamebox .gvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;opacity:0;transition:opacity .35s;pointer-events:none}
.gamebox .gvid.on{opacity:1}
.gamebox .glay.on{opacity:1}
.gshade{position:absolute;inset:0;z-index:2;background:#0b0914;opacity:.75;transition:opacity .3s;pointer-events:none}
.gring{position:absolute;z-index:6;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:3px solid #FFE9AA;background:rgba(255,233,170,.18);box-shadow:0 0 0 0 rgba(255,233,170,.7);animation:gpulse 1.4s infinite;padding:0;cursor:pointer}
@keyframes gpulse{70%{box-shadow:0 0 0 18px rgba(255,233,170,0)}100%{box-shadow:0 0 0 0 rgba(255,233,170,0)}}
.gthud{animation:gthud .25s}
@keyframes gthud{30%{transform:translateY(5px)}}
.ggrab{position:absolute;z-index:6;touch-action:none;cursor:grab;border-radius:10px;border:2px dashed rgba(255,233,170,.75);background:linear-gradient(90deg,rgba(255,233,170,.22),transparent)}
.gwheel{position:absolute;left:50%;top:52%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:6;touch-action:none;cursor:grab;border-radius:50%;transition:opacity .5s}
.gwheel.off{opacity:0;pointer-events:none}
.gwheel i{position:absolute;inset:0;border-radius:50%;border:6px dashed #FFE9AA;box-shadow:0 0 14px rgba(255,233,170,.6),inset 0 0 14px rgba(255,233,170,.35)}
.gwheel i::after{content:"";position:absolute;left:50%;top:-4px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#FFE9AA;box-shadow:0 0 10px #FFE9AA}
.gfish{position:absolute;z-index:6;width:15%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2.5px solid #FFE9AA;background:rgba(255,233,170,.2);padding:0;cursor:pointer;animation:gpulse 1.6s infinite;transform-origin:50% -120%}
.gfish.on{animation:gswing 1.1s ease-in-out infinite;border-color:#9FE3C4;background:rgba(159,227,196,.3)}
@keyframes gswing{0%,100%{transform:translate(-50%,-50%) rotate(-9deg)}50%{transform:translate(-50%,-50%) rotate(9deg)}}
@media (prefers-reduced-motion:reduce){.gring,.gfish,.gfish.on{animation:none}}

/* ---- 찍기 버튼: 금테 두른 남색 렌즈. 전구 줄 한가운데(왼쪽=켠 전구, 오른쪽=아직 꺼진 전구) ---- */
.cam{position:relative;z-index:6;width:70px;height:70px;flex:none;border-radius:50%;border:0;padding:4px;cursor:pointer;
 background:linear-gradient(145deg,#FBE7A6,#B9842A 42%,#F6D98A 62%,#8E6119);box-shadow:0 0 0 1.5px #1E1A17,0 4px 10px rgba(0,0,0,.55),0 0 18px rgba(255,214,110,.45);transition:transform .25s,opacity .25s}
.cam span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;height:100%;border-radius:50%;color:#FFE9AA;
 background:radial-gradient(circle at 34% 26%,#4a4470,#231f3d 58%,#14112a);box-shadow:inset 0 0 0 1.5px rgba(30,26,23,.9),inset 0 2px 6px rgba(255,255,255,.18)}
.cam svg{width:26px;height:26px;filter:drop-shadow(0 0 4px rgba(255,233,170,.7))}
.cam b{font-family:var(--f-body);font-size:10.5px;font-weight:700;line-height:1;letter-spacing:-.2px;color:#FFF6D8}
.cam:active{transform:translateY(2px) scale(.97)}
body[data-phase=intro] .cam,body.out .cam{opacity:0;pointer-events:none;transform:scale(.7)}
@media (prefers-reduced-motion:no-preference){.cam{animation:campulse 2.6s ease-in-out infinite}}
@keyframes campulse{50%{box-shadow:0 0 0 1.5px #1E1A17,0 4px 10px rgba(0,0,0,.55),0 0 0 6px rgba(255,233,170,.14),0 0 26px rgba(255,214,110,.8)}}
.line{position:relative}
.line .cam{position:absolute;left:50%;top:-4px;margin-left:-35px;margin-top:0}
.line .bwin{position:absolute;top:0;height:67px;display:flex;align-items:flex-start}
.line .bwin.on{right:calc(50% + 41px);width:88px;justify-content:flex-end}
.line .bwin.off{left:calc(50% + 41px);width:132px;justify-content:flex-start}
.line .bwin .bulb{flex:0 0 44px;width:44px;max-width:44px}
@media (prefers-reduced-motion:no-preference){.line .bwin.mv .bulb{animation:bslide .5s cubic-bezier(.3,.9,.3,1)}}
@keyframes bslide{from{translate:44px 0}to{translate:0 0}}
/* 시연용이던 '여기를 누르세요' 깜빡이는 금빛 동그라미는 뺀다 */
.bulb.start::after{display:none!important}

/* ---- 현장 테스트판 ---- */
body.live [data-next],body.live [data-allon],body.live #demo{display:none!important}
.camwrap{position:fixed;inset:0;z-index:200;background:#0b0914;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}
.camwrap video{width:100%;max-width:480px;aspect-ratio:3/4;object-fit:cover;border-radius:18px;background:#000}
.camframe{position:absolute;left:50%;top:50%;width:min(56vw,260px);aspect-ratio:1;transform:translate(-50%,-60%);border:3px solid #FFE9AA;border-radius:16px;box-shadow:0 0 0 2000px rgba(11,9,20,.35);pointer-events:none}
.camtip{color:#FFF6D8;font-size:15px;text-align:center;max-width:320px;line-height:1.45}
.camrow{display:flex;gap:10px}
.camrow .camph,.camrow button{font:inherit;font-weight:700;font-size:15px;border:1.5px solid #1E1A17;border-radius:999px;padding:10px 18px;box-shadow:0 3px 0 #1E1A17;cursor:pointer}
.camrow .camph{background:#F6CF5E;color:#1E1A17}.camrow button{background:#FFFDF8;color:#1E1A17}