@font-face{font-family:'Paperlogy';font-weight:500;src:url(../fonts/Paperlogy-5Medium.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Paperlogy';font-weight:700;src:url(../fonts/Paperlogy-7Bold.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Paperlogy';font-weight:800;src:url(../fonts/Paperlogy-8ExtraBold.woff2) format('woff2');font-display:swap}
:root{--ink:#2c2a5c;--ink2:#4b4a86;--sky:#4aa3ff;--pink:#ff7eb6;--lav:#a98bff;--gold:#ffc83d;--mint:#6fd9b9;--coral:#ff7a59;--cream:#fffaf0;--paper:#fffaf0;--sh:rgba(44,42,92,.38)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#2c2a5c;font-family:'Paperlogy','Noto Sans KR','Malgun Gothic',sans-serif;font-weight:500;color:var(--ink);word-break:keep-all;overflow-wrap:break-word;user-select:none;-webkit-user-select:none}
input,textarea,button{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img{display:block;max-width:100%;-webkit-user-drag:none}
b,strong{font-weight:800}
:focus-visible{outline:5px solid var(--sky);outline-offset:3px;border-radius:14px}

/* 무대 : 1920×1080 고정, 창 크기에 맞춰 확대·축소 */
#stage{position:fixed;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;font-size:30px;line-height:1.5;background:transparent}
#stage{z-index:1}
#bgs{position:fixed;inset:0;z-index:0;background:#bfe0ff}
.bgl{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .35s}
.bgl.on{opacity:1}
#fx{position:absolute;inset:0;width:1920px;height:1080px;pointer-events:none;z-index:40}

/* 머리글 */
#hdr{position:absolute;left:0;right:0;top:0;height:90px;white-space:nowrap;border:0;border-bottom:5px solid var(--ink);border-radius:0;background:linear-gradient(180deg,#fffdf6,#fff1d6);box-shadow:5px 5px 0 var(--sh);display:flex;align-items:center;padding:0 22px 0 18px;gap:14px;z-index:20}
body[data-scene=title] #hdr,body[data-scene=title] #dock,body[data-scene=intro] #dock,body[data-scene=end] #dock{display:none}
.brand{display:flex;align-items:center;gap:10px;font-size:32px;font-weight:800;letter-spacing:-.03em}
.brand img{width:54px;height:54px;object-fit:contain}
.brand b{background:linear-gradient(90deg,#ff5f9e,#8d6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
#pips{display:flex;gap:8px;margin:0 auto}
.pip{height:54px;padding:0 24px 0 16px;border:3px solid var(--ink);border-radius:27px;background:#e9e6fb;font-size:21px;font-weight:800;color:#7a78a8;display:flex;align-items:center;gap:8px;transition:transform .2s;box-shadow:3px 3px 0 var(--sh)}
.pip i{font-style:normal;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--ink);font-size:19px;color:var(--ink)}
.pip.done{background:#d4f6e8;color:#1f6a52}.pip.done i{background:var(--mint)}
.pip.cur{background:var(--pink);color:#fff;transform:scale(1.08);text-shadow:0 2px 0 rgba(44,42,92,.4)}.pip.cur i{background:var(--gold)}
.pip:hover{transform:translateY(-3px)}
.hbs{display:flex;align-items:center;gap:8px}
.hb{height:46px;padding:0 14px;font-size:20px;font-weight:700;border:3px solid var(--ink);border-radius:24px;background:#fff;box-shadow:3px 3px 0 var(--sh);white-space:nowrap;transition:transform .12s,box-shadow .12s}
.hb:hover{transform:translateY(-2px);box-shadow:3px 5px 0 var(--sh)}
.hb:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--sh)}
.hlogo img{height:44px;margin-left:4px}

/* 말랑이 안내 */
#dock{position:absolute;left:0;top:104px;width:356px;height:964px;z-index:8;pointer-events:none}
.bubble{position:absolute;left:14px;top:0;width:330px;border-left-width:0;border-radius:0 30px 30px 0;min-height:116px;max-height:340px;padding:18px 22px;border:4px solid var(--ink);border-radius:30px;background:var(--cream);box-shadow:5px 5px 0 var(--sh);font-size:26px;line-height:1.5;font-weight:700;pointer-events:auto}
.bubble:after{content:"";position:absolute;left:110px;bottom:-24px;width:34px;height:34px;background:var(--cream);border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(45deg) skew(8deg,8deg);border-radius:0 0 8px 0}
.bubble em{font-style:normal;background:#ffe28a;border-radius:6px;padding:0 4px}
#mimg{position:absolute;left:50%;bottom:78px;width:300px;z-index:2;filter:drop-shadow(0 8px 0 rgba(44,42,92,.22));transform-origin:50% 100%}
.xpbox{position:absolute;left:0;bottom:0;height:60px;padding:0 24px 0 14px;border-left-width:0;border-radius:0 30px 30px 0;border:4px solid var(--ink);border-radius:30px;background:var(--cream);box-shadow:4px 4px 0 var(--sh);display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;pointer-events:auto}
.xpbox b{font-size:32px;min-width:42px;text-align:right;color:#d6458a}
.xpbox img{width:44px;height:44px;object-fit:contain}
/* 지도에서는 안내 친구를 오른쪽 아래로 */
body[data-scene=map] #dock{left:1556px;top:560px;width:342px;height:500px}
body[data-scene=map] .bubble{top:0}
body[data-scene=map] #mimg{width:230px;bottom:70px}

/* 본문 */
#app{position:absolute;left:372px;top:100px;width:1548px;height:980px;display:flex;flex-direction:column;z-index:6;outline:0}
#app.full{left:0;top:0;width:1920px;height:1080px}
.pan{position:relative;flex:1;min-height:0;border:5px solid var(--ink);border-right-width:0;border-bottom-width:0;border-radius:32px 0 0 0;background:rgba(255,250,240,.94);box-shadow:9px 9px 0 var(--sh);display:flex;flex-direction:column;overflow:hidden}
.band{height:82px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:linear-gradient(90deg,#8d6bff,#4aa3ff);border-bottom:5px solid var(--ink);color:#fff}
.band h3{font-size:42px;font-weight:800;letter-spacing:-.02em;text-shadow:0 3px 0 rgba(44,42,92,.5)}
.band .tag{height:46px;line-height:42px;padding:0 22px;font-size:25px;font-weight:800;border:3px solid var(--ink);border-radius:23px;background:var(--gold);color:var(--ink)}
.pbody{flex:1;min-height:0;position:relative;padding:24px 32px;display:flex;flex-direction:column}

/* 버튼 */
.btn{position:relative;min-width:250px;height:88px;padding:0 54px 4px;font-size:36px;font-weight:800;color:#fff;text-shadow:0 3px 0 rgba(44,42,92,.5);border:5px solid var(--ink);border-radius:46px;background:linear-gradient(180deg,#ff9ccb,#ff5fa3);box-shadow:0 7px 0 var(--ink),0 12px 0 var(--sh);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover:not([disabled]){transform:translateY(-3px) scale(1.03)}
.btn:active:not([disabled]){transform:translateY(5px);box-shadow:0 2px 0 var(--ink),0 4px 0 var(--sh)}
.btn.y{background:linear-gradient(180deg,#ffe27a,#ffc02e);color:var(--ink);text-shadow:none}
.btn.b{background:linear-gradient(180deg,#8cc8ff,#3f8cf0)}
.btn[disabled]{background:#d9d7ea;color:#8a88b3;text-shadow:none;box-shadow:0 4px 0 #a9a7c9;cursor:not-allowed}
.btn.sm{min-width:0;height:66px;font-size:28px;padding:0 34px 3px;border-radius:34px}
.btn.pulse:not([disabled]){animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.inp{width:100%;min-height:76px;padding:10px 24px;border:5px solid var(--ink);border-radius:26px;background:#fff;font-size:36px;font-weight:800;text-align:center;outline:0;user-select:text;-webkit-user-select:text;box-shadow:inset 0 4px 0 rgba(44,42,92,.1)}
.inp:focus{border-color:var(--pink);box-shadow:0 0 0 6px rgba(255,126,182,.4)}

/* 표지 */
.ctitle{position:absolute;left:0;right:0;top:70px;text-align:center;z-index:3}
.ctitle .kick{display:inline-block;padding:6px 30px;border:4px solid var(--ink);border-radius:36px;background:var(--gold);font-size:28px;font-weight:800;box-shadow:4px 4px 0 var(--sh)}
.ctitle .logo{display:block;width:1040px;margin:6px auto 0;filter:drop-shadow(0 12px 0 rgba(44,42,92,.28))}
.ctitle .sub{margin-top:10px;font-size:40px;font-weight:800;color:var(--ink);background:rgba(255,255,255,.86);display:inline-block;padding:6px 36px;border-radius:40px;border:4px solid var(--ink);box-shadow:4px 4px 0 var(--sh)}
.ctitle .sub b{color:#8d3fe0}
.tm{position:absolute;left:70px;bottom:0;width:430px;filter:drop-shadow(0 12px 0 rgba(44,42,92,.25));transform-origin:50% 100%}
.startbox{position:absolute;left:1010px;bottom:120px;width:620px;display:flex;flex-direction:column;gap:22px;align-items:center;padding:30px 36px 34px;border:5px solid var(--ink);border-radius:40px;background:rgba(255,250,240,.95);box-shadow:8px 8px 0 var(--sh)}
.startbox label{font-size:28px;font-weight:800;width:100%;display:flex;flex-direction:column;gap:10px;text-align:center}
.mini{position:absolute;right:26px;top:22px;display:flex;gap:10px}

/* 말하는 장면(도입·엔딩) */
.talk{position:absolute;inset:0}
.talk .big{position:absolute;left:150px;bottom:30px;width:640px;filter:drop-shadow(0 12px 0 rgba(44,42,92,.25));transform-origin:50% 100%}
.talk .say{position:absolute;left:840px;top:250px;width:920px;min-height:330px;padding:44px 54px 40px;border:5px solid var(--ink);border-radius:46px;background:var(--cream);box-shadow:9px 9px 0 var(--sh);font-size:50px;line-height:1.5;font-weight:800}
.talk .say:before{content:"";position:absolute;left:-30px;top:150px;width:50px;height:50px;background:var(--cream);border-left:5px solid var(--ink);border-bottom:5px solid var(--ink);transform:rotate(45deg)}
.talk .say em{font-style:normal;background:linear-gradient(transparent 55%,#ffd2e8 55%)}
.talk .say .nx{position:absolute;right:34px;bottom:-44px}

/* 지도 */
#pins{position:absolute;inset:0}
.pin{position:absolute;transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center;cursor:pointer;animation:bob 3s ease-in-out infinite}
.pin:nth-child(2){animation-delay:-.7s}.pin:nth-child(3){animation-delay:-1.4s}.pin:nth-child(4){animation-delay:-2.1s}
@keyframes bob{50%{transform:translate(-50%,-14px)}}
.pin .pl{margin-top:16px;padding:6px 26px 8px;border:5px solid var(--ink);border-radius:30px;background:var(--cream);box-shadow:5px 5px 0 var(--sh);text-align:center;white-space:nowrap}
.pin .pl b{display:block;font-size:34px;line-height:1.2}
.pin .pl small{display:block;font-size:22px;font-weight:700;color:var(--ink2)}
.pin.lock .pl small{color:#c0397a}
.endbtn{position:absolute;left:50%;bottom:62px;transform:translateX(-50%)}

/* 모달 */
#modal{position:absolute;inset:0;z-index:30;background:rgba(44,42,92,.55);display:flex;align-items:center;justify-content:center}
#modal[hidden]{display:none}
.card{position:relative;width:1180px;padding:44px 56px 48px;border:6px solid var(--ink);border-radius:46px;background:var(--cream);box-shadow:12px 12px 0 var(--sh)}
.card h2{font-size:56px;line-height:1.2;font-weight:800;letter-spacing:-.03em}
.card .goal{display:inline-block;margin:14px 0 18px;padding:4px 26px;border:4px solid var(--ink);border-radius:30px;background:#e5dcff;font-size:30px;font-weight:800}
.card ul{list-style:none;font-size:32px;line-height:1.55;font-weight:700}
.card li{padding-left:50px;position:relative;margin-bottom:6px}
.card .ill{position:absolute;right:30px;top:-116px;width:340px;filter:drop-shadow(0 10px 0 rgba(44,42,92,.25))}
.card .row{display:flex;justify-content:flex-end;gap:24px;margin-top:26px}
.card.res{text-align:center;width:1100px}
.card.res .stars{display:flex;justify-content:center;gap:14px;margin:6px 0 4px}
.card.res .stars img{width:140px;transition:filter .3s}
.card.res .stars img.off{filter:grayscale(1) brightness(.85) opacity(.4)}
.card.res .mm{position:absolute;left:-150px;bottom:-30px;width:300px;filter:drop-shadow(0 8px 0 rgba(44,42,92,.25))}
.card.res p{font-size:34px;font-weight:700;line-height:1.5;margin:6px 120px 0 170px}
.card.res .row{justify-content:center}

/* 알림 */
#toast{position:absolute;left:50%;bottom:50px;transform:translate(-50%,30px);opacity:0;z-index:35;padding:12px 34px;border:4px solid var(--ink);border-radius:36px;background:var(--cream);font-size:30px;font-weight:800;box-shadow:5px 5px 0 var(--sh);transition:.3s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 미션2 : 온라인 vs 직접 대화 배틀 */
.hud2{display:flex;align-items:center;gap:26px;height:70px;flex:none}
.gauge{flex:1;height:50px;border:5px solid var(--ink);border-radius:30px;background:#fff;overflow:hidden;position:relative}
.gauge i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#9b7bff,#c9b3ff);transition:width .6s cubic-bezier(.3,1.4,.5,1)}
.gauge span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;text-shadow:0 2px 0 rgba(44,42,92,.6)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:2px 22px;border:4px solid var(--ink);border-radius:30px;background:var(--cream);font-size:26px;font-weight:800;box-shadow:3px 4px 0 var(--sh)}
.chip.hot{background:var(--gold)}
.tbar{height:16px;border:3px solid var(--ink);border-radius:10px;background:#fff;overflow:hidden;margin:6px 4px 0;flex:none}
.tbar i{display:block;height:100%;width:100%;background:var(--mint)}
.stmt{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.stmt .cardq{width:1220px;min-height:250px;padding:38px 60px;border:6px solid var(--ink);border-radius:44px;background:#fff;box-shadow:10px 10px 0 var(--sh);text-align:center;font-size:56px;line-height:1.4;font-weight:800;position:relative}
.stmt .cardq small{position:absolute;left:34px;top:-26px;padding:2px 24px;border:4px solid var(--ink);border-radius:26px;background:var(--gold);font-size:25px;font-weight:800}
.fb{height:96px;flex:none;display:flex;align-items:center;justify-content:center;font-size:31px;font-weight:700;text-align:center;line-height:1.35;padding:0 20px}
.fb.ok{color:#1d7a5a}.fb.no{color:#c0285f}
.lanes{display:flex;gap:26px;height:236px;flex:none}
.lane{flex:1;border:6px solid var(--ink);border-radius:38px;box-shadow:0 9px 0 var(--ink),0 15px 0 var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:46px;font-weight:800;color:#fff;text-shadow:0 3px 0 rgba(44,42,92,.5);transition:transform .12s,box-shadow .12s,filter .2s;margin-bottom:16px;line-height:1.15}
.lane small{font-size:24px;font-weight:700;text-shadow:none;opacity:.95}
.lane .em{font-size:70px;line-height:1;text-shadow:none}
.lane.on{background:linear-gradient(180deg,#8cc8ff,#3f8cf0)}
.lane.both{background:linear-gradient(180deg,#9aebd0,#2fbf92)}
.lane.off{background:linear-gradient(180deg,#ffb08a,#ff6f4c)}
.lane:hover:not([disabled]){transform:translateY(-6px)}
.lane:active:not([disabled]){transform:translateY(6px);box-shadow:0 3px 0 var(--ink)}
.lane.right{outline:8px solid #fff;filter:brightness(1.05);animation:pulse .5s 2}
.lane.wrong{filter:grayscale(.6) brightness(.9);animation:shake .4s}
.lane[disabled]{cursor:default}
@keyframes shake{20%{transform:translateX(-14px)}40%{transform:translateX(14px)}60%{transform:translateX(-9px)}80%{transform:translateX(9px)}}

/* 미션3 : 단톡방 구조대 */
.rescue{flex:1;min-height:0;display:flex;gap:30px}
.phone{width:820px;flex:none;border:8px solid var(--ink);border-radius:56px;background:linear-gradient(180deg,#e6f3ff,#f5ecff);box-shadow:0 0 0 6px #fff,10px 10px 0 6px var(--sh);display:flex;flex-direction:column;overflow:hidden;position:relative;margin:6px 8px 12px}
.ptop{height:76px;flex:none;background:linear-gradient(90deg,#8d6bff,#4aa3ff);border-bottom:5px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 30px;color:#fff;font-size:30px;font-weight:800;text-shadow:0 2px 0 rgba(44,42,92,.5)}
.ptop small{font-size:22px;font-weight:700;opacity:.95}
.chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:14px 20px;overflow:hidden}
.pbar{height:72px;flex:none;border-top:4px solid var(--ink);background:#fff;display:flex;align-items:center;padding:0 24px;gap:14px;font-size:26px;font-weight:700;color:#9a98c4}
.pbar i{flex:1;height:44px;border-radius:22px;background:#efedfb}
.msg{flex:none;display:flex;gap:14px;align-items:flex-start;cursor:pointer;animation:msgin .4s cubic-bezier(.3,1.5,.5,1);position:relative}
@keyframes msgin{from{opacity:0;transform:translateY(40px) scale(.9)}}
.av{width:72px;height:72px;flex:none;border:4px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:40px;box-shadow:2px 3px 0 var(--sh)}
.mb{flex:1;min-width:0}
.nm{font-size:22px;font-weight:700;color:var(--ink2);margin-left:6px}
.nm span{font-weight:500;margin-left:8px;color:#8a88b3}
.bub{margin-top:2px;padding:12px 22px 14px;border:4px solid var(--ink);border-radius:8px 28px 28px 28px;background:#fff;font-size:29px;line-height:1.4;font-weight:700;box-shadow:3px 4px 0 var(--sh);transition:transform .12s;position:relative;overflow:hidden}
.msg:hover .bub{transform:translateX(6px)}
.bub .tm2{position:absolute;left:0;bottom:0;height:7px;width:100%;background:#cfc4ff;transform-origin:0 50%}
.photo{display:inline-block;margin-top:4px;padding:8px 22px;border:3px dashed var(--ink2);border-radius:14px;background:#f2f0ff;font-size:24px}
.msg.saved .bub{background:#d4f6e8;animation:pop .45s}
.msg.saved:after{content:"구조!";position:absolute;right:10px;top:8px;padding:2px 22px;border:4px solid var(--ink);border-radius:26px;background:var(--gold);font-size:30px;font-weight:800;box-shadow:3px 3px 0 var(--sh)}
.msg.oops .bub{background:#ffd9e4;animation:shake .4s}
.msg.gone{animation:fadeout .45s forwards}
@keyframes pop{50%{transform:scale(1.07)}}
@keyframes fadeout{to{opacity:0;transform:translateX(-60px)}}
.side{flex:1;display:flex;flex-direction:column;gap:20px;min-width:0;padding-top:6px}
.box{border:5px solid var(--ink);border-radius:30px;background:#fff;box-shadow:5px 5px 0 var(--sh);padding:16px 24px}
.hearts{display:flex;gap:10px;align-items:center}
.hearts img{width:78px;transition:.3s}
.hearts img.off{filter:grayscale(1) opacity(.35);transform:scale(.8)}
.score{display:flex;justify-content:space-between;align-items:center;font-size:30px;font-weight:800}
.score b{font-size:62px;color:#d6458a;line-height:1}
.saved-l{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.saved-l h4{font-size:28px;font-weight:800;margin-bottom:8px}
.tags{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.tg{padding:3px 18px;border:3px solid var(--ink);border-radius:24px;background:#e5dcff;font-size:24px;font-weight:800;animation:pop .5s}
.tip{background:#fff3c4;font-size:26px;font-weight:700;line-height:1.45}
.fix{position:absolute;left:20px;right:20px;top:96px;z-index:5;padding:16px 26px;border:5px solid var(--ink);border-radius:30px;background:var(--cream);box-shadow:6px 6px 0 var(--sh);font-size:28px;font-weight:700;line-height:1.4;transform:translateY(24px);opacity:0;transition:.3s;pointer-events:none}
.fix.on{transform:none;opacity:1}
.fix b{color:#1d7a5a}.fix .why{color:#c0285f}

#rot{position:fixed;inset:0;z-index:99;background:#2c2a5c;color:#fff;display:none;align-items:center;justify-content:center;flex-direction:column;font-size:30px;font-weight:800;gap:20px}
#rot img{width:200px}
@media (orientation:portrait){#rot{display:flex}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important}}

/* 인증서(엔딩) */
.cert{position:absolute;left:830px;top:210px;width:980px;height:770px;padding:128px 70px 30px;border:8px solid var(--ink);border-radius:48px;background:#fffaf0;box-shadow:12px 12px 0 var(--sh);text-align:center}
.cert:before{content:"";position:absolute;inset:14px;border:4px dashed #c9b3ff;border-radius:34px;pointer-events:none}
.cert .medal{position:absolute;left:50%;top:-96px;margin-left:-110px;width:220px;filter:drop-shadow(0 8px 0 rgba(44,42,92,.3))}
.cert .ckk{font-size:30px;font-weight:700;color:var(--ink2);margin-top:10px}
.cert h2{font-size:84px;line-height:1.15;font-weight:800;letter-spacing:-.04em;background:linear-gradient(90deg,#ff5f9e,#8d6bff,#3f8cf0);-webkit-background-clip:text;background-clip:text;color:transparent}
.cert .who{margin:16px 0 10px;font-size:46px}
.cert .who b{border-bottom:8px solid #ffd2e8;padding:0 14px}
.cert .cb{font-size:33px;line-height:1.6;font-weight:700}
.cert .cb em{font-style:normal;background:linear-gradient(transparent 55%,#ffe27a 55%)}
.cert .cs{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:36px;font-weight:800}
.cert .cs img{width:56px}.cert .cs b{font-size:50px;color:#d6458a}
.cert .cd{margin-top:6px;font-size:24px;color:#8a88b3;font-weight:700}
.cert .row2{position:absolute;left:0;right:0;bottom:-40px;display:flex;justify-content:center;gap:22px}

/* ── 번호 동그라미(이미지) ── */
.pin .bw{position:relative;width:124px;height:124px;display:grid;place-items:center;transition:transform .15s}
.pin:hover .bw{transform:scale(1.1)}
.pin .bd{position:relative;width:124px;filter:drop-shadow(0 8px 0 rgba(44,42,92,.3))}
.pin .rg{position:absolute;left:50%;top:50%;width:230px;margin:-115px 0 0 -115px;max-width:none;animation:glow 1.6s ease-in-out infinite;pointer-events:none}
@keyframes glow{50%{transform:scale(1.12);opacity:.75}}
.pin .pl{margin-top:10px}

/* ── 한 줄 글은 블록 정중앙 ── */
.btn,.hb,.band .tag,.chip,.pip,.tg,.card .goal,.ctitle .kick,.ctitle .sub,.xpbox,.lane,.gauge span,.ptop,#toast,.pin .pl{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1}
.hb,.card .goal,.ctitle .kick,.ctitle .sub,.chip,.tg{display:inline-flex}
.pin .pl{flex-direction:column;line-height:1.2}
.btn{padding:0 54px}.btn.sm{padding:0 34px}
.band .tag{line-height:1}
.ptop{justify-content:space-between}
.pip{padding:0 22px 0 12px}
.pip i{display:grid;place-items:center;line-height:1;padding:0}
.pip i img{width:24px;height:24px;object-fit:contain}
.xpbox{padding-top:0;padding-bottom:0}
.btn .ic{width:46px;height:46px;margin-right:12px;object-fit:contain}
.ic{width:1.15em;height:1.15em;object-fit:contain;display:inline-block;vertical-align:-.22em;margin-right:.3em}

/* ── 여러 줄 글은 의미 단위로 균형 있게 ── */
.bubble,.talk .say,.stmt .cardq,.fb,.fix,.bub,.tip,.card p,.cert .cb,.card li,.card .goal{text-wrap:balance;text-align:center}
.bubble{display:flex;align-items:center;justify-content:center;min-height:130px;padding:18px 20px}
.talk .say{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 60px 56px}
.stmt .cardq{display:flex;align-items:center;justify-content:center}
.stmt .cardq small{display:flex;align-items:center;justify-content:center;line-height:1}
.fb{gap:12px}
.fb span{text-wrap:balance}
.fb .ic{width:46px;height:46px;margin:0;flex:none}
.bub{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:74px;padding:10px 22px 14px}
.nm{text-align:left}
.tip{display:flex;align-items:center;justify-content:center;gap:14px;font-size:25px}
.tip .ic{width:56px;height:56px;margin:0;flex:none}
.card ul{text-align:center}
.card li{padding:0;margin-bottom:10px}
.card li:before{content:none}
.card h2{text-align:left}
.saved-l h4{display:flex;align-items:center;gap:8px}
.saved-l h4 .ic{width:44px;height:44px;margin:0}
.pt{display:flex;align-items:center;gap:10px}
.pt .ic{width:44px;height:44px;margin:0}
.fix b .ic{width:40px;height:40px;vertical-align:-.3em}
.msg.saved:after{display:flex;align-items:center;justify-content:center;line-height:1}

/* ── 아이콘·아바타 ── */
.lane{gap:6px}
.lane .li{width:104px;height:104px;object-fit:contain;margin:0;filter:drop-shadow(0 4px 0 rgba(44,42,92,.3))}
.lane b{font-size:46px;line-height:1.1}
.av{overflow:hidden;padding:0;background-clip:padding-box}
.av img{width:100%;height:100%;object-fit:cover}
.ico{display:flex;align-items:center;justify-content:center;gap:10px}
.ico .ci{width:52px;height:52px;object-fit:contain}
.photo{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.photo .ci{width:38px;height:38px}
.pbar{justify-content:center}

/* ── 디자인 보완 ── */
.pan{background:radial-gradient(rgba(141,107,255,.10) 2.5px,transparent 3px) 0 0/36px 36px,rgba(255,250,240,.96)}
.band{background:linear-gradient(90deg,#8d6bff,#5b8cff 60%,#3fb2ff)}
#hdr{background:linear-gradient(180deg,#fffdf6,#ffeccc)}
#dock:before{content:"";position:absolute;left:36px;bottom:92px;width:284px;height:64px;border-radius:50%;background:radial-gradient(rgba(44,42,92,.24),transparent 70%);z-index:1}
body[data-scene=map] #dock:before{left:48px;bottom:76px;width:240px;height:52px}
.tbar{height:22px;border-radius:12px}
.gauge{height:54px}
.gauge i{background:repeating-linear-gradient(135deg,#a98bff 0 22px,#9a78ff 22px 44px)}
.lane{position:relative}
.lane .key{position:absolute;left:20px;top:16px;width:50px;height:50px;border:4px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);text-shadow:none;display:grid;place-items:center;font-style:normal;font-size:28px;font-weight:800;line-height:1;box-shadow:2px 3px 0 var(--sh)}
.stmt .fog{position:absolute;right:-4px;top:-44px;width:230px;z-index:2;filter:drop-shadow(0 8px 0 rgba(44,42,92,.22));transform-origin:50% 100%;pointer-events:none}
.stmt .cardq{width:1160px;margin-right:60px;background:linear-gradient(180deg,#fff,#f6f1ff)}
.hud2 .chip{min-width:170px}
.phone{background:linear-gradient(180deg,#e6f3ff,#f5ecff)}
.msg .bub{background:#fff}
.side .box{background:linear-gradient(180deg,#fff,#faf6ff)}
.hearts{justify-content:center}
.score{padding:12px 26px}
.ctitle .sub{display:block;width:max-content;margin:14px auto 0;padding:12px 40px;line-height:1.1;white-space:nowrap}
.ctitle .kick{display:block;width:max-content;margin:0 auto;padding:10px 34px;line-height:1.1}

/* ── 표지 정리 ── */
.ctitle{top:64px}
.ctitle .logo{width:960px;margin:0 auto}
.ctitle .sublogo{display:block;width:900px;margin:-6px auto 0;filter:drop-shadow(0 8px 0 rgba(44,42,92,.25))}
.startbox{left:0;right:0;bottom:84px;width:auto;padding:0;border:0;background:none;box-shadow:none;flex-direction:row;justify-content:center}
.mini{align-items:center}
.mini .tlogo{height:62px;margin-left:8px;filter:drop-shadow(0 3px 0 rgba(44,42,92,.25))}
#pins{transform:scale(var(--k,1));transform-origin:960px 540px}
.cert .who .blank{display:inline-block;width:360px;height:0;border-bottom:6px solid var(--ink);margin-right:14px;vertical-align:-4px}
.av img{mix-blend-mode:multiply}
#bt{width:100%;text-align:center;text-wrap:balance}
.pip{padding:0 22px}
.xpbox{padding:0 24px}
.card.res p{margin:8px 30px 0;font-size:32px}
.card.res{padding-left:80px;padding-right:80px}

/* ═════════ 3차 개편 : 화면 너비 유동 · 글자 블록 · 새 단계 화면 ═════════ */
#stage{overflow:hidden}
#dock{left:0;top:100px;bottom:14px;height:auto;width:356px}
#app{left:372px;right:0;top:100px;bottom:0;width:auto;height:auto}
#app.full{left:0;right:0;top:0;bottom:0;width:auto;height:auto}
.c19{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px}
body[data-scene=map] #dock{left:auto;right:24px;top:auto;bottom:14px;width:342px;height:520px}
.brand .bi{height:60px;width:auto;object-fit:contain}
.brand .bt{font-size:32px;font-weight:800}
.hlogo{display:flex;align-items:center;transition:transform .15s}
.hlogo:hover,.tlogo:hover{transform:translateY(-2px) scale(1.04)}
.tlogo{display:flex}

/* 글자 블록 : 종이 느낌의 카드, 이름표, 형광펜 강조 */
.ln{display:block;text-wrap:balance;word-break:keep-all}
p,li,.tx,.rt,.pr,.qq{text-wrap:pretty}
.nt{position:absolute;left:22px;top:-24px;height:44px;padding:0 22px;display:flex;align-items:center;justify-content:center;border:4px solid var(--ink);border-radius:24px;background:linear-gradient(180deg,#b79bff,#8d6bff);color:#fff;font-size:24px;font-weight:800;line-height:1;text-shadow:0 2px 0 rgba(44,42,92,.45);box-shadow:3px 3px 0 var(--sh)}
.bubble,.talk .say,.stmt .cardq,.card,.fix,.tip,.box{background:linear-gradient(180deg,#fffefb,#fff6e4)}
.bubble{padding:34px 22px 22px;border-radius:0 34px 34px 0;font-size:27px;line-height:1.5;box-shadow:6px 6px 0 var(--sh),inset 0 -8px 0 rgba(255,200,120,.22)}
.bubble .nt{height:38px;font-size:21px;padding:0 18px;top:-20px}
#bt{width:100%;text-align:center}
.bubble em,.tip em,.fb em{font-style:normal;background:linear-gradient(transparent 58%,#ffe07a 58%)}
.talk .say{position:absolute;left:840px;top:250px;width:940px;min-height:340px;padding:60px 64px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:46px;font-size:50px;box-shadow:9px 9px 0 var(--sh),inset 0 -10px 0 rgba(255,200,120,.22)}
.talk .say .nt{left:40px;top:-30px;height:56px;font-size:32px;padding:0 30px;border-radius:30px}
.talk .say .tx{width:100%;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:50px;line-height:1.65;font-weight:800;letter-spacing:-.025em}
.talk .say .tx em{font-style:normal;background:linear-gradient(transparent 58%,#ffc9e2 58%)}
.talk .say .nrow{width:100%;display:flex;justify-content:flex-end;margin-top:20px}
.talk .say:before{top:170px}

/* 안내창 */
.card{border-radius:44px;box-shadow:12px 12px 0 var(--sh),inset 0 -10px 0 rgba(255,200,120,.2)}
.card .cs{position:absolute;left:56px;top:-26px;height:52px;padding:0 26px;display:flex;align-items:center;border:4px solid var(--ink);border-radius:28px;background:var(--gold);font-size:28px;font-weight:800;box-shadow:3px 3px 0 var(--sh)}
.card h2{padding-top:10px;font-size:58px}
.card .goal{display:flex;width:max-content;max-width:100%;margin:14px 0 22px;font-size:29px;padding:8px 28px}
.stl{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0 0 6px}
.stl li{display:flex;align-items:center;gap:20px;padding:12px 24px;border:4px solid var(--ink);border-radius:26px;background:#fff;font-size:32px;font-weight:700;line-height:1.3;box-shadow:3px 4px 0 var(--sh);text-align:left}
.stl li i{flex:none;width:52px;height:52px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:50%;background:var(--gold);font-style:normal;font-size:28px;font-weight:800;line-height:1}
.card .hp{font-size:36px;font-weight:700;line-height:1.6;text-align:center;margin:20px 0 6px}
.card.res .stamp{position:absolute;right:-70px;top:-90px;width:210px;filter:drop-shadow(0 8px 0 rgba(44,42,92,.28))}
.card.res .rt{font-size:34px;font-weight:700;line-height:1.55;margin:10px 20px 0;text-align:center}

/* 단계 머리말 */
.sh{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px;flex:none}
.sl{display:flex;align-items:center;height:54px;padding:0 26px;border:4px solid var(--ink);border-radius:30px;background:#e5dcff;font-size:27px;font-weight:800;line-height:1;white-space:nowrap}
.sh .pr{flex:1;font-size:30px;font-weight:700;line-height:1.4;text-align:left;padding-left:8px}
.sh .chip{margin-left:auto}
.hud2 .sl{flex:none}
.act{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:22px;min-height:96px;padding-bottom:6px}
.act .chip{margin-right:auto}
.fb{min-height:88px;height:auto;flex:none;font-size:30px;line-height:1.45}

/* 고르기 */
.pk{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;align-content:center;padding:10px 4px}
.pk>*{min-width:0}
.ck{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 18px;min-height:150px;padding:16px 26px 16px 90px;border:5px solid var(--ink);border-radius:30px;background:#fff;box-shadow:0 6px 0 var(--ink),0 10px 0 var(--sh);font-size:30px;font-weight:800;line-height:1.4;text-align:center;transition:transform .12s,background .2s}
.ck:hover:not([disabled]){transform:translateY(-3px)}
.ck:active:not([disabled]){transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.ck .bx{position:absolute;left:24px;top:50%;margin-top:-27px;width:54px;height:54px;display:grid;place-items:center;border:5px solid var(--ink);border-radius:16px;background:#fff}
.ck .bx img{width:34px;height:34px;object-fit:contain}
.ck>span{flex:1 1 100%;text-wrap:balance}
.ck small{flex:1 1 100%;font-size:24px;font-weight:700;color:var(--ink2);line-height:1.35;text-wrap:balance}
.ck.on{background:#fff0a6}.ck.on .bx{background:var(--mint)}
.ck.right{background:#d4f6e8}.ck.wrong{background:#ffd9e4;animation:shake .4s}
.ck[disabled]{cursor:default}
.own{flex:none;display:flex;gap:16px;align-items:center;padding:6px 4px 10px}
.inp2{flex:1;min-width:0;height:72px;padding:0 26px;border:5px solid var(--ink);border-radius:26px;background:#fff;font-size:30px;font-weight:700;outline:0;user-select:text;-webkit-user-select:text;text-align:left}
.inp2:focus{border-color:var(--pink);box-shadow:0 0 0 6px rgba(255,126,182,.4)}

/* 상황 · 문제 */
.stmt.s2{flex:none;min-height:230px}
.stmt.s2 .cardq{width:min(1160px,92%);margin:0 auto;min-height:190px;font-size:50px}
.opts{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:8px 4px 4px}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:210px;border:6px solid var(--ink);border-radius:36px;background:linear-gradient(180deg,#fff,#f1eaff);box-shadow:0 8px 0 var(--ink),0 14px 0 var(--sh);font-size:36px;font-weight:800;line-height:1.1;margin-bottom:14px;transition:transform .12s}
.opt .li{width:100px;height:100px;object-fit:contain}
.opt .key{position:absolute;left:16px;top:12px;width:44px;height:44px;border:4px solid var(--ink);border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-size:24px;font-weight:800;line-height:1}
.opt:hover:not([disabled]){transform:translateY(-5px)}
.opt.right{background:#d4f6e8}.opt.wrong{background:#ffd9e4;animation:shake .4s}
.opt[disabled]{cursor:default}
.ads{flex:none;display:flex;gap:22px;padding:6px 4px 12px}
.ad{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:132px;padding:14px 26px 14px 92px;border:5px solid var(--ink);border-radius:30px;background:linear-gradient(135deg,#8ec5ff,#b9a3ff);color:#fff;box-shadow:5px 6px 0 var(--sh)}
.ad p{font-size:34px;font-weight:800;line-height:1.35;text-align:center;text-shadow:0 3px 0 rgba(44,42,92,.45)}
.adk{position:absolute;left:22px;top:50%;margin-top:-28px;width:56px;height:56px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:50%;background:var(--gold);color:var(--ink);font-size:30px;font-weight:800;line-height:1}
.qq{flex:none;padding:12px 24px;font-size:34px;font-weight:800;line-height:1.45;text-align:center}
.qq.sm{font-size:30px;padding:8px 20px}
.mcs{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;justify-content:center;padding:4px}
.mc{position:relative;display:flex;align-items:center;justify-content:center;min-height:104px;padding:12px 28px 12px 96px;border:5px solid var(--ink);border-radius:28px;background:#fff;box-shadow:0 6px 0 var(--ink),0 10px 0 var(--sh);font-size:30px;font-weight:700;line-height:1.4;text-align:center;margin-bottom:6px;transition:transform .12s}
.mc>span{text-wrap:balance}
.mc .num{position:absolute;left:24px;top:50%;margin-top:-26px;width:52px;height:52px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:50%;background:var(--gold);font-style:normal;font-size:28px;font-weight:800;line-height:1}
.mc:hover:not([disabled]){transform:translateY(-3px)}
.mc.right{background:#d4f6e8}.mc.wrong{background:#ffd9e4;animation:shake .4s}
.mc[disabled]{cursor:default}
.sit{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.sitc{flex:none;display:flex;align-items:center;gap:26px;padding:16px 30px;border:5px solid var(--ink);border-radius:30px;background:linear-gradient(180deg,#fffefb,#fff2d6);box-shadow:5px 6px 0 var(--sh)}
.sitc .li{width:110px;height:110px;object-fit:contain;flex:none}
.sitc h4{font-size:36px;font-weight:800;line-height:1.2;text-align:left}
.sitc p{font-size:30px;font-weight:700;line-height:1.45;text-align:left;margin-top:4px}
.thought{flex:none;display:flex;align-items:center;gap:18px;padding:8px 4px}
.thought label{flex:none;font-size:27px;font-weight:800;line-height:1.3;text-align:left}
.thought label em{display:block;font-style:normal;font-size:21px;color:var(--ink2);font-weight:700}

/* 포스터 */
.pstage{flex:1;min-height:0;display:flex;gap:34px;align-items:center;padding:6px 4px}
.poster{position:relative;flex:1;min-width:0;max-height:100%;aspect-ratio:3/2}
.poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pin2{position:absolute;left:11%;right:11%;top:16%;bottom:10%;display:flex;flex-direction:column;align-items:center;text-align:center}
.pin2 h3{font-size:clamp(30px,2.5vw,46px);font-weight:800;line-height:1.2;color:var(--ink);margin-bottom:2.2%}
.pin2 ol{list-style:none;counter-reset:n;width:100%;display:flex;flex-direction:column;gap:2.4%}
.pin2 li{counter-increment:n;position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;padding:6px 16px 6px 64px;border:4px solid var(--ink);border-radius:22px;background:#fff;font-size:clamp(20px,1.55vw,29px);font-weight:700;line-height:1.3;text-align:center}
.pin2 li:before{content:counter(n);position:absolute;left:12px;top:50%;margin-top:-20px;width:40px;height:40px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:var(--gold);font-size:22px;font-weight:800;line-height:1}
.pside{flex:none;width:420px;display:flex;flex-direction:column;gap:18px}
.pside label{font-size:30px;font-weight:800;text-align:left}
.pside .pnote{font-size:25px;font-weight:700;line-height:1.5;text-align:left;color:var(--ink2)}
.pside .btn{min-width:0;width:100%}

/* 엔딩 인증서 도장 */
.cert .sts{display:flex;justify-content:center;gap:14px;margin-top:10px}
.cert .sts img{width:92px}
.cert{height:auto;min-height:760px;padding-bottom:70px}

/* PDF 1장(A4 가로) */
#sheet{display:none}
@page{size:A4 landscape;margin:0}
body.pv #sheet{display:block;position:fixed;inset:0;z-index:99;background:#666;overflow:auto;padding:20px}
#sheet .sp{width:297mm;height:209mm;box-sizing:border-box;padding:11mm 15mm 10mm;background:#fffaf0;border:3mm solid #2c2a5c;position:relative;overflow:hidden;font-family:'Paperlogy','Malgun Gothic',sans-serif;color:#2c2a5c;word-break:keep-all;page-break-after:avoid;break-after:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact;margin:0 auto}
.sph{display:flex;justify-content:space-between;align-items:center}
.sbr{height:17mm}.sbt{font-size:22pt;font-weight:800}
.spn{display:flex;align-items:baseline;gap:5mm;font-size:15pt;font-weight:700}
.spn b{display:inline-block;min-width:44mm;border-bottom:.8mm solid #2c2a5c;text-align:center;font-size:18pt;padding:0 3mm}
.spn em{font-style:normal;font-size:12pt;color:#6a68a0}
#sheet h2{text-align:center;font-size:27pt;font-weight:800;margin:5mm 0 4mm;color:#6d4bd6}
.spl{list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:3mm}
.spl li{counter-increment:n;position:relative;padding:3.4mm 6mm 3.4mm 18mm;border:.9mm solid #2c2a5c;border-radius:6mm;background:#fff;font-size:16pt;font-weight:700;line-height:1.35;text-align:center}
.spl li:before{content:counter(n);position:absolute;left:4mm;top:50%;margin-top:-5mm;width:10mm;height:10mm;border:.8mm solid #2c2a5c;border-radius:50%;background:#ffc83d;font-size:14pt;font-weight:800;line-height:9mm;text-align:center}
.spt{margin-top:4mm;padding:3mm 6mm;border:.7mm dashed #8d6bff;border-radius:5mm;background:#f6f1ff}
.spt h4{font-size:12pt;margin-bottom:1mm}.spt ul{list-style:none;font-size:11.5pt;line-height:1.45;font-weight:700}.spt li b{color:#6d4bd6;margin-right:2mm}
.spf{position:absolute;left:15mm;right:15mm;bottom:8mm;display:flex;justify-content:space-between;align-items:flex-end}
.sps{display:flex;gap:6mm}.sps span{display:flex;flex-direction:column;align-items:center;font-size:9pt;font-weight:700}.sps img{width:17mm}
.spf p{font-size:13pt;font-weight:700}.spf p b{font-size:18pt;color:#d6458a}
@media print{
  html,body{overflow:visible!important;height:auto!important;background:#fff!important}
  body>*:not(#sheet){display:none!important}
  #sheet{display:block!important}
}

[hidden]{display:none!important}
.hb{font-size:22px;height:50px;padding:0 18px}
.gauge.fill span{color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.9)}
.opts{flex:1 1 auto;min-height:210px;max-height:340px;align-items:stretch}
.opt{height:auto;min-height:210px}

.poster{container-type:inline-size;flex:none;height:100%;max-width:100%}
.pstage .pside{flex:1;min-width:360px;width:auto}
.pin2 h3{font-size:4.2cqw}
.pin2 li{font-size:2.7cqw;min-height:0;padding:1.2cqw 2cqw 1.2cqw 8cqw;border-radius:2.4cqw;border-width:.4cqw}
.pin2 li:before{width:5cqw;height:5cqw;left:1.4cqw;margin-top:-2.5cqw;font-size:2.8cqw;border-width:.35cqw}
.pin2 ol{gap:1.6cqw}
.cert{top:130px;min-height:0;padding:118px 64px 74px;width:1000px}
.cert h2{font-size:78px}
.cert .who{margin:10px 0 6px;font-size:44px}
.cert .cb{font-size:31px;line-height:1.55}
.cert .sts img{width:84px}
.cert .cs{margin-top:12px;font-size:34px}
.cert .cd{margin-top:2px}

.hearts img{width:64px}
.pstage{container-type:size}
.poster{width:min(calc(100cqw - 440px),calc(100cqh * 1.5));height:auto;flex:none;max-width:none}
.pstage .pside{flex:1;min-width:0;width:auto}
.spl{gap:2.4mm}.spl li{padding:2.8mm 6mm 2.8mm 18mm}
#sheet h2{margin:4mm 0 3mm}
.spt{margin-top:3mm;padding:2.4mm 6mm}
.cert{top:96px;padding:112px 60px 70px}
.cert .medal{width:200px;top:-84px;margin-left:-100px}
.cert h2{font-size:72px}
.cert .who{font-size:40px}
.cert .cb{font-size:29px;line-height:1.5}
.cert .sts img{width:76px}
.cert .cs{font-size:32px}.cert .cs img{width:46px}
.startbox{gap:26px;align-items:center}

.msg.assist .bub:after{content:"";position:absolute;right:12px;top:10px;width:16px;height:16px;border-radius:50%;background:#ff7a59;border:3px solid var(--ink);animation:glow 1.2s ease-in-out infinite}
.card.res .row{flex-wrap:wrap}
.cert{top:142px}

/* ── 버튼 새 디자인 : 말랑한 젤리 버튼 ── */
.btn{--c1:#ffa6d3;--c2:#ff5fa3;--c3:#ec3d88;--lip:#a82364;--glow:rgba(236,61,136,.38);
  border:0;border-radius:999px;color:#fff;letter-spacing:-.01em;
  background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 52%,var(--c3) 100%);
  box-shadow:0 9px 0 var(--lip),0 16px 24px var(--glow),inset 0 3px 0 rgba(255,255,255,.6),inset 0 -7px 12px rgba(0,0,0,.14);
  text-shadow:0 3px 0 var(--lip),0 0 14px rgba(255,255,255,.25);overflow:visible;isolation:isolate}
.btn:before{content:"";position:absolute;left:7%;right:7%;top:7%;height:42%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.04));pointer-events:none;z-index:-1}
.btn:after{content:"";position:absolute;right:-14px;top:-20px;width:46px;height:46px;background:url(../img/r_star.webp) center/contain no-repeat;filter:drop-shadow(0 3px 0 rgba(44,42,92,.3));pointer-events:none;transition:transform .2s}
.btn.sm:after{width:32px;height:32px;right:-10px;top:-14px}
.btn:hover:not([disabled]):after{transform:scale(1.25)}
.btn:hover:not([disabled]){transform:translateY(-3px) scale(1.03)}
.btn:active:not([disabled]){transform:translateY(7px);box-shadow:0 2px 0 var(--lip),0 6px 10px var(--glow),inset 0 3px 0 rgba(255,255,255,.5)}
.btn.y{--c1:#ffe985;--c2:#ffc736;--c3:#f5a20f;--lip:#b86f00;--glow:rgba(245,162,15,.4);color:#5a3a00;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.btn.b{--c1:#9ad0ff;--c2:#4f9bff;--c3:#3b78e8;--lip:#1f4fae;--glow:rgba(59,120,232,.4)}
.btn[disabled]{--c1:#e4e2f2;--c2:#cfcce6;--c3:#bab7d8;--lip:#9b98c0;--glow:transparent;color:#8a88b3;text-shadow:none;cursor:not-allowed}
.btn[disabled]:after,.btn.b:after{display:none}
.btn.b:after{display:block;background-image:url(../img/r_heart.webp)}
.btn.y:after{background-image:url(../img/r_heart.webp)}

/* ── 글자 블록 새 디자인 : 겹테두리 종이 카드 + 장식 + 단계 점 ── */
.talk .say,.card,.stmt .cardq,.bubble,.fix,.box,.tip,.sitc{
  box-shadow:8px 9px 0 var(--sh),inset 0 0 0 9px #fffdf6,inset 0 0 0 12px #e4daff,inset 0 -16px 0 -4px rgba(255,205,125,.22)}
.bubble{box-shadow:6px 7px 0 var(--sh),inset 0 0 0 6px #fffdf6,inset 0 0 0 8px #e4daff}
.talk .say{padding:66px 78px 34px;background:radial-gradient(rgba(141,107,255,.07) 2px,transparent 2.5px) 0 0/30px 30px,linear-gradient(180deg,#fffefb,#fff4de)}
.talk .say .tx{min-height:190px;gap:4px;font-weight:800}
.talk .say .tx .ln{font-size:48px;line-height:1.6}
.talk .say .tx .ln:first-child{font-size:58px;color:#4a2fb0;letter-spacing:-.03em}
.talk .say .tx em{background:linear-gradient(transparent 52%,#ffc2df 52%,#ffc2df 92%,transparent 92%);padding:0 6px;border-radius:6px}
.talk .say .dc{position:absolute;pointer-events:none;filter:drop-shadow(0 4px 0 rgba(44,42,92,.25))}
.talk .say .dc1{right:34px;top:-34px;width:78px}
.talk .say .dc2{right:122px;top:-12px;width:46px}
.talk .say .nt{padding:0 26px 0 20px;gap:10px}
.talk .say .nt img{width:30px;height:30px;object-fit:contain}
.talk .say .nrow{justify-content:space-between;align-items:center;margin-top:22px}
.dots{display:flex;gap:12px;align-items:center}
.dots i{width:16px;height:16px;border:3px solid var(--ink);border-radius:50%;background:#fff;transition:all .25s}
.dots i.on{width:44px;border-radius:12px;background:linear-gradient(90deg,#ff7eb6,#8d6bff)}
.talk .say:before{width:60px;height:60px;top:150px;left:-34px;border-radius:0 0 0 14px}
.nt{background:linear-gradient(180deg,#c2a8ff,#8d6bff 60%,#7452e8);box-shadow:3px 4px 0 var(--sh),inset 0 2px 0 rgba(255,255,255,.5)}
.bubble .nt img{display:none}
.card{background:linear-gradient(180deg,#fffefb,#fff4de)}
.stmt .cardq{background:linear-gradient(180deg,#fff,#f7f2ff)}
.cardq small,.card .cs{background:linear-gradient(180deg,#ffe27a,#ffc02e);box-shadow:3px 4px 0 var(--sh),inset 0 2px 0 rgba(255,255,255,.6)}

/* ── 안내 말풍선 다듬기 : 말랑이 머리 위에 붙이고, 강조 띄어쓰기 오류 제거 ── */
.bubble{top:auto;bottom:408px;left:16px;width:324px;min-height:0;padding:30px 22px 20px;border:4px solid var(--ink);border-radius:30px;font-size:28px;line-height:1.55;
  box-shadow:5px 6px 0 var(--sh),inset 0 0 0 6px #fffdf6,inset 0 0 0 8px #e9e0ff}
.bubble:after{left:auto;right:auto;left:calc(50% - 17px);bottom:-22px;width:30px;height:30px;transform:rotate(45deg);border-radius:0 0 8px 0;box-shadow:3px 3px 0 var(--sh)}
.bubble .nt{left:18px;top:-19px;height:36px;font-size:20px;padding:0 16px}
.bubble em,.tip em,.fb em,.talk .say .tx em{padding:0;margin:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bubble em{background:linear-gradient(transparent 56%,#ffe07a 56%)}
#bt{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:2.9em;text-align:center}
body[data-scene=map] .bubble{bottom:336px}
body[data-scene=map] #dock{height:560px}

/* ── 그림책 이야기 장면 ── */
body[data-scene=intro] #hdr,body[data-scene=intro] #dock{display:none}
.story{position:absolute;inset:0;overflow:hidden;background:#2c2a5c}
.sg{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform-origin:50% 60%}
.vig{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(44,42,92,.28) 0%,rgba(44,42,92,0) 22%,rgba(44,42,92,0) 52%,rgba(44,42,92,.62) 100%)}
.skip{position:absolute;right:34px;top:28px;height:52px;padding:0 26px;border:4px solid var(--ink);border-radius:30px;background:rgba(255,255,255,.88);font-size:24px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:3px 4px 0 var(--sh)}
.skip:hover{background:#fff}
.cap{position:absolute;left:50%;bottom:54px;width:min(1560px,88%);margin-left:calc(min(1560px,88%) / -2);padding:46px 70px 26px;border:5px solid var(--ink);border-radius:36px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,254,250,.97),rgba(255,244,222,.97));box-shadow:8px 9px 0 var(--sh),inset 0 0 0 8px #fffdf6,inset 0 0 0 10px #e4daff}
.ctag{position:absolute;left:46px;top:-30px;height:54px;padding:0 28px;display:flex;align-items:center;justify-content:center;border:4px solid var(--ink);border-radius:30px;background:linear-gradient(180deg,#ffe27a,#ffc02e);font-size:28px;font-weight:800;line-height:1;box-shadow:3px 4px 0 var(--sh)}
.cttl{font-size:30px;font-weight:800;color:#6d4bd6;text-align:center;letter-spacing:-.02em;margin-bottom:6px}
.ctx{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;font-size:44px;line-height:1.55;font-weight:800;letter-spacing:-.025em;min-height:140px;justify-content:center}
.ctx .ln{text-wrap:balance}
.ctx em{font-style:normal;padding:0;background:linear-gradient(transparent 54%,#ffc2df 54%,#ffc2df 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.crow{display:flex;align-items:center;justify-content:space-between;margin-top:14px}

/* ── 번호 주변 : 동그라미 대신 빛나는 효과 ── */
.pin .rg{display:none}
.pin .bw{overflow:visible}
.pin.new .bw:before{content:"";position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,250,200,.98) 0%,rgba(255,226,110,.7) 26%,rgba(255,200,70,.28) 46%,rgba(255,200,70,0) 68%);animation:glow2 1.9s ease-in-out infinite}
.pin.new .bd{filter:drop-shadow(0 0 14px rgba(255,236,130,.95)) drop-shadow(0 8px 0 rgba(44,42,92,.3))}
.pin.done .bw:before{content:"";position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(170,255,220,.55) 0%,rgba(170,255,220,0) 66%)}
@keyframes glow2{0%,100%{transform:scale(.86);opacity:.75}50%{transform:scale(1.12);opacity:1}}

/* ── 해설 블록 ── */
.fb{display:flex;align-items:center;justify-content:center;gap:22px;min-height:112px;height:auto;margin:6px 6px 14px;padding:14px 34px;border:5px solid var(--ink);border-radius:30px;background:#fff;box-shadow:5px 6px 0 var(--sh),inset 0 0 0 6px rgba(255,255,255,.75);text-align:center;transition:background .25s}
.fb:empty{visibility:hidden}
.fb.ok{background:linear-gradient(180deg,#effdf6,#d4f6e8)}
.fb.no{background:linear-gradient(180deg,#fff3f7,#ffdbe6)}
.fb .fi{width:68px;height:68px;margin:0;flex:none;object-fit:contain}
.fbt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fbt b{font-size:32px;line-height:1.3;font-weight:800;color:#1c6b4f;text-wrap:balance}
.fb.no .fbt b{color:#b3265c}
.fbt span{font-size:28px;line-height:1.45;font-weight:700;color:var(--ink);text-wrap:balance}
.fb .ic{margin:0}

/* ── 버튼 : 같은 줄의 버튼은 크기와 글자 크기를 통일 ── */
.row .btn,.act .btn,.row2 .btn,.nrow .btn,.crow .btn{min-width:250px;height:84px;padding:0 46px;font-size:34px}
.row .btn:after,.act .btn:after,.row2 .btn:after,.nrow .btn:after,.crow .btn:after{width:40px;height:40px;right:-12px;top:-16px}
.btn:focus-visible{outline:5px solid #fff;outline-offset:3px;box-shadow:0 9px 0 var(--lip),0 0 0 11px #8d6bff}

/* ── 블록은 내용만큼만, 글자는 정중앙 ── */
.fb{width:max-content;max-width:min(1320px,96%);align-self:center;padding:14px 38px}
.stmt .cardq{width:auto;min-width:640px;max-width:min(1160px,94%);padding:36px 64px}
.stmt.s2 .cardq{width:auto;min-width:640px;max-width:min(1160px,94%)}
.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding-top:0;padding-bottom:5px}
.btn.sm{padding-bottom:4px}
.row .btn,.act .btn,.row2 .btn,.nrow .btn,.crow .btn{padding-bottom:5px}
.pin .pl{width:max-content}

/* ── 고르기 카드 새 디자인 ── */
.ck{min-height:132px;padding:14px 32px 14px 118px;border-radius:34px;background:linear-gradient(180deg,#ffffff,#f6f1ff);box-shadow:0 7px 0 var(--ink),0 13px 0 var(--sh),inset 0 0 0 6px #fffdf8,inset 0 0 0 8px #e9e0ff}
.ck .bx{left:26px;margin-top:-34px;width:68px;height:68px;border-radius:50%;border-width:5px;background:linear-gradient(180deg,#e9e0ff,#cdbcff);font-style:normal;font-size:34px;font-weight:800;line-height:1;color:var(--ink);box-shadow:0 4px 0 rgba(44,42,92,.25),inset 0 3px 0 rgba(255,255,255,.7);transition:transform .2s}
.ck .bx img{width:42px;height:42px}
.ck:hover:not([disabled]) .bx{transform:scale(1.08)}
.ck.on{background:linear-gradient(180deg,#fff9cc,#ffeb85);box-shadow:0 7px 0 var(--ink),0 13px 0 var(--sh),0 0 0 6px rgba(255,201,60,.55),inset 0 0 0 6px #fffbe0}
.ck.on .bx{background:linear-gradient(180deg,#8ff0cf,#34c79a)}
.ck.right{background:linear-gradient(180deg,#f0fdf7,#d0f4e5)}.ck.right .bx{background:linear-gradient(180deg,#8ff0cf,#34c79a)}
.ck.wrong{background:linear-gradient(180deg,#fff4f8,#ffd6e3)}.ck.wrong .bx{background:linear-gradient(180deg,#ffc2d6,#ff7fa6)}
.ck>span{font-size:31px}

/* ── 게이지 글자 : 흰 바탕·보라 바탕 어디서나 보이게 ── */
.gauge span,.gauge.fill span{color:var(--ink);text-shadow:none;-webkit-text-stroke:6px #fff;paint-order:stroke fill;font-size:25px;font-weight:800;letter-spacing:-.01em}
.gauge{background:#fff}