/* 책 속의 길 — 색과 글꼴은 저장소의 다른 앱(첫 화면, 우리 반 토의, 제안하는 글쓰기)과 같은 값.
   색연필: 중심 문장·글쓴이의 의견 노랑, 새로 안 것 분홍, 뒷받침하는 까닭 하늘. 읽기 전 파랑 · 읽기 중 노랑 · 읽기 후 초록 */
:root{
  --paper:#FBFAF6; --surface:#FFFFFF; --sunken:#F3F1EA; --ink:#232022; --muted:#6E6A63; --faint:#9A958C;
  --rule:#E2DED4; --seal:#C2452D; --seal-soft:#F7E6E1; --sky:#3B6EA5; --sky-soft:#E4EDF6; --leaf:#4F7A4A; --leaf-soft:#E6F0E2;
  --amber:#B57A1F; --amber-soft:#FBF0D9; --letter:#FFFDF7;
  --yel:#94650F; --yel-soft:#FCF2D6; --yel-mid:#EAD08A;
  --pink:#B0446A; --pink-soft:#FBE7EE; --pink-mid:#EAB2C5;
  --blue:#3B6EA5; --blue-soft:#E4EDF6; --blue-mid:#AFC8E4;
  --pre:#3B6EA5; --pre-soft:#E6EFF8; --mid:#94650F; --mid-soft:#FCF2D6; --post:#4F7A4A; --post-soft:#E8F1E3;
  --shadow:0 1px 2px rgba(35,32,34,.06),0 10px 30px -14px rgba(35,32,34,.22); --on:#FFFFFF;
  --sans:"IBM Plex Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --serif:"Gowun Batang","Batang",Georgia,serif;
  --mono:"IBM Plex Mono","Consolas","IBM Plex Sans KR","Malgun Gothic",monospace;
  --cute:"Jua","Gowun Dodum","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#1A1917; --surface:#242220; --sunken:#201E1C; --ink:#EDE9E0; --muted:#A8A197; --faint:#7D766C; --rule:#37332E;
    --seal:#E2795F; --seal-soft:#3A2622; --sky:#8DB4E0; --sky-soft:#1F2A36; --leaf:#93BE8B; --leaf-soft:#1F2B1D; --amber:#E0B05A; --amber-soft:#33291A;
    --letter:#26231F;
    --yel:#E6C46E; --yel-soft:#302816; --yel-mid:#665327;
    --pink:#EBA0B9; --pink-soft:#33202A; --pink-mid:#6E3A4E;
    --blue:#93B9E3; --blue-soft:#1E2935; --blue-mid:#3A5470;
    --pre:#93B9E3; --pre-soft:#1E2935; --mid:#E6C46E; --mid-soft:#302816; --post:#9CC690; --post-soft:#1F2B1D;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6); --on:#1A1917; }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
button,.sn{touch-action:manipulation}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--serif);line-height:1.35;margin:0 0 .5em}
h2{font-size:1.6em} h3{font-size:1.2em}
p{margin:.4em 0}
small{font-weight:400;color:var(--muted)}
button,input,textarea{font:inherit;color:inherit}
svg{display:block;max-width:100%}
blockquote{margin:6px 0 10px;padding:8px 14px;border-left:4px solid var(--rule);background:var(--sunken);border-radius:0 10px 10px 0;font-size:1.04em}
.loading{color:var(--muted);text-align:center;padding:40px 16px}
.fine{color:var(--muted);font-size:.88em} .fine.right{text-align:right}
.muted{color:var(--faint)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.row.center,.center{justify-content:center;text-align:center}
.big{font-size:1.08em}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* 단추 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 18px;border-radius:12px;border:1.5px solid var(--rule);
  background:var(--surface);font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{border-color:var(--faint)} .btn:active{transform:scale(.97)}
.btn:disabled{opacity:.42;cursor:default;transform:none}
.btn.primary{background:var(--seal);border-color:var(--seal);color:var(--on)}
.btn.big{min-height:54px;font-size:1.08em;padding:0 24px}
.btn.huge{min-height:70px;font-size:1.35em;padding:0 40px;border-radius:18px}
.btn.small{min-height:40px;padding:0 14px;font-size:.92em}
.btn small{color:inherit;opacity:.8;margin-left:4px}
.linkbtn{background:none;border:0;padding:0;color:var(--sky);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}

/* 위 막대 */
.top{position:sticky;top:0;z-index:5;background:var(--paper);background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.topin{max-width:980px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;font-family:var(--serif);font-weight:700;font-size:1.08em;padding:6px 2px}
.mark{width:.62em;height:.62em;border:2px solid var(--seal);transform:rotate(45deg);display:inline-block;flex:none}
.stages{display:flex;gap:6px}
.stg{display:flex;align-items:center;gap:7px;border:1.5px solid var(--rule);background:var(--surface);border-radius:999px;padding:5px 13px 5px 6px;cursor:pointer;font-weight:600;font-size:.92em}
.stg b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sunken);font-family:var(--mono);font-size:.9em}
.stg.on{border-color:var(--seal);background:var(--seal-soft)} .stg.on b{background:var(--seal);color:var(--on)}
.stg.done b{background:var(--leaf);color:var(--on)}
.stg.snd{padding:5px 12px 5px 8px;color:var(--muted)} .stg.snd svg{width:22px;height:22px}
.stg.snd[aria-pressed="false"]{color:var(--faint);border-style:dashed}
@media (max-width:600px){ .stg span{display:none} .stg{padding:5px} .stg.snd{padding:5px 8px} }

/* 화면 */
.scr{max-width:980px;margin:0 auto;padding:22px 16px 70px}
.scr.enter{animation:up .32s ease-out}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.shead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.kicker{font-family:var(--cute);color:var(--seal);font-size:1.08em}
.pg{font-family:var(--mono);font-size:.78em;color:var(--faint);letter-spacing:.02em}
.count{margin-left:auto;font-family:var(--mono);font-weight:600;color:var(--muted)}
.dots{margin-left:auto;display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;background:var(--rule);display:block}
.dots i.d{background:var(--leaf)} .dots i.c{outline:2.5px solid var(--seal);outline-offset:2px}
.navrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.tip{background:var(--amber-soft);border-radius:12px;padding:11px 15px;margin:14px 0}
.tip.pink{background:var(--pink-soft)}
.donebox{background:var(--leaf-soft);color:var(--leaf);border-radius:12px;padding:13px 16px;margin:16px 0;font-weight:600}
.donebox b{margin-right:6px} .donebox.big{font-size:1.12em;padding:16px 18px}
.result{animation:up .3s ease-out}
.place{display:inline-block;font-family:var(--cute);background:var(--sunken);border-radius:999px;padding:2px 12px;color:var(--muted)}
.story{font-size:1.18em;line-height:1.7;margin-top:8px;font-weight:600}
.art{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow);background:var(--sunken)}
.art img{display:block;width:100%;height:auto}
.fb{min-height:1.5em;margin:8px 2px;font-weight:600}
.fb.ok{color:var(--leaf)} .fb.no{color:var(--seal)}
.no{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.err{color:var(--seal);font-weight:700;min-height:1.3em;margin:12px 0 0}
.err.shake{animation:shake .38s}

/* 입력 */
.fl{display:block;font-weight:700;margin:16px 0 7px}
.fld{display:block;margin:0 0 10px}
.fld textarea,.fld input,.labrow input,.batch textarea{width:100%;border:1.5px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--surface);resize:vertical;line-height:1.6;font-size:1.08em}
.fld textarea:focus,.fld input:focus,.labrow input:focus{border-color:var(--sky);outline:none}
.fld input::placeholder,.labrow input::placeholder,.batch textarea::placeholder{color:var(--faint)}
.fld input:disabled{opacity:.6}
.fld.narrow{max-width:360px;margin-inline:auto;text-align:left}
.fm{display:flex;justify-content:space-between;gap:10px;font-size:.84em;color:var(--faint);margin-top:4px}
.live{font-weight:600} .live.ok{color:var(--leaf)} .live.no{color:var(--seal)}
.chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:4px 0 6px}
.cl{font-size:.85em;color:var(--muted);font-weight:600;margin-right:2px}
.chip{border:1.5px solid var(--rule);background:var(--surface);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:.95em;min-height:40px}
.chip.on{background:var(--sky-soft);border-color:var(--sky);color:var(--sky);font-weight:700}
.chip.big{font-size:1.05em;padding:8px 16px;min-height:46px}
.chip:disabled{opacity:.4;cursor:default}
.chip.ghost{cursor:default;border-style:dashed;color:var(--pink);border-color:var(--pink-mid);background:var(--pink-soft)}

/* 첫 화면 */
.home{padding-top:clamp(10px,calc(4 * var(--vw,1vw)),40px)}
.eyebrow{font-family:var(--mono);font-size:.8em;color:var(--faint);letter-spacing:.04em;margin:0 0 6px}
.home h1{font-size:clamp(2em,calc(6 * var(--vw,1vw)),2.8em);display:flex;align-items:center;gap:14px;margin:0 0 10px;letter-spacing:-.02em}
.home h1 .mark{width:.42em;height:.42em}
.lede{font-size:1.1em;color:var(--muted);max-width:46em;line-height:1.75}
.lede b{color:var(--ink)}
.mapbox{margin:26px 0 18px;background:var(--letter);border:1px solid var(--rule);border-radius:22px;padding:18px 18px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.mapbox::before{content:"";position:absolute;inset:0 50% 0 auto;width:1px;background:linear-gradient(var(--rule),transparent 30%,transparent 70%,var(--rule));opacity:.7}
.maph{font-family:var(--cute);color:var(--seal);font-size:1.1em;margin:0 0 14px;position:relative}
.maph small{font-family:var(--mono);font-size:.72em;color:var(--faint);margin-left:6px}
.map{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:.8fr 1.6fr .8fr 1.6fr .8fr;gap:12px;align-items:stretch;position:relative}
.map::before{content:"";position:absolute;left:4%;right:4%;top:50%;border-top:4px dashed #D9C9A8;z-index:0}
.stop{position:relative;z-index:1;display:flex;flex-direction:column}
.stop.grey{justify-content:center;align-self:center;background:var(--sunken);border:1.5px dashed var(--rule);border-radius:16px;padding:10px 10px;text-align:center;color:var(--muted)}
.stop.grey .les{font-family:var(--mono);font-size:.74em;color:var(--faint)}
.stop.grey b{font-family:var(--serif);font-size:1em;color:var(--ink)}
.stop.grey small{font-size:.76em;line-height:1.4;color:var(--faint)}
.stopcard{width:100%;height:100%;text-align:left;background:var(--surface);border:2px solid var(--rule);border-radius:18px;padding:16px 16px 14px;cursor:pointer;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;transition:transform .18s,border-color .18s}
.stopcard:hover{transform:translateY(-3px);border-color:var(--seal)}
.stopcard .mno{font-family:var(--cute);color:var(--seal);font-size:1.05em}
.stopcard>b{font-family:var(--serif);font-size:1.4em}
.stopcard .pp{font-family:var(--mono);font-size:.76em;color:var(--faint)}
.stopcard p{color:var(--muted);margin:8px 0 8px;font-size:.95em}
.stopcard .st{margin-top:auto;font-weight:700;font-size:.9em;color:var(--sky)}
.st.ok{color:var(--leaf)} .st.now{color:var(--seal)}
@media (max-width:880px){
  .map{grid-template-columns:1fr;gap:10px} .map::before{left:50%;right:auto;top:4%;bottom:4%;border-top:0;border-left:4px dashed #D9C9A8}
  .stop.grey{align-self:center;min-width:60%} .mapbox::before{display:none}
}
details.teacher{margin:30px 0 0;border:1px dashed var(--rule);border-radius:14px;padding:10px 16px;color:var(--muted)}
details.teacher summary{cursor:pointer;font-weight:700;color:var(--ink)}
details.teacher ul{margin:10px 0 4px;padding-left:1.2em} details.teacher li{margin:6px 0}
details.teacher b{color:var(--ink)}
.batch{margin:16px 0 6px;padding:12px 14px;background:var(--surface);border:1.5px solid var(--rule);border-radius:14px}
.batch .fl{margin-top:0}
.batch textarea{font-size:1em;margin:6px 0 0}


/* ---------- 마당 1: 고무줄 무대 ---------- */
.rbwrap{margin:14px 0 6px}
.rb{--t:0;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;
  background:var(--letter);border:2px solid var(--rule);border-radius:22px;padding:34px 12px 40px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.rb:active{cursor:grabbing}
.rb:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.rb-row{display:flex;align-items:flex-end;justify-content:center;font-family:var(--cute);font-size:clamp(40px,calc(9 * var(--vw,1vw)),84px);line-height:1.15;white-space:nowrap;color:var(--ink)}
.rb-ch{display:inline-block;width:.98em;text-align:center}
.rb-fills{display:inline-flex}
.rb-ch.f{color:color-mix(in srgb,var(--ink) 62%,#C99B6B);transform:scaleY(calc(1 - var(--t) * .18));animation:pull .18s ease-out}
@keyframes pull{from{transform:scaleX(.4);opacity:.3}to{transform:none;opacity:1}}
.rb-hid{display:inline-flex;border-radius:16px;padding:0 4px;transition:background .25s,box-shadow .25s,color .25s}
.rb-hid.on{background:var(--yel-soft);box-shadow:0 0 0 3px var(--yel-mid),0 0 26px 2px color-mix(in srgb,var(--yel-mid) 80%,transparent);color:var(--yel)}
.rb-band{position:absolute;left:14%;right:14%;bottom:24px;height:calc(10px - var(--t) * 7px);border-radius:99px;
  background:color-mix(in srgb,#C99B6B calc(100% - var(--t) * 100%),#C2452D);opacity:.85;transition:height .15s}
.rb.snap{animation:shake .45s}
.rb-pop{position:absolute;top:10px;left:50%;transform:translate(-50%,-6px);font-family:var(--cute);font-size:1.2em;padding:3px 14px;border-radius:999px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.rb-pop.show{opacity:1;transform:translate(-50%,0)}
.rb-pop.yay{background:var(--leaf);color:var(--on)} .rb-pop.ouch{background:var(--seal);color:var(--on);font-size:1.5em} .rb-pop.hmm{background:var(--sky);color:var(--on)}
.rb-btns{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}
.rb-how{color:var(--muted);font-size:.9em;text-align:center}
@media (max-width:520px){ .rb-how{display:none} }

/* 그림 모음 — 3장씩 */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0 8px}
.gcard{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--surface);border:1px solid var(--rule);border-radius:18px;overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.gcard:hover{transform:translateY(-4px);border-color:var(--faint)}
.gimg{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--sunken)}
.gimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gcard:hover .gimg img{transform:scale(1.05)}
.gq{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--cute);font-size:1.35em;
  background:var(--seal);color:var(--on);box-shadow:0 4px 10px -4px rgba(0,0,0,.4);animation:bob 2.6s ease-in-out infinite}
.gcard.solved .gq{background:var(--leaf);animation:none}
@keyframes bob{50%{transform:translateY(-4px)}}
.gcap{display:flex;flex-direction:column;gap:3px;padding:12px 15px 14px}
.gcap b{font-family:var(--serif);font-size:1.12em}
.gcap small{color:var(--muted);font-size:.9em;line-height:1.5}
.gcard.solved .gcap small{color:var(--leaf);font-weight:600}
@media (max-width:640px){ .gallery{grid-template-columns:1fr 1fr;gap:12px} }

/* 수수께끼 한 장 — 늘이면 그림이 바뀐다 */
.rid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:18px;align-items:center}
.flip{position:relative;aspect-ratio:3/2}
.flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform .6s ease}
.flip .b{opacity:0;transform:scale(1.06)}
.rid.solved .flip .a{opacity:0;transform:scale(.96)} .rid.solved .flip .b{opacity:1;transform:none}
@media (max-width:640px){ .rid{grid-template-columns:1fr} }

/* 실험실·도감 */
.labin{background:var(--surface);border:1.5px solid var(--rule);border-radius:16px;padding:6px 16px 12px;margin:14px 0}
.labrow{display:flex;gap:10px} .labrow input{max-width:260px;font-family:var(--cute);font-size:1.3em;padding:8px 14px}
.ask{background:var(--sky-soft);border-radius:14px;padding:12px 16px;margin:14px 0}
.ask p{margin:0;font-family:var(--cute);font-size:1.25em;color:var(--sky)}
.dex{margin:22px 0 0}
.dex h3{display:flex;align-items:center;gap:10px}
.dex h3 .count{margin-left:0;font-size:.7em}
.dexlist{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.dexcard{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;padding:10px 34px 10px 14px;font-family:var(--cute);font-size:1.2em}
.dexcard b{font-weight:400} .dexcard .h{color:var(--yel)} .dexcard .arrow{color:var(--faint)}
.dexcard small{flex-basis:100%;font-family:var(--sans);font-size:.62em;color:var(--faint)}
.dexcard.t-mine{border-style:dashed}
.dexcard .x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:0;background:var(--sunken);color:var(--faint);cursor:pointer;font-size:1em;line-height:1}

/* 3D 대문책 미리 보기 — 칸마다 앞 칸의 오른쪽 끝에 붙어 접힌다(book3d.js). 종이라서 어두운 화면에서도 종이 색 그대로 */
.accbox{background:var(--sunken);border-radius:18px;padding:12px 16px 14px;margin:14px 0;display:flex;flex-direction:column;align-items:center;gap:8px;overflow:hidden}
.b3{--w:clamp(38px,calc(8.2 * var(--vw,1vw)),78px);--h:calc(var(--w) * 1.28);width:100%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.b3:active{cursor:grabbing}
.b3-stage{position:relative;height:calc(var(--h) * 1.95);padding-top:calc(var(--h) * .2);display:grid;place-items:center;perspective:calc(var(--w) * 13);perspective-origin:50% 25%}
.b3-root{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;
  transform:translateX(calc((0.5 - var(--mid, .5)) * var(--w))) rotateX(18deg) rotateY(-10deg)}
.b3 .pg{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform-style:preserve-3d;transform-origin:0 50%}
.b3 .pg .pg{left:100%}
.b3 .face,.b3 .back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid #2B2523;border-radius:3px}
.b3 .face{display:grid;place-items:center;background:linear-gradient(90deg,#F6F0E2,#FFFDF6 18%,#FFFDF6 82%,#F3EDDF);color:#2B2523;font-family:var(--cute);font-size:calc(var(--w) * .62);line-height:1;transition:box-shadow .3s}
.b3 .face span{transform:translateY(4%)}
.b3 .face .num{position:absolute;bottom:2px;right:4px;font-style:normal;font-family:var(--mono);font-size:max(9px,calc(var(--w) * .13));color:#9A958C}
.b3 .pg.k-hid>.face{background:linear-gradient(90deg,#F7E9BE,#FFF3C9 18%,#FFF3C9 82%,#F5E6B9);color:#94650F}
.b3 .back{transform:rotateY(180deg);background:repeating-linear-gradient(0deg,#EFE7D6 0 6px,#F4EDDF 6px 12px)}
.b3 .pg.odd>.face::after,.b3 .pg:not(.odd)>.back::after{content:"";position:absolute;inset:0;border-radius:2px;background:#3B2F25;opacity:var(--sh,0);pointer-events:none}
.b3.open .pg.k-hid>.face{box-shadow:0 0 0 3px #EAD08A,0 0 26px 4px rgba(234,208,138,.85)}
.b3-floor{position:absolute;left:50%;bottom:calc(var(--h) * .08);width:calc(var(--span, 1) * var(--w) * 1.05);height:calc(var(--h) * .22);transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(60,45,30,.30),rgba(60,45,30,0) 70%);pointer-events:none}
.b3-ctl{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;width:100%}
.b3-ctl input[type=range]{width:min(320px,60%);accent-color:var(--seal);height:28px}

/* 인쇄 상자·PNG */
.printbox{text-align:center;margin:22px 0 0;padding:20px 16px;background:var(--surface);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:12px}
.printbox .fine{max-width:36em;margin:0}
.printbox .fld{width:100%}
.prrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.paperopt{display:flex;align-items:center;gap:9px;cursor:pointer}
.paperopt input{width:22px;height:22px;accent-color:var(--seal)}
.pngout{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px;border-top:1px dashed var(--rule)}
.pngout .fl{margin:6px 0 0}
.pnglist{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.pnglist figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(260px,100%)}
.pnglist img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow)}
.pnglist figcaption{display:flex;flex-direction:column;align-items:center;gap:2px}
.pnglist a.btn{text-decoration:none}

/* ---------- 마당 2: 읽기 길 ---------- */
.tag{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:8px;background:var(--sunken);font-family:var(--cute);color:var(--muted);margin-right:8px;flex:none}

.act{display:flex;align-items:center;text-align:left;border:2px solid var(--rule);background:var(--surface);border-radius:14px;padding:10px 14px;cursor:pointer;font-weight:600;line-height:1.4;transition:transform .15s,border-color .15s,box-shadow .15s}
.act.on{border-color:var(--seal);background:var(--seal-soft);transform:translateY(-3px);box-shadow:0 8px 18px -10px var(--seal)}
.act.in{cursor:default;font-weight:500;padding:8px 10px;border-width:1.5px;font-size:.95em;animation:up .25s ease-out}
.qcard{border:2px solid var(--rule);background:var(--letter);border-radius:12px;padding:9px 14px;cursor:pointer;text-align:left;line-height:1.4;font-weight:600}
.qcard.on{border-color:var(--seal);background:var(--seal-soft);transform:translateY(-2px)}

/* 읽기 전 */
.cover{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:center;margin:4px 0 18px}
@media (max-width:640px){ .cover{grid-template-columns:1fr} }
h3.step{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:1.1em;margin:22px 0 8px}
h3.step span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--seal);color:var(--on);font-family:var(--mono);font-size:.9em;flex:none}

/* 빙고판 */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;aspect-ratio:1;max-width:260px;margin:0 auto}
.bc{position:relative;display:grid;place-items:center;text-align:center;background:var(--surface);border:2px solid var(--rule);border-radius:12px;padding:4px;font-weight:700;font-size:.92em;line-height:1.25;overflow:hidden}
.bc.empty{border-style:dashed;background:var(--sunken)}
.bc i{font-style:normal;position:relative;z-index:1}
.bc.hit{border-color:var(--seal);background:var(--seal-soft)}
.seal{position:absolute;inset:auto;width:74%;aspect-ratio:1;border-radius:50%;border:3px solid var(--seal);color:var(--seal);display:grid;place-items:center;font-family:var(--cute);font-weight:400;font-size:1.05em;
  transform:rotate(-14deg);opacity:.6;z-index:0}
.bc.new .seal{animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{from{transform:scale(2.2) rotate(-30deg);opacity:0}to{transform:rotate(-14deg);opacity:.6}}
.bc.miss{border-style:dashed;border-color:var(--pink-mid);background:var(--pink-soft);color:var(--muted)}
.bc em{position:absolute;bottom:3px;left:0;right:0;font-style:normal;font-size:.68em;color:var(--pink);font-weight:600}
.bstat{text-align:center;margin:8px 0 0;font-size:.95em} .bstat .bl{color:var(--seal)}

/* 읽는 중 */
.readwrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}
.rtitle{text-align:center;font-size:1.3em;margin:0 0 14px}
.sn{border-radius:6px;padding:2px 1px;cursor:pointer;transition:background .2s,box-shadow .2s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sn:hover{box-shadow:inset 0 -3px 0 var(--rule)}
.sn.c-main,.sn.c-opin{background:var(--yel-soft);box-shadow:inset 0 -3px 0 var(--yel-mid)}
.sn.c-news{background:var(--pink-soft);box-shadow:inset 0 -3px 0 var(--pink-mid)}
.sn.c-base{background:var(--blue-soft);box-shadow:inset 0 -3px 0 var(--blue-mid)}
.locks{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.lockp{display:inline-flex;align-items:center;gap:6px;background:var(--sunken);color:var(--faint);border-radius:10px;padding:6px 12px;font-size:.9em;font-weight:600}
.side{position:sticky;top:70px;display:flex;flex-direction:column;gap:12px}
.sidebox{background:var(--surface);border:1.5px solid var(--rule);border-radius:16px;padding:12px}
.sh{font-family:var(--cute);color:var(--muted);margin:0 0 8px;font-size:1.02em}
.guessbox p:last-child{margin:0;font-size:.95em}
.pencil{display:flex;align-items:center;gap:10px;border:2px solid var(--rule);background:var(--surface);border-radius:14px;padding:8px 12px;cursor:pointer;text-align:left;transition:transform .15s,box-shadow .15s}
.pencil svg{width:54px;flex:none;transition:transform .2s}
.pencil span{display:flex;flex-direction:column;line-height:1.3} .pencil b{font-family:var(--cute);font-weight:400;font-size:1.05em} .pencil small{font-size:.78em}
.pencil.on{transform:translateX(-3px)} .pencil.on svg{transform:rotate(-12deg)}
.pencil.pen-main.on,.pencil.pen-opin.on{border-color:var(--yel-mid);background:var(--yel-soft)}
.pencil.pen-news.on{border-color:var(--pink-mid);background:var(--pink-soft)}
.pencil.pen-base.on{border-color:var(--blue-mid);background:var(--blue-soft)}
/* 좁은 화면(세로 태블릿·폰) — 빙고판과 색연필을 작게 줄여 위에 붙여 둔다. 문단을 열며 아래로 내려가도 도장이 찍히는 것이 보이게 */
@media (max-width:820px){
  .readwrap{grid-template-columns:1fr}
  .side{top:57px;z-index:4;order:-1;display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;
    background:var(--paper);background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 0 8px;border-bottom:1px solid var(--rule)}
  .side .guessbox,.side .sh{display:none}
  .side .sidebox{padding:6px}
  .side .board{width:156px;max-width:none;gap:3px}
  .side .bc{font-size:.66em;border-radius:7px;padding:1px;border-width:1.5px}
  .side .seal{border-width:2px}
  .side .bstat{font-size:.78em;margin-top:3px}
  .side .pencil{padding:6px 10px;gap:6px} .side .pencil small{display:none} .side .pencil svg{width:36px}
  .side .fb{min-height:0;margin:4px 2px 0;font-size:.85em}
}
@media (max-width:520px){ .side .board{width:132px} .side .pencil{flex:1 1 100%} }
.midcheck{background:var(--sky-soft);border:2px solid var(--sky);border-radius:16px;padding:14px 16px;margin:6px 0;animation:up .3s ease-out}
.toast{position:fixed;left:50%;top:30%;transform:translate(-50%,0) scale(1);z-index:20;background:var(--seal);color:#fff;font-family:var(--cute);font-size:2em;padding:12px 30px;border-radius:999px;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.5);animation:pop .4s cubic-bezier(.2,1.6,.4,1);transition:opacity .5s,transform .5s}
.toast.out{opacity:0;transform:translate(-50%,-30px)}
@keyframes pop{from{transform:translate(-50%,0) scale(.4);opacity:0}}

/* 읽은 뒤 */

/* 되돌아보기 길 */
@keyframes ring{50%{stroke-width:8;stroke-opacity:.55}}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 6px}
.yn .yes{border-color:var(--leaf);color:var(--leaf);background:var(--leaf-soft)} .yn .no{border-color:var(--pink-mid);color:var(--pink);background:var(--pink-soft);animation:none}

/* ---------- 차시 단추(위 막대)·첫 화면 지도 ---------- */
.stg.les{padding:6px 13px;gap:2px}
.stg.les .sn2{font-family:var(--mono);font-weight:600}
.stg.les .ck{font-style:normal;color:var(--leaf);font-weight:700;margin-right:3px}
.stg.les.done{border-color:var(--leaf)}
@media (max-width:600px){ .stg.les .sn2{display:inline} .stg.les{padding:5px 9px} }
.map{grid-template-columns:repeat(4,1fr)}
.map::before{display:none}
.stop.wide{grid-column:span 2}
.stopcard>b{font-size:1.22em}
@media (max-width:880px){ .map{grid-template-columns:1fr 1fr} .stop.wide{grid-column:span 2} .stop.grey{min-width:0} }
@media (max-width:520px){ .map{grid-template-columns:1fr} .stop.wide{grid-column:auto} }

/* ---------- 시 만나기 — 무무 모션 문법: 잉크 외곽선 + 밀린 그림자, 통 튀는 등장, 충격파, 반짝이, 흔들림, 선 끓이기 ---------- */
:root{--inkk:#2B2523}
.poemhero{text-align:center;margin:6px 0 14px}
.ptag{display:inline-block;font-family:var(--cute);background:#FFF3C9;color:#94650F;border:2.5px solid var(--inkk);border-radius:999px;padding:2px 14px;box-shadow:3px 3px 0 var(--inkk)}
.ptitle{font-family:var(--cute);font-weight:400;font-size:clamp(2.4em,calc(8 * var(--vw,1vw)),4.2em);margin:12px 0 4px;color:#FFFDF6;-webkit-text-stroke:2.5px var(--inkk);paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--inkk);letter-spacing:.02em}
.ptitle .pw{display:inline-block;color:#F5CE45;animation:popIn .6s cubic-bezier(.34,1.56,.64,1) both,breathe 2.4s ease-in-out .7s infinite}
.ptitle .pw+.pw{color:#F08FB2;animation-delay:.12s,.85s}
@keyframes popIn{0%{transform:scale(.2) rotate(-12deg);opacity:0}70%{transform:scale(1.15) rotate(3deg);opacity:1}100%{transform:none}}
@keyframes breathe{50%{transform:translateY(-4px) scale(1.04)}}
@keyframes boil{0%{transform:rotate(-.6deg) translate(0,0)}33%{transform:rotate(.5deg) translate(.6px,-.4px)}66%{transform:rotate(-.2deg) translate(-.5px,.5px)}}
@keyframes shakeX{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px) rotate(-.6deg)}40%,60%{transform:translateX(7px) rotate(.6deg)}}
@keyframes ring{from{transform:translate(-50%,-50%) scale(.2);opacity:.85}to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
@keyframes iris{from{clip-path:circle(0 at 50% 50%)}to{clip-path:circle(140% at 50% 50%)}}

/* 시 무대(선생님이 넣은 시) */
.pstage{position:relative;border:4px solid var(--inkk);border-radius:22px;box-shadow:8px 8px 0 var(--inkk);padding:16px clamp(14px,calc(4 * var(--vw,1vw)),40px) 26px;min-height:300px;overflow:hidden;
  background-color:#FFF8DC;background-image:radial-gradient(rgba(43,37,35,.06) 1.2px,transparent 1.4px);background-size:16px 16px;transition:background-color .6s}
.pstage.z1{background-color:#E6F3FF} .pstage.z2{background-color:#FFE8F0} .pstage.z3{background-color:#EAF7E3}
.pstage.shake{animation:shakeX .45s}
.pmeta{display:flex;justify-content:space-between;font-family:var(--cute);color:#6E6A63;margin:0 0 10px}
.pmeta span{font-family:var(--mono);font-size:.85em}
.plines{display:flex;flex-direction:column;align-items:center;gap:2px}
.pl{position:relative;margin:0;font-family:var(--cute);font-size:clamp(22px,calc(3.6 * var(--vw,1vw)),38px);line-height:1.5;color:#3B3632;opacity:.55;transition:opacity .4s,transform .4s}
.pstage.all .pl{opacity:1}
.pl.now{opacity:1;color:var(--inkk);animation:lineIn .55s cubic-bezier(.34,1.56,.64,1) both}
.pl.now::before{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;border:4px solid #F5CE45;border-radius:50%;animation:ring .7s ease-out both;pointer-events:none}
@keyframes lineIn{0%{transform:translateY(30px) scale(.85);opacity:0}60%{transform:translateY(-6px) scale(1.04);opacity:1}100%{transform:none}}
.pgap{height:14px}
.phint{font-family:var(--cute);color:#9A958C;font-size:1.15em;text-align:center;padding:60px 10px;animation:breathe 2.4s ease-in-out infinite}
.fx{position:relative;display:inline-block;cursor:default}
.fx-stretch{cursor:pointer;color:#E4574B;padding:0 2px}
.fx-stretch i{display:inline-block;font-style:normal;animation:wave 1.6s ease-in-out infinite;animation-delay:calc(var(--k) * 70ms)}
.fx-stretch.pull i{animation:pull .9s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--k) * 25ms)}
@keyframes wave{50%{transform:translateY(-6px) scaleY(1.08)}}
@keyframes pull{0%{transform:none}45%{transform:translateX(calc(var(--k) * 7px)) scaleX(1.25)}75%{transform:translateX(calc(var(--k) * -1px))}100%{transform:none}}
.fx-key{color:#94650F;background:#FFE58A;border:2.5px solid var(--inkk);border-radius:12px;padding:0 8px;box-shadow:3px 3px 0 var(--inkk);animation:boil .375s steps(3) infinite}
.fx-spark{cursor:pointer;color:#E04C8A;text-shadow:0 0 14px rgba(240,143,178,.9)}
.fx-spark::after{content:"✦";position:absolute;right:-.5em;top:-.45em;font-size:.6em;color:#F5CE45;animation:twinkle 1.1s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(1.6) rotate(45deg);opacity:.4}}
.fx-snap{cursor:pointer;color:#C2452D;text-decoration:underline wavy #C2452D 3px;text-underline-offset:6px}
.fx-snap.crack{animation:crack .5s}
@keyframes crack{20%{transform:translateX(-6px) rotate(-6deg);color:#fff;background:#C2452D}40%{transform:translateX(6px) rotate(6deg)}60%{transform:translateX(-4px)}100%{transform:none}}
.fx-sting{color:#C2452D;animation:sting 1.4s ease-in-out infinite}
@keyframes sting{0%,70%,100%{transform:none}75%{transform:translateX(-3px) rotate(-3deg)}85%{transform:translateX(3px) rotate(3deg)}}
.fx-tear{color:#3F6FC6}
.fx-tear .drop{position:absolute;left:50%;top:80%;width:12px;height:16px;margin-left:-6px;background:#6FB6E8;border:2px solid var(--inkk);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;animation:drop 1.8s ease-in infinite}
@keyframes drop{0%{transform:translateY(-8px) scale(.4);opacity:0}25%{opacity:1;transform:translateY(0) scale(1)}100%{transform:translateY(46px) scale(.9);opacity:0}}
.fx-band{background:linear-gradient(90deg,#F08FB2,#F5CE45,#6FB6E8,#F08FB2) 0 100%/200% 5px no-repeat;padding-bottom:4px;animation:band 2s linear infinite}
@keyframes band{to{background-position:200% 100%}}
.fx-look{background:radial-gradient(closest-side,rgba(255,229,138,.95),rgba(255,229,138,0));border-radius:50%;padding:0 10px;animation:breathe 1.6s ease-in-out infinite}
.fx-true::after{content:"✓";display:inline-grid;place-items:center;width:1.2em;height:1.2em;margin-left:.15em;border:2.5px solid #C2452D;border-radius:50%;color:#C2452D;font-size:.6em;transform:rotate(-12deg);vertical-align:.4em}
.pctl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:16px 0 4px}
.confetti{position:fixed;z-index:30;pointer-events:none;font-size:22px;font-weight:700;animation:conf 1.1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes conf{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 80px)) scale(1) rotate(200deg);opacity:0}}
.tpoem{margin-top:22px}
.tpoem textarea,.plink input{width:100%;border:1.5px solid var(--rule);border-radius:12px;padding:10px 12px;background:var(--surface);font-size:1em;line-height:1.6}
.plink{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:12px;background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;padding:12px}
.plink .qr{width:200px;background:#fff;padding:6px;border-radius:8px} .plink .qr svg{width:100%;height:auto}
@media (max-width:600px){ .plink{grid-template-columns:1fr} .plink .qr{margin:0 auto} }

/* 장면 극장(시를 넣기 전) */
.theatre{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;border:4px solid var(--inkk);border-radius:22px;box-shadow:8px 8px 0 var(--inkk);overflow:hidden;background:#FFF8DC;animation:iris .6s ease-out both}
.tview{position:relative;min-height:280px;display:grid;place-items:center;padding:18px;background-image:radial-gradient(rgba(43,37,35,.07) 1.2px,transparent 1.4px);background-size:16px 16px}
.s-secret .tview{background-color:#FFE8F0} .s-pull .tview{background-color:#FFF3C9} .s-boast .tview{background-color:#E6F3FF} .s-ouch .tview{background-color:#EAF7E3}
.tcap{padding:20px 20px 16px;border-left:4px solid var(--inkk);background:#FFFDF6;display:flex;flex-direction:column;gap:6px;color:var(--inkk)}
.tcap h3{font-family:var(--cute);font-weight:400;font-size:1.7em;margin:0;animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both .15s}
.tcap p{margin:0;font-size:1.1em;line-height:1.7}
.tno{font-family:var(--mono);font-size:.8em;color:#9A958C}
.tread{margin-top:auto !important;display:flex;align-items:center;gap:8px;font-weight:700;color:#3F6FC6;font-size:1em !important}
.bookic{width:22px;height:16px;border:2.5px solid currentColor;border-radius:2px 2px 4px 4px;position:relative;flex:none}
.bookic::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;border-left:2.5px solid currentColor}
@media (max-width:700px){ .theatre{grid-template-columns:1fr} .tcap{border-left:0;border-top:4px solid var(--inkk)} }
.sdots{display:flex;gap:8px} .sdots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--inkk);background:#FFFDF6;display:block}
.sdots i.d{background:#6DBB6A} .sdots i.c{background:#F5CE45;transform:scale(1.3)}
/* 장면 1: 봉투에서 튀어나오는 글자 */
.art-secret{position:relative;width:min(340px,90%);aspect-ratio:4/3;display:grid;place-items:center}
.art-secret .env{position:absolute;bottom:6%;width:78%;height:46%;background:#FFFDF6;border:4px solid var(--inkk);border-radius:8px;box-shadow:6px 6px 0 var(--inkk)}
.art-secret .env::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49%,var(--inkk) 49% 51%,transparent 51%),linear-gradient(to bottom left,transparent 49%,var(--inkk) 49% 51%,transparent 51%);background-size:50% 100%;background-position:0 0,100% 0;background-repeat:no-repeat;opacity:.9}
.art-secret .seal-dot{position:absolute;left:50%;top:44%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#E4574B;border:3px solid var(--inkk)}
.art-secret .word{position:relative;z-index:1;display:flex;gap:4px;margin-bottom:16%;margin-top:12%;animation:rise 1.4s cubic-bezier(.34,1.56,.64,1) both .3s}
.art-secret .word span{font-family:var(--cute);font-size:clamp(52px,calc(9 * var(--vw,1vw)),84px);color:#F5CE45;-webkit-text-stroke:3px var(--inkk);paint-order:stroke fill;text-shadow:4px 4px 0 var(--inkk);animation:breathe 2.2s ease-in-out infinite}
.art-secret .word span+span{color:#F08FB2;animation-delay:.3s}
@keyframes rise{0%{transform:translateY(80%) scale(.4);opacity:0}100%{transform:none;opacity:1}}
.art-secret .keyhole{position:absolute;right:6%;top:8%;width:30px;height:30px;border-radius:50%;background:#F5CE45;border:3px solid var(--inkk);animation:twinkle 1.3s ease-in-out infinite}
.whisper{position:absolute;left:0;top:0;margin:0;font-family:var(--cute);font-size:1.2em;background:#fff;border:3px solid var(--inkk);border-radius:16px;padding:4px 12px;box-shadow:3px 3px 0 var(--inkk);animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both 1s}
.art-pull{width:100%}
.art-pull .rb{border:4px solid var(--inkk);box-shadow:6px 6px 0 var(--inkk);background:#FFFDF6}
/* 장면 3: 너무 세게 늘이면 툭 */
.art-boast{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.tband{position:relative;display:flex;align-items:center;gap:0;font-family:var(--cute);font-size:clamp(46px,calc(8 * var(--vw,1vw)),70px)}
.tband span{position:relative;z-index:1;color:#F5CE45;-webkit-text-stroke:3px var(--inkk);paint-order:stroke fill;text-shadow:4px 4px 0 var(--inkk)}
.tband span+i+span{color:#F08FB2}
.tband i{display:block;width:60px;height:12px;margin:0 6px;background:#E4574B;border:3px solid var(--inkk);border-radius:99px;transform-origin:left center}
.tband.go i{animation:overpull 1.6s cubic-bezier(.5,0,.75,0) forwards}
.tband.go span:first-child{animation:leftfly 1.6s forwards} .tband.go span:last-child{animation:rightfly 1.6s forwards}
@keyframes overpull{0%{width:60px}80%{width:min(calc(46 * var(--vw,1vw)),300px);height:6px;filter:none}86%{width:min(calc(46 * var(--vw,1vw)),300px);opacity:1;transform:rotate(0)}100%{width:30px;opacity:0;transform:rotate(30deg)}}
@keyframes leftfly{0%,85%{transform:none}100%{transform:translateX(-40px) rotate(-20deg)}}
@keyframes rightfly{0%,85%{transform:none}100%{transform:translateX(40px) rotate(20deg)}}
.warn{margin:0;font-family:var(--cute);font-size:1.25em;color:#C2452D}
/* 장면 4: 따끔, 찔끔 */
.art-ouch{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.broken{display:flex;align-items:center;gap:8px;font-family:var(--cute);font-size:clamp(34px,calc(6 * var(--vw,1vw)),54px);animation:shakeX .5s .3s}
.broken span{color:#FFFDF6;-webkit-text-stroke:2.5px var(--inkk);paint-order:stroke fill;text-shadow:3px 3px 0 var(--inkk)}
.broken span:first-child{transform:rotate(-10deg)} .broken span:last-child{transform:rotate(9deg)}
.broken .spark{color:#E4574B;font-size:1.2em;animation:twinkle .6s ease-in-out infinite}
.tear{width:28px;height:38px;background:#6FB6E8;border:3px solid var(--inkk);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;animation:drop 1.6s ease-in infinite}
.art-ouch .whisper{position:static;color:#C2452D;animation:sting 1.2s ease-in-out infinite}

/* ---------- 내용 알기(문제) ---------- */
.qrows{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:12px}
.qrow{background:var(--surface);border:2.5px solid var(--inkk);border-radius:16px;padding:14px 16px 8px;box-shadow:4px 4px 0 var(--inkk)}
.qrow.done{background:color-mix(in srgb,var(--leaf-soft) 70%,var(--surface))}
.qh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.qn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#F5CE45;border:2.5px solid var(--inkk);font-family:var(--cute);color:var(--inkk);flex:none}
.qa{font-weight:700;font-size:1.1em}
.opts{display:grid;gap:8px}
.opt{text-align:left;min-height:50px;padding:10px 14px;border:2px solid var(--rule);border-radius:12px;background:var(--surface);cursor:pointer;line-height:1.5;transition:transform .12s,border-color .15s}
.opt:hover:not([disabled]){border-color:var(--faint)} .opt:active:not([disabled]){transform:scale(.98)}
.opt.right{background:var(--leaf-soft);border-color:var(--leaf);font-weight:700;color:var(--ink);animation:popIn .45s cubic-bezier(.34,1.56,.64,1)}
.opt.right::before{content:"✓ ";color:var(--leaf)}
.opt.dim{opacity:.4}

/* ---------- 마음 색깔·모양 ---------- */
.mood{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:start;margin:10px 0}
.moodcard{position:sticky;top:74px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#FFFDF6;border:4px solid var(--inkk);border-radius:22px;box-shadow:8px 8px 0 var(--inkk);
  background-image:radial-gradient(color-mix(in srgb,var(--mc) 35%,transparent) 0,transparent 70%)}
.moodcard .shp.big{width:62%;height:auto}
.moodcard .mdraw{width:86%;height:auto;border-radius:12px}
.mlabel{margin:0;font-family:var(--cute);font-size:1.3em;color:#2B2523}
.shp{display:block}
.shp g{stroke-width:0} .shp g [fill="none"]{stroke-width:7}
.shp.pop{animation:popIn .55s cubic-bezier(.34,1.56,.64,1),breathe 2.6s ease-in-out .6s infinite;filter:drop-shadow(4px 4px 0 #2B2523)}
.crayons{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.crayon{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface);border:2px solid var(--rule);border-radius:12px;padding:8px 4px;cursor:pointer;transition:transform .15s}
.crayon span{width:70%;height:18px;border-radius:4px 10px 10px 4px;background:var(--cc);border:2px solid #2B2523;position:relative}
.crayon span::before{content:"";position:absolute;left:-10px;top:2px;border-right:9px solid var(--cc);border-top:5px solid transparent;border-bottom:5px solid transparent}
.crayon b{font-size:.8em}
.crayon.on{border-color:#2B2523;box-shadow:3px 3px 0 #2B2523;transform:translateY(-3px)}
.shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shapeb{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface);border:2px solid var(--rule);border-radius:12px;padding:8px 4px 6px;cursor:pointer}
.shapeb .shp{width:46px;height:46px}
.shapeb small{font-size:.74em}
.shapeb.on{border-color:#2B2523;box-shadow:3px 3px 0 #2B2523;transform:translateY(-3px)}
.drawbox{margin-top:12px}
.drawbox summary{cursor:pointer;font-weight:700}
#pad{display:block;width:100%;height:auto;aspect-ratio:5/3;margin-top:8px;background:#fff;border:2.5px dashed var(--rule);border-radius:14px;cursor:crosshair}
@media (max-width:700px){ .mood{grid-template-columns:1fr} .moodcard{position:static;max-width:300px;margin:0 auto} }

/* ---------- 느낌 나누기·발표 카드 ---------- */
.talkcard{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:#FFFDF6;border:4px solid #2B2523;border-radius:20px;box-shadow:6px 6px 0 #2B2523;padding:14px 18px;margin:12px 0;color:#2B2523}
.tc-art{display:grid;place-items:center} .tc-art .shp,.tc-art img{width:100%;height:auto}
.tc-h{margin:0;font-family:var(--cute);color:#94650F}
.tc-why{margin:4px 0;font-size:.95em;color:#5E5A54}
.tc-feel{margin:4px 0 0;font-size:1.25em;font-weight:700;line-height:1.55}
.talkcard.big{grid-template-columns:minmax(120px,30%) 1fr;padding:clamp(18px,calc(4 * var(--vw,1vw)),40px);font-size:clamp(16px,calc(2.4 * var(--vw,1vw)),24px);box-shadow:10px 10px 0 #2B2523}
.present{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(26,25,23,.72);backdrop-filter:blur(4px);animation:iris .45s ease-out}
.pv-in{width:min(900px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--paper);border-radius:24px;padding:20px}
.pv-timer{position:relative;width:76px;height:76px}
.pv-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.pv-timer .trk{fill:none;stroke:var(--rule);stroke-width:5} .pv-timer .arc{fill:none;stroke:var(--seal);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.pv-timer span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:1.3em}
.pv-say{margin:0;color:var(--muted);text-align:center}
.pv-react{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
body.noscroll{overflow:hidden}
@media (max-width:560px){ .talkcard{grid-template-columns:80px 1fr} }

/* 대문책 뒷면 시 짓기 */
.compose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;margin:8px 0 6px}
.cp-paper{background:#FFFDF6;border:3px solid #2B2523;border-radius:16px;box-shadow:6px 6px 0 #2B2523;padding:16px 20px;color:#2B2523;font-family:var(--cute);line-height:1.6}
.cp-paper p{margin:0;font-size:1.2em}
.cp-title{font-size:1.6em !important;color:#94650F;margin-bottom:6px !important}
.cp-auto{color:#5E5A54}
.cp-mine{min-height:1.6em;color:#C2452D;border-bottom:2px dashed #EAD08A}
.cp-mine:empty::before{content:'　'}
.cp-by{margin-top:8px !important;font-size:.95em !important;color:#8C877E;text-align:right}
.cp-in input{width:100%;border:1.5px solid var(--rule);border-radius:12px;padding:10px 12px;background:var(--surface);font-size:1.05em}
.cp-in .fl{margin:10px 0 5px}
@media (max-width:700px){ .compose{grid-template-columns:1fr} }

/* 쪽 번호 막대·아래 막대(우리말 조사 스튜디오처럼) */
.topin{max-width:none;flex-wrap:nowrap;gap:10px}
.brand .bt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.brand .bt small{font-family:var(--sans);font-weight:400;font-size:.62em;color:var(--faint)}
.pstrip{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pstrip::-webkit-scrollbar{display:none}
.pgrp{display:flex;align-items:center;gap:3px;flex:none}
.plab{font-size:.74em;color:var(--faint);margin-right:3px;white-space:nowrap}
.pnum{min-width:26px;height:26px;padding:0 4px;border:1.5px solid var(--rule);background:var(--surface);border-radius:6px;font-family:var(--mono);font-size:.78em;color:var(--muted);cursor:pointer}
.pnum.on{border-color:var(--seal);color:var(--seal);background:var(--seal-soft);font-weight:700}
.pcount{flex:none;font-family:var(--mono);font-size:.82em;color:var(--faint)}
.scr{padding-bottom:110px}
.scr .navrow{display:none}
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--paper);background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid var(--rule)}
.bbin{max-width:980px;margin:0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bhint{margin-left:auto;font-size:.86em;color:var(--muted);text-align:right}
@media (max-width:600px){ .brand .bt small,.pcount{display:none} .snd span{display:none} }

/* 스크롤 시 — 시 전체를 펼쳐 두고, 연마다 화면 가득 배경이 바뀌며 줄이 들어올 때 움직인다 */
html,body{overflow-x:clip}
.pscroll{position:relative;margin:10px calc(50% - calc(50 * var(--vw,1vw))) 18px;border-block:4px solid var(--inkk)}
.ppill{position:sticky;top:76px;z-index:3;width:max-content;margin:0 auto -38px;transform:translateY(12px);font-family:var(--mono);font-size:.85em;background:#FFFDF6;border:2.5px solid var(--inkk);border-radius:99px;padding:3px 14px;box-shadow:3px 3px 0 var(--inkk);color:var(--inkk)}
.pscroll.all .ppill{background:#FFE58A}
.pst{position:relative;overflow:hidden;min-height:calc(88 * var(--vh,1vh));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,calc(2.4 * var(--vh,1vh)),26px);padding:calc(12 * var(--vh,1vh)) 16px;background:#FFF7DC;--p:0}
.pst.z1{background:linear-gradient(180deg,#FFF7DC,#E6F3FF 30%)} .pst.z2{background:linear-gradient(180deg,#E6F3FF,#FFE8F0 30%)} .pst.z3{background:linear-gradient(180deg,#FFE8F0,#EAF7E3 30%)}
.pst.pfin{min-height:calc(60 * var(--vh,1vh));background:linear-gradient(180deg,#EAF7E3,#FFF7DC 40%)}
.pst.z0:first-of-type{background:radial-gradient(120% 80% at 50% 0%,#FFFBEA,#FFF1C2)}
.pbgw{position:absolute;left:50%;top:50%;white-space:nowrap;font-family:var(--cute);font-size:clamp(90px,calc(22 * var(--vw,1vw)),260px);color:rgba(46,42,38,.08);transform:translate(calc(-50% + var(--p) * calc(30 * var(--vw,1vw))),-50%) rotate(calc(var(--p) * -6deg));pointer-events:none;letter-spacing:.04em}
.pflo i{position:absolute;left:var(--x);top:calc(50% + var(--p) * calc(60 * var(--vh,1vh)) * var(--s));font-style:normal;font-size:calc(1.4em * var(--s));color:#F5CE45;opacity:.55;animation:float 6s ease-in-out var(--d) infinite;pointer-events:none}
.pflo i:nth-child(3n){color:#F08FB2} .pflo i:nth-child(3n+1){color:#6FB6E8}
.pflo i:nth-child(odd){top:calc(18% - var(--p) * calc(40 * var(--vh,1vh)) * var(--s))}
@keyframes float{50%{transform:translateY(-18px) rotate(20deg)}}
.pstn{font-family:var(--mono);font-size:.8em;color:#9A958C;letter-spacing:.1em;z-index:1}
.pst .pl{z-index:1;font-size:clamp(28px,calc(5.4 * var(--vw,1vw)),58px);line-height:1.35;text-align:center;opacity:1;color:var(--inkk);-webkit-text-stroke:0}
.pscroll.live .pl{opacity:0;transform:translateY(60px) scale(.9);filter:blur(8px);transition:opacity .7s,transform .9s cubic-bezier(.34,1.56,.64,1),filter .7s}
.pscroll.live .pl.in{opacity:1;transform:none;filter:none}
.pscroll.live .pl.in::before{content:"";position:absolute;left:50%;top:50%;width:160px;height:160px;border:5px solid #F5CE45;border-radius:50%;animation:ring .9s ease-out both;pointer-events:none}
.pscroll.live .pl .fx{display:inline-block}
.pst.shake{animation:shakeX .5s}
.pst.rain::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 22px,rgba(111,182,232,.18) 22px 24px);background-size:100% 220px;animation:rain .8s linear infinite;pointer-events:none}
@keyframes rain{to{background-position:0 220px}}
.pdown{font-family:var(--cute);color:#9A958C;font-size:1.1em;margin-top:calc(4 * var(--vh,1vh));animation:breathe 1.8s ease-in-out infinite;z-index:1}
.pend{font-family:var(--cute);font-size:clamp(40px,calc(8 * var(--vw,1vw)),80px);margin:0;color:#FFFDF6;-webkit-text-stroke:2.5px var(--inkk);paint-order:stroke fill;text-shadow:5px 5px 0 var(--inkk);transform:rotate(-6deg)}
.pfin .fine{text-align:center}
.pscroll:not(.live) .pflo,.pscroll:not(.live) .pbgw{display:none}

/* 연 장면(글 뒤) — --q 내려 읽은 만큼, --s 끊어짐, --h 숨은 낱말 */
.pst{--q:.7;--s:0;--h:1}
.pst .pl{text-shadow:0 0 14px #fff,0 0 4px #fff}
.pst.hasmo .pbgw{opacity:.45}
.mo{position:absolute;pointer-events:none;z-index:0}
.mo-band{left:0;right:0;bottom:calc(15 * var(--vh,1vh));height:84px}
.mo-band:not(.snapit){--s:0}
.mo-band .mt{position:absolute;top:0;width:78px;height:78px;display:grid;place-items:center;font-family:var(--cute);font-size:46px;background:#FFE58A;border:4px solid var(--inkk);border-radius:18px;box-shadow:5px 5px 0 var(--inkk);color:var(--inkk)}
.mo-band .mt.l{left:calc(50% - 39px - calc(6 * var(--vw,1vw)) - var(--q) * calc(30 * var(--vw,1vw)));transform:translateX(calc(var(--s) * -40px)) rotate(calc(var(--s) * -18deg))}
.mo-band .mt.r{right:calc(50% - 39px - calc(6 * var(--vw,1vw)) - var(--q) * calc(30 * var(--vw,1vw)));background:#FFC9DA;transform:translateX(calc(var(--s) * 40px)) rotate(calc(var(--s) * 18deg))}
.mo-band .mb{position:absolute;top:calc(39px - (20px - var(--q) * 10px) / 2);height:calc(20px - var(--q) * 10px);background:linear-gradient(90deg,#F08FB2,#F5CE45,#6FB6E8);border:3px solid var(--inkk);border-radius:99px}
.mo-band .mb.a{left:calc(50% - calc(6 * var(--vw,1vw)) - var(--q) * calc(30 * var(--vw,1vw)));right:50%;border-right:0;border-radius:99px 0 0 99px;transform-origin:0 50%;transform:rotate(calc(var(--s) * 28deg)) scaleX(calc(1 - var(--s) * .5))}
.mo-band .mb.b{right:calc(50% - calc(6 * var(--vw,1vw)) - var(--q) * calc(30 * var(--vw,1vw)));left:50%;border-left:0;border-radius:0 99px 99px 0;transform-origin:100% 50%;transform:rotate(calc(var(--s) * -28deg)) scaleX(calc(1 - var(--s) * .5))}
.mo-band .mi{position:absolute;left:50%;top:-34px;transform:translateX(-50%);white-space:nowrap;font-family:var(--cute);font-size:26px;color:#E4574B;letter-spacing:calc(var(--q) * 1.6em);opacity:calc(var(--q) * (1 - var(--s)))}
.mo-band .boom{position:absolute;left:50%;top:39px;font-size:90px;line-height:1;color:#F5CE45;-webkit-text-stroke:3px var(--inkk);transform:translate(-50%,-50%) scale(calc(var(--s) * (1 - var(--s)) * 4)) rotate(calc(var(--s) * 90deg))}
.mo-hid{right:calc(7 * var(--vw,1vw));top:calc(13 * var(--vh,1vh))}
.mo-hid b{display:block;font-family:var(--cute);font-size:clamp(38px,calc(6 * var(--vw,1vw)),64px);font-weight:400;color:#E04C8A;background:#fff;border:4px solid var(--inkk);border-radius:24px;padding:4px 18px;box-shadow:6px 6px 0 var(--inkk);transform:scale(var(--h)) rotate(calc((1 - var(--h)) * -40deg + 6deg))}
.mo-hid b::after{content:"";position:absolute;left:24px;bottom:-18px;border:9px solid transparent;border-top:12px solid var(--inkk)}
.mo-hid i{position:absolute;font-style:normal;color:#F5CE45;font-size:28px;opacity:var(--h);animation:twinkle 1.2s ease-in-out infinite}
.mo-hid i:nth-of-type(1){left:-26px;top:-14px} .mo-hid i:nth-of-type(2){right:-22px;top:-22px;animation-delay:.4s} .mo-hid i:nth-of-type(3){right:-8px;bottom:-24px;animation-delay:.8s}
.mo-sec{left:calc(7 * var(--vw,1vw));top:calc(12 * var(--vh,1vh))}
.mo-sec .env{position:relative;width:110px;height:72px;background:#FFFDF6;border:4px solid var(--inkk);border-radius:8px;box-shadow:5px 5px 0 var(--inkk);perspective:300px}
.mo-sec .flap{position:absolute;left:-4px;right:-4px;top:-4px;height:52px;background:#FFE58A;border:4px solid var(--inkk);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:rotateX(calc(var(--q) * 180deg))}
.mo-sec .ht{position:absolute;left:50%;top:14px;font-size:34px;color:#E4574B;transform:translate(-50%,calc(var(--q) * -56px)) scale(calc(.6 + var(--q) * .7))}
.mo-tear{inset:0}
.mo-tear i{position:absolute;left:var(--x);top:-30px;width:18px;height:24px;background:#6FB6E8;border:3px solid var(--inkk);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;opacity:.8;animation:tearfall 2.4s ease-in var(--d) infinite}
@keyframes tearfall{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.85}100%{transform:translateY(calc(95 * var(--vh,1vh))) scale(1);opacity:0}}
.pscroll:not(.live) .mo-tear i{animation:none;top:calc(20% + var(--d) * 30%)}
.mo-tear .ouch{position:absolute;left:calc(6 * var(--vw,1vw));top:calc(14 * var(--vh,1vh));font-family:var(--cute);font-weight:400;font-size:clamp(28px,calc(4.4 * var(--vw,1vw)),44px);color:#fff;background:#E4574B;border:4px solid var(--inkk);padding:14px 18px;box-shadow:5px 5px 0 var(--inkk);clip-path:polygon(50% 0,61% 22%,86% 8%,80% 36%,100% 50%,80% 64%,86% 92%,61% 78%,50% 100%,39% 78%,14% 92%,20% 64%,0 50%,20% 36%,14% 8%,39% 22%);animation:sting 1.4s ease-in-out infinite}
@media (max-width:640px){.mo-hid{right:calc(4 * var(--vw,1vw));top:calc(9 * var(--vh,1vh))}.mo-sec{left:calc(4 * var(--vw,1vw));top:calc(9 * var(--vh,1vh))}.mo-band .mt{width:58px;height:58px;font-size:34px}}

/* 앱 카드(국어 수업앱 첫 화면처럼) */
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:24px 0 18px}
.acard{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--surface);border:1px solid var(--rule);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.acard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#C8D8C4}
.athumb{display:grid;place-items:center;background:var(--sunken);border-bottom:1px solid var(--rule);padding:12px 16px 8px}
.athumb svg{width:100%;max-width:300px;height:auto}
.abody{display:flex;flex-direction:column;gap:9px;padding:16px 18px 18px;flex:1}
.atag{align-self:flex-start;font-family:var(--mono);font-size:.68em;letter-spacing:.04em;color:var(--sky);background:var(--sky-soft);border-radius:5px;padding:3px 9px}
.aname{font-family:var(--serif);font-size:1.3em}
.adesc{font-size:.9em;color:var(--muted);line-height:1.65}
.adesc b{color:var(--ink)}
.abul{display:flex;flex-direction:column;gap:5px}
.abul span{font-size:.83em;color:var(--muted);display:flex;gap:8px} .abul span::before{content:"·";color:#C8D8C4;font-weight:700}
.ago{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.78em;color:var(--seal);display:flex;align-items:center;gap:6px}
.ago small{color:var(--faint);margin-left:auto}
.acard.done .ago{color:var(--leaf)}
.acard:hover .ar{transform:translateX(4px)} .ar{transition:transform .18s}

html.calm *{animation:none !important;transition:none !important}

/* ---------- 인쇄 ---------- */
#printroot{display:none}
body.printing #printroot{display:block;position:fixed;left:-20000px;top:0;visibility:visible}
@media print{
  body{background:#fff}
  body > *:not(#printroot){display:none !important}
  body #printroot,body.printing #printroot{display:block;position:static;left:auto}
}
#printroot{color:#2B2523;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-family:"Gowun Dodum","Malgun Gothic",sans-serif;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
#printroot .ps{position:relative;overflow:hidden;background:#fff;break-after:page;page-break-after:always;display:flex;flex-direction:column}
#printroot.port .ps{width:190mm;height:277mm}
#printroot.land .ps{width:277mm;height:190mm}
#printroot .ps:last-child{break-after:auto;page-break-after:auto}
#printroot h1,#printroot h3{font-family:"Jua","Gowun Dodum",sans-serif;font-weight:400;margin:0}
#printroot .psub{margin:.8mm 0 0;font-size:8.6pt;color:#6E6A63}
#printroot .who{display:grid;grid-template-columns:auto 36mm;gap:1.2mm 2.5mm;margin:0;align-items:end;font-size:10pt}
#printroot .who dt{color:#6E6A63;font-size:8.5pt}
#printroot .who dd{margin:0;border-bottom:.3mm solid #2B2523;padding:0 1mm;font-size:11.5pt;min-height:6mm}
#printroot .wl{height:8.6mm;border-bottom:.3mm solid #A9A39A}

/* 대문책 도안 */
#printroot .bh{height:19mm;flex:none;display:flex;justify-content:space-between;align-items:flex-end;gap:6mm;padding-bottom:1.6mm;border-bottom:.5mm solid #2B2523}
#printroot .bh h1 small{font-family:"Gowun Dodum",sans-serif;font-size:9pt;color:#8C877E;margin-left:2mm}
#printroot .bh h1{font-size:17pt;line-height:1.15}
#printroot .strip{flex:none;display:grid;grid-template-columns:repeat(4,1fr);height:68mm;border:.6mm solid #2B2523;border-radius:1.5mm}
#printroot .pnl{position:relative;display:grid;place-items:center;border-left:.45mm dashed #8C877E;padding:2mm}
#printroot .pnl:first-child{border-left:0}
#printroot .glyph{font-family:"Jua","Gowun Dodum",sans-serif;font-size:150pt;line-height:1;color:#FFFFFF;-webkit-text-stroke:.75mm #2B2523;paint-order:stroke fill}
#printroot .pnl.hid .glyph{color:#FFF6D8}
#printroot .pnl.hid{background:repeating-linear-gradient(135deg,#FFFBEA 0 3mm,#FFF6D8 3mm 6mm)}
#printroot .pnl .pnmk{position:absolute;bottom:1.6mm;right:2.4mm;font-family:"IBM Plex Mono",monospace;font-size:8pt;color:#8C877E}
#printroot .pnl .rib{position:absolute;top:1.8mm;left:2.4mm;font-family:"Jua",sans-serif;font-size:9pt;color:#fff;background:#C2922A;border-radius:99px;padding:.3mm 2.6mm}
#printroot .cut{flex:none;display:flex;align-items:center;gap:2mm;height:16mm;font-size:8.6pt;color:#6E6A63}
#printroot .cut.back{border:0}
#printroot .cut span{font-size:13pt;color:#2B2523}
#printroot .cut b{color:#2B2523}
#printroot .bfoot{height:19mm;flex:none;display:flex;flex-direction:column;justify-content:center;gap:1mm;overflow:hidden}
#printroot .howb{margin:0;font-size:8.8pt;color:#94650F}
#printroot .pnl.back{display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:4mm 4mm 6mm;text-align:center}
#printroot .pnl.back.ttl{background:#FFFBEA}
#printroot .btitle{margin:0;font-family:"Jua",sans-serif;font-size:22pt;line-height:1.2;color:#94650F}
#printroot .bline{margin:0;font-family:"Gowun Dodum",sans-serif;font-size:15pt;line-height:1.45;color:#2B2523;max-height:52mm;overflow:hidden}
#printroot .bl{height:11mm;border-bottom:.3mm solid #A9A39A}
#printroot .bby{margin:0;font-family:"Jua",sans-serif;font-size:12pt;color:#8C877E}
#printroot .bname{margin:1mm 0 0;font-family:"Jua",sans-serif;font-size:18pt;color:#2B2523}
#printroot .how{margin:0;font-size:8.8pt;line-height:1.5;color:#3B3632}

/* 읽기 발자국 */
#printroot .ph{display:flex;justify-content:space-between;align-items:flex-end;gap:6mm;border-bottom:.6mm solid #2B2523;padding-bottom:2mm;margin-bottom:1.5mm}
#printroot .ph>div,#printroot .bh>div{flex:1;min-width:0}
#printroot .who{flex:none}
#printroot .ph h1{font-size:20pt;line-height:1.15}
#printroot .qtw{height:66mm;overflow:hidden;font-size:9pt}
#printroot .qt{width:100%;border-collapse:collapse;line-height:1.38}
#printroot .qt th{font-family:"Jua",sans-serif;font-weight:400;font-size:1em;text-align:left;background:#F3F1EA;padding:1mm 1.6mm;border-bottom:.4mm solid #2B2523}
#printroot .qt th small{font-family:"Gowun Dodum",sans-serif;font-size:.8em;color:#8C877E}
#printroot .qt td{padding:1.2mm 1.6mm;border-bottom:.25mm solid #D8D3C8;vertical-align:top}
#printroot .qt td.zs{width:14mm;font-family:"Jua",sans-serif;color:#6E6A63;white-space:nowrap}
#printroot .qt td.ans{width:22mm;text-align:center}
#printroot .qt .an{font-family:"Jua",sans-serif;font-weight:400;font-size:1.25em;color:#4F7A4A;display:block}
#printroot .qt .an.neg{color:#B0446A}
#printroot .qt td.ans small{display:block;font-size:.78em;color:#B0446A;line-height:1.2}
#printroot .sum{display:flex;flex-direction:column;min-height:0}

/* 스튜디오 말투 — 우리말 조사 스튜디오처럼 명조 제목·가는 선·은은한 그림자.
   만화 꾸밈(둥근 글씨·굵은 검은 테두리·딱 붙은 그림자)은 시 무대(.pscroll·.theatre·.poemhero)와 대문책, 늘어나는 글자에만 남긴다 */
.kicker,.maph,.stopcard .mno,.ask p,.sh,.pencil b,.tc-h,.mlabel,.gq,.dexcard,.tag,.qn{font-family:var(--serif);font-weight:700}
.kicker{font-size:.95em;letter-spacing:.01em}
.place{font-family:var(--sans);font-weight:600}
.ask p,.mlabel{font-size:1.12em}

.dexcard{font-size:1.08em}
.qrow{border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow)}
.qn{background:var(--seal-soft);border:0;color:var(--seal);font-size:.95em}
.moodcard{background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow)}
.mlabel{color:var(--ink)}
.crayon.on,.shapeb.on{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft);transform:translateY(-2px)}
.talkcard{background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow)}
.talkcard.big{box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
.tc-h{color:var(--amber)}
.shp.pop{filter:drop-shadow(0 8px 14px rgba(35,32,34,.18))}

/* ---------- 역할놀이 대본(스튜디오 말투) ---------- */
.rbadge{display:inline-flex;align-items:center;font-family:var(--serif);font-weight:700;font-size:.92em;color:var(--rc);background:color-mix(in srgb,var(--rc) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--rc) 35%,transparent);border-radius:999px;padding:1px 10px;white-space:nowrap}
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:16px 0}
.scard{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:16px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.scard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.scard.on{border-color:var(--seal);box-shadow:0 0 0 3px var(--seal-soft)}
.scard .sno{font-family:var(--mono);font-size:.72em;color:var(--seal);letter-spacing:.06em}
.scard b{font-family:var(--serif);font-size:1.2em}
.scard .spg{font-size:.78em;color:var(--faint)}
.scard .ssum{font-size:.9em;color:var(--muted);line-height:1.6}
.scard .swho{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:6px}
.chtabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.chtab{font-family:var(--serif);font-weight:700;font-size:1.02em;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;color:var(--muted)}
.chtab.on{color:var(--rc);border-color:var(--rc);box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 15%,transparent)}
.chtab.ok{color:var(--rc)}
.mindcard{background:var(--surface);border:1px solid var(--rule);border-left:5px solid var(--rc);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:12px}
.mstep{display:flex;align-items:center;gap:10px;margin:12px 0 6px} .mstep:first-child{margin-top:0} .mstep .fl{margin:0}
.mn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--seal-soft);color:var(--seal);font-family:var(--serif);font-weight:700;font-size:.9em;flex:none}
.acts{display:flex;flex-direction:column;gap:6px}
.chip.act{text-align:left;border-radius:12px;min-height:44px}
.sumline{margin:12px 0 0;padding:10px 14px;background:var(--sunken);border-radius:10px;font-size:.95em}
.trline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px}
.actcard{margin-top:14px;padding:12px 16px;background:var(--amber-soft);border-radius:12px;font-size:1.02em;line-height:1.7}
.actcard b{font-family:var(--serif)}
.shead2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pcount2{font-family:var(--mono);color:var(--muted)}
.script{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.sline{background:var(--surface);border:1px solid var(--rule);border-left:5px solid var(--rc);border-radius:12px;padding:10px 12px}
.sline.cur{box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--rc) 40%,var(--rule))}
.sline.ok .rbadge::after{content:" ✓";color:var(--leaf)}
.slh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.shint{font-size:.86em;color:var(--muted);flex:1;min-width:160px}
.sact{display:flex;gap:4px;margin-left:auto}
button.mini{width:32px;height:32px;border-radius:8px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;color:var(--muted)}
button.mini:disabled{opacity:.35;cursor:default}
.sdir{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.sdir input{flex:1;min-width:180px;max-width:320px;font-size:.92em;padding:7px 10px;border:1px dashed var(--rule);border-radius:8px;background:var(--sunken)}
.dchips{display:flex;flex-wrap:wrap;gap:5px}
.chip.small{min-height:32px;padding:3px 10px;font-size:.85em}
.sline textarea{width:100%;font-size:1.05em;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;resize:vertical;background:var(--surface)}
.slive{margin:2px 0 0;font-size:.85em;color:var(--seal)}
.addrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 10px}
.castbox{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:16px;margin:14px 0}
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:10px}
.members input,.castrow input,.castrow select{font-size:1em;padding:9px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);min-width:0}
.castgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:12px}
.castrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--rule);border-left:5px solid var(--rc);border-radius:10px}
.castrow select,.castrow input{flex:1}
.castgrid.rolling .castrow{animation:shakeX .25s}
.paper{background:#FFFDF7;color:#2B2523;border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow);padding:20px 24px;margin:14px 0;max-height:420px;overflow:auto}
.pp-t{font-family:var(--serif);font-weight:700;font-size:1.15em;margin:0 0 4px}
.pp-s{color:#6E6A63;font-size:.88em;margin:0 0 10px}
.pp-l{margin:6px 0;line-height:1.6} .pp-l b{margin-right:6px} .pp-l i{color:#6E6A63;font-style:normal}
.pp-l.nr{color:#6E6A63;font-style:italic}
.tele{position:relative;display:flex;flex-direction:column;gap:10px;align-items:stretch;background:var(--sunken);border:1px solid var(--rule);border-radius:16px;padding:44px clamp(12px,calc(4 * var(--vw,1vw)),40px) 24px;min-height:340px;overflow:hidden}
.tprog{position:absolute;top:12px;right:16px;font-family:var(--mono);color:var(--muted);font-size:.9em}
.tline{background:var(--surface);border-radius:14px;border-left:6px solid var(--rc);padding:10px 16px}
.tline.prev,.tline.next{opacity:.45;transform:scale(.96)}
.tline.now{box-shadow:var(--shadow);padding:18px 22px}
.tline.empty{visibility:hidden;min-height:40px}
.tl-who{margin:0;font-family:var(--serif);font-weight:700;color:var(--rc)} .tl-who small{color:var(--muted);font-weight:400;margin-left:6px}
.tline.now .tl-who{font-size:1.3em}
.tl-dir{margin:2px 0;color:var(--muted)}
.tl-txt{margin:2px 0;line-height:1.55}
.tline.now .tl-txt{font-size:clamp(1.3em,calc(3.2 * var(--vw,1vw)),1.9em);font-weight:600}
.tline.nr .tl-txt{font-style:italic}
.tl-tip{margin:8px 0 0;padding:6px 10px;background:var(--amber-soft);border-radius:8px;font-size:.92em;color:var(--ink)}
.tdone{text-align:center;margin:auto} .tdone b{font-family:var(--serif);font-size:1.6em}
.tcount{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:120px;color:var(--seal);background:color-mix(in srgb,var(--sunken) 85%,transparent)}
.tcount.pop{animation:popIn .5s cubic-bezier(.34,1.56,.64,1)}
.talkbox{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:12px 16px;margin:14px 0}
.talkbox ul{margin:4px 0 0;padding-left:20px;color:var(--muted)}
.relbox{background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;margin:14px 0}
.relbox h3{display:flex;align-items:center;gap:8px;font-size:1.12em}
.notecard{margin-top:10px;background:color-mix(in srgb,var(--rc) 7%,#FFFDF7);border:1px solid color-mix(in srgb,var(--rc) 30%,var(--rule));border-radius:12px;padding:14px;opacity:.6;color:#2B2523}
.notecard.on{opacity:1}
.notecard textarea,.notecard input{width:100%;font-size:1.05em;padding:10px;border:1px solid var(--rule);border-radius:8px;background:#FFFDF7;color:#2B2523;line-height:1.7}
.rep{background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);padding:18px;margin:14px 0}
.rep-h{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.rep-meta{color:var(--muted);font-size:.92em;margin:0}
.rep-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:14px 0}
.rc{border:1px solid var(--rule);border-top:4px solid var(--rc);border-radius:10px;padding:10px 12px;font-size:.92em}
.rc b{font-family:var(--serif);color:var(--rc);font-size:1.1em} .rc p{margin:4px 0}
.rep .lab{display:inline-block;font-size:.78em;color:var(--faint);margin-right:6px}
.rep-q p{margin:6px 0}
.selfck{margin-top:12px;border-top:1px solid var(--rule);padding-top:10px}
.sk{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;flex-wrap:wrap}
.stars{display:flex;gap:2px}
.star{width:40px;height:40px;border:0;background:none;font-size:28px;color:var(--rule);cursor:pointer;line-height:1}
.star.on{color:#E0A526}

/* 인쇄: 대본·리포트 */
#printroot .playbook .ssum{margin:1.5mm 0 2mm;font-size:9.5pt;color:#6E6A63}
#printroot .castt{width:100%;border-collapse:collapse;font-size:9pt;margin-bottom:3mm;flex:none}
#printroot .castt th,#printroot .castt td{border:.25mm solid #C9C3B8;padding:1.2mm 2mm;text-align:left;vertical-align:top}
#printroot .castt th{background:#F3F1EA;font-weight:400;color:#6E6A63}
#printroot .castt tr.hl td{background:#FFF3A8}
#printroot .who dd.me{font-weight:700}
#printroot .sbody{flex:1;min-height:0;overflow:hidden;font-size:12.5pt;line-height:1.55}
#printroot .sl{display:grid;grid-template-columns:7mm 22mm 1fr;gap:0 2mm;margin:0 0 2.2mm;align-items:baseline}
#printroot .sl .lno{font-family:"IBM Plex Mono",monospace;font-size:8pt;color:#9A958C}
#printroot .sl .sp{font-family:"Jua","Gowun Dodum",sans-serif;font-weight:400}
#printroot .sl i{font-style:normal;color:#6E6A63}
#printroot .sl.nr .tx{font-style:italic;color:#57524B}
#printroot .sl.hl .tx{background:linear-gradient(transparent 38%,#FFE45C 38%,#FFE45C 92%,transparent 92%)}
#printroot .sl.hl .sp{text-decoration:underline 1mm #FFE45C;text-underline-offset:1mm}
#printroot .spractice{flex:none;display:flex;flex-wrap:wrap;gap:1.5mm 5mm;border-top:.4mm solid #2B2523;padding-top:2.5mm;font-size:9.5pt}
#printroot .report h3{font-size:11.5pt;margin:3mm 0 1.5mm;color:#2B2523}
#printroot .report h3 small{font-family:"Gowun Dodum",sans-serif;font-size:8.5pt;color:#8C877E}
#printroot .rmeta{margin:1.5mm 0 0;font-size:9.5pt;color:#6E6A63}
#printroot .rchars{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5mm;max-height:105mm;overflow:hidden;font-size:9.5pt}
#printroot .rcard{border:.3mm solid #C9C3B8;border-radius:1.5mm;padding:2mm 3mm}
#printroot .rcard b{font-family:"Jua",sans-serif;font-weight:400;font-size:11pt}
#printroot .rcard p,#printroot .rrel p{margin:.8mm 0}
#printroot .report .lab{display:inline-block;min-width:16mm;font-size:8pt;color:#8C877E;margin-right:1.5mm}
#printroot .rrel{border:.3mm solid #C9C3B8;border-radius:1.5mm;padding:2mm 3mm;font-size:10pt;max-height:52mm;overflow:hidden}
#printroot .rnote{background:#FBF5E6;border-radius:1mm;padding:1.2mm 2mm}
#printroot .rself p{display:flex;justify-content:space-between;margin:.8mm 0;font-size:10pt;border-bottom:.2mm dotted #C9C3B8}
#printroot .rst span{color:#D9D3C8;font-size:12pt} #printroot .rst span.on{color:#E0A526}
#printroot .rhand{flex:1}

.sline:not(.cur) .dchips{display:none}

/* 역할놀이: 생각·느낌 쓰기 돕기 */
.chip.act{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chip.act .ref{flex:none;font-family:var(--mono);font-size:.78em;color:var(--faint);font-weight:400}
.chip.act.on .ref{color:var(--sky)}
.findbook{display:flex;gap:10px;align-items:center;margin:10px 0 2px;padding:10px 14px;background:var(--sky-soft);border-radius:10px;color:var(--ink)}
.findbook p{margin:0}
.mstep .help{margin-left:auto;font-size:.88em}
.helpq{margin:0 0 8px;padding:10px 14px 10px 30px;background:var(--amber-soft);border-radius:10px;color:var(--ink)}
.helpq li{margin:2px 0}
.frame{border:1px dashed var(--rule);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.frame.off{opacity:.45}
.frame p{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:1.05em}
.frame .fr1{color:var(--muted)}
.frame input{flex:1;min-width:180px;font-size:1em;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink)}
.fr2 input{max-width:240px}
.fpal{display:flex;flex-direction:column;gap:5px;margin:0 0 4px}
.fg{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fg>b{font-family:var(--serif);font-size:.82em;color:var(--fc);min-width:34px}
.fg .chip.on{background:color-mix(in srgb,var(--fc) 12%,var(--surface));border-color:var(--fc);color:var(--fc)}
.sentence{margin:12px 0 6px;padding:12px 16px;background:var(--sunken);border-radius:10px;font-size:1.08em;line-height:1.7;min-height:48px}
.igs{display:flex;flex-wrap:wrap;gap:6px}
.ig{font-size:.85em;padding:3px 10px;border-radius:999px;background:var(--sunken);color:var(--faint)}
.ig.on{background:var(--leaf-soft);color:var(--leaf);font-weight:700}
.ownbox{margin-top:8px} .ownbox summary{cursor:pointer;color:var(--muted);font-size:.9em}
.ownbox textarea{width:100%;margin-top:6px;font-size:1em;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink)}

/* 역할놀이: 이야기 읽기·내용 알기·낱말 알기 */
.storyhero{text-align:center;margin:8px 0 18px}
.ptag2{display:inline-block;font-size:.82em;color:var(--sky);background:var(--sky-soft);border-radius:6px;padding:3px 10px;margin:0}
.stitle{font-family:var(--serif);font-size:clamp(1.9em,calc(5.4 * var(--vw,1vw)),2.8em);margin:12px 0 2px;letter-spacing:-.02em}
.sby{color:var(--muted);margin:0 0 10px}
.timer{display:flex;align-items:center;justify-content:center;gap:clamp(16px,calc(4 * var(--vw,1vw)),40px);flex-wrap:wrap;background:var(--surface);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow);padding:20px}
.tring{--t:1;width:min(calc(52 * var(--vw,1vw)),210px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(closest-side,var(--surface) 82%,transparent 83%),conic-gradient(var(--seal) calc(var(--t) * 360deg),var(--sunken) 0)}
.timer.over .tring{background:radial-gradient(closest-side,var(--surface) 82%,transparent 83%),conic-gradient(var(--leaf) 360deg,var(--leaf) 0)}
.tclock{font-family:var(--mono);font-size:clamp(2.2em,calc(7 * var(--vw,1vw)),3.4em);font-weight:600;color:var(--ink)}
.timer.run .tclock{color:var(--seal)}
.tside{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tmin{display:flex;align-items:center;gap:8px}
.tmsg{margin:0;color:var(--muted);min-height:1.5em;max-width:30ch}
.who3{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:16px 0}
.pcard{background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--rc);border-radius:12px;padding:10px 14px}
.pcard b{font-family:var(--serif);color:var(--rc);font-size:1.1em} .pcard p{margin:4px 0 0;font-size:.9em;color:var(--muted)}
.readok{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.1em;margin:14px 0;cursor:pointer}
.readok input{width:24px;height:24px}
.qcheck{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:12px}
.qc{background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px}
.qq{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;font-weight:600;font-size:1.05em}
.qa{background:var(--leaf-soft);border-radius:10px;padding:12px 14px;animation:up .3s ease-out}
.qa p{margin:4px 0}
.qal{font-family:var(--serif);font-weight:700;color:var(--leaf);font-size:.92em}
.qkey{font-size:.9em;color:var(--muted)} .qkey b{color:var(--ink)}
.qself{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px} .qself>span{font-size:.9em;color:var(--muted)}
.wtray{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:64px;padding:12px;background:var(--sunken);border-radius:14px;margin:14px 0}
.wcard{font-family:var(--serif);font-weight:700;font-size:1.3em;padding:10px 22px;border-radius:12px;border:1px solid var(--rule);background:var(--surface);box-shadow:var(--shadow);cursor:grab;touch-action:none;user-select:none;color:var(--ink)}
.wcard.on{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.wcard.lift{opacity:.3}
.wcard.ghost{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-60%) rotate(-3deg);box-shadow:0 14px 30px -10px rgba(0,0,0,.35)}
.wslots{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:10px}
.wslot{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:6px 16px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.wslot.hover{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.wslot.ok{border-color:var(--leaf);background:var(--leaf-soft);cursor:default}
.wslot.no{animation:shakeX .45s;border-color:var(--seal)}
.wdrop{display:grid;place-items:center;min-height:46px;border:2px dashed var(--rule);border-radius:10px;color:var(--faint);font-size:.9em;padding:0 10px}
.wslot.ok .wdrop{border-style:solid;border-color:var(--leaf);background:var(--surface)} .wdrop b{font-family:var(--serif);font-size:1.15em;color:var(--leaf)}
.wm{margin:0;font-size:1.05em}
.wex{grid-column:1 / -1;margin:0;font-size:.92em;color:var(--muted)}
@media (max-width:560px){.wslot{grid-template-columns:1fr}}

/* 역할놀이: 그래픽 고도화 */
.ricon{width:1.15em;height:1.15em;flex:none;color:var(--rc,currentColor)}
.rbadge{gap:4px}
.chtab{display:inline-flex;align-items:center;gap:6px}
.chtab .ricon{width:1.25em;height:1.25em}
.pcard b{display:inline-flex;align-items:center;gap:6px}
.tl-who{display:flex;align-items:center;gap:6px}
.scard{padding:0;overflow:hidden}
.scard>*:not(.sthumb){margin-inline:16px}
.scard>.swho{margin-bottom:16px}
.sthumb{display:block;background:linear-gradient(180deg,var(--sunken),color-mix(in srgb,var(--sunken) 60%,var(--surface)));border-bottom:1px solid var(--rule);padding:8px 10px 2px;margin-bottom:6px}
.sart{display:block;width:100%;height:auto;max-height:140px}
.scard:hover .sart{transform:scale(1.03)} .sart{transition:transform .3s}
.scard.on .sthumb{background:linear-gradient(180deg,var(--seal-soft),var(--surface))}
.storyart{display:block;width:min(100%,460px);height:auto;margin:0 auto 6px}
.storyhero{position:relative;padding:18px 12px 6px;border-radius:20px;background:radial-gradient(120% 90% at 50% 0%,var(--amber-soft),transparent 70%)}
.tring{position:relative;box-shadow:inset 0 0 0 1px var(--rule)}
.tring::after{content:"";position:absolute;inset:4%;border-radius:50%;background:repeating-conic-gradient(from -1deg,var(--faint) 0 2deg,transparent 2deg 30deg);-webkit-mask:radial-gradient(closest-side,transparent 88%,#000 89%);mask:radial-gradient(closest-side,transparent 88%,#000 89%);opacity:.5}
.timer.run .tring{animation:breathe 2.4s ease-in-out infinite}
.qc{position:relative;padding-left:20px}
.qc.open{border-color:color-mix(in srgb,var(--leaf) 35%,var(--rule))}
.qc.open::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--leaf)}
.qal::before{content:"💡 "}
/* 낱말 묶음·카드 */
.wrtabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.wrt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:12px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;text-align:left;color:var(--ink)}
.wrt b{font-family:var(--serif);font-size:.98em} .wrt small{color:var(--faint);font-size:.78em}
.wrt.on{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.wrt.done b{color:var(--leaf)}
.wrt:disabled{opacity:.5;cursor:default}
.wtray{background:repeating-linear-gradient(45deg,var(--sunken) 0 12px,color-mix(in srgb,var(--sunken) 70%,var(--surface)) 12px 24px);padding:18px}
.wcard{position:relative;transform:rotate(var(--tilt,0deg));background:linear-gradient(180deg,#FFFDF7,#FBF5E6);color:#2B2523;border:1px solid #E2D6BC;padding:14px 26px 12px;transition:transform .15s,box-shadow .15s}
.wcard::before{content:"";position:absolute;left:10px;right:10px;top:0;height:5px;border-radius:0 0 4px 4px;background:var(--seal);opacity:.75}
.wcard:hover{transform:rotate(0) translateY(-3px);box-shadow:0 12px 24px -12px rgba(0,0,0,.35)}
.wcard.on{transform:rotate(0) translateY(-4px) scale(1.04)}
.wall{margin:0;color:var(--leaf);font-weight:600}
.wslot{counter-increment:ws;position:relative}
.wslots{counter-reset:ws}
.wslot .wdrop{background:repeating-linear-gradient(-45deg,transparent 0 6px,color-mix(in srgb,var(--rule) 40%,transparent) 6px 8px)}
.wslot.ok .wdrop{animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
.wexl{display:inline-block;font-size:.78em;font-weight:700;color:var(--leaf);background:var(--surface);border:1px solid var(--leaf);border-radius:4px;padding:0 5px;margin-right:6px}
/* 연습 무대 — 막과 조명 */
.stagebox{position:relative;border-radius:18px;overflow:hidden;background:#2B2523;padding:34px clamp(26px,calc(7 * var(--vw,1vw)),70px) 0;margin:12px 0}
.stagebox .valance{position:absolute;left:0;right:0;top:0;height:30px;background:radial-gradient(circle at 20px -6px,#B23A2A 22px,transparent 23px) 0 0/40px 30px repeat-x,#8E2A1E;box-shadow:0 4px 10px rgba(0,0,0,.35);z-index:2}
.stagebox .curtain{position:absolute;top:0;bottom:0;width:clamp(22px,calc(6 * var(--vw,1vw)),62px);background:repeating-linear-gradient(90deg,#9E2F22 0 10px,#C2452D 10px 18px,#8E2A1E 18px 24px);z-index:1;box-shadow:inset -6px 0 12px rgba(0,0,0,.35)}
.stagebox .curtain.l{left:0;border-radius:0 0 40% 0}
.stagebox .curtain.r{right:0;border-radius:0 0 0 40%;transform:scaleX(-1)}
.stagebox .tele{border:0;border-radius:14px 14px 0 0;background:radial-gradient(70% 90% at 50% 40%,#FFF8E3 0%,#F3EDDF 55%,#E2D8C4 100%);min-height:360px}
.stagebox .tline.now{box-shadow:0 0 0 4px color-mix(in srgb,var(--rc) 20%,transparent),0 18px 40px -16px rgba(0,0,0,.35);animation:up .35s ease-out}
.stagebox .tline{background:#FFFDF7;color:#2B2523}
.stagebox .tl-dir,.stagebox .tl-who small{color:#6E6A63}
.stagebox .tprog{color:#6E6A63}
.stagebox .tdone b{color:#2B2523} .stagebox .tdone p{color:#57524B}
.stagebox .tl-tip{background:#FBF0D9;color:#2B2523}
.stagebox .tcount{background:rgba(43,37,35,.72);color:#FFE58A}

/* 기뻐의 비밀: 그래픽 고도화 */
.rb{background:radial-gradient(70% 120% at 50% 10%,#FFFBEA 0%,var(--surface) 60%),var(--surface);background-image:radial-gradient(70% 120% at 50% 10%,color-mix(in srgb,var(--yel-soft) 90%,transparent),transparent 65%),radial-gradient(circle,color-mix(in srgb,var(--rule) 70%,transparent) 1px,transparent 1.5px);background-size:auto,18px 18px;padding-top:34px !important;padding-bottom:58px !important}
.rb-tag{position:absolute;left:14px;top:10px;font-family:var(--mono);font-size:.7em;letter-spacing:.08em;color:var(--faint)}
.rb-band{background:linear-gradient(90deg,#E9A6A0,#D9846F calc(50% - var(--t) * 10%),#C9705A,#D9846F calc(50% + var(--t) * 10%),#E9A6A0) !important;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.rb-band .grip{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--surface);border:2px solid #C9705A;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.rb-band .grip.l{left:-11px} .rb-band .grip.r{right:-11px}
.rb-gauge{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:.72em;color:var(--faint)}
.rb-gauge b{display:block;width:120px;height:7px;border-radius:99px;background:var(--sunken);overflow:hidden}
.rb-gauge i{display:block;height:100%;width:calc(var(--t) * 100%);border-radius:99px;background:linear-gradient(90deg,var(--leaf),#F5CE45 60%,var(--seal));transition:width .15s}
.rb.on .rb-gauge span::after{content:" · 비밀 보임"}
.stampboard{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 4px;padding:12px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:14px}
.stamp{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--rule);color:var(--faint);font-family:var(--serif);font-weight:700}
.stamp.on{border:3px solid var(--seal);color:var(--seal);background:var(--seal-soft);transform:rotate(-10deg);animation:stampIn .45s cubic-bezier(.34,1.56,.64,1)}
.stamp.on b{font-size:.92em}
@keyframes stampIn{0%{transform:scale(1.8) rotate(-30deg);opacity:0}100%{transform:rotate(-10deg);opacity:1}}
.sbl{margin-left:auto;font-family:var(--serif);font-weight:700;color:var(--muted)}
.gstamp{position:absolute;left:12px;bottom:12px;font-family:var(--serif);font-weight:700;font-size:1.05em;color:var(--seal);border:3px solid var(--seal);border-radius:8px;padding:2px 10px;background:color-mix(in srgb,#fff 82%,transparent);transform:rotate(-8deg);box-shadow:0 0 0 2px color-mix(in srgb,#fff 70%,transparent)}
.gcard{box-shadow:0 1px 2px rgba(35,32,34,.04)} .gcard:hover{box-shadow:var(--shadow)}
.dexlist{gap:12px}
.dexcard{--hue:40;padding:26px 34px 12px 14px;background:linear-gradient(180deg,hsl(var(--hue) 70% 96%),var(--surface) 60%);border:1px solid hsl(var(--hue) 40% 82%);box-shadow:0 1px 2px rgba(35,32,34,.05);transition:transform .15s,box-shadow .15s}
.dexcard:hover{transform:translateY(-2px) rotate(-.6deg);box-shadow:var(--shadow)}
.dexcard::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:14px 14px 0 0;background:hsl(var(--hue) 55% 62%)}
.dno{position:absolute;left:14px;top:10px;font-family:var(--mono);font-size:.62em;color:hsl(var(--hue) 35% 45%);letter-spacing:.06em}
.qhero{display:flex;justify-content:center;margin:2px 0 4px} .qhero svg{width:min(100%,340px);height:auto}
.qrow.done{border-color:color-mix(in srgb,var(--leaf) 40%,var(--rule));background:linear-gradient(180deg,var(--leaf-soft),var(--surface) 70%)}

.rb .rb-band{bottom:42px}

/* 역할놀이: 인물 카드·대본 종이·배역표·쪽지·리포트 */
.chhead{display:flex;align-items:center;gap:14px;margin:-4px 0 14px;padding:12px 14px;border-radius:12px;background:linear-gradient(110deg,color-mix(in srgb,var(--rc) 14%,var(--surface)),var(--surface) 70%)}
.chemb{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--surface);border:2px solid var(--rc);color:var(--rc);flex:none;box-shadow:0 6px 14px -8px var(--rc)}
.chemb .ricon{width:30px;height:30px}
.chh-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.chh-t b{font-family:var(--serif);font-size:1.35em;color:var(--rc)}
.chh-tr{display:flex;flex-wrap:wrap;gap:4px;font-size:.85em;color:var(--muted)}
.chh-tr i{font-style:normal;padding:1px 9px;border-radius:999px;background:color-mix(in srgb,var(--rc) 12%,var(--surface));color:var(--rc);font-weight:600}
.chh-exp{margin-left:auto;font-size:.85em;color:var(--muted);background:var(--amber-soft);border-radius:8px;padding:4px 10px}
.scriptpaper{background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);padding:0 14px 6px;margin:14px 0;background-image:repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in srgb,var(--sky) 9%,transparent) 31px 32px)}
.sp-h{display:flex;align-items:center;gap:14px;margin:0 -14px 4px;padding:12px 16px;border-bottom:2px solid var(--ink);background:var(--surface);border-radius:16px 16px 0 0}
.sp-art{width:120px;flex:none;border-radius:10px;overflow:hidden;background:var(--sunken)} .sp-art .sart{max-height:64px}
.sp-k{margin:0;font-family:var(--mono);font-size:.72em;letter-spacing:.08em;color:var(--seal)}
.sp-t{margin:0;font-family:var(--serif);font-weight:700;font-size:1.25em}
.sp-c{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:4px}
.scriptpaper .script{margin:10px 0}
.castrow{padding:10px 12px;gap:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 9%,var(--surface)),var(--surface) 60%)}
.cemb{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);border:2px solid var(--rc);color:var(--rc);flex:none}
.cemb .ricon{width:22px;height:22px}
.cname{display:flex;flex-direction:column;font-family:var(--serif);font-weight:700;color:var(--rc);min-width:76px}
.cname small{font-family:var(--sans);font-weight:400;font-size:.75em;color:var(--muted)}
.castgrid.rolling .castrow select,.castgrid.rolling .castrow input{background:var(--amber-soft)}
.notecard{position:relative;transform:rotate(-.6deg);box-shadow:0 10px 24px -14px rgba(0,0,0,.3);background-image:repeating-linear-gradient(180deg,transparent 0 33px,color-mix(in srgb,var(--rc) 14%,transparent) 33px 34px)}
.notecard::before{content:"";position:absolute;left:50%;top:-10px;width:90px;height:22px;margin-left:-45px;background:color-mix(in srgb,#F5CE45 55%,transparent);transform:rotate(2deg);border-radius:2px}
.rep{position:relative;padding-top:0;overflow:hidden}
.rep::before{content:"역할놀이 활동 리포트";display:block;margin:0 -18px 14px;padding:12px 18px;font-family:var(--serif);font-weight:700;font-size:1.1em;color:#fff;background:linear-gradient(90deg,#3B6EA5,#C2452D 55%,#4F7A4A)}
.rc{background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 8%,var(--surface)),var(--surface) 50%)}

.castbox .fld.narrow,.rep .fld.narrow{margin-inline:0}
.castgrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.castrow select,.castrow input{min-width:96px}
.trline{color:var(--muted);font-size:.92em;margin:-6px 0 10px}
.lab2{font-size:.8em;color:var(--faint);margin-right:4px}

/* ---------- 읽기 과정 질문 카드(rq-) ---------- */
.s-pre{--sc:var(--pre);--scs:var(--pre-soft)} .s-mid{--sc:var(--mid);--scs:var(--mid-soft)} .s-post{--sc:var(--post);--scs:var(--post-soft)}
.qa-book{width:56px;height:56px;color:var(--ink);flex:none}
.qa-book.sm{width:30px;height:30px} .qa-book.xs{display:inline-block;width:20px;height:20px;vertical-align:-4px}
.qa-q{width:30px;height:30px;color:var(--ink);flex:none;vertical-align:middle}
@keyframes rq-twinkle{50%{transform:scale(1.25) rotate(20deg);opacity:.6}}
@keyframes rq-peek{50%{transform:translate(-3px,-2px) rotate(-8deg)}}
.qa-spark,.qa-star{transform-box:fill-box;transform-origin:center;animation:rq-twinkle 2.2s ease-in-out infinite}
.qa-glass{transform-box:fill-box;transform-origin:center;animation:rq-peek 2.6s ease-in-out infinite}
.rq-hero{text-align:center;margin:6px 0 10px}
.qa-road{display:block;width:100%;height:auto;max-height:210px}
.rq-tipline{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--amber-soft);border-radius:10px;font-size:.95em;margin:8px 0}
.rq-tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:64px;padding:14px;margin:12px 0;border-radius:14px;background:repeating-linear-gradient(45deg,var(--sunken) 0 12px,color-mix(in srgb,var(--sunken) 70%,var(--surface)) 12px 24px)}
.rq-act{display:inline-flex;align-items:center;gap:8px;font-size:1.02em;font-weight:600;padding:12px 16px;border-radius:12px;border:1px solid var(--rule);background:var(--surface);box-shadow:var(--shadow);cursor:grab;touch-action:none;user-select:none;color:var(--ink)}
.rq-act i,.rq-chip i{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--sunken);font-family:var(--serif);font-weight:700;font-size:.9em}
.rq-act.on{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft);transform:translateY(-3px)}
.rq-act.rq-lift{opacity:.3}
.rq-ghost{position:fixed;z-index:70;pointer-events:none;transform:translate(-50%,-60%) rotate(-3deg);box-shadow:0 16px 30px -12px rgba(0,0,0,.4)}
.rq-fly{position:fixed;z-index:70;pointer-events:none;margin:0;transition:transform .36s cubic-bezier(.2,.8,.2,1.1),opacity .36s}
.rq-alldone{margin:0;color:var(--leaf);font-weight:700}
.rq-bins{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 14px}
.rq-bin{display:flex;flex-direction:column;gap:8px;min-height:200px;padding:12px;border-radius:16px;border:2px dashed color-mix(in srgb,var(--sc) 45%,var(--rule));background:linear-gradient(180deg,var(--scs),var(--surface) 60%);cursor:pointer;transition:border-color .15s,transform .15s}
.rq-bin.rq-hover{border-style:solid;border-color:var(--sc);transform:translateY(-3px)}
.rq-bin.rq-hover .qa-book{transform:scale(1.12) rotate(-6deg)} .rq-bin .qa-book{transition:transform .2s}
.rq-bin.no{animation:shakeX .45s;border-color:var(--seal)}
.rq-binh{display:flex;align-items:center;gap:8px}
.rq-binh b{font-family:var(--serif);font-size:1.15em;color:var(--sc)}
.rq-bc{margin-left:auto;font-family:var(--mono);font-size:.9em;color:var(--muted);background:var(--surface);border-radius:999px;padding:1px 10px}
.rq-binb{display:flex;flex-direction:column;gap:6px}
.rq-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid color-mix(in srgb,var(--sc) 35%,var(--rule));font-size:.92em;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
.rq-chip.given{border-style:dashed;color:var(--muted)} .rq-chip small{margin-left:auto;font-size:.75em;color:var(--faint)}
.rq-why{display:flex;gap:6px;align-items:flex-start;margin:0;padding:8px 10px;border-radius:10px;background:var(--seal-soft);color:var(--seal);font-size:.88em;font-weight:600}
@media (max-width:640px){.rq-bins{grid-template-columns:1fr}}
/* 질문 카드 띠 · 귀띔 */
.rq-band{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-radius:999px;background:var(--scs);color:var(--sc)}
.rq-band b{font-family:var(--serif)} .rq-band i{font-style:normal;font-family:var(--serif);font-weight:700;background:var(--surface);border-radius:6px;padding:0 6px;color:var(--ink)}
.rq-hint{min-height:1.4em;margin:4px 0;color:var(--seal);font-weight:600;text-align:center}
/* 질문 카드 */
.rq-card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:10px 12px 12px;box-shadow:var(--shadow);border-top:6px solid var(--sc);text-align:left}
.rq-card:not(.on){opacity:.45}
.rq-card .rq-band{align-self:flex-start;font-size:.85em}
.rq-q{margin:0;font-family:var(--serif);font-weight:700;font-size:1.05em;line-height:1.5;color:var(--ink)}
/* 읽기 전 표지 · 물음 상자 · 고르기 */
.rq-cover{position:relative;text-align:center;background:var(--surface);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow);padding:14px 16px 16px;margin-bottom:12px;border-left:12px solid var(--pre)}
.rq-ct{font-family:var(--serif);font-weight:700;font-size:1.5em;margin:8px 0 2px}
.rq-cc{margin:0;color:var(--muted)}
.rq-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.rq-two{grid-template-columns:1fr}}
.rq-ask{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:12px 14px;margin:10px 0}
.rq-pickl{display:flex;flex-direction:column;gap:8px}
.rq-pk{text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;font-size:1em;line-height:1.6;color:var(--ink)}
.rq-pk.right{border-color:var(--leaf);background:var(--leaf-soft)} .rq-pk.right::before{content:"✓ ";color:var(--leaf);font-weight:700}
.rq-pk.no{border-color:var(--seal);background:var(--seal-soft);animation:shakeX .4s}
.rq-ask .rq-hint{text-align:left;color:var(--muted);font-weight:500}
/* 내 질문 만들기 */
.rq-ownb{background:var(--surface);border:1px solid var(--rule);border-left:6px solid var(--sc);border-radius:14px;padding:12px 16px;margin:10px 0;box-shadow:var(--shadow)}
.rq-ownh{display:flex;align-items:center;gap:8px} .rq-ownh b{font-family:var(--serif);font-size:1.15em;color:var(--sc)} .rq-ownh .qa-book{width:36px;height:36px}
.rq-okp{margin-left:auto;color:var(--leaf);font-weight:800;font-size:1.2em;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
.rq-ex{margin:6px 0;color:var(--muted);font-size:.95em} .rq-ex span{display:inline-block;font-size:.75em;font-weight:700;color:var(--sc);border:1px solid var(--sc);border-radius:4px;padding:0 6px;margin-right:6px}
/* 되돌아보기 */
.rq-selfg{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:12px 0}
.rq-sc .rq-card{height:100%}
.rq-sc.rq-turn .rq-card{animation:rq-flip .5s ease}
@keyframes rq-flip{50%{transform:rotateY(90deg)}}
.rq-fact{margin:0;font-size:.82em;color:var(--muted);background:var(--sunken);border-radius:8px;padding:4px 8px}
.rq-yn{display:flex;gap:6px;margin-top:auto}
.rq-yn button{flex:1;min-height:40px;border-radius:10px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;font-weight:700;color:var(--ink)}
.rq-yn button.on[data-v="yes"]{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf)}
.rq-yn button.on[data-v="no"]{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
/* 인쇄 미리 보기 */
.rq-sheet{background:#fff;color:#2B2523;border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow);padding:16px;margin:12px 0}
.rq-sheetg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rq-card.pv{box-shadow:none;border-style:dashed;border-top-style:solid;font-size:.82em;background:#fff}
.rq-card.pv .rq-q{color:#2B2523}
.rq-bm{margin-top:10px;border:1px dashed #C9C3B8;border-radius:8px;padding:8px 12px;font-size:.9em}
.rq-bm p{margin:4px 0} .rq-bm i{font-style:normal;font-weight:700;margin-right:8px;color:var(--sc)}
@media (max-width:700px){.rq-sheetg{grid-template-columns:repeat(2,1fr)}}

/* 인쇄: 질문 카드(qp-) */
#printroot .qp-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:51mm;gap:2.5mm;margin-top:2.5mm;flex:none}
#printroot .qp-c{position:relative;display:flex;flex-direction:column;border:.35mm dashed #8C877E;border-radius:2mm;padding:0 3mm 2mm;overflow:hidden}
#printroot .qp-band{display:flex;justify-content:space-between;align-items:center;margin:0 -3mm 2mm;padding:1.2mm 3mm;color:#fff;font-size:10pt}
#printroot .qp-band b{font-family:"Jua",sans-serif;font-weight:400}
#printroot .qp-band i{font-style:normal;font-family:"Jua",sans-serif;background:#fff;color:#2B2523;border-radius:1mm;padding:0 1.6mm}
#printroot .q-pre .qp-band{background:#3B6EA5}
#printroot .q-mid .qp-band{background:repeating-linear-gradient(135deg,#94650F 0 2mm,#B5822A 2mm 3.4mm)}
#printroot .q-post .qp-band{background:#4F7A4A radial-gradient(circle,#7FA875 .5mm,transparent .7mm) 0 0/2.4mm 2.4mm}
#printroot .qp-q{flex:1;min-height:0;margin:0;font-family:"Gowun Batang",serif;font-weight:700;font-size:14pt;line-height:1.45;overflow:hidden}
#printroot .qp-t{margin:1mm 0 0;font-size:8pt;color:#6E6A63}
#printroot .qp-ck{margin:1mm 0 0;display:flex;gap:4mm;font-size:8.5pt;color:#57524B}
#printroot .qp-bm{flex:1;margin-top:3mm;border:.35mm dashed #8C877E;border-radius:2mm;padding:2mm 4mm;display:flex;flex-direction:column;gap:1.2mm;min-height:0}
#printroot .qp-bmh{margin:0;font-size:9pt;color:#6E6A63}
#printroot .qp-bl{display:flex;gap:3mm;align-items:baseline;margin:0;font-size:11pt}
#printroot .qp-bl b{flex:none;width:16mm;font-family:"Jua",sans-serif;font-weight:400}
#printroot .qp-bl span{flex:1;border-bottom:.25mm solid #C9C3B8;max-height:12mm;overflow:hidden}
#printroot .qp-bl.q-pre b{color:#3B6EA5} #printroot .qp-bl.q-mid b{color:#94650F} #printroot .qp-bl.q-post b{color:#4F7A4A}

/* 읽기 과정 질문 카드: 그림·모션 고도화 */
@keyframes rq-rise{from{opacity:0;transform:translateY(18px) scale(.98)}}
/* 표지 그림 */
@keyframes rq-slide{from{opacity:0;transform:translateX(30px)}}
.rq-coverimg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;border-radius:14px}
.rq-cover{padding-top:16px}


/* 읽기 과정 질문 카드 — 스튜디오 말투(11-01): 흰 바탕 · 가운데 명조 제목 · 납작한 선 그림을 카드 안에 */
.rq-hero{text-align:center;margin:8px 0 18px}
svg.qf{display:block;width:100%;height:auto}
.rq-cover{border-left-width:1px}
.rq-coverimg{max-width:560px;margin:0 auto}
.qf-star{transform-box:fill-box;transform-origin:center}

/* 읽기 과정 질문 카드 — 교과서 순서(11-09): 학습 문제 · 보기 풀이 · 길잡이 · 5분 읽기 · 내용 확인 · 붙임딱지 표 */
.rq-lab{display:inline-block;font-size:.75em;font-weight:700;color:var(--amber);border:1px solid currentColor;border-radius:4px;padding:0 6px;margin-right:8px;vertical-align:2px}
.rq-tg{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:4px;border-radius:6px;background:var(--sunken);font-family:var(--serif);font-style:normal;font-weight:700;font-size:.85em;color:var(--ink);vertical-align:1px}
.rq-goal{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:14px 0 6px;padding:12px 16px;border-radius:14px;background:var(--amber-soft)}
.rq-goal b{font-family:var(--serif);font-size:1.12em}
.rq-model{background:var(--surface);border:1px solid var(--rule);border-left:6px solid var(--amber);border-radius:14px;padding:10px 14px;margin:10px 0;box-shadow:var(--shadow)}
.rq-mh2{margin:0 0 6px}
.rq-mline{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center;margin:6px 0 0;padding:8px 10px;border-radius:10px;background:var(--scs)}
.rq-mline em{font-style:normal;font-weight:700;color:var(--sc);display:inline-flex;align-items:center;gap:4px}
.rq-mline small{grid-column:2/-1;color:var(--muted);font-size:.85em}
.rq-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.rq-sum p{margin:0;padding:10px 12px;border-radius:12px;background:var(--scs);border-top:4px solid var(--sc);line-height:1.55}
.rq-sum b{display:flex;align-items:center;gap:4px;font-family:var(--serif);color:var(--sc);margin-bottom:2px}
.rq-guide{margin:2px 0 12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.rq-guide summary{cursor:pointer;padding:8px 12px;font-weight:600;display:flex;align-items:center;gap:6px;list-style:none}
.rq-guide summary::-webkit-details-marker{display:none}
.rq-guide summary::after{content:"펴 보기 ▾";margin-left:auto;font-size:.8em;color:var(--muted);font-weight:500}
.rq-guide[open] summary::after{content:"접기 ▴"}
.rq-guide summary small{color:var(--muted);font-weight:500}
.rq-gcols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px 12px}
.rq-gcols>div{padding:8px 10px;border-radius:10px;background:var(--scs)}
.rq-gcols b{display:block;font-family:var(--serif);color:var(--sc);margin-bottom:4px}
.rq-gcols span{display:block;font-size:.88em;margin:4px 0}
.rq-by{margin:2px 0 6px;color:var(--muted);font-size:.9em}
.rq-say2{margin:4px 0 10px;padding:6px 10px;border-radius:10px;background:var(--sunken);font-size:.9em;color:var(--muted)}
.rq-todo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:10px 0 14px;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px dashed var(--rule)}
.rq-todo b{font-family:var(--serif)} .rq-todo span{padding:4px 10px;border-radius:999px;background:var(--sunken);font-size:.92em}
.rq-after{animation:up .4s ease-out}
.rq-qz{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:12px 16px;margin:10px 0;box-shadow:var(--shadow)}
.rq-qz.ok{border-color:color-mix(in srgb,var(--leaf) 55%,var(--rule))}
.rq-qzq{display:flex;align-items:baseline;gap:6px;margin:0 0 4px;font-family:var(--serif);font-weight:700;font-size:1.08em} .rq-qzq b{flex:none}
.rq-where{margin:0 0 8px;font-size:.92em;color:var(--sky)}
.rq-ans{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:var(--leaf-soft);animation:up .3s ease-out}
.rq-ans .rq-lab{color:var(--leaf)}
.rq-qz .rq-hint{text-align:left}
.rq-qz .chip.no{border-color:var(--seal);background:var(--seal-soft);animation:shakeX .4s}
.rq-plants{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.rq-plants div{padding:10px 12px;border-radius:12px;background:var(--sunken);animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
.rq-plants b{display:block;font-family:var(--serif);font-size:1.1em}
.rq-plants span{font-size:.88em;color:var(--muted)}
.rq-stk{display:inline-block;padding:10px 14px;border-radius:6px;background:#FFF6C9;border:1px solid #E5CF73;box-shadow:0 3px 0 rgba(0,0,0,.08);font-family:var(--serif);font-weight:700;font-size:.98em;line-height:1.45;color:#2B2523;text-align:left;max-width:300px;cursor:grab;touch-action:none;user-select:none}
.rq-stk.on{box-shadow:0 0 0 3px var(--sky-soft);transform:translateY(-3px) rotate(-1deg)}
.rq-stk.rq-lift{opacity:.3}
.rq-tb{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.rq-tbg{display:grid;grid-template-columns:96px 1fr;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--surface)}
.rq-tbs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--scs);color:var(--sc)} .rq-tbs b{font-family:var(--serif)}
.rq-row{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--rule)} .rq-row:first-child{border-top:0}
.rq-ra{margin:0;font-size:.95em}
.rq-slot{position:relative;min-height:52px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--rule);border-radius:8px;color:var(--faint);font-size:.85em;cursor:pointer;padding:4px;transition:border-color .15s,background .15s}
.rq-slot.rq-hover{border-style:solid;border-color:var(--sc);background:var(--scs)}
.rq-slot.in{border:0;padding:0;cursor:default} .rq-slot.in .rq-stk{width:100%;max-width:none;cursor:default;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
.rq-slot.no{animation:shakeX .45s;border-color:var(--seal)}
.rq-slot small{position:absolute;top:-8px;right:6px;background:var(--amber);color:#fff;border-radius:4px;padding:0 6px;font-size:.72em;font-weight:700}
.rq-tray .rq-stk{max-width:260px}
.rq-try{margin:0;padding:6px 10px;border-radius:8px;background:var(--amber-soft);font-size:.85em}
.rq-try b{display:block;color:var(--amber);font-size:.9em}
.rq-reread{margin:14px 0;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--rule);text-align:center;box-shadow:var(--shadow);animation:up .4s ease-out}
@media (max-width:700px){.rq-sum,.rq-gcols,.rq-plants{grid-template-columns:1fr}.rq-tbg{grid-template-columns:1fr}.rq-tbs{flex-direction:row;padding:6px}.rq-row{grid-template-columns:1fr}}

/* 읽기 과정 질문 카드 — 설명 그림 · 새 글로 마무리(11-09) */
.rq-qzfig{max-width:560px;margin-top:10px;animation:up .4s ease-out}
.rq-plants svg{margin-bottom:6px}
.rq-readfig{max-width:280px;margin:4px auto 0}
.rq-wtabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.rq-wtab{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:16px;border:2px solid var(--rule);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;color:var(--ink);font:inherit;text-align:center;transition:transform .15s,border-color .15s}
.rq-wtab svg{max-width:200px}
.rq-wtab b{font-family:var(--serif);font-size:1.05em}
.rq-wtab.on{border-color:var(--seal);transform:translateY(-2px)}
.rq-wtab .rq-okp{margin:0}
.rq-wst{background:var(--surface);border:1px solid var(--rule);border-left:6px solid var(--sc);border-radius:14px;padding:12px 16px;margin:12px 0;box-shadow:var(--shadow);animation:up .4s ease-out}
.rq-wst .rq-card{max-width:440px;box-shadow:none}
.rq-wst .rq-hint{text-align:left;color:var(--muted);font-weight:500}
.rq-wtext{margin:6px 0 14px;padding:12px 16px;border-radius:12px;background:var(--sunken);font-family:var(--serif);font-size:1.05em;line-height:1.95}
.rq-wtext p{margin:0 0 8px;text-indent:1em}
.rq-sn{cursor:pointer;border-radius:4px;transition:background .15s}
.rq-sn:hover{background:color-mix(in srgb,#F7C7D6 45%,transparent)}
.rq-sn.on{background:#F7C7D6;box-shadow:0 0 0 2px #F7C7D6}
@media (max-width:700px){.rq-wtabs{grid-template-columns:1fr 1fr}}

/* 읽기 과정 질문 카드 — 생각 열기(11-09): 책 표지 셋 · 식물 이름 맞히기 · 이름을 감춘 화살나무 가지 */
.rq-cvc{display:flex;flex-direction:column;gap:6px}
.rq-cvc .chip{text-align:left;line-height:1.45;white-space:normal;border-radius:12px}
.rq-think{margin:0;padding:6px 10px;border-radius:8px;background:var(--leaf-soft);color:var(--leaf);font-weight:700;font-size:.9em;animation:up .3s ease-out}
.rq-teaser{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:16px;align-items:center;margin:14px 0;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);animation:up .4s ease-out}
.rq-teaser p{margin:4px 0;font-size:1.05em;line-height:1.6} .rq-tq{font-family:var(--serif);font-size:1.2em!important}
@media (max-width:760px){.rq-teaser{grid-template-columns:1fr}}

/* 읽기 과정 질문 카드 — 생각 열기 두 쪽(11-09): 여섯 장 책꽂이 · 한 장씩 크게 · 갈래 세기 */
.rq-shelf{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:12px 0}
.rq-th{position:relative;padding:6px;border-radius:12px;border:2px solid var(--rule);background:var(--surface);cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.rq-th:hover{transform:translateY(-2px)}
.rq-th.cur{border-color:var(--seal);box-shadow:0 0 0 3px var(--seal-soft)}
.rq-th.done:not(.cur){opacity:.75}
.rq-th i{position:absolute;right:-6px;top:-8px;font-style:normal;font-size:.72em;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--leaf);color:#fff}
.rq-stage{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:20px;align-items:center;margin:12px 0;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow)}
.rq-big{position:relative;animation:rq-pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes rq-pop{from{transform:scale(.92);opacity:.4}}
.rq-nm{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:4px 16px;border-radius:999px;background:var(--leaf);color:#fff;font-family:var(--serif);font-weight:700;font-size:1.1em;white-space:nowrap;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
.rq-side{display:flex;flex-direction:column;gap:10px}
.rq-sq{margin:0;font-family:var(--serif);font-weight:700;font-size:1.15em;line-height:1.5}
.rq-step{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-weight:700}
.rq-step span{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--surface);font-size:.8em}
.rq-side .chip.no{border-color:var(--seal);background:var(--seal-soft);animation:shakeX .4s} .rq-side .chip.on:disabled{opacity:1}
.rq-side .rq-hint{text-align:left;margin:0}
.rq-side #plnext{align-self:flex-start}
.rq-tally{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.rq-tally div{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:14px;background:var(--leaf-soft);animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
.rq-tally b{font-family:var(--serif);font-size:1.8em;color:var(--leaf)} .rq-tally span{font-size:.88em;color:var(--leaf);font-weight:600}
@media (max-width:760px){.rq-shelf{grid-template-columns:repeat(3,1fr)}.rq-stage{grid-template-columns:1fr}.rq-big{max-width:300px;margin:0 auto;width:100%}.rq-tally{grid-template-columns:1fr}}

/* 상어 이빨 읽기 길 — 고도화(11-01): 스튜디오 선 그림 · 출발 질문 카드 · 문단 그림 · 문단 지도 */
.sk-steps{list-style:none;margin:8px 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.sk-steps li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--rule);border-left:5px solid var(--sc);box-shadow:var(--shadow);animation:rq-rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.sk-steps b{font-family:var(--serif);color:var(--sc)} .sk-steps p{margin:2px 0 0;font-size:.92em;color:var(--muted);line-height:1.5} .sk-steps p b{color:var(--ink);font-family:inherit}
.sk-no{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sc);color:#fff;font-family:var(--mono);font-weight:600}
.art svg.qf{border-radius:0}
.cover .art{background:var(--surface);padding:10px}
/* 문단 그림 — 읽는 중, 문단 옆 */
/* 움직임(.live 안에서만) */
/* 문단 지도 */
/* 상어 이빨 — 초고도화: 이빨 퀴즈 · 완주 메달 */
.sk-road{max-width:720px;margin:4px auto 10px}
.sk-arena{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:start;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);margin-bottom:14px}
@media (max-width:720px){.sk-arena{grid-template-columns:1fr}}
.sk-jawbox{text-align:center;padding:10px;border-radius:16px;background:#E9F0F7;border:1.8px solid #CDDCE9}
.sk-jaw{display:block;width:100%;height:auto}
.sk-jc{margin:4px 0 0;font-weight:600;color:#2E2A26} .sk-jc b{font-family:var(--serif);font-size:1.3em;color:var(--seal)}
.sk-pop{transform-box:fill-box;transform-origin:50% 0;animation:sk-pop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes sk-pop{from{transform:scaleY(0)}}
.sk-qz{padding:6px 4px;animation:rq-slide .4s cubic-bezier(.2,.8,.2,1)}
.sk-qz.no{animation:shakeX .45s}
.sk-qn{margin:0;font-family:var(--mono);font-size:.85em;color:var(--faint)}
.sk-qt{margin:6px 0 14px;font-family:var(--serif);font-weight:700;font-size:clamp(1.25em,calc(3 * var(--vw,1vw)),1.55em);line-height:1.5}
.sk-ox{display:flex;gap:12px}
.sk-ox button{flex:1;max-width:160px;height:64px;border-radius:16px;font-size:1.7em}
.sk-res>b{display:block;font-family:var(--serif);font-size:1.6em;color:var(--leaf);animation:stampIn .5s cubic-bezier(.34,1.56,.64,1)}
.sk-res p{margin:4px 0 10px}
.sk-why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.95em}
.sk-why li{display:grid;grid-template-columns:28px 1fr;column-gap:8px;padding:8px 10px;border-radius:10px;background:var(--sunken)}
.sk-why li span{grid-row:span 2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff}
.sk-why li span.o{background:var(--sky)} .sk-why li span.x{background:var(--seal)}
.sk-why small{color:var(--muted)}
/* 만화책 의견 읽기 길 — 고도화(11-01): 의견 탐정 · 글의 짜임 · 표지 움직임 */
.cm-arena{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media (max-width:720px){.cm-arena{grid-template-columns:1fr}}
.cm-bins{display:flex;flex-direction:column;gap:10px}
.cm-frame{display:grid;grid-template-columns:1fr 2fr 1fr;gap:10px;margin:10px 0 16px}
@media (max-width:640px){.cm-frame{grid-template-columns:1fr}}
.cm-col{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;border:1px solid var(--rule);background:var(--surface);box-shadow:var(--shadow);border-top:5px solid var(--cc)}
.cm-col.c-start{--cc:var(--pre)} .cm-col.c-mid{--cc:var(--mid)} .cm-col.c-end{--cc:var(--post)}
.cm-col b{font-family:var(--serif);font-size:1.2em;color:var(--cc)} .cm-col small{color:var(--muted)}
.cm-col div{display:flex;gap:6px;flex-wrap:wrap;min-height:28px;margin-top:4px}
.cm-th{margin:0;display:flex;align-items:center;gap:8px;font-size:.95em;color:var(--muted)} .cm-th b{font-family:var(--serif);color:var(--ink)}
.cm-pick{display:flex;gap:6px} .cm-pick .btn{flex:1;padding:8px 6px}
/* 만화책 — 초초고도화: 생각 저울 */

/* 읽기 길 다시 짬(11-01) — 출발 · 스크롤 이야기 · 지금 할 일 · 낱말 뜻 · 날아가는 도장 */
.todo{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px auto 4px;padding:0}
.todo li{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--sunken);color:var(--faint);font-size:.92em;font-weight:600}
.todo li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--rule);font-family:var(--mono);font-size:.8em}
.todo li.ok{color:var(--leaf);background:var(--leaf-soft)} .todo li.ok span{background:var(--leaf);color:#fff;border-color:var(--leaf)}
.todo li.now{color:var(--ink);background:#FFF3C4;box-shadow:0 0 0 2px #F5CE45;animation:breathe 2.4s ease-in-out infinite} .todo li.now span{background:#F5CE45;border-color:#E2B65A;color:#2B2523}
/* 손가락 시범 — 처음 눌러야 할 곳 */
.demo{position:relative;animation:demoRing 1.6s ease-out infinite}
.demo::after{content:"";position:absolute;right:-14px;bottom:-20px;width:30px;height:34px;pointer-events:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'%3E%3Cpath d='M11 3a3 3 0 0 1 6 0v11l6 1.5a4 4 0 0 1 3 4.4L24.6 30a4 4 0 0 1-4 3.4H13a4 4 0 0 1-3.2-1.6L4 24a3 3 0 0 1 4.6-3.8L11 23z' fill='%23fff' stroke='%232E2A26' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");animation:demoTap 1.6s ease-in-out infinite}
@keyframes demoRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--seal) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes demoTap{0%,100%{transform:translate(6px,6px)}50%{transform:translate(0,0) scale(.92)}}
/* 날아가는 낱말 */
.flyw{position:fixed;z-index:60;pointer-events:none;padding:4px 10px;border-radius:10px;background:#FFF3C4;border:2px solid var(--seal);color:var(--seal);font-weight:800;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);transition:transform .7s cubic-bezier(.5,-.2,.3,1.2),opacity .7s ease-in}
.bc.pop{animation:popIn .45s cubic-bezier(.34,1.56,.64,1)} .bc.pop .seal{animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both}
/* 따라다니는 빙고판·색연필 */
/* 스크롤 이야기 */
.sx{--p:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(16px,calc(4 * var(--vw,1vw)),48px);align-items:center;min-height:calc(82 * var(--vh,1vh));padding:calc(9 * var(--vh,1vh)) max(16px,calc(calc(50 * var(--vw,1vw)) - 520px))}
.sx.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.sx.z0{background:linear-gradient(180deg,var(--paper),#EEF4FA)} .sx.z1{background:linear-gradient(180deg,#EEF4FA,#FBF3DE)} .sx.z2{background:linear-gradient(180deg,#FBF3DE,var(--paper))}
.sx.wait{display:none}
@media (max-width:760px){.sx,.sx.flip{grid-template-columns:1fr;min-height:0;padding:calc(7 * var(--vh,1vh)) 16px}}
/* 들어오면 움직임 */
/* 어려운 낱말 뜻 */
.glpop{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:8;width:max-content;max-width:240px;padding:8px 12px;border-radius:12px;background:#2E2A26;color:#fff;font-size:.82rem;line-height:1.5;font-weight:400;text-align:left;white-space:normal;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}
.glpop b{display:block;color:#F5CE45}
.glpop::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#2E2A26}
/* 되돌아보기 — 방금 지난 정거장의 발자국이 찍힌다 */

/* 종이 학습지 내려받기(기뻐의 비밀) */
.wsdl{display:flex;align-items:center;gap:14px;margin:22px 0 0;padding:12px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .15s ease,border-color .15s ease}
.wsdl:hover{transform:translateY(-2px);border-color:var(--seal)}
.wsdl>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.wsdl small{color:var(--muted);font-size:.85em}
.wsic{flex:none;width:40px;height:48px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M3 3h24l10 10v32H3z' fill='%23fff' stroke='%232E2A26' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M27 3v10h10' fill='%23F3F1EA' stroke='%232E2A26' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 22h20M9 29h20M9 36h12' stroke='%23C9DCC4' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='6' y='9' width='14' height='7' rx='2' fill='%23C2452D'/%3E%3C/svg%3E")}
.wsgo{flex:none;padding:6px 14px;border-radius:999px;background:var(--seal);color:#fff;font-weight:700;font-size:.92em}
details.teacher .wsdl{margin:10px 0 4px;box-shadow:none}
@media print{.wsdl{display:none}}

/* 전자칠판(큰 화면) — index.html 이 body 를 화면에 맞춰 키우고 html.bigscreen 을 단다. 고무줄 글자는 더 크게, 무대는 더 높게 */
html.bigscreen .rb-row{font-size:124px}
html.bigscreen .rb{padding-top:46px !important;padding-bottom:72px !important}
html.bigscreen .rb-band{bottom:30px}

/* 인쇄할 때는 큰 화면 확대를 끈다(종이 크기가 어긋나지 않게) */
@media print{body{zoom:1 !important}}
/* ---------- 교과서 글 읽기 앱 둘(tb-, 11-09): 「약, 잘 쓰고 잘 버리는 방법」 · 「저작권을 왜 지켜야 하나요?」 — 질문 카드(rq-)의 책꽂이·무대·시계·붙임딱지를 함께 쓴다 ---------- */
.tb-clues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tb-clues li{padding:8px 12px;border-radius:10px;background:var(--sunken);line-height:1.5;animation:up .35s ease-out both;animation-delay:var(--d)}
.tb-clues li span{display:inline-block;margin-right:8px;padding:0 8px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:.78em;font-weight:700}
.tb-say{margin:0;padding:10px 14px;border-radius:12px;background:var(--amber-soft);font-family:var(--serif);font-weight:700;line-height:1.55;animation:up .3s ease-out}
.rq-tally.tb-two{grid-template-columns:1fr 1fr}
.tb-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.tb-kind{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;border:2px solid var(--rule);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--ink);text-align:left;line-height:1.5;transition:transform .15s,border-color .15s}
.tb-kind:hover{transform:translateY(-2px)}
.tb-kind.on{border-color:var(--leaf);background:color-mix(in srgb,var(--leaf-soft) 50%,var(--surface))}
.tb-kind small{position:absolute;top:8px;right:8px;padding:0 8px;border-radius:999px;background:var(--amber);color:#fff;font-size:.72em;font-weight:700}
.tb-kind i{font-style:normal;font-weight:700;font-size:.85em;color:var(--leaf)}
.tb-def{margin:14px 0;padding:14px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--rule);border-left:6px solid var(--amber);box-shadow:var(--shadow);animation:up .4s ease-out}
.tb-def p{margin:6px 0 0;line-height:1.6} .tb-def b{font-family:var(--serif);font-size:1.12em}
.tb-readfig{max-width:420px;margin:6px auto 0}
.tb-board{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px auto;padding:14px;border-radius:16px;background:var(--sunken);width:fit-content;max-width:100%}
.tb-brow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tb-cell{width:54px;height:54px;border-radius:12px;border:2px solid var(--rule);background:var(--surface);font-family:var(--serif);font-weight:700;font-size:1.5em;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.08);transition:transform .12s}
.tb-cell:hover{transform:translateY(-2px)}
.tb-cell.on{border-color:var(--sky);background:var(--sky-soft);transform:translateY(-3px)}
.tb-cell.used{background:var(--leaf-soft);border-color:color-mix(in srgb,var(--leaf) 45%,var(--rule));color:var(--leaf)}
.tb-board.grid .tb-brow{flex-wrap:nowrap}
.tb-wrow{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;margin:8px 0;padding:10px 14px;border-radius:14px;border:2px solid var(--rule);background:var(--surface);cursor:pointer}
.tb-wrow p{margin:0;font-size:1.08em;line-height:1.6} .tb-wrow small{grid-column:2;color:var(--muted)}
.tb-wrow.on{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.tb-wrow.done{border-color:color-mix(in srgb,var(--leaf) 50%,var(--rule));cursor:default} .tb-wrow.done b{color:var(--leaf)}
.tb-wrow.ex{background:var(--sunken);border-style:dashed}
.tb-wno{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--surface);font-weight:700;font-size:.85em}
.tb-blank{display:inline-block;min-width:3.2em;border-bottom:2px solid var(--sky);text-align:center;color:var(--sky)}
.tb-tried{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.92em;color:var(--amber);cursor:pointer} .tb-tried input{width:20px;height:20px}
@media (max-width:760px){.tb-kinds{grid-template-columns:1fr 1fr}.tb-cell{width:46px;height:46px;font-size:1.3em}}

/* 인쇄: 읽기 발자국(교과서 글 앱) */
#printroot .fp-tw{height:120mm;overflow:hidden;font-size:9pt}
#printroot .qt td.tip{width:64mm;color:#6E6A63;font-size:.92em}
#printroot .qt tr.no td.tip{background:#FCEEF3;color:#3B3632}
#printroot .fp-two{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-top:3mm}
#printroot .fp-two h3,#printroot .fp-link h3,#printroot .fp-sum h3{font-size:10.5pt;margin:0 0 .6mm}
#printroot .fp-w{margin:0;min-height:8.6mm;max-height:13mm;overflow:hidden;font-size:10.5pt;line-height:1.35;border-bottom:.3mm solid #A9A39A;padding:1mm 1mm .6mm;color:#2B2523}
#printroot .fp-link{margin-top:3mm}
#printroot .fp-sum{flex:1;min-height:0;margin-top:3mm;display:flex;flex-direction:column;overflow:hidden}
#printroot .fp-sum h3 small{font-family:"Gowun Dodum",sans-serif;font-size:.78em;color:#8C877E}


/* 교과서 글 앱 — 되돌아보기 순서도(교과서 209~210쪽 모양) · 보기 동그라미 · 말풍선 */
.tb-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr);gap:10px;align-items:start;margin:12px 0}
.tb-col{display:flex;flex-direction:column;align-items:stretch;padding:0 10px 12px;border-radius:16px;background:var(--scs)}
.tb-col.s-pre{background:#ECE8F5} .tb-col.s-mid{background:#E3F1F9} .tb-col.s-post{background:#EEF4DD}
.tb-colh{margin:10px -2px 10px;padding:6px;border-radius:999px;text-align:center;font-family:var(--serif);font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--sc) 30%,var(--surface))}
.tb-fb{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:var(--surface);border:2px solid transparent;box-shadow:0 2px 0 rgba(0,0,0,.05);transition:border-color .2s,box-shadow .2s}
.tb-fb .tb-q{margin:0;font-family:var(--serif);font-weight:700;font-size:.95em;line-height:1.5}
.tb-fb.now{border-color:var(--seal);box-shadow:0 0 0 4px var(--seal-soft);animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
.tb-fb.pass{opacity:.85}
.tb-mk{align-self:flex-start;padding:1px 10px;border-radius:999px;font-size:.78em;font-weight:700;background:#F7D6DE;color:#B0446A}
.tb-fb.no .tb-mk{background:#DCEBF7;color:#3B6EA5}
.tb-go{margin:0;font-size:.85em;font-weight:700;color:#3B6EA5}
.tb-arr{align-self:center;margin:2px 0;color:#E4708F;font-size:1.3em;font-weight:700;line-height:1}
.tb-fb .rq-yn button{min-height:38px}
.tb-tips{position:relative;padding:12px 12px 12px 18px;border-radius:6px 16px 16px 6px;background:#FDEBD3;box-shadow:inset 6px 0 0 #F3D2A8,0 2px 0 rgba(0,0,0,.05)}
.tb-tiph{margin:0 0 8px;display:inline-block;padding:3px 12px;border-radius:4px;background:#F7C9A6;font-weight:700;font-size:.9em}
.tb-tip{display:grid;grid-template-columns:22px 1fr;gap:6px;padding:7px 4px;border-bottom:1px dashed #E8C49B;transition:background .2s}
.tb-tip:last-child{border-bottom:0}
.tb-tip>b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;font-size:.75em;color:#94650F}
.tb-tip .tb-t{margin:0;font-size:.88em;line-height:1.5;color:#5E5A54}
.tb-tip.on{background:#fff;border-radius:10px;box-shadow:0 0 0 2px #7BB0D6} .tb-tip.on .tb-t{color:var(--ink)}
.tb-tip.done{opacity:.7}
.tb-tips .rq-slot{min-height:44px;background:#fff8ee}
.tb-flow .rq-stk{max-width:none;font-size:.9em}
.tb-legend{margin:0 0 10px;font-size:.88em;color:var(--muted);text-align:right} .tb-legend .y{color:#E4708F;font-weight:700} .tb-legend .n{color:#3B6EA5;font-weight:700}
.tb-cell.ex{box-shadow:0 0 0 3px #E4574B inset}
.tb-bubs{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 14px}
.tb-bub{position:relative;flex:1 1 220px;margin:0;padding:12px 16px;border-radius:18px;background:var(--surface);border:2px solid var(--rule);line-height:1.55}
.tb-bub::after{content:"";position:absolute;left:24px;bottom:-10px;width:16px;height:16px;background:var(--surface);border-right:2px solid var(--rule);border-bottom:2px solid var(--rule);transform:rotate(45deg)}
.tb-bub.me{border-style:dashed;color:var(--muted);flex:0 1 120px;text-align:center}
.tb-bubs.tips .tb-bub{border-color:#B3A8DB;background:#F4F1FB;font-size:.92em} .tb-bubs.tips .tb-bub::after{background:#F4F1FB;border-color:#B3A8DB}
@media (min-width:761px){.tb-flow .tb-col.s-mid{margin-top:58px}.tb-flow .tb-col.s-post{margin-top:150px}}
@media (max-width:760px){.tb-flow{grid-template-columns:1fr}}

/* 교과서 글 앱 — 경험 떠올리기: 누르면 떠오르는 글(설명서·책·조리법·안내문·약 설명서·백과사전) */
.tb-kind.doc{padding:8px 8px 10px}
.tb-kind.doc svg{border-radius:12px}
.tb-kl{font-family:var(--serif);font-size:1.05em}
.tb-kind i.open{color:var(--sky)}
.tb-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto;background:rgba(43,37,35,.45);animation:fadeIn .2s ease-out}
@keyframes fadeIn{from{opacity:0}}
.tb-paper{position:relative;width:min(720px,100%);margin:auto 0;padding:26px 28px 20px;border-radius:10px;background:#FFFDF8;color:#2B2523;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);animation:tbUp .35s cubic-bezier(.2,.8,.2,1)}
@keyframes tbUp{from{transform:translateY(30px) scale(.97);opacity:0}}
.tb-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);background:#fff;font-size:1.1em;cursor:pointer;color:#2B2523}
.dd-kind{display:inline-block;margin:0 0 6px;padding:2px 12px;border-radius:999px;background:#2B2523;color:#fff;font-size:.8em;font-weight:700}
.dd-title{margin:0 0 14px;font-family:var(--serif);font-size:1.45em;line-height:1.35;color:#2B2523}
.tb-paper svg.tb-dfig{display:block;width:100%;height:auto}
.dd-sec{margin:14px 0}
.dd-sec h4{margin:0 0 8px;padding-left:10px;border-left:5px solid #E4574B;font-size:1.05em;color:#2B2523}
.dd-sec h4 small{color:#8C877E;font-weight:500}
.dd-sec p{margin:6px 0;line-height:1.7}
.dd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dd-steps.four{grid-template-columns:repeat(2,1fr)}
.dd-steps li{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;background:#F6F2E8;border:1px solid #E8E1D2}
.dd-steps li svg{background:#fff;border-radius:8px}
.dd-steps p{margin:0;font-size:.95em;line-height:1.55} .dd-steps b{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:4px;border-radius:50%;background:#E4574B;color:#fff;font-size:.8em}
.dd-ings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dd-ings li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border-radius:12px;background:#FBF3E2;font-size:.92em;text-align:center}
.tb-paper .dd-ings li svg.tb-dfig{width:60px}
.dd-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0;padding:12px 16px;border-radius:12px;background:#F2F6F0;border:1px solid #DCE6D6}
.dd-facts dt{font-weight:700;color:#4F7A4A} .dd-facts dd{margin:0;line-height:1.6}
.dd-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dd-rules li{display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;background:#FCEEEA;font-size:.92em;line-height:1.45}
.dd-rules.soft li{background:#EEF4FA}
.tb-paper .dd-rules li svg.tb-dfig{width:46px;flex:none}
.dd-list{margin:0;padding-left:1.3em;line-height:1.8}
.dd-route{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:#E4574B;font-weight:700}
.dd-route span{padding:4px 12px;border-radius:999px;background:#FFF;border:2px solid #E8E1D2;color:#2B2523;font-weight:600}
.dd-warn{margin:14px 0 0;padding:10px 14px;border-radius:10px;background:#FFF4D6;border:1px solid #EAD08A;font-weight:600;line-height:1.6}
.dd-note{margin:12px 0 0;padding:10px 14px;border-radius:10px;background:#EAF3FB;line-height:1.6}
.dd-foot{margin-top:18px;padding-top:14px;border-top:2px dashed #E8E1D2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.dd-foot p{margin:0;font-weight:600}
.dd-0 .dd-title{color:#3B6EA5} .dd-1 .dd-title{color:#4F7A4A} .dd-2 .dd-title{color:#C2452D} .dd-3 .dd-title{color:#94650F} .dd-4 .dd-title{color:#3B6EA5} .dd-5 .dd-title{color:#6B4A2E}
.dd-2{background:repeating-linear-gradient(0deg,#FFFDF8 0 31px,#F3EDE0 31px 32px)}
@media (max-width:640px){.tb-paper{padding:22px 16px 16px}.dd-steps,.dd-steps.four,.dd-rules{grid-template-columns:1fr}.dd-ings{grid-template-columns:1fr 1fr}}
@media (prefers-color-scheme:dark){.tb-paper{color:#2B2523}}

/* 교과서 글 앱 — 순서도 번호 · 질문에 답 쓰기 · 읽기 발자국 답 */
.tb-fb{padding-left:30px}
.tb-n{position:absolute;left:7px;top:9px;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#2B2523;color:#fff;font-style:normal;font-size:.7em;font-weight:700}
.tb-fb .tb-q{font-size:.88em}
.tb-wg{margin:12px 0;padding:0 12px 12px;border-radius:16px;background:var(--scs)}
.tb-wg.s-pre{background:#ECE8F5} .tb-wg.s-mid{background:#E3F1F9} .tb-wg.s-post{background:#EEF4DD}
.tb-wg .tb-colh{display:inline-block;padding:4px 18px}
.tb-wa{position:relative;margin:8px 0 0;padding:12px 14px;border-radius:12px;background:var(--surface);border:2px solid transparent;transition:border-color .2s}
.tb-wa.ok{border-color:color-mix(in srgb,var(--leaf) 55%,var(--rule))}
.tb-wq{position:relative;margin:0 0 8px;padding-left:26px;font-family:var(--serif);font-weight:700;line-height:1.5}
.tb-wq .tb-n{left:0;top:3px}
.tb-yn{display:inline-block;margin-left:6px;padding:0 10px;border-radius:999px;font-family:var(--sans,inherit);font-size:.75em;vertical-align:2px}
.tb-yn.yes{background:#F7D6DE;color:#B0446A} .tb-yn.no{background:#DCEBF7;color:#3B6EA5}
.tb-wa textarea{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1.5px solid var(--rule);background:var(--paper,var(--surface));font:inherit;font-size:1.02em;line-height:1.55;color:var(--ink);resize:vertical}
.tb-wa textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.tb-ex{margin:6px 0 0;font-size:.86em;color:var(--muted)}
#printroot .fp-ans{margin-top:.6mm;font-size:.92em;color:#3B6EA5;font-family:"Gowun Dodum",sans-serif}
/* 의견을 제시하는 글 — 의견 · 까닭 */
.dd-op{margin:14px 0 0;padding:12px 16px;border-radius:12px;background:#FFF4D6;border:2px solid #EAD08A;font-size:1.08em;line-height:1.6}
.dd-op .rq-lab{color:#C2452D}
.dd-why{margin:0;padding-left:0;list-style:none;counter-reset:dw}
.dd-why li{counter-increment:dw;position:relative;margin:6px 0;padding:8px 12px 8px 66px;border-radius:10px;background:#F2F6F0;line-height:1.6}
.dd-why li::before{content:"까닭 " counter(dw);position:absolute;left:8px;top:8px;padding:1px 8px;border-radius:999px;background:#4F7A4A;color:#fff;font-size:.78em;font-weight:700;line-height:1.6}