@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:#f4eee2;--card:#fffdf8;--ink:#1d1b17;--ink2:#4a443a;--muted:#8a8272;--line:#e4d9c3;
  --acc:#e0492b;--acc2:#bf3318;--hi:#ffd54a;--ok:#2f8a63;--okl:#dcf1e6;--no:#c0392b;--nol:#fbe2dd;
  --pink:#ff7aa8;--teal:#1f7a78;--blue:#4b5f96;--plum:#8a4fb0;
  --gu:#e8a800;--gi:#e0492b;--gs:#2f8a63;
  --sh:0 30px 50px -30px rgba(70,45,10,.45),0 2px 0 rgba(255,255,255,.9) inset;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--paper)}
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}
h1,h2,h3,h4,p{text-wrap:pretty}h1,h2,h3{text-wrap:balance;font-weight:800;line-height:1.25}
button,input,textarea,select{font:inherit;color:inherit;word-break:keep-all;overflow-wrap:break-word}
button{border:0;background:none;cursor:pointer}
img{display:block}
:focus-visible{outline:4px solid var(--acc);outline-offset:3px;border-radius:12px}

/* 무대 1920x1080 */
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center;overflow:hidden;background:var(--paper)}
#stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(90,70,30,.10) 1.4px,transparent 1.8px),radial-gradient(900px 600px at 0 0,rgba(205,190,235,.45),transparent 70%),radial-gradient(900px 600px at 100% 100%,rgba(250,200,215,.45),transparent 70%);
  background-size:28px 28px,auto,auto}
#bgfill{position:fixed;inset:-40px;background:url(../images/cover.webp) center/cover no-repeat;filter:blur(26px) brightness(.8);display:none}
.in-title #bgfill{display:block}
#rotate{position:fixed;inset:0;z-index:99;background:var(--ink);color:#fff;display:grid;place-items:center;text-align:center;font-size:22px;font-weight:700;line-height:1.7}
#rotate[hidden],[hidden]{display:none!important}
#top{position:absolute;left:24px;right:24px;top:14px;height:60px;display:flex;align-items:center;justify-content:space-between;z-index:30}
#app{position:absolute;inset:0}
.scr{position:absolute;inset:0;padding:92px 64px 56px;display:flex;gap:40px;animation:up .45s both}
.scr>*{min-width:0}

/* 상단 바 */
.brand{display:flex;align-items:center;gap:14px}
.mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#a468cc,#7a3ca0);box-shadow:0 8px 16px -6px rgba(120,60,160,.7);position:relative}
.mark::before{content:"";position:absolute;left:8px;top:7px;width:8px;height:22px;background:#ffd54a;border-radius:3px;transform:rotate(40deg);transform-origin:center}
.mark::after{content:"";position:absolute;left:21px;top:5px;width:9px;height:9px;background:#fff;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%)}
.wordmark{font-size:30px;font-weight:800;letter-spacing:-.02em}
.top-r{display:flex;align-items:center;gap:10px}
.tbtn{height:46px;padding:0 20px;border-radius:99px;background:rgba(255,253,248,.85);border:1.5px solid var(--line);font-weight:700;font-size:18px;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .2s,border-color .2s}
.tbtn:hover{transform:translateY(-2px);box-shadow:0 10px 18px -12px rgba(60,40,10,.6);border-color:var(--ink)}
.tbtn.ic[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tbtn b{background:var(--acc);color:#fff;border-radius:99px;min-width:26px;height:26px;display:grid;place-items:center;font-size:17px;padding:0 7px}
.logoLink{display:block;margin-left:6px;padding-left:16px;border-left:1.5px solid var(--line)}
.brandlogo{height:46px;width:auto}
.in-title #top>.brand,.in-title #top .tbtn:not(#fsBtn),.in-title .logoLink{display:none}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:64px;padding:0 38px;border-radius:99px;font-size:24px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#ee5a39,#cf3d20);box-shadow:0 7px 0 #a82e15,0 18px 26px -12px rgba(190,50,20,.65);
  transition:transform .12s,box-shadow .12s,filter .2s;position:relative;overflow:hidden;white-space:nowrap}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-90px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:glint 4.2s ease-in-out infinite}
@keyframes glint{0%,60%{left:-90px}100%{left:130%}}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 #a82e15,0 8px 12px -8px rgba(190,50,20,.6)}
.btn[disabled]{background:#d3c9b4;box-shadow:0 7px 0 #b7ab92;cursor:not-allowed;filter:none}.btn[disabled]::after{display:none}
.btn.line{background:var(--card);color:var(--ink);box-shadow:0 0 0 2.5px var(--ink),0 7px 0 var(--ink)}.btn.line::after{display:none}
.btn.sm{height:52px;font-size:20px;padding:0 28px}
.btn.green{background:linear-gradient(180deg,#3da577,#25805a);box-shadow:0 7px 0 #1a6445,0 18px 26px -12px rgba(30,120,80,.6)}
.btn.plum{background:linear-gradient(180deg,#a468cc,#7a3ca0);box-shadow:0 7px 0 #5d2b7a,0 18px 26px -12px rgba(120,60,160,.6)}
.btn.big{height:84px;font-size:32px;padding:0 64px}

/* 카드·알약·라벨 */
.card{background:rgba(255,253,248,.88);border:1px solid rgba(255,255,255,.9);border-radius:28px;box-shadow:var(--sh);backdrop-filter:blur(8px)}
.pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:99px;font-size:17px;font-weight:800;background:var(--ink);color:#fff;white-space:nowrap}
.pill.acc{background:var(--acc)}.pill.teal{background:var(--teal)}.pill.blue{background:var(--blue)}.pill.pink{background:var(--pink)}.pill.plum{background:var(--plum)}.pill.gold{background:var(--hi);color:var(--ink)}
.lbl{font-size:17px;font-weight:700;color:var(--muted);letter-spacing:.04em}

/* 표지 */
.cover{position:absolute;inset:0;background:#2a1636 center/cover no-repeat;animation:fade .5s both}
.cover .cta{position:absolute;left:0;right:0;bottom:78px;display:flex;flex-direction:column;align-items:center;gap:16px}
.cover .cta small{font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}

/* 이름·안내 */
.midbox{margin:auto;display:flex;gap:56px;align-items:center}
.nm{width:760px;padding:44px 52px;display:flex;flex-direction:column;gap:18px}
.nm h2{font-size:44px}
.nm p{font-size:24px;line-height:1.6;color:var(--ink2)}
.in{height:68px;border-radius:99px;border:3px solid var(--ink);background:#fff;padding:0 28px;font-size:30px;font-weight:700;width:100%}
.in:focus,.tx:focus,.sm-in:focus{outline:none;box-shadow:0 0 0 6px rgba(255,213,74,.7)}
.tx{border-radius:22px;border:3px solid var(--ink);background:#fff;padding:14px 20px;font-size:22px;font-weight:600;line-height:1.5;width:100%;resize:none}
.sm-in{height:52px;border-radius:16px;border:3px solid var(--ink);background:#fff;padding:0 16px;font-size:21px;font-weight:600;width:100%}
.mascot{height:520px;width:auto;animation:bob 3.2s ease-in-out infinite}

/* 임무 안내 */
.brief{flex:1;display:flex;flex-direction:column;gap:20px}
.goal{display:flex;align-items:center;gap:22px;padding:20px 30px}
.goal img{height:170px;width:auto}
.goal h2{font-size:40px}
.goal p{font-size:22px;color:var(--ink2);margin-top:8px;line-height:1.5}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rc{padding:16px 14px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.rc img{height:150px;width:auto}
.rc b{font-size:26px;font-weight:800}
.rc span{font-size:19px;color:var(--ink2);font-weight:600}
.rc .rl{font-size:17px;font-weight:800;color:#fff;border-radius:99px;padding:3px 14px;margin-top:2px}
.steps4{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.s4{padding:18px 22px;display:flex;flex-direction:column;gap:8px}
.s4 .n{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:21px;font-weight:800}
.s4 b{font-size:24px;font-weight:800}.s4 p{font-size:19px;color:var(--ink2);line-height:1.45}

/* 공통 두 칸 */
.L2{width:960px;flex:none;display:flex;flex-direction:column;gap:14px;height:100%}
.R{flex:1;display:flex;flex-direction:column;padding:28px 34px;gap:12px;overflow:hidden}
.rhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rhead h2{font-size:32px;flex:1}
.R .ft{margin-top:auto;display:flex;gap:14px;justify-content:flex-end;align-items:center}
.R .body{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:hidden}
.q{font-size:23px;font-weight:700;line-height:1.45}
.q small{font-size:19px;font-weight:600;color:var(--ink2)}
.dots{display:flex;gap:10px}.dots i{width:14px;height:14px;border-radius:50%;background:#e3d7bd}.dots i.on{width:44px;border-radius:99px;background:var(--plum)}
.guide{display:flex;align-items:flex-end;gap:14px}
.guide img{height:150px;width:auto;flex:none}
.say{background:#fff;border-radius:24px 24px 24px 6px;padding:14px 20px;font-size:21px;font-weight:700;line-height:1.5;box-shadow:0 14px 24px -14px rgba(60,40,10,.5);flex:1}
.say small{display:block;font-size:17px;font-weight:800;margin-bottom:4px;letter-spacing:.04em;color:var(--plum)}

/* 글 미리보기(공책) */
.pv{flex:none;height:504px;padding:20px 28px 22px;display:flex;flex-direction:column;gap:10px}
.pvh{display:flex;align-items:center;gap:12px}
.pvh b{font-size:24px;font-weight:800;flex:1}
.paper{flex:1;min-height:0;background:#fff;border-radius:18px;border:2px solid #e0d3b8;padding:12px 26px;display:flex;gap:22px;overflow:hidden;
  background-image:repeating-linear-gradient(transparent 0 42px,#f1e8d3 42px 44px);background-position:0 12px}
.ptxt{flex:1;min-width:0;font-size:25px;line-height:44px;font-weight:600;color:#2b2620}
.ptxt .gr{display:block;font-size:22px;color:var(--plum);font-weight:800}
.ptxt .cl{display:block;font-size:24px;font-weight:800}
.ptxt .ph{color:#c2b79f;font-weight:600}
.ck{background:#e2efff;border-bottom:3px solid #4b8fd9;border-radius:6px;padding:0 3px;cursor:pointer;transition:background .15s}
.ck:hover{background:#cfe3fb}
.ck.on{background:#fff2b8;border-color:#e8b800}
.ck.pl{background:#f3e8fb;border-color:#b98ad6}.ck.pl.on{background:#fff2b8;border-color:#e8b800}
.phelp{width:292px;flex:none;display:flex;flex-direction:column;justify-content:center;gap:8px;align-self:center}
.phelp img{width:100%;border-radius:16px;box-shadow:0 10px 18px -12px rgba(60,40,10,.6)}
.phelp svg{width:100%;height:auto;background:#fffaf0;border-radius:16px;border:2px solid #eadfc6}

/* 독자 반응 카드(게이지·한마디) */
.lc{flex:1;min-height:0;padding:16px 24px;display:grid;grid-template-columns:190px 260px 1fr;gap:18px;overflow:hidden}
.lc .av{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.lc .av img{height:236px;width:auto;max-width:190px;object-fit:contain;animation:pop .45s both}
.lc .av b{font-size:21px;font-weight:800;text-align:center;line-height:1.2}
.lc .av small{font-size:17px;font-weight:700;color:var(--muted)}
.gg{display:flex;flex-direction:column;justify-content:center;gap:14px}
.g .gt{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:800}
.g .gt svg{width:28px;height:28px;flex:none}
.g .gt em{margin-left:auto;font-style:normal;font-size:24px}
.gbar{position:relative;height:18px;border-radius:99px;background:#eadfca;margin-top:5px;overflow:visible}
.gbar i{display:block;height:100%;width:0;border-radius:99px;background:var(--bad);transition:width .55s cubic-bezier(.2,.8,.2,1),background .3s}
.gbar::after{content:"";position:absolute;left:80%;top:-5px;bottom:-5px;width:3px;background:var(--ink);border-radius:2px;opacity:.55}
.g{--bad:#d9573a}.g.mid{--bad:#e8a800}.g.ok{--bad:#2f8a63}
.chat{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;overflow:hidden;min-width:0}
.cb{background:#fff;border-radius:18px 18px 18px 6px;padding:7px 14px;font-size:19px;font-weight:700;line-height:1.38;box-shadow:0 8px 14px -10px rgba(60,40,10,.5);animation:up .35s both}
.cb.bad{background:#fbe2dd;color:#8f2a1f}.cb.good{background:#dcf1e6;color:#17583e}.cb.mid{background:#fff6d6;color:#6b5200}.cb.sys{background:#e8eefb;color:#2f3f75}
.lc.v{grid-template-columns:170px 1fr;grid-template-rows:auto 1fr;gap:10px 18px;padding:14px 22px}
.lc.v .av img{height:170px;max-width:170px}
.lc.v .chat{grid-column:1/3}

/* 1단계 오른쪽 */
.profile{display:grid;grid-template-columns:150px 1fr;gap:10px 14px;align-items:center;background:#f6f0e3;border-radius:22px;padding:18px 22px}
.profile b{font-size:20px;font-weight:800;color:var(--plum)}
.profile span{font-size:22px;font-weight:700;line-height:1.4}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{height:46px;padding:0 18px;border-radius:99px;background:#f0e8d6;font-size:19px;font-weight:800;color:var(--ink2);display:inline-flex;align-items:center;gap:8px;transition:.15s}
.tab:hover{background:#fbf3df}
.tab.on{background:var(--ink);color:#fff}
.tab.done::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px #fff}
.opts{display:flex;flex-direction:column;gap:10px}
.op{text-align:left;padding:14px 20px;border-radius:22px;background:#f6f0e3;border:3px solid transparent;font-size:23px;font-weight:700;line-height:1.4;display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;transition:.18s}
.op .n{width:42px;height:42px;border-radius:50%;background:#e3d7bd;display:grid;place-items:center;font-weight:800;font-size:20px}
.op:hover{background:#fbf3df;transform:translateY(-2px)}
.op.sel{background:#fff2b8;border-color:#e8b800}.op.sel .n{background:#e8b800;color:#fff}
.op .tg{font-size:17px;font-weight:800;background:#ddd2b8;border-radius:99px;padding:2px 10px;white-space:nowrap}
.op .oi{display:flex;align-items:center;gap:12px}.op .oi svg{width:34px;height:34px;flex:none}
.tipbox{background:#e8eefb;color:#2f3f75;border-radius:20px;padding:12px 18px;font-size:20px;font-weight:700;line-height:1.5;animation:up .3s both}
.tipbox small{display:block;font-size:17px;font-weight:800;letter-spacing:.04em;margin-bottom:2px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:11px 20px;border-radius:99px;background:#f6f0e3;border:3px solid transparent;font-size:21px;font-weight:700;display:inline-flex;align-items:center;gap:10px;transition:.15s}
.chip:hover{background:#fbf3df;transform:translateY(-2px)}
.chip.sel{background:#fff2b8;border-color:#e8b800}
.chip.good{background:var(--okl);border-color:var(--ok)}
.chip.dim{opacity:.45;pointer-events:none}
.chip svg{width:28px;height:28px;flex:none}
.fb{border-radius:22px;padding:14px 20px;font-size:21px;font-weight:700;line-height:1.5;animation:up .35s both}
.fb.ok{background:var(--okl);color:#17583e}.fb.no{background:var(--nol);color:#8f2a1f}.fb.info{background:#e8eefb;color:#2f3f75}
.fb small{display:block;font-size:17px;font-weight:800;letter-spacing:.04em;margin-bottom:3px}
.stars{display:inline-flex;gap:4px}.stars svg{width:38px;height:38px}
.result{display:flex;align-items:center;gap:20px;background:linear-gradient(160deg,#fff8d8,#ffe9a0);border:3px solid #d49a00;border-radius:24px;padding:16px 24px}
.result img{height:120px;width:auto}
.result h3{font-size:30px}.result p{font-size:20px;font-weight:600;color:var(--ink2);margin-top:4px;line-height:1.45}

/* 2단계 쓰기 */
.wr{width:960px;flex:none;padding:24px 32px;display:flex;flex-direction:column;gap:11px;height:100%;overflow:hidden}
.seg{display:inline-flex;background:#ece3d0;border-radius:99px;padding:5px;gap:3px;flex-wrap:nowrap}
.seg button{height:46px;padding:0 22px;border-radius:99px;font-size:20px;font-weight:800;color:var(--ink2);white-space:nowrap}
.seg button.on{background:var(--ink);color:#fff;box-shadow:0 8px 14px -8px rgba(0,0,0,.6)}
.facts{display:flex;flex-direction:column;gap:6px}
.fact{text-align:left;display:flex;gap:10px;align-items:center;padding:8px 14px;border-radius:14px;background:#f6f0e3;font-size:19px;font-weight:600;line-height:1.4;transition:.15s}
.fact:hover{background:#fbf3df;transform:translateY(-1px)}
.fact b{flex:none;background:var(--plum);color:#fff;border-radius:99px;padding:2px 12px;font-size:17px;font-weight:800}
.lt{height:262px;border-radius:22px;border:3px solid var(--ink);background:#fff;padding:14px 20px;font-size:25px;line-height:1.55;font-weight:600;width:100%;resize:none;transition:font-size .2s}
.lt.big{font-size:32px;line-height:1.45}
.lt:focus{outline:none;box-shadow:0 0 0 6px rgba(255,213,74,.7)}
.mats{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mats .chip{padding:7px 16px;font-size:19px}
.mats .chip.sel{background:#e9dcf5;border-color:var(--plum)}
.matprev{display:flex;gap:12px;min-height:116px;align-items:stretch;overflow:hidden}
.matprev img{height:116px;width:auto;border-radius:12px}
.matprev svg{height:116px;width:auto;border-radius:12px;border:2px solid #eadfc6;background:#fffaf0}
.stl{background:#fffaf0;border:2px solid #eadfc6;border-radius:12px;padding:8px 14px;font-size:19px;font-weight:700;line-height:1.5;color:#7a5200}
.matprev .none{color:var(--muted);font-weight:600;font-size:19px;align-self:center}
.ana{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ana .a{font-size:17px;font-weight:700;background:#f0e8d6;border-radius:99px;padding:4px 12px;color:var(--ink2)}
.ana .a.r{background:var(--nol);color:#8f2a1f}.ana .a.g{background:var(--okl);color:#17583e}
.R2{flex:1;display:flex;flex-direction:column;padding:22px 28px;gap:10px;overflow:hidden;height:100%}
.rtabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rt{position:relative;padding:8px 6px 8px;border-radius:20px;background:#f6f0e3;border:3px solid transparent;display:flex;flex-direction:column;align-items:center;gap:2px;transition:.15s}
.rt:hover{background:#fbf3df}
.rt.on{background:#fff2b8;border-color:#e8b800}
.rt img{height:92px;width:auto;max-width:100%;object-fit:contain}
.rt b{font-size:18px;font-weight:800;text-align:center;line-height:1.2;white-space:nowrap}
.rt .md{display:flex;gap:5px;margin-top:2px}
.rt .md i{width:11px;height:11px;border-radius:50%;background:#d9cfb7}.rt .md i.on{background:var(--ok)}
.stamp{position:absolute;right:2px;top:2px;border:3px solid var(--acc);color:var(--acc);border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font-weight:800;font-size:17px;transform:rotate(-14deg);background:rgba(255,255,255,.88);animation:pop .4s both}
.hintline{font-size:19px;font-weight:700;color:var(--ink2);background:#f6f0e3;border-radius:16px;padding:8px 14px;line-height:1.4}
.hintline b{color:var(--plum)}
.goalbar{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800}
.goalbar .sl{display:flex;gap:8px}
.goalbar .sl i{width:42px;height:42px;border-radius:50%;border:3px dashed #cdbf9f;display:grid;place-items:center;color:var(--acc);font-style:normal;font-weight:800;font-size:17px}
.goalbar .sl i.on{border:3px solid var(--acc);background:#fff;transform:rotate(-10deg)}

/* 정리 */
.fin{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qc{padding:14px 20px 16px;display:flex;flex-direction:column;gap:10px}
.qc p{font-size:21px;font-weight:700;line-height:1.45}
.qc .chips{gap:8px}.qc .chip{padding:8px 16px;font-size:19px}
.qc .fb{padding:8px 14px;font-size:18px;border-radius:14px}
.ckgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ckgrid .chip{border-radius:20px;justify-content:flex-start;text-align:left;line-height:1.35;font-size:21px}

/* 보고서 */
.rep{flex:1;display:grid;grid-template-columns:1.15fr 1fr;gap:28px;min-width:0}
.rep .card{padding:24px 30px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.rep h3{font-size:28px}
.rep p,.rep li{font-size:20px;line-height:1.5;color:var(--ink2);font-weight:600}
.rep ul{padding-left:22px}
.mrow{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;background:#f6f0e3;border-radius:20px;padding:10px 16px}
.mrow img{height:76px;width:auto;justify-self:center}
.mrow b{font-size:22px;font-weight:800}.mrow .stars svg{width:28px;height:28px}
.mrow p{font-size:18px;line-height:1.4}
.badge{display:inline-flex;align-items:center;gap:10px;font-size:26px;font-weight:800;background:var(--hi);border-radius:99px;padding:8px 24px;align-self:flex-start}

/* 도감 */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-height:700px;overflow:auto;padding:6px}
.dcard{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:5px;box-shadow:0 6px 0 var(--ink);animation:pop .4s both;align-items:center;text-align:center}
.dcard.sp{border-color:var(--plum);box-shadow:0 6px 0 var(--plum);background:#faf3ff}
.dcard.lock{opacity:.5;border-style:dashed;box-shadow:none}
.dcard.lock img{filter:brightness(0) opacity(.18)}
.dcard img{height:120px;width:auto}
.dcard .sq{height:120px;width:120px;border-radius:50%;background:linear-gradient(135deg,#c795e6,#8a4fb0);display:grid;place-items:center}
.dcard .sq svg{width:64px;height:64px}
.dcard b{font-size:22px;font-weight:800}
.dcard small{font-size:17px;font-weight:700;color:var(--muted)}
.dcard p{font-size:18px;line-height:1.4;color:var(--ink2);font-weight:600}
.dcard .stars svg{width:26px;height:26px}

/* 모달 */
#modal{position:absolute;inset:0;z-index:60;background:rgba(29,24,16,.55);backdrop-filter:blur(6px);display:grid;place-items:center;animation:fade .25s both}
#modal[hidden]{display:none}
.box{background:var(--card);border-radius:36px;box-shadow:0 50px 90px -30px rgba(0,0,0,.7);padding:34px 40px;max-width:1760px;max-height:1010px;overflow:hidden;animation:pop .45s cubic-bezier(.2,.9,.3,1.1) both;position:relative;display:flex;flex-direction:column;gap:6px}
.box.w-s{width:720px}.box.w-m{width:1000px}.box.w-l{width:1360px}.box.w-xl{width:1560px}
.box h3{font-size:36px}
.box .acts{display:flex;gap:14px;justify-content:flex-end;align-items:center;margin-top:16px}
.cbody{font-size:23px;font-weight:600;line-height:1.6;margin-top:8px}
.mhead{display:flex;align-items:center;gap:16px;margin:-34px -40px 18px;padding:18px 40px;background:var(--plum);color:#fff;border-radius:36px 36px 0 0}
.mhead h3{font-size:30px;flex:1}
.helpg{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.hc{background:#f6f0e3;border-radius:22px;padding:18px 22px;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:center}
.hn{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:21px;grid-row:span 2}
.hc b{font-size:22px}.hc p{font-size:19px;line-height:1.45;color:var(--ink2)}
#toast{position:absolute;left:50%;bottom:54px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:14px 28px;border-radius:99px;opacity:0;pointer-events:none;transition:.3s;z-index:90;font-size:20px;font-weight:700}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 효과 */
@keyframes up{from{opacity:0;transform:translateY(22px)}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 fade{from{opacity:0}to{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.shake{animation:shake .4s}
.cf{position:absolute;width:14px;height:14px;border-radius:3px;z-index:80;pointer-events:none;animation:cf 1.3s cubic-bezier(.2,.7,.3,1) both}
@keyframes cf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* PDF(인쇄) */
#printroot{display:none}
@media print{
  @page{size:A4;margin:12mm}
  html,body{height:auto;overflow:visible;background:#fff}
  #stage,#rotate,#bgfill{display:none!important}
  #printroot{display:block;color:#000;font-size:11pt;line-height:1.5}
  #printroot h1{font-size:20pt;margin-bottom:2mm}
  #printroot h2{font-size:13pt;margin:5mm 0 2mm;border-bottom:2px solid #000;padding-bottom:1mm;break-after:avoid}
  #printroot .meta{font-size:11pt;color:#444;margin-bottom:3mm}
  #printroot table{border-collapse:collapse;width:100%;font-size:10.5pt}#printroot tr{break-inside:avoid}
  #printroot th,#printroot td{border:1px solid #888;padding:2mm 3mm;text-align:left;vertical-align:top}
  #printroot th{background:#eee}
  #printroot .item{break-inside:avoid;margin-bottom:2mm}
  #printroot .tx2{border:1px solid #888;padding:3mm;margin:1mm 0 2mm;break-inside:avoid;white-space:pre-wrap}
}
.lc.w2{grid-template-columns:150px 215px 1fr;gap:14px;padding:12px 18px}
.lc.w2 .av img{height:196px;max-width:150px}
.lc.w2 .g .gt{font-size:19px}.lc.w2 .g .gt em{font-size:21px}
.lc.w2 .chat{justify-content:flex-start}

/* ===== 이해하기 쉬운 구성 보강 ===== */
.lc{grid-template-rows:minmax(0,1fr)}
.chat{min-height:0}
.ptxt{font-size:27px;line-height:46px}
.paper{background-image:repeating-linear-gradient(transparent 0 44px,#f1e8d3 44px 46px)}
#steps{display:flex;gap:8px;align-items:center;margin:0 auto}
.in-title #steps{display:none}
.sg{height:42px;padding:0 18px 0 8px;border-radius:99px;background:rgba(255,253,248,.85);border:1.5px solid var(--line);font-size:18px;font-weight:800;color:var(--muted);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sg i{width:28px;height:28px;border-radius:50%;background:#ddd2b8;color:#fff;display:grid;place-items:center;font-style:normal;font-size:17px}
.sg.on{background:var(--ink);color:#fff;border-color:var(--ink)}.sg.on i{background:var(--hi);color:var(--ink)}
.sg.dn{color:var(--ink2)}.sg.dn i{background:var(--ok)}
.sg+.sg::before{content:"";width:14px;height:2px;background:#cdbf9f;margin-left:-16px;margin-right:6px;display:none}
.g .gd{font-size:17px;font-weight:600;color:var(--muted);margin-top:3px}
.rstrip{display:grid;grid-template-columns:70px 1fr 1fr 1fr;gap:6px 14px;align-items:center;background:#f6f0e3;border-radius:20px;padding:8px 16px}
.rstrip img{height:68px;width:auto;justify-self:center}
.rstrip .ri{font-size:17px;font-weight:700;line-height:1.3}
.rstrip .ri small{display:block;font-size:17px;font-weight:800;color:var(--plum)}
.ask{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:800;background:#fff6d6;border-radius:18px;padding:10px 16px}
.ask b{background:#fff;border:2px solid #e8b800;border-radius:10px;padding:0 10px}
.how{display:flex;gap:8px}
.how span{flex:1;background:#f0e8d6;border-radius:14px;padding:6px 10px;font-size:17px;font-weight:800;display:flex;gap:8px;align-items:center;line-height:1.25}
.how b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--plum);color:#fff;display:grid;place-items:center;font-size:17px}
.prof2{font-size:17px;font-weight:700;line-height:1.4;background:#f6f0e3;border-radius:14px;padding:6px 14px;color:var(--ink2)}
.prof2 b{color:var(--plum)}
.pvh .pill.gray{background:#8a8272}

.R .body{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.op{padding:11px 18px;font-size:22px}
.ask{font-size:21px;padding:8px 14px}
.tab{height:42px}
.rstrip{padding:6px 14px}
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.road .rd{background:#fff;border:2px solid #e8dcc2;border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.road .rd b{font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px}
.road .rd b i{width:34px;height:34px;border-radius:50%;background:var(--plum);color:#fff;display:grid;place-items:center;font-style:normal;font-size:19px;flex:none}
.road .rd p{font-size:19px;font-weight:600;line-height:1.45;color:var(--ink2)}

/* 왼쪽 위 제목 */
.brand{color:inherit;text-decoration:none;gap:12px;padding:5px 22px 5px 6px;border-radius:99px;background:rgba(255,253,248,.88);border:1.5px solid var(--line);box-shadow:0 10px 20px -14px rgba(90,50,120,.55);transition:transform .15s,box-shadow .2s}
.brand:hover{transform:translateY(-2px);box-shadow:0 14px 22px -14px rgba(90,50,120,.7)}
.brand .mark{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#b178d6,#7a3ca0);box-shadow:0 6px 0 #5d2b7a,0 10px 16px -8px rgba(120,60,160,.7);margin-bottom:6px}
.brand .mark::before{left:11px;top:9px;width:10px;height:27px;border-radius:4px;transform:rotate(40deg)}
.brand .mark::after{left:28px;top:6px;width:12px;height:12px}
.brand .bt{display:flex;flex-direction:column;line-height:1.1}
.brand .wordmark{font-size:32px;letter-spacing:-.03em;background:linear-gradient(90deg,#7a3ca0,#d6452a);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .bt small{font-size:17px;font-weight:700;color:var(--muted);margin-top:3px;letter-spacing:0}

/* 표지: 그림이 창 전체를 꽉 채움(좌우 여백 없음) */
.in-title #bgfill{inset:0;filter:none;background-size:cover;background-position:50% 22%}
.in-title #stage{background:transparent}
.in-title #stage::before{display:none}
.cover{background:none!important}

/* 활동 방법 버튼은 첫 페이지에서만 */
.in-title #top .tbtn#helpBtn{display:inline-flex}
body:not(.in-title) #helpBtn{display:none}

/* 표지 버튼: 가로 배치, 크기·높이·글자 크기 동일 */
.cover .cta{flex-direction:row;justify-content:center;align-items:center;gap:32px}
.cover .cta .btn{width:360px;height:84px;padding:0;font-size:32px}

/* 세로가 긴 화면에서도 독자 카드 내용이 흩어지지 않게 가운데로 모음 */
.lc{align-items:center}
.lc .chat{max-height:100%;align-self:center}
.lc .av{align-self:center}
.lc.w2 .chat{justify-content:center}
.L2 .pv{flex:1 1 504px;height:auto;min-height:504px}
.L2 .lc{flex:none;height:414px}
.R2 .lc{flex:1 1 380px;min-height:380px;max-height:520px}

/* 왼쪽 위 제목(개선): 마스코트 + 선명한 제목 + 형광펜 밑줄 */
.brand{gap:14px;padding:6px 26px 6px 8px;height:64px;background:#fffdf8;border:2px solid #e4d9c3;box-shadow:0 12px 22px -14px rgba(90,50,120,.6),0 2px 0 rgba(255,255,255,.9) inset}
.brand .bmark{flex:none;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c9,#ffd54a 70%);box-shadow:0 0 0 3px #fff,0 0 0 5px #e8c94a;display:grid;place-items:center;overflow:hidden}
.brand .bmark img{height:48px;width:auto;margin-top:6px;transform:scale(1.15) translateY(2px)}
.brand .bt{gap:2px}
.brand .wordmark{font-size:33px;letter-spacing:-.02em;line-height:1.05;color:#5d2b7a;background:linear-gradient(transparent 62%,#ffd54a 62%,#ffd54a 92%,transparent 92%);-webkit-background-clip:border-box;background-clip:border-box;padding:0 4px;margin-left:-4px;align-self:flex-start}
.brand .bt small{font-size:17px;font-weight:700;color:#7a6a58;margin-top:2px}

/* 단계 표시줄: 화면 가운데 */
#steps{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:31}

/* ================= 가독성·세련됨 개선 (2차) ================= */
:root{--muted:#6b6254;--ink2:#3a342b;--line:#e2d6bd;--card:#fffdf9;--shp:0 1px 0 rgba(255,255,255,.95) inset,0 2px 4px rgba(70,45,10,.06),0 26px 44px -28px rgba(70,45,10,.42)}
body{font-weight:600}
#stage::before{background-image:radial-gradient(rgba(90,70,30,.07) 1.3px,transparent 1.7px),radial-gradient(900px 600px at 0 0,rgba(205,190,235,.40),transparent 70%),radial-gradient(900px 600px at 100% 100%,rgba(250,200,215,.40),transparent 70%)}
.card{background:rgba(255,253,249,.94);border:1px solid rgba(226,214,189,.75);border-radius:30px;box-shadow:var(--shp)}
.R,.R2,.wr,.pv,.fin>.card,.rep>.card,.lc{position:relative}
.R::before,.R2::before,.wr::before{content:"";position:absolute;left:34px;right:34px;top:0;height:6px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,#8a4fb0,#ff7aa8 60%,#ffd54a)}
.pill{height:38px;font-size:18px;padding:0 18px}
.lbl{font-size:19px;color:var(--muted)}
/* 상단 바 */
.tbtn{height:48px;font-size:19px;font-weight:800;border:2px solid var(--line);background:rgba(255,253,249,.94)}
.sg{height:46px;font-size:19px;border:2px solid var(--line)}
.sg i{width:30px;height:30px;font-size:18px}
/* 글 제목·질문 */
.rhead h2{font-size:34px;letter-spacing:-.02em}
.q{font-size:25px;line-height:1.5;font-weight:800}
.q small{font-size:20px;font-weight:700;color:var(--ink2)}
.dots i{height:14px}.dots i.on{background:linear-gradient(90deg,#8a4fb0,#b27bd6)}
/* 안내 말풍선 */
.say{font-size:23px;line-height:1.55;font-weight:700;border:1px solid #efe5cf}
.say small{font-size:18px}
/* 독자 정보 */
.profile{grid-template-columns:auto 1fr;gap:12px 18px;padding:18px 24px;background:linear-gradient(180deg,#f9f2e3,#f4ebd8);border:1px solid #eadfc6}
.profile b{font-size:19px;background:var(--plum);color:#fff;border-radius:99px;padding:3px 16px;justify-self:start}
.profile span{font-size:24px;font-weight:800}
.rstrip{grid-template-columns:76px 1fr 1fr 1fr;background:linear-gradient(180deg,#f9f2e3,#f4ebd8);border:1px solid #eadfc6;padding:8px 18px}
.rstrip img{height:72px}
.rstrip .ri{font-size:19px;font-weight:800;line-height:1.3}
.rstrip .ri small{font-size:17px;color:var(--plum)}
/* 글 미리보기(공책) */
.pvh b{font-size:26px}
.ptxt{font-size:29px;line-height:48px;font-weight:700;color:#241f19}
.ptxt .gr{font-size:24px}.ptxt .cl{font-size:27px}
.paper{background-image:repeating-linear-gradient(transparent 0 46px,#efe4cc 46px 48px);border:2px solid #e6d9bd;box-shadow:inset 0 2px 6px rgba(120,90,30,.06)}
.ck{padding:0 4px}
/* 점수 막대 */
.g .gt{font-size:24px;font-weight:800}
.g .gt svg{width:30px;height:30px}
.g .gt em{font-size:30px;font-weight:800}
.gbar{height:22px;background:#e9dec8;box-shadow:inset 0 2px 4px rgba(90,60,10,.12)}
.gbar i{background:linear-gradient(90deg,#e8643f,#f08a5d);box-shadow:0 2px 6px rgba(220,90,50,.35)}
.g.mid .gbar i{background:linear-gradient(90deg,#e8a800,#f4c84a)}
.g.ok .gbar i{background:linear-gradient(90deg,#2f8a63,#46b885)}
.g .gd{font-size:18px;font-weight:700;color:var(--muted)}
.lc .av b{font-size:23px}.lc .av small{font-size:18px;color:var(--muted)}
.lc.w2 .g .gt{font-size:21px}.lc.w2 .g .gt em{font-size:25px}
.cb{font-size:21px;line-height:1.4;font-weight:700;padding:8px 16px;border-radius:20px 20px 20px 6px}
/* 칸 고르기 */
.tab{height:48px;font-size:21px;padding:0 20px}
.ask{font-size:23px;padding:10px 18px;border:2px solid #f3e2a0}
.ask b{font-size:22px}
.op{font-size:24px;font-weight:800;padding:13px 20px;border:3px solid #f0e6d0;background:#fff;box-shadow:0 2px 0 #eadfc6}
.op .n{width:44px;height:44px;font-size:22px}
.op:hover{background:#fffaec;border-color:#e8d9a8}
.op.sel{background:#fff4c4;border-color:#e8b800;box-shadow:0 2px 0 #d9a800}
.op .tg{font-size:17px}
.tipbox{font-size:22px;line-height:1.55;font-weight:700;border:1px solid #d4def4}
.tipbox small{font-size:18px}
.fb{font-size:22px;line-height:1.55}
.fb small{font-size:18px}
.chip{font-size:22px;font-weight:800;background:#fff;border:3px solid #efe4cb}
.chip.sel{background:#fff4c4;border-color:#e8b800}
.result h3{font-size:32px}.result p{font-size:22px}
.road .rd b{font-size:24px}.road .rd p{font-size:21px;font-weight:700}
/* 2단계 */
.how span{font-size:18px;padding:8px 12px}
.seg button{font-size:21px}
.fact{font-size:20px;font-weight:700;padding:9px 16px;background:#f8f1e1;border:1px solid #eadfc6}
.lt{font-size:27px;font-weight:700;border-width:3px}
.mats .chip{font-size:20px}
.ana .a{font-size:18px;font-weight:700;padding:5px 14px}
.rt b{font-size:20px}
.rt{background:#fff;border:3px solid #efe4cb}
.rt.on{background:#fff4c4;border-color:#e8b800}
.prof2{font-size:19px;line-height:1.45;font-weight:700;padding:8px 16px;background:#f8f1e1;border:1px solid #eadfc6}
.hintline{font-size:21px;font-weight:700;line-height:1.45;padding:10px 16px;background:#f8f1e1;border:1px solid #eadfc6}
.goalbar{font-size:22px}
.goalbar .sl i{width:46px;height:46px}
/* 정리·보고서·도감 */
.qc p{font-size:23px;line-height:1.5}
.qc .chip{font-size:21px}
.qc .fb{font-size:20px}
.ckgrid .chip{font-size:22px}
.rep p,.rep li{font-size:22px;font-weight:700}
.rep h3{font-size:30px}
.mrow b{font-size:24px}.mrow p{font-size:20px}
.dcard b{font-size:24px}.dcard p{font-size:20px}.dcard small{font-size:18px}
.cbody{font-size:25px}
.hc b{font-size:24px}.hc p{font-size:21px}
.hint-x{display:none}
.btn.sm{font-size:22px}
.brand .bt small{font-size:18px}

/* 오른쪽 패널 공간 정리 */
.R .body{gap:10px}
.op{padding:10px 20px}
.rstrip{padding:6px 16px}.rstrip img{height:60px}
.R2 .lc{min-height:350px}
.lc.w2 .av img{height:184px}
.R2{gap:9px}

.spl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.spl div{background:#f3e9fb;border:2px solid #dcc6f2;border-radius:18px;padding:10px 18px;font-size:21px;font-weight:700;line-height:1.4;color:var(--ink2)}
.spl b{display:block;font-size:25px;font-weight:800;color:#5d2b7a;margin-bottom:2px}
.qc p{font-size:24px}.qc .chip{font-size:22px;padding:9px 20px}.qc .fb{font-size:21px}
.qgrid{gap:16px}

/* 표지: 전체 화면·활동 방법 버튼은 오른쪽 위 */
.top-r{margin-left:auto}
.in-title #top{justify-content:flex-end}

/* 제목: 밑줄·부제 없이 한 줄로 */
.brand{height:58px;padding:5px 26px 5px 7px}
.brand .bmark{width:46px;height:46px}
.brand .bmark img{height:44px}
.brand .wordmark{background:none;padding:0;margin:0;font-size:32px;align-self:center}
/* 표지 버튼: 크기 줄임(두 버튼 동일) */
.cover .cta .btn{width:260px;height:62px;font-size:24px;padding:0}
.cover .cta{gap:24px;bottom:70px}

/* ===== 도입 이야기: 그림이 화면을 꽉 채우고 아래쪽에 글 ===== */
.in-story #helpBtn{display:none!important}
#bgfill.swap{animation:bgin .7s both}
@keyframes bgin{from{opacity:.25;transform:scale(1.03)}to{opacity:1;transform:none}}
.in-story #bgfill{background-position:50% 30%}
.story{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 90px 52px}
.sbox{width:1560px;max-width:100%;position:relative;background:rgba(255,253,249,.95);border:2px solid #fff;border-radius:36px;padding:34px 44px 22px;box-shadow:0 30px 60px -26px rgba(40,10,60,.65);animation:up .5s both}
.stag{position:absolute;left:36px;top:-20px;background:var(--plum);color:#fff;font-size:20px;font-weight:800;border-radius:99px;padding:5px 20px;box-shadow:0 6px 0 #5d2b7a}
.sl{font-size:38px;font-weight:800;line-height:1.55;color:#2b2233;letter-spacing:-.01em;opacity:0;transform:translateY(12px);animation:slin .8s var(--d,0s) both}
@keyframes slin{to{opacity:1;transform:none}}
.sl+.sl{margin-top:2px}
.srow{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.sl2{display:flex;gap:12px;min-width:430px}
.sdots{display:flex;gap:10px}.sdots i{width:14px;height:14px;border-radius:50%;background:#dccbe9}.sdots i.on{width:46px;border-radius:99px;background:var(--plum)}.sdots i.dn{background:#b98ad6}
.story .sl2 .btn.sm{width:200px;padding:0}
.story .srow>.btn{width:240px;padding:0}

/* 도입 이야기: 장면 전환 효과 없음(그림·패널이 바로 바뀜) */
#bgfill.swap{animation:none!important}
.sbox{animation:none!important}
.story{animation:none!important}

/* ===== 2단계: 점검표·고치기 도우미 ===== */
.todo{background:#fff4c4;border:2px solid #f0d36a;border-radius:18px;padding:10px 18px;font-size:23px;font-weight:800;line-height:1.4}
.todo small{display:block;font-size:17px;font-weight:800;color:#8a6a00;letter-spacing:.04em}
.todo.done{background:var(--okl);border-color:#8fcfae;color:#17583e}.todo.done small{color:#2f7d5b}
.chk{background:#fff;border:2px solid #eadfc6;border-radius:18px;padding:8px 14px;display:flex;flex-direction:column;gap:4px}
.chk .ct{font-size:19px;font-weight:800;color:var(--plum)}
.ci{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;line-height:1.3;padding:3px 0}
.ci i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:18px;font-weight:800;color:#fff}
.ci.ok i{background:var(--ok)}.ci.no i{background:#e0492b}
.ci.no span{color:#8f2a1f}.ci.ok span{color:var(--ink2)}
.ci span{flex:1}
.fix{flex:none;height:38px;padding:0 14px;border-radius:99px;background:var(--plum);color:#fff;font-size:18px;font-weight:800;box-shadow:0 4px 0 #5d2b7a;transition:transform .1s}
.fix:hover{filter:brightness(1.08)}.fix:active{transform:translateY(3px);box-shadow:0 1px 0 #5d2b7a}
.R2 .lc{min-height:300px}
.lc.w2 .av img{height:150px}
.prof2{font-size:18px;padding:6px 14px}
.lt{height:300px}

/* ===== 상단 바: 본문과 구분되는 별도 띠 ===== */
#top{left:0;right:0;top:0;height:80px;padding:0 28px;background:linear-gradient(180deg,#fffdf9,#f7efdf);border-bottom:2px solid #dccfb4;box-shadow:0 10px 22px -12px rgba(70,45,10,.45);z-index:30}
#top::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#8a4fb0,#ff7aa8 55%,#ffd54a)}
.in-title #top{background:none;border-bottom:0;box-shadow:none}
.in-title #top::before{display:none}
.brand{background:none;border:0;box-shadow:none;padding:4px 20px 4px 6px;height:60px;margin-top:3px}
.brand:hover{box-shadow:none}
.top-r{margin-top:3px}
#steps{top:calc(50% + 3px)}
.scr{padding-top:104px}
.scr>.card,.scr>.L2,.scr>.wr,.scr>.R,.scr>.R2{max-height:100%}

/* 2단계 오른쪽 패널 공간 정리 */
.grow2{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.grow2 .btn{height:56px;font-size:22px;padding:0 28px}
.grow2 .goalbar{flex:1;flex-wrap:wrap}
.R2 .lc{min-height:250px}
.lc.w2 .av img{height:130px}
.lc.w2{padding:8px 16px}
.lc.w2 .g .gt{font-size:20px}.lc.w2 .g .gt em{font-size:23px}
.lc.w2 .gg{gap:8px}
.lc.w2 .g .gd{display:none}
.chk{padding:6px 14px}
.ci{padding:2px 0;font-size:19px}
.todo{padding:8px 16px;font-size:22px}
.chk .ct small{font-size:17px;font-weight:700;color:var(--muted);margin-left:8px}
.ci.now{background:#fff4c4;border-radius:12px;padding:5px 8px;margin:1px -8px}
.ci .nw{display:inline-block;background:#e0492b;color:#fff;border-radius:99px;padding:1px 10px;font-size:17px;font-weight:800;margin-right:8px}
.rt img{height:80px}

/* ===== 도움 장치: 문장 카드·도와줘요 ===== */
.scards{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip.sm{padding:7px 16px;font-size:20px;background:#f3e9fb;border:2px solid #dcc6f2;color:#5d2b7a}
.chip.sm:hover{background:#ebdcf8}
.chip.sm.used{opacity:.55;background:#eef7f1;border-color:#bfe0cc;color:#17583e}
.chk .ct{display:flex;align-items:center;gap:6px}
.fix.help{margin-left:auto;height:36px;background:#e0492b;box-shadow:0 4px 0 #a82e15;font-size:18px}
.fix.help:active{box-shadow:0 1px 0 #a82e15}
.fix[disabled]{background:#cfc5ae;box-shadow:0 4px 0 #b3a98f;cursor:not-allowed;filter:none}
.lt{height:224px}

/* ===== 독자별 글 저장·비교 ===== */
.saverow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip.sm.save{background:#fff4c4;border-color:#e8b800;color:#5a4300}
.chip.sm.cmp{background:#e0f2ea;border-color:#9fd3b8;color:#17583e}
.fxn{font-size:18px;font-weight:800;color:var(--ok)}
.rt .pin{position:absolute;left:4px;top:4px;background:var(--plum);color:#fff;border-radius:99px;padding:0 10px;font-size:17px;font-weight:800;line-height:24px;height:26px}
.cmpg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cmpc{background:#fff;border:3px solid #e8dcc2;border-radius:22px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:430px}
.cmpc.empty{align-items:center;justify-content:center;text-align:center;opacity:.55;border-style:dashed}
.cmpc.empty img{height:120px;filter:grayscale(1)}
.cmpc.empty b{font-size:23px}.cmpc.empty p{font-size:20px;font-weight:700;color:var(--muted)}
.cmpc .ch{display:flex;align-items:center;gap:10px}
.cmpc .ch img{height:64px}
.cmpc .ch b{font-size:23px;font-weight:800;flex:1}
.cmpc .ch em{font-style:normal;background:#e0492b;color:#fff;border-radius:99px;padding:2px 12px;font-size:17px;font-weight:800}
.cmpc .cs{display:flex;gap:6px;font-size:18px;font-weight:700}
.cmpc .cs span{background:#f3ecdc;border-radius:99px;padding:3px 10px}
.cmpc .cs b{font-weight:800;color:var(--plum)}
.cmpc .ct2{flex:1;font-size:20px;font-weight:700;line-height:1.55;background:#fffaf0;border-radius:14px;padding:10px 14px;overflow:auto;max-height:250px}
.cmpc .cm{display:flex;gap:6px;flex-wrap:wrap}
.cmpc .cm span{font-size:17px;font-weight:700;background:#f3e9fb;color:#5d2b7a;border-radius:99px;padding:2px 12px}
.cmpc .cm .none{background:#f3ecdc;color:var(--muted)}
.lt{height:208px}

/* 합격 도장: 기울기 없음 */
.goalbar .sl i.on{transform:none}
.stamp{transform:none}

/* ===== 3단계 정리: 한 문제씩 크게 ===== */
.card.qz{padding:24px 34px 22px;display:flex;flex-direction:column;gap:12px;flex:1;position:relative}
.card.qz::before{content:"";position:absolute;left:34px;right:34px;top:0;height:6px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,#8a4fb0,#ff7aa8 60%,#ffd54a)}
.qprog{display:flex;gap:10px;align-items:center}
.qprog i{width:44px;height:44px;border-radius:50%;background:#efe6d3;color:var(--muted);display:grid;place-items:center;font-style:normal;font-size:21px;font-weight:800;border:3px solid transparent}
.qprog i.now{background:#fff;border-color:var(--plum);color:var(--plum);box-shadow:0 4px 0 #d9c3ee}
.qprog i.dn{background:var(--ok);color:#fff}
.qmain{display:flex;gap:30px;align-items:flex-start;flex:1;min-height:0}
.qguide img{height:300px;width:auto;animation:bob 3.2s ease-in-out infinite}
.qbody{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.qbubble{background:#fff;border:3px solid #e8dcc2;border-radius:28px 28px 28px 8px;padding:20px 28px;font-size:30px;font-weight:800;line-height:1.5;box-shadow:0 14px 24px -16px rgba(60,40,10,.5)}
.qbubble small{display:block;font-size:19px;font-weight:800;color:var(--plum);margin-bottom:4px}
.qans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ans{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px 14px 20px;border-radius:26px;background:#fff;border:3px solid #eadfc6;box-shadow:0 6px 0 #eadfc6;transition:.15s}
.ans:hover{transform:translateY(-3px);border-color:var(--c);box-shadow:0 9px 0 var(--bg)}
.ans .ai{width:74px;height:74px;border-radius:50%;background:var(--bg);display:grid;place-items:center;color:var(--c)}
.ans .ai svg{width:44px;height:44px}
.ans .at b{display:block;font-size:27px;font-weight:800;color:var(--ink)}
.ans .at small{display:block;font-size:19px;font-weight:700;line-height:1.4;color:var(--ink2);margin-top:4px}
.ans.good{background:var(--okl);border-color:var(--ok);box-shadow:0 6px 0 #9fd3b8;animation:pop .4s both}
.ans.bad{background:var(--nol);border-color:#e0492b;box-shadow:0 6px 0 #f0b3a6;animation:shake .4s}
.ans.dim{opacity:.45;pointer-events:none}
.qend{align-items:center}
.qend>img{height:300px;width:auto}
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qc2{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 14px;border-radius:24px;background:var(--bg);border:3px solid var(--c);animation:pop .5s both}
.qc2 .ai{width:70px;height:70px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--c)}.qc2 .ai svg{width:42px;height:42px}
.qc2 b{font-size:26px;font-weight:800}.qc2 small{font-size:19px;font-weight:700;line-height:1.4;color:var(--ink2)}
.card.qz .ft{margin-top:auto;display:flex;gap:14px;justify-content:flex-end}
.ckgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chip.ck{justify-content:flex-start;text-align:left;gap:14px;padding:16px 22px;border-radius:22px;font-size:23px;line-height:1.35}
.chip.ck .cb{flex:none;width:34px;height:34px;border-radius:50%;border:3px solid #cdbf9f;background:#fff;display:grid;place-items:center;font-style:normal;font-size:21px;font-weight:800;color:#fff}
.chip.ck.sel .cb{background:var(--ok);border-color:var(--ok)}
.pledge{display:flex;gap:20px;align-items:center;background:#fbf5e6;border:2px solid #eadfc6;border-radius:26px;padding:14px 24px}
.pledge img{height:130px;width:auto}

/* ===== 보고서(개선): 요약 띠 + 두 칸 ===== */
.rep2{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0}
.rhero{display:flex;align-items:center;gap:26px;padding:16px 34px;position:relative;background:linear-gradient(135deg,#fffdf9,#f6ecfb)}
.rhero::before{content:"";position:absolute;left:34px;right:34px;top:0;height:6px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,#8a4fb0,#ff7aa8 60%,#ffd54a)}
.rhero img{height:150px;width:auto}
.rht{flex:1;display:flex;flex-direction:column;gap:6px}
.rht h2{font-size:42px}.rht p{font-size:23px;font-weight:700;color:var(--ink2)}
.rstats{display:flex;gap:12px}
.rst{min-width:150px;background:#fff;border:2px solid #e8dcc2;border-radius:22px;padding:12px 18px;text-align:center;box-shadow:0 5px 0 #eadfc6}
.rst b{display:block;font-size:40px;font-weight:800;color:var(--plum);line-height:1.1}
.rst b small{font-size:20px;font-weight:700;color:var(--muted)}
.rst span{font-size:19px;font-weight:800;color:var(--ink2)}
.rcols{flex:1;display:grid;grid-template-columns:1fr 1.1fr;gap:20px;min-height:0}
.rc1,.rc3{padding:20px 28px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.rc2{display:flex;flex-direction:column;gap:16px;min-height:0}
.rc3{flex:1}
.rc1 h3,.rc3 h3{font-size:28px;display:flex;align-items:center;gap:12px}
.rc1 h3 i,.rc3 h3 i{width:38px;height:38px;border-radius:50%;background:var(--plum);color:#fff;display:grid;place-items:center;font-style:normal;font-size:21px}
.rc3 h3 small{font-size:20px;color:var(--ok);font-weight:800}
.rc1 .mrow{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;background:#f8f1e1;border:1px solid #eadfc6;border-radius:22px;padding:12px 18px}
.rc1 .mrow img{height:86px;width:auto;justify-self:center}
.rc1 .mrow b{font-size:25px;font-weight:800;margin-right:10px}
.rc1 .mrow .stars{display:inline-flex;vertical-align:middle}.rc1 .mrow .stars svg{width:28px;height:28px}
.rc1 .mrow p{font-size:21px;font-weight:700;line-height:1.45;color:var(--ink2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rtext{background:#fffaf0;border:2px solid #eadfc6;border-radius:18px;padding:12px 18px;font-size:21px;font-weight:700;line-height:1.55;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rmeta{display:flex;gap:8px;flex-wrap:wrap}
.rmeta span{font-size:18px;font-weight:800;background:#f0e8d6;border-radius:99px;padding:3px 14px}
.rmeta .ok{background:var(--okl);color:#17583e}
.rcmp{font-size:20px;font-weight:700;color:var(--ink2);background:#f3e9fb;border-radius:14px;padding:8px 14px}
.rc3 ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.rc3 li{font-size:21px;font-weight:700;display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.rc3 li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800;margin-top:1px}
.rpl{background:#fbf5e6;border:2px solid #eadfc6;border-radius:18px;padding:10px 16px;font-size:21px;font-weight:700;line-height:1.5}
.rpl b{display:block;font-size:18px;color:var(--plum);margin-bottom:2px}
.rbtns{display:flex;gap:14px;justify-content:flex-end}

/* 이야기: 첫 줄은 바로 보이고(빈 패널이 깜박이지 않게), 둘째 줄부터 차례로 나타남 */
.sbox .sl:first-of-type{opacity:1;transform:none;animation:none}

/* 2단계 오른쪽 패널: 합격 안내를 한 줄로, 목표 줄을 한 줄로 */
.todo.done{display:flex;align-items:center;gap:12px;padding:8px 16px}
.todo.done small{margin:0;white-space:nowrap}
.grow2 .goalbar{flex-wrap:nowrap;font-size:20px;gap:10px}
.goalbar .sl i{width:42px;height:42px}
.goalbar>span:first-child{white-space:nowrap}
.goalbar>span:last-child{white-space:nowrap;font-size:19px}
.goalbar .sl i{width:38px;height:38px}

/* 2단계 시작 버튼: 크고 눈에 띄게 */
.go2note{background:linear-gradient(135deg,#f6ecfb,#fff4c4);border:2px solid #d9c3ee;border-radius:20px;padding:12px 20px;font-size:22px;font-weight:700;line-height:1.5;color:var(--ink2)}
.go2note b{display:block;font-size:26px;font-weight:800;color:#5d2b7a}
.btn.go2{height:84px;font-size:34px;padding:0 56px;animation:go2p 1.6s ease-in-out infinite}
.btn.go2[disabled]{animation:none}
@keyframes go2p{0%,100%{transform:scale(1);box-shadow:0 7px 0 #5d2b7a,0 18px 26px -12px rgba(120,60,160,.65)}50%{transform:scale(1.05);box-shadow:0 7px 0 #5d2b7a,0 0 0 10px rgba(168,104,204,.28),0 18px 26px -12px rgba(120,60,160,.65)}}

/* 2단계 시작 버튼: 크고 눈에 띄게 */
.go2note{background:linear-gradient(135deg,#f6ecfb,#fff4c4);border:2px solid #d9c3ee;border-radius:20px;padding:12px 20px;font-size:22px;font-weight:700;line-height:1.5;color:var(--ink2)}
.go2note b{display:block;font-size:26px;font-weight:800;color:#5d2b7a}
.btn.go2{height:84px;font-size:34px;padding:0 56px;animation:go2p 1.6s ease-in-out infinite}
.btn.go2[disabled]{animation:none}
@keyframes go2p{0%,100%{transform:scale(1);box-shadow:0 7px 0 #5d2b7a,0 18px 26px -12px rgba(120,60,160,.65)}50%{transform:scale(1.05);box-shadow:0 7px 0 #5d2b7a,0 0 0 10px rgba(168,104,204,.28),0 18px 26px -12px rgba(120,60,160,.65)}}