@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-700.woff2) format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-800.woff2) format('woff2');font-weight:800 900;font-display:swap}
:root{
  --paper:#fff1d6;--card:#fffaf0;--ink:#33271a;--ink2:#5b4a36;--muted:#7a6650;--line:#e6cf9f;
  --org:#e8683a;--org2:#bf4a22;--teal:#1f8a8a;--teal2:#166b6b;--cave:#1d4e55;--mus:#f2b134;--mus2:#c98a0a;--cor:#ef6f5e;--navy:#2f4a7a;--sky:#3d9bd1;
  --ok:#2f8a63;--okl:#dcf1e6;--no:#c0392b;--nol:#fbe2dd;--hi:#ffe27a;
  --fs-h:44px;--fs-l:32px;--fs-m:26px;--fs-s:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--paper) url(../images/bg.webp) center/cover}
body{font-family:'Paperlogy','Pretendard','Malgun Gothic',sans-serif;font-weight:500;color:var(--ink);word-break:keep-all;overflow-wrap:break-word;line-break:strict;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none}
h1,h2,h3,h4,p,span,li,label,button,textarea,input{word-break:keep-all;overflow-wrap:break-word}
p,li{text-wrap:pretty}h1,h2,h3{text-wrap:balance;font-weight:800;line-height:1.25}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit;user-select:text}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none}
:focus-visible{outline:4px solid var(--teal);outline-offset:3px;border-radius:12px}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center;overflow:hidden;background:var(--paper) url(../images/bg.webp) center/cover}
#rotate{position:fixed;inset:0;z-index:99;background:var(--ink);color:#fff;display:grid;place-items:center;text-align:center;font-size:24px;font-weight:700;line-height:1.7}
#rotate[hidden]{display:none}
#app{position:absolute;inset:0;z-index:2}#app:focus{outline:none}.scr{position:absolute;inset:0;animation:scrIn .5s cubic-bezier(.2,.8,.3,1) both}
#motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mote{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);opacity:0;animation:drift var(--t) linear infinite;animation-delay:var(--dl)}

/* 상단 바 */
#top{position:absolute;left:14px;right:14px;top:14px;height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:30}
.brand{display:flex;align-items:center;gap:12px}.brand .mk{width:48px;height:48px;border-radius:14px;border:3px solid var(--ink);background:var(--mus);box-shadow:3px 3px 0 var(--ink);object-fit:cover}
.wordmark{font-size:30px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
#steps{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center}
.sg{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 6px;border-radius:99px;font-size:19px;font-weight:800;background:rgba(255,250,240,.92);border:2.5px solid var(--ink);color:var(--ink2);white-space:nowrap;transition:.25s}
.sg i{width:30px;height:30px;border-radius:50%;background:#ecd9ae;display:grid;place-items:center;font-style:normal;font-size:18px;color:var(--ink)}
.sg.on{background:var(--teal);color:#fff;box-shadow:3px 3px 0 var(--ink);transform:translateY(-2px)}.sg.on i{background:#fff;color:var(--teal2)}
.sg.dn{background:var(--mus);color:var(--ink)}.sg.dn i{background:var(--ink);color:#fff}
.top-r{display:flex;align-items:center;gap:7px}
.tbtn{height:46px;padding:0 12px;border-radius:12px;background:var(--card);border:2.5px solid var(--ink);font-weight:800;font-size:19px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.tbtn:hover{transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}.tbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.tbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.logoLink{display:block;margin-left:4px;padding-left:12px;border-left:2px solid var(--line)}.brandlogo{height:44px;width:auto}
body.in-title #top .brand,body.in-title #top #steps,body.in-title #top .tbtn:not(#fsBtn),body.in-title .logoLink{display:none}
body.in-title #top{justify-content:flex-end}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:66px;padding:0 42px;border-radius:16px;font-size:var(--fs-m);font-weight:800;color:#fff;background:var(--org);border:3px solid var(--ink);box-shadow:0 7px 0 var(--ink);transition:transform .1s,box-shadow .1s,filter .2s;position:relative;white-space:nowrap}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 9px 0 var(--ink)}
.btn:active{transform:translateY(7px);box-shadow:0 0 0 var(--ink)}
.btn[disabled]{background:#d9ceb6;color:#615843;cursor:not-allowed;box-shadow:0 7px 0 #a99f86;border-color:#8d8167;transform:none;filter:none}
.btn.teal{background:var(--teal)}.btn.mus{background:var(--mus);color:var(--ink)}.btn.cave{background:var(--cave)}
.btn.line{background:var(--card);color:var(--ink)}
.btn.sm{height:54px;font-size:var(--fs-s);padding:0 26px}
.btn.xl{height:84px;font-size:34px;padding:0 64px;border-radius:22px}
.btn.go{animation:nudge 1.8s ease-in-out infinite}
.btn.go[disabled]{animation:none}

/* 카드·알약 */
.card{background:var(--card);border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--teal)}
.card.o{box-shadow:8px 8px 0 var(--org)}.card.m{box-shadow:8px 8px 0 var(--mus)}
.pill{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border-radius:10px;font-size:20px;font-weight:800;background:var(--ink);color:#fff;white-space:nowrap}
.tag{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:10px;font-size:20px;font-weight:800;background:var(--ink);color:#fff;white-space:nowrap}
.tag.t{background:var(--teal)}.tag.o{background:var(--org)}.tag.m{background:var(--mus);color:var(--ink)}.tag.n{background:var(--navy)}
.lbl{font-size:var(--fs-m);font-weight:800;color:var(--ink2)}
.ptitle{display:flex;align-items:center;gap:12px;font-size:34px;font-weight:800;margin-bottom:6px;text-align:left}.ptitle::before{content:'';flex:none;width:12px;height:32px;border-radius:6px;background:var(--org)}
.psub{font-size:var(--fs-m);color:var(--ink2);margin-bottom:12px;font-weight:600;line-height:1.5}

/* 작업 화면 틀 */
.work{display:grid;grid-template-columns:1fr 640px;gap:30px;padding:96px 0 0 0}
.main{position:relative;border-left:0;border-radius:0 22px 0 0;border-bottom:0;padding:24px 34px;display:flex;flex-direction:column;min-height:0;overflow-x:hidden;overflow-y:auto;gap:0}
.main>*{min-width:0}
.side{border-right:0;border-bottom:0;border-radius:22px 0 0 0;padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.mhead{display:flex;align-items:center;gap:14px;padding:16px 26px;background:var(--cave);color:#fff;border-bottom:3px solid var(--ink)}
.mhead h2{font-size:30px;flex:1}.mhead .pill{background:#fff;color:var(--cave)}
.sbody{flex:1;display:flex;flex-direction:column;gap:14px;padding:16px 26px;min-height:0;overflow:hidden}
.sbody>*{flex-shrink:0}.sbody>.mission{flex-shrink:1}
.foot{display:flex;gap:14px;justify-content:center;align-items:center;padding:16px 26px 24px;border-top:3px solid var(--ink);background:#fff3d4}
.talk{display:grid;grid-template-columns:128px 1fr;gap:12px;align-items:end}
.talk img{width:128px;height:auto;animation:bob 3.2s ease-in-out infinite}
.bubble{position:relative;background:#fff;border:3px solid var(--ink);border-radius:18px 18px 18px 4px;padding:14px 20px;font-size:var(--fs-s);font-weight:700;line-height:1.5}
.bubble b{color:var(--org2)}
.fb{border-radius:16px;padding:14px 20px;font-size:var(--fs-s);font-weight:700;line-height:1.5;border:3px solid var(--ink);animation:up .35s both}
.fb.ok{background:var(--okl);color:#17583e}.fb.no{background:var(--nol);color:#8f2a1f}.fb.info{background:#e5efff;color:#27407a}
.hint{font-size:var(--fs-s);color:var(--ink2);font-weight:600;line-height:1.45}
.mfill{position:relative;display:block;flex:1 1 0;min-height:0;margin:16px -34px -24px;border-top:3px solid var(--ink);overflow:hidden;background:#3a2a1c}
.mfill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mfill::after{content:'';position:absolute;left:0;right:0;top:0;height:26px;pointer-events:none}

/* 입력 */
.field{width:100%;border:3px solid var(--ink);border-radius:14px;background:#fff;padding:12px 16px;font-size:var(--fs-m);font-weight:600;line-height:1.5;resize:none;outline:0}
.field:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(31,138,138,.25)}
.field::placeholder,.nm::placeholder{color:#7d6d55;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:52px;padding:6px 20px;border-radius:14px;background:#fff;border:3px solid var(--ink);font-size:var(--fs-s);font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-align:center;transition:.12s}
.chip:hover{background:#fff3d4;transform:translateY(-2px)}.chip.on{background:var(--mus);box-shadow:3px 3px 0 var(--ink)}
.chip.sm{min-height:46px;font-size:21px;padding:4px 16px}
.cnt2{font-size:20px;font-weight:700;color:var(--muted);text-align:right}

/* 표지·이름·이어하기 */
.cover{position:absolute;inset:0;background:#2a1b10;animation:none}
.cover>img.full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .acts{position:absolute;left:0;right:0;bottom:74px;display:flex;gap:26px;justify-content:center}
.center{position:absolute;inset:0;display:grid;place-items:center;padding-top:60px}
.namebox{width:100%;border-left:0;border-right:0;border-radius:0;box-shadow:none;padding:40px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.namebox img.f{height:240px;width:auto;animation:bob 3s ease-in-out infinite}
.namebox h2{font-size:var(--fs-h)}.namebox p{font-size:var(--fs-m);font-weight:600;line-height:1.6}
.nm{width:360px;height:60px;border:3px solid var(--ink);border-radius:14px;font-size:30px;font-weight:800;text-align:center;background:#fff;outline:0}
.nm:focus{border-color:var(--teal);box-shadow:0 0 0 5px rgba(31,138,138,.25)}
.who{display:flex;flex-direction:column;gap:14px;width:760px;max-height:420px;overflow:hidden}
.whor{display:flex;gap:14px;align-items:center}
.whor .btn:first-child{flex:1;justify-content:space-between;gap:20px;font-size:30px}
.whor .btn:first-child span{font-size:22px;font-weight:700}

/* 모달·토스트 */
#modal{position:absolute;inset:0;z-index:60;background:rgba(51,39,26,.58);backdrop-filter:blur(5px);display:grid;place-items:center;animation:fade .25s both}
#modal[hidden]{display:none}
.box{background:var(--card);border:3px solid var(--ink);border-radius:26px;box-shadow:10px 10px 0 var(--org);padding:34px 40px;max-height:1010px;overflow:hidden;animation:pop .4s cubic-bezier(.2,.9,.3,1.1) both;position:relative;display:flex;flex-direction:column;gap:14px}
.box.w-s{width:760px}.box.w-m{width:1060px}.box.w-l{width:1440px}
.box h3{font-size:38px;text-align:center}.cbody{font-size:var(--fs-m);font-weight:600;line-height:1.6;text-align:center}
.acts{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:10px}
.helpg{display:grid;grid-template-columns:1fr 1fr;gap:16px}.hc{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:14px 18px;display:grid;grid-template-columns:48px 1fr;gap:4px 14px;align-items:center}
.hc .hn{grid-row:span 2;width:48px;height:48px;border-radius:50%;background:var(--cave);color:#fff;display:grid;place-items:center;font-weight:800;font-size:24px}.hc b{font-size:25px}.hc p{font-size:22px;line-height:1.45;font-weight:600}
.stampbox{align-items:center;text-align:center}.stampbox img.stp{height:210px;width:auto;animation:stampDrop .7s cubic-bezier(.2,.9,.3,1.2) both}
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.tabs button{height:50px;padding:0 20px;border-radius:12px;border:3px solid var(--ink);background:#fff;font-size:22px;font-weight:800}.tabs button.on{background:var(--cave);color:#fff}
.dogam{display:flex;flex-direction:column;gap:10px}.dogam div{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:10px 16px;font-size:24px;font-weight:700;line-height:1.45}
#toast{position:absolute;left:50%;bottom:34px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:14px 30px;border-radius:12px;opacity:0;pointer-events:none;transition:.3s;z-index:90;font-size:var(--fs-s);font-weight:700}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 효과 */
.cf{position:absolute;width:16px;height:22px;border-radius:3px;pointer-events:none;z-index:80;animation:fall 1.5s ease-in forwards}
.sp{position:absolute;width:18px;height:18px;pointer-events:none;z-index:70;background:var(--c,#f2b134);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spark .8s ease-out forwards}
@keyframes fall{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(540deg) scale(.7)}}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(.3)}60%{opacity:1;transform:translate(calc(var(--dx)*.7),calc(var(--dy)*.7)) scale(1.3)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes scrIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.86);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes stampDrop{0%{transform:scale(2.6);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}
@keyframes coverZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes glint{0%,100%{opacity:.25}50%{opacity:.8}}
@keyframes drift{0%{opacity:0;transform:translate(0,0)}10%{opacity:.5}90%{opacity:.5}100%{opacity:0;transform:translate(var(--mx),-260px)}}
@keyframes fromL{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes fromR{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes ring{0%{box-shadow:0 0 0 0 var(--rc,rgba(232,104,58,.55))}100%{box-shadow:0 0 0 26px rgba(232,104,58,0)}}
@keyframes glowing{0%,100%{filter:drop-shadow(0 0 0 rgba(255,200,60,0))}50%{filter:drop-shadow(0 0 22px rgba(255,200,60,.95))}}
@keyframes flyMail{0%{transform:translate(0,0) scale(1)}60%{transform:translate(260px,-60px) scale(.8)}100%{transform:translate(430px,40px) scale(.3);opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ───────── 나침반 게이지 ───────── */
.gauge{position:relative;width:340px;height:340px;margin:0 auto}
.gauge.lg{width:560px;height:560px}
.gauge .gd{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gauge .gn{position:absolute;left:6%;top:6%;width:88%;height:88%;object-fit:contain;transform:rotate(var(--d,0deg));transition:transform 1.1s cubic-bezier(.3,1.7,.5,1);filter:drop-shadow(0 6px 4px rgba(51,39,26,.35))}
.gauge.spin .gn{transition:transform 3.4s cubic-bezier(.1,.75,.15,1)}
.gauge.sm{width:250px;height:250px}
.gz{position:absolute;bottom:0;display:flex;align-items:center;gap:8px;height:50px;padding:0 16px 0 8px;border-radius:99px;border:3px solid var(--ink);font-size:21px;font-weight:800;background:#fff;white-space:nowrap}
.gz img{width:34px;height:34px;object-fit:contain}
.gz.l{left:0;background:#ffe9d9}.gz.r{right:0;background:#dff0f7}
.gauge.glow .gd{animation:glowing 1.6s ease-in-out infinite}
.gwrap{position:relative;width:100%;padding-bottom:62px;display:flex;justify-content:center}
.gwrap:has(.gauge.lg){padding-bottom:20px}.gwrap:has(.gauge.lg) .gz{bottom:90px}
.gcap{text-align:center;font-size:var(--fs-s);font-weight:700;color:var(--ink2);margin-top:8px}

/* ───────── 1 상황 탐험 ───────── */
.qhead{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.qhead .cnt{flex:1;display:flex;align-items:center;gap:14px;font-size:var(--fs-s);font-weight:800}
.pips{display:flex;gap:6px;align-items:center;flex:1}
.pips i{flex:1;height:18px;border-radius:99px;background:#ecd9ae;border:2.5px solid var(--ink);transition:.3s}
.pips i.dn{background:var(--teal)}.pips i.cur{background:var(--mus);animation:pulse 1.4s ease-in-out infinite}.pips i.gap{flex:0 0 12px;height:6px;background:var(--ink);border:0}
.qmain{display:grid;grid-template-columns:420px 1fr;gap:28px;align-items:center;margin-bottom:18px}
.qmain .scn{width:420px;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--mus);animation:pop .55s cubic-bezier(.2,.9,.3,1.1) both}
.qtxt{display:flex;flex-direction:column;gap:14px}
.qtxt h2{font-size:var(--fs-h);color:var(--cave)}
.qtxt .qs{font-size:30px;font-weight:700;line-height:1.55;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:14px 22px;box-shadow:5px 5px 0 var(--org)}
.qtxt .qp{font-size:var(--fs-s);font-weight:600;color:var(--ink2)}
.qcards{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ac{position:relative;display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 7px 0 var(--c);--c:var(--org);transition:.25s}
.ac.b{--c:var(--teal)}
.ac.l{animation:fromL .5s cubic-bezier(.2,.8,.3,1) both}.ac.r{animation:fromR .5s cubic-bezier(.2,.8,.3,1) both .06s}
.ac .ah{display:flex;align-items:center;gap:12px;background:var(--c);color:#fff;padding:8px 16px;border-bottom:3px solid var(--ink)}
.ac .ah i{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center;font-style:normal;font-size:26px;font-weight:800;border:2.5px solid var(--ink)}
.ac .ah b{font-size:24px}
.ac .at{padding:14px 20px;font-size:25px;font-weight:700;line-height:1.55;flex:1;min-height:0}
.ac .ab{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 16px}
.av{height:70px;border-radius:14px;border:3px solid var(--ink);background:var(--tt,#fff3d4);font-size:23px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.1;transition:.12s;position:relative;--tt:#ffe9d9}
.ac.b .av{--tt:#d9f1ef}
.av .dts{font-size:17px;letter-spacing:.18em;color:var(--c)}
.av.s{background:var(--c);color:#fff}.av.s .dts{color:#fff}
.av:hover{transform:translateY(-3px);box-shadow:0 5px 0 var(--ink)}.av:active{transform:translateY(4px);box-shadow:none}
.av.sel{outline:5px solid var(--mus);outline-offset:2px;animation:pop .35s both}
.ac.chosen{box-shadow:0 7px 0 var(--c),0 0 0 7px var(--mus);animation:ring .8s ease-out}
.ac.dim{opacity:.55;filter:grayscale(.35)}
.qcards.lock .av{pointer-events:none}
.stampfx{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);padding:6px 30px;border-radius:16px;background:var(--mus);color:var(--ink);border:4px solid var(--ink);font-size:48px;font-weight:800;box-shadow:6px 6px 0 var(--ink);animation:stampDrop .5s cubic-bezier(.2,.9,.3,1.2) both;pointer-events:none}
.island{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;flex:1;min-height:0;padding:6px 0}
.island .ib{position:relative;width:100%;flex:1;min-height:0;border:3px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:6px 6px 0 var(--org)}
.island .ib img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:coverZoom 8s ease-out both}
.island h2{font-size:48px;color:var(--cave)}
.island .is{font-size:30px;font-weight:700;line-height:1.6;max-width:1050px}
.recap{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.rc{display:grid;grid-template-columns:62px 1fr;gap:6px 14px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:12px 18px;box-shadow:0 6px 0 var(--c);--c:var(--org);animation:up .5s both;animation-delay:calc(var(--i)*90ms)}
.rc.b{--c:var(--teal)}
.rc img{grid-row:span 2;width:62px;height:62px;border-radius:12px;object-fit:cover;border:2.5px solid var(--ink)}
.rc b{font-size:24px;line-height:1.3}.rc span{font-size:21px;font-weight:700;color:var(--c);line-height:1.3}
.verdict{margin-top:14px;font-size:30px;font-weight:800;text-align:center;background:var(--hi);border:3px solid var(--ink);border-radius:16px;padding:14px 22px;box-shadow:5px 5px 0 var(--ink);animation:pop .5s .4s both}
.abars{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.abar{display:grid;grid-template-columns:230px 1fr 120px;gap:16px;align-items:center}
.abar b{font-size:27px;text-align:right}
.track{position:relative;height:38px;border-radius:99px;border:3px solid var(--ink);background:linear-gradient(90deg,#ffe3d3 50%,#d3eeea 50%)}
.track::after{content:'';position:absolute;left:50%;top:-3px;bottom:-3px;width:3px;background:var(--ink);opacity:.5}
.track .mk2{position:absolute;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;left:var(--p,50%);border-radius:50%;background:var(--mus);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:left 1s cubic-bezier(.3,1.5,.5,1)}
.track .mk2 img{width:100%;height:100%;object-fit:contain;padding:6px}
.abar span{font-size:22px;font-weight:700;color:var(--ink2)}
.tr-ends{display:grid;grid-template-columns:230px 1fr 120px;gap:16px;font-size:21px;font-weight:800;color:var(--ink2)}
.tr-ends div{display:flex;justify-content:space-between}

/* ───────── 2 결과 ───────── */
.reveal{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:20px;text-align:center}
.reveal h2{font-size:var(--fs-h)}
.tcard{display:grid;grid-template-columns:380px 1fr;gap:26px;align-items:center;background:#fff3d4;border:3px solid var(--ink);border-radius:22px;padding:18px 28px;box-shadow:0 8px 0 var(--mus);animation:pop .6s cubic-bezier(.2,.9,.3,1.1) both}
.tcard img{width:340px;height:300px;object-fit:contain;margin:0 auto;animation:bob 3.4s ease-in-out infinite}
.tcard .tn{font-size:56px;font-weight:800;color:var(--cave);line-height:1.15}
.tcard .tt{font-size:30px;font-weight:700;line-height:1.5;margin-top:8px}
.tcard .tl{margin-top:10px;display:inline-block;padding:6px 16px;border-radius:99px;background:#fff;border:3px solid var(--ink);font-size:23px;font-weight:800}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.lst{background:#fff;border:3px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 6px 0 var(--c);--c:var(--teal)}
.lst.c{--c:var(--org)}
.lst h3{background:var(--c);color:#fff;font-size:28px;text-align:center;padding:10px;border-bottom:3px solid var(--ink)}
.lst ul{list-style:none;padding:16px 22px;display:flex;flex-direction:column;gap:11px}
.lst li{position:relative;padding-left:30px;font-size:25px;font-weight:700;line-height:1.5}
.lst li::before{content:'';position:absolute;left:2px;top:10px;width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff3d4}
.go2{margin-top:16px;background:var(--cave);color:#fff;border:3px solid var(--ink);border-radius:18px;padding:14px 24px;font-size:28px;font-weight:700;line-height:1.55;box-shadow:0 6px 0 var(--ink)}
.go2 b{color:#ffd36b}.go2 em{display:block;font-style:normal;color:#cfe9e5;font-size:25px;margin-top:2px}
.bothw{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:6px}
.bc{background:#fff;border:3px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 8px 0 var(--c);--c:var(--org);display:flex;flex-direction:column;animation:up .55s both}
.bc.b{--c:var(--teal);animation-delay:.12s}
.bc h3{background:var(--c);color:#fff;font-size:30px;text-align:center;padding:10px;border-bottom:3px solid var(--ink)}
.bc .bi{display:grid;place-items:center;padding:12px 0 0;background:radial-gradient(circle at 50% 60%,#fff3d4 0 58%,#fff 59%)}
.bc .bi img{height:230px;width:auto;animation:bob 3.2s ease-in-out infinite}
.bc p.say{margin:8px 22px;font-size:27px;font-weight:700;line-height:1.6;background:#fff3d4;border:3px solid var(--ink);border-radius:16px;padding:14px 18px}
.bc p.nt{margin:0 22px 18px;font-size:24px;font-weight:700;color:var(--ink2);line-height:1.5}
.together{margin-top:18px;background:var(--hi);border:3px solid var(--ink);border-radius:18px;padding:16px 24px;font-size:30px;font-weight:800;text-align:center;box-shadow:5px 5px 0 var(--ink)}

/* ───────── 3 이야기와 나 ───────── */
.fgrid{display:flex;flex-direction:column;gap:14px}
.frow{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
.frow>b{font-size:27px;padding-top:12px;color:var(--cave)}
.frow .fc{display:flex;flex-direction:column;gap:8px}
.note3{background:#e5efff;border:3px solid var(--ink);border-radius:16px;padding:12px 20px;font-size:23px;font-weight:700;line-height:1.5;color:#27407a}
.nm2{width:420px;height:64px;border:3px solid var(--ink);border-radius:14px;font-size:30px;font-weight:800;padding:0 16px;outline:0;background:#fff}
.nm2:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(31,138,138,.25)}

/* ───────── 4 마음 말 연습 ───────── */
.pr{display:grid;grid-template-columns:400px 1fr;gap:26px;align-items:start}
.pr .scn{width:400px;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--mus)}
.pr .pq{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:16px 22px;font-size:29px;font-weight:700;line-height:1.6;box-shadow:5px 5px 0 var(--org)}
.pr .pq small{display:block;font-size:23px;color:var(--ink2);margin-top:6px;font-weight:700}
.sopts{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.so{display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:center;text-align:left;padding:16px 22px;border-radius:18px;background:#fff;border:3px solid var(--ink);font-size:27px;font-weight:700;line-height:1.5;transition:.15s;animation:fromR .5s both;animation-delay:calc(var(--i)*90ms)}
.so .n{width:50px;height:50px;border-radius:50%;background:#ecd9ae;display:grid;place-items:center;font-weight:800;font-size:25px}
.so:hover{background:#fff3d4;transform:translateY(-2px)}
.so.good{background:var(--okl);border-color:var(--ok)}.so.good .n{background:var(--ok);color:#fff}
.so.bad{background:var(--nol);border-color:var(--no);animation:shake .4s}.so.bad .n{background:var(--no);color:#fff}
.so[disabled]{pointer-events:none}
.mine{display:flex;flex-direction:column;gap:14px}
.mrow{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}
.mrow>b{display:flex;align-items:center;gap:10px;font-size:26px;color:var(--cave);padding-top:10px}
.mrow>b i{width:40px;height:40px;border-radius:50%;background:var(--org);color:#fff;display:grid;place-items:center;font-style:normal;font-size:23px;border:2.5px solid var(--ink);flex:none}
.mrow:nth-child(2)>b i{background:var(--teal)}.mrow:nth-child(3)>b i{background:var(--mus);color:var(--ink)}
.mrow .fc{display:flex;flex-direction:column;gap:8px}
.preview{background:#fff3d4;border:3px solid var(--ink);border-radius:18px;padding:14px 22px;font-size:27px;font-weight:800;line-height:1.6;box-shadow:0 6px 0 var(--mus)}
.preview small{display:block;font-size:20px;color:var(--ink2);font-weight:700;margin-bottom:2px}

/* ───────── 5 마음 쪽지 ───────── */
.tos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.to{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 18px;border-radius:20px;background:#fff;border:3px solid var(--ink);font-size:26px;font-weight:800;line-height:1.35;box-shadow:0 6px 0 var(--mus);transition:.15s}
.to img{height:120px;width:auto;object-fit:contain}
.to:hover{transform:translateY(-5px);background:#fff3d4}.to.on{background:var(--hi);box-shadow:0 6px 0 var(--org);outline:4px solid var(--org);outline-offset:-1px}
.paper{position:relative;background:repeating-linear-gradient(#fffdf5 0 49px,#ead9a8 49px 51px);border:3px solid var(--ink);border-radius:8px 8px 22px 22px;padding:12px 24px 10px;box-shadow:7px 7px 0 var(--sky);min-height:330px}
.paper .pt{font-size:25px;font-weight:800;color:var(--cave);line-height:51px;border-bottom:3px solid var(--ink)}
.paper textarea{display:block;width:100%;height:246px;background:transparent;border:0;outline:0;resize:none;font-size:29px;font-weight:600;line-height:51px;padding:0}
.paper textarea::placeholder{color:#a8977a}
.ckw{display:flex;flex-direction:column;gap:14px}
.ck{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:12px 20px;display:grid;gap:10px}
.ck p{font-size:27px;font-weight:700;line-height:1.45}
.ck .yn{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ck .yn button{height:54px;border-radius:12px;border:3px solid var(--ink);background:#fff;font-size:25px;font-weight:800}
.ck .yn button.g.on{background:var(--ok);color:#fff}.ck .yn button.f.on{background:var(--mus)}
.ck .tp{font-size:22px;font-weight:700;color:#8a4a10;background:#fff3d4;border-radius:10px;padding:6px 12px}
.sendfx{position:absolute;inset:0;z-index:50;pointer-events:none}
.sendfx img.env{position:absolute;left:300px;top:380px;height:170px;width:auto;animation:flyMail 1.6s ease-in forwards}
.sendfx img.mb{position:absolute;right:140px;top:300px;height:380px;width:auto;animation:pop .6s both}

/* 미션·진행 */
.mission{margin-top:auto;position:relative;background:#fff3d4;border:3px solid var(--ink);border-radius:20px;padding:16px 20px;box-shadow:0 6px 0 var(--mus);min-height:0;overflow:hidden;flex:1 1 auto;max-height:520px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.mission .goal{font-size:var(--fs-l);font-weight:800;line-height:1.4;margin:10px 0 0;width:68%}
.mission .mlist{list-style:none;margin:8px 0 4px;display:flex;flex-direction:column;gap:9px;width:70%}
.mission .mlist li{position:relative;padding-left:28px;font-size:22px;font-weight:700;line-height:1.4;color:var(--ink2)}
.mission .mlist li::before{content:'';position:absolute;left:2px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px #bfe3df}
.mission .prog{display:flex;gap:8px;margin-top:auto;padding-top:12px;border-top:3px solid rgba(51,39,26,.18)}
.mission .pg{width:54px;height:54px;border-radius:50%;background:#fff;border:3px solid var(--ink);display:grid;place-items:center;filter:grayscale(1);opacity:.45}
.mission .pg img{width:36px;height:auto}
.mission .pg.dn{filter:none;opacity:1;background:#fff3c2}.mission .pg.cur{filter:none;opacity:1;background:var(--hi);box-shadow:0 0 0 4px var(--org);animation:pulse 1.4s ease-in-out infinite}
.mission .mtori{position:absolute;right:6px;bottom:82px;height:190px;width:auto;animation:bob 3.2s ease-in-out infinite}

/* ───────── 마무리 ───────── */
.fin{display:grid;grid-template-columns:900px 1fr 400px;gap:26px;padding:96px 36px 0 0;height:100%}
.fin .col{display:flex;flex-direction:column;gap:16px;min-height:0}
.fin .card{padding:16px 22px}.fin h3{font-size:27px;margin-bottom:8px}.fin .small{font-size:22px;line-height:1.55;font-weight:600}
.pcard{position:relative;width:100%;height:800px;border:3px solid var(--ink);border-radius:0 20px 20px 0;border-left:0;overflow:hidden;background:#ddd}
.pcard>img.bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .pp{position:absolute;left:4%;right:4%;top:3.5%;bottom:3.5%;background:rgba(255,250,240,.95);border:3px solid var(--ink);border-radius:14px;padding:16px 26px;display:flex;flex-direction:column;gap:8px;overflow:auto;font-size:23px}
.pcard .pp h3{font-size:1.7em;text-align:center;margin:0}.pcard .by{font-weight:700;text-align:center;color:var(--ink2)}
.pcard .ptype{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;background:#fff3d4;border:3px solid var(--ink);border-radius:14px;padding:8px 14px}
.pcard .ptype img{width:150px;height:130px;object-fit:contain}.pcard .ptype b{font-size:1.5em;color:var(--cave);display:block;line-height:1.2}.pcard .ptype span{font-weight:700}
.prows{display:flex;flex-direction:column;gap:7px}
.prow{display:grid;grid-template-columns:6.6em 1fr;gap:14px;align-items:start;line-height:1.45;border-bottom:2px solid var(--line);padding-bottom:6px}.prow:last-child{border-bottom:0}
.prow b{color:var(--cave)}.prow span{font-weight:700}
.bgsw{display:flex;gap:10px;padding-left:14px;align-items:center}.bgsw button{width:84px;height:62px;border:3px solid var(--ink);border-radius:12px;overflow:hidden}.bgsw button img{width:100%;height:100%;object-fit:cover}.bgsw button.on{box-shadow:0 0 0 4px var(--org)}
.lic{display:grid;grid-template-columns:150px 1fr;gap:8px 18px;align-items:center;box-shadow:8px 8px 0 var(--mus)}
.lic .md{width:140px;height:auto;max-height:150px;object-fit:contain}.licr{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.licn{font-size:42px;font-weight:800}.licrk{font-size:24px;font-weight:800;color:var(--org2)}
.stt{font-size:32px;font-weight:800;margin-bottom:2px}
.finacts{display:flex;flex-direction:column;gap:12px}
.fin .card.m{box-shadow:8px 8px 0 var(--org)}

/* ───────── 블록 디자인 (색 띠 제목 + 내용) ───────── */
.blk{--c:var(--teal);background:#fff;border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 6px 0 var(--c);display:flex;flex-direction:column;min-width:0}
.blk>h4{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--c);color:#fff;font-size:21px;font-weight:800;padding:7px 16px;border-bottom:3px solid var(--ink);line-height:1.3}
.blk>h4 .pill{height:30px;font-size:17px;padding:0 12px;background:#fff;color:var(--c)}
.blk .bk{padding:14px 16px}
.blk.t{--c:var(--org)}.blk.g{--c:var(--cave)}.blk.m{--c:var(--mus)}.blk.b{--c:var(--navy)}
.blk.m>h4{color:var(--ink)}.blk.m>h4 .pill{background:var(--ink);color:#fff}
.blk.t .bk{background:#fff6e4}
.blk.t .talk{grid-template-columns:104px 1fr;gap:10px}.blk.t .talk img{width:104px}
.blk.t .bubble{font-size:21px;padding:12px 16px;text-wrap:balance}
.blk.g{flex:1 1 auto;min-height:0}
.blk.g .bk.gb{flex:1;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#fff3d4 0 54%,#fff 55%);padding:10px}
.gwrap:has(.gauge.nochip){padding-bottom:0}
.gl2{display:grid;grid-template-columns:1fr 1fr;border-top:3px solid var(--ink)}
.gl2 span{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 6px;font-size:21px;font-weight:800;white-space:nowrap}
.gl2 span img{width:32px;height:32px;object-fit:contain}
.gl2 .l{background:#ffe9d9;border-right:3px solid var(--ink)}.gl2 .r{background:#dff0f7}
.blk.mission{padding:0;margin-top:0;background:#fff;border-radius:18px;box-shadow:0 6px 0 var(--c);flex:0 1 auto;max-height:none;justify-content:flex-start;gap:0}
.blk.mission .bk{position:relative;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;background:#fff3d4;padding:12px 16px 14px}
.blk.mission .goal{margin:0;width:66%;font-size:27px}
.blk.mission .mlist{margin:4px 0;width:68%}
.blk.mission .mtori{bottom:78px}
.blk.b .abars{margin:0}
.blk.b .bk{padding:12px 16px}
.ptitle{background:var(--cave);color:#fff;border:3px solid var(--ink);border-radius:16px;padding:8px 22px;box-shadow:0 5px 0 var(--ink);margin-bottom:14px;font-size:31px;line-height:1.3}
.ptitle::before{width:16px;height:16px;border-radius:50%;background:var(--mus);border:2.5px solid #fff}
.ihead{display:grid;grid-template-columns:auto 1fr auto;width:100%;border:3px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 7px 0 var(--ink);background:#fff;animation:pop .5s both}
.ihead .in{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 34px;background:var(--org);color:#fff;border-right:3px solid var(--ink)}
.ihead .in b{font-size:60px;line-height:1}.ihead .in span{font-size:21px;font-weight:800;margin-top:2px}
.island .ihead h2{display:flex;align-items:center;justify-content:center;background:var(--cave);color:#fff;font-size:50px;padding:10px 28px}
.ihead .ip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 30px;background:#fff3d4;border-left:3px solid var(--ink)}
.ihead .ip b{font-size:28px}
.ipd{display:flex;gap:8px}.ipd i{width:34px;height:14px;border-radius:99px;background:#ecd9ae;border:2.5px solid var(--ink)}.ipd i.dn{background:var(--teal)}.ipd i.on{background:var(--mus)}
.island .is{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:14px 28px;box-shadow:0 6px 0 var(--mus);font-size:29px}
.bubble,.psub,.qp,.note3,.fb,.cbody,.verdict,.together,.go2,.bc p,.hc p{text-wrap:balance}

/* 나침반 돌리기: 양끝 블록 + 가운데 나침반 */
.rv3{display:grid;grid-template-columns:260px 1fr 260px;gap:22px;align-items:center;margin-top:6px}
.rv3 .blk{--c:var(--org)}.rv3 .rr{--c:var(--sky)}
.rv3 .bk{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px 14px}
.rv3 .bk img{height:130px;width:auto;object-fit:contain}.rv3 .bk b{font-size:28px}.rv3 .bk span{font-size:22px;font-weight:700;color:var(--ink2);line-height:1.45}
.rv3 .hit{outline:5px solid var(--mus);outline-offset:3px;animation:pop .6s both}
.rvg{display:grid;place-items:center}.rvg .gauge.lg{width:500px;height:500px}
.stampfx{white-space:nowrap;font-size:44px}
.ac .at{min-height:146px}
.mfill img{object-position:center}
/* 오늘의 도전 (노랑 블록 + 예시 칩) */
.blk.go{margin-top:16px}
.blk.go .bk{background:#fff3c8;padding:14px 20px 18px}
.blk.go .gt{font-size:28px;font-weight:800;color:var(--ink);margin-bottom:12px;line-height:1.4;text-wrap:balance}
.egs3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:eg}
.egs3 span{counter-increment:eg;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:30px 14px 12px;font-size:24px;font-weight:700;line-height:1.5;box-shadow:0 5px 0 var(--sky);min-height:112px;white-space:pre-line}
.egs3 span::before{content:'예시 ' counter(eg);position:absolute;left:10px;top:-3px;transform:translateY(-50%);background:var(--sky);color:#fff;border:2.5px solid var(--ink);border-radius:99px;padding:1px 12px;font-size:17px;font-weight:800}

/* 입력 블록 카드 */
.blk.f{margin-top:14px}.blk.f .bk{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.blk.f.o{--c:var(--org)}.blk.f.n{--c:var(--navy)}
.blk.f textarea.field{min-height:112px}
.blk.f .nm2{width:100%}
.fpair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}.fpair .blk.f{margin-top:0}
.mine3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}.mine3 .blk.f{margin-top:0}
.blk>h4 .num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--c);margin-right:8px;font-size:19px}
.blk>h4:has(.num){justify-content:flex-start}

/* 내 말 고쳐 말하기: 도전 카드 */
button.blk.fx{text-align:left;cursor:pointer;font:inherit;color:inherit;margin-top:0;transition:transform .12s}
button.blk.fx:hover{transform:translateY(-3px)}
button.blk.fx.on{outline:5px solid var(--mus);outline-offset:3px}
.blk.fx .fs{font-size:23px;font-weight:700;line-height:1.5;color:var(--ink2)}
.blk.fx .fq{margin-top:10px;font-size:27px;font-weight:800;line-height:1.5;background:#fff3d4;border:3px solid var(--ink);border-radius:14px;padding:12px 16px}
.blk>h4 .pill{white-space:nowrap}
/* 탐험 단계: 상황 그림 크게 */
.qmain{grid-template-columns:560px 1fr;gap:30px}
.qmain .scn{width:560px}
.qtxt h2{font-size:42px}
/* 도장 글자: 누른 버튼 바로 위 */
.stampfx.up{left:auto;top:auto;font-size:30px;padding:4px 20px;border-width:3px;border-radius:14px;box-shadow:4px 4px 0 var(--ink);animation:stampUp .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes stampUp{0%{transform:translate(-50%,-100%) scale(2.2);opacity:0}60%{transform:translate(-50%,-100%) scale(.92);opacity:1}100%{transform:translate(-50%,-100%) scale(1)}}

/* 탐험 단계: 화면 전환·등장 효과 없음 (고른 뒤의 도장·바늘 반응은 그대로) */
body.calm .scr,body.calm .ac.l,body.calm .ac.r,body.calm .qmain .scn,body.calm .ihead,body.calm .rc,body.calm .verdict,body.calm .island .ib img,body.calm .pips i.cur{animation:none}