/* ================================================================
   풍성한 장면(.r) — 머리(장 머리·메시지 제목·한 줄 설명) → 본문(레이아웃) → 바닥(팁·근거·할 일)
   발표 모드 1em = 32px, 안쪽 1660×844
   ================================================================ */
.r .head{position:relative;padding-right:5em}
.r .chap{display:flex;align-items:center;gap:.55em;flex-wrap:wrap}
.r .chap .no{font-variant-numeric:tabular-nums;opacity:.7}
.kick{font-size:.78em;letter-spacing:.14em;font-weight:900;color:var(--ink);opacity:.55}
.r .title{font-size:2.45em;max-width:24em;text-wrap-style:balance!important}
.r .ul{width:62%}
.lead2{font-size:1.06em;line-height:1.45;color:#4a4450;margin-top:.45em;max-width:46em;text-wrap-style:pretty}
.ui{font-weight:900;background:rgba(255,197,58,.35);border-radius:.25em;padding:0 .2em;white-space:nowrap}
.gicon{position:absolute;right:0;top:-.1em;width:4.3em;height:4.3em;object-fit:contain;pointer-events:none;transform:rotate(6deg)}
.rbody{margin-top:1em}
.rbody.sidea{display:grid;grid-template-columns:1fr 13em;gap:2em;align-items:center}
.rart{margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:1;position:relative}
.rart::before{content:"";position:absolute;inset:6%;border-radius:46% 54% 50% 50%/55% 45% 55% 45%;background:rgba(255,91,58,.09)}
.rart img{position:relative;width:86%;height:86%;object-fit:contain}
body[data-mode="present"] .slide.active .rart img{animation:gfloat 5.5s ease-in-out infinite}
.rfoot{margin-top:1em;display:flex;flex-direction:column;gap:.5em}
.rf-row{display:flex;gap:1em;align-items:center;justify-content:space-between}
.tipc{display:flex;gap:.6em;align-items:center;font-size:.82em;line-height:1.4;background:#fff;border:2px solid var(--ink);border-radius:99px;padding:.35em 1em .35em .4em;max-width:62%}
.tipc b{flex:none;font-size:.85em;color:#fff;background:var(--ink);border-radius:99px;padding:.12em .7em}
.tipc.k-warn b{background:var(--coral)}
.tipc.k-check b{background:#2F9E6A}
.srcl{font-size:.62em;color:var(--mute);line-height:1.4;margin-left:auto;text-align:right;max-width:60%}
.nt .nsay{border-left:3px solid var(--coral);padding-left:.6em;color:#3a3540}

/* ---- 공통 항목 ---- */
.it{position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:.6em;padding:.75em .9em .8em;line-height:1.35;transition:transform .2s,box-shadow .2s}
.it > b{display:block;font-size:1.08em;font-weight:900;line-height:1.28;letter-spacing:-.01em}
.it > p{font-size:.8em;color:#4a4450;margin-top:.3em;line-height:1.45}
.it .ix{display:block;font-style:normal;font-weight:900;color:var(--coral);font-size:.72em;letter-spacing:.08em;margin-bottom:.25em}
.it .tag{position:absolute;right:.6em;top:.55em;font-style:normal;font-size:.56em;font-weight:900;border:2px dashed var(--ink);border-radius:99px;padding:.05em .55em;background:var(--yel)}
.it .mi{position:absolute;right:.5em;bottom:.45em;width:1.15em;height:1.15em;border-radius:50%;background:var(--ink);color:#fff;font-size:.6em;font-weight:900;font-style:italic;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif}
.it.has-more{cursor:help}
.it.has-more:hover,.it.has-more:focus-visible{transform:translateY(-3px);box-shadow:0 .5em 1em -.5em rgba(22,20,26,.35);outline:none}
.it .tag + .mi{bottom:.45em}
/* 순서대로 떠오르기 */
.active .it,.in .it{animation:itIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.35s + var(--k,0)*.08s)}
@keyframes itIn{from{opacity:0;transform:translateY(16px)}}
body.lite .it{animation:none}

/* ---- points ---- */
.pts{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:.9em}
.pts.n1{--n:1}.pts.n2{--n:2}.pts.n3{--n:3}.pts.n4{--n:4}
.pts .it{min-height:6.2em}
.pts.n2 .it > b{font-size:1.3em}.pts.n2 .it > p{font-size:.9em}
.pts.mini .it{min-height:0;padding:.5em .8em}
.pts.mini .it > b{font-size:.9em}.pts.mini .it > p{font-size:.72em}
.sidea .pts{grid-template-columns:1fr}
.sidea .pts .it{min-height:0}

/* ---- steps / flow ---- */
.where{display:inline-block;font-size:.72em;font-weight:900;background:var(--ink);color:var(--cream);border-radius:99px;padding:.15em .8em;margin-bottom:.6em}
.stp,.flw{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:1.4em;counter-reset:s}
.stp.n2,.flw.n2{--n:2}.stp.n3,.flw.n3{--n:3}.stp.n4,.flw.n4{--n:4}.stp.n5,.flw.n5{--n:5}.flw.n6{--n:6}
.stp .it,.flw .it{min-height:6.4em;padding-top:1.5em}
.stp .ix,.flw .ix{position:absolute;left:.7em;top:-.75em;width:1.6em;height:1.6em;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8em;margin:0}
.flw .ix{background:var(--ink)}
.stp .it + .it::before,.flw .it + .it::before{content:"";position:absolute;left:-1.05em;top:50%;width:.6em;height:.6em;border-top:.17em solid var(--ink);border-right:.17em solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.stp.n5 .it > b,.flw.n5 .it > b,.flw.n6 .it > b{font-size:.92em}
.stp.vert,.sidea .stp,.sidea .flw{grid-template-columns:1fr;gap:.8em}
.stp.vert .it,.sidea .stp .it,.sidea .flw .it{min-height:0;padding:.55em .9em .6em 2.6em}
.stp.vert .ix,.sidea .stp .ix,.sidea .flw .ix{left:.55em;top:.6em}
.stp.vert .it + .it::before,.sidea .stp .it + .it::before,.sidea .flw .it + .it::before{display:none}
.stp.vert .it > b{font-size:.98em}

/* ---- checklist ---- */
.ckl{display:grid;grid-template-columns:repeat(2,1fr);gap:.7em}
.ckl.n3,.sidea .ckl{grid-template-columns:1fr}
.ckl .it{padding-left:2.6em;min-height:0}
.ckl .it::before{content:"";position:absolute;left:.8em;top:.85em;width:1em;height:1em;border:.13em solid var(--ink);border-radius:.2em;background:#fff}
.ckl .it::after{content:"";position:absolute;left:1.08em;top:.9em;width:.35em;height:.65em;border-right:.17em solid var(--coral);border-bottom:.17em solid var(--coral);transform:rotate(45deg)}
.ckl.mini .it{padding:.4em .7em .4em 2.2em}
.ckl.mini .it::before{left:.6em;top:.55em;width:.85em;height:.85em}
.ckl.mini .it::after{left:.83em;top:.58em;width:.3em;height:.55em}
.ckl.mini .it > b{font-size:.85em}.ckl.mini .it > p{font-size:.7em}

/* ---- table ---- */
.tblw{background:#fff;border:2.5px solid var(--ink);border-radius:.6em;overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:.82em;line-height:1.38}
.tbl th,.tbl td{padding:.55em .8em;text-align:left;vertical-align:top;border-bottom:1.5px solid rgba(22,20,26,.12)}
.tbl thead th{background:var(--ink);color:var(--cream);font-weight:900;font-size:.95em}
.tbl tbody th{font-weight:900;white-space:nowrap;background:rgba(22,20,26,.03)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl td.hl{background:rgba(255,197,58,.22);font-weight:900}
.tbl thead th.hl{background:var(--coral)}

/* ---- before / after ---- */
.ba{display:grid;grid-template-columns:1fr 2.4em 1fr;gap:.8em;align-items:stretch}
.ba-p{background:#fff;border:2.5px solid var(--ink);border-radius:.6em;padding:.8em 1em 1em}
.ba-p small{display:inline-block;font-size:.62em;font-weight:900;letter-spacing:.06em;border-radius:99px;padding:.1em .7em;margin-bottom:.5em}
.ba-b small{background:rgba(255,91,58,.15);color:#B63A1F}
.ba-a small{background:rgba(47,158,106,.16);color:#1D6E48}
.ba-p p{font-size:1.02em;line-height:1.6}
.ba-a{border-color:#2F9E6A;box-shadow:inset 0 .3em 0 #2F9E6A}
mark.bad{background:none;color:inherit;text-decoration:line-through wavy var(--coral) 2px;text-decoration-skip-ink:none}
mark.good{background:linear-gradient(transparent 55%,rgba(47,158,106,.3) 55%);color:inherit;font-weight:900}
.ba-arr{align-self:center;justify-self:center;width:1.1em;height:1.1em;border-top:.22em solid var(--ink);border-right:.22em solid var(--ink);transform:rotate(45deg)}
.ba + .pts{margin-top:.8em}

/* ---- doc ---- */
.docw{display:flex;justify-content:center}
.doc{width:100%;background:#FFFEFA;border:2.5px solid var(--ink);border-radius:.4em;padding:.8em 1.2em 1em;box-shadow:.4em .4em 0 rgba(22,20,26,.1)}
.doc-l{font-size:.6em;color:var(--mute);font-weight:900;letter-spacing:.06em}
.doc h4{font-size:1.1em;font-weight:900;margin:.2em 0 .4em}
.doc ol{display:flex;flex-direction:column;gap:.35em}
.dl{display:grid;grid-template-columns:1fr 13em;gap:1em;align-items:center;font-size:.86em;line-height:1.45;padding:.2em .4em;border-radius:.3em}
.dl em{font-style:normal;font-size:.82em;font-weight:900;border-radius:.4em;padding:.15em .6em}
.dl.m-err span{text-decoration:underline wavy var(--coral) 2px;text-underline-offset:.25em}
.dl.m-err em{background:rgba(255,91,58,.14);color:#B63A1F}
.dl.m-ok em{background:rgba(47,158,106,.15);color:#1D6E48}
.dl.m-warn em{background:rgba(255,197,58,.35);color:#6b4f00}
.dl.m-none em{color:var(--mute)}

/* ---- quiz ---- */
.qz-q{font-size:1.55em;font-weight:900;line-height:1.3;letter-spacing:-.015em;margin-bottom:.6em;text-wrap-style:balance}
.qz-o{display:grid;grid-template-columns:repeat(2,1fr);gap:.7em}
.qz-o.n3{grid-template-columns:repeat(3,1fr)}
.qz-o li{position:relative}
.qz-o button{position:relative;width:100%;display:flex;align-items:center;gap:.7em;text-align:left;background:#fff;border:2.5px solid var(--ink);border-radius:.6em;padding:.65em .9em;font-size:1.05em;font-weight:900;line-height:1.3;overflow:hidden;transition:transform .15s}
.qz-o button:hover{transform:translateY(-2px)}
.qz-o button > b{flex:none;width:1.7em;height:1.7em;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85em;z-index:1}
.qz-o button > span{flex:1;z-index:1}
.qz-n{font-style:normal;font-size:.8em;color:var(--mute);z-index:1;font-variant-numeric:tabular-nums}
.qz-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,197,58,.35);text-decoration:none;transition:width .5s}
.qz li.mine button{border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,91,58,.25)}
.qz-x{margin-top:.8em;font-size:.95em;line-height:1.5;background:var(--ink);color:var(--cream);border-radius:.6em;padding:.6em 1em}
.qz-x b{color:var(--yel);margin-right:.4em}
.qz:has(.qz-x.on) li.ans button{border-color:#2F9E6A;background:#EAF7F0;box-shadow:0 0 0 4px rgba(47,158,106,.3)}
.qz:has(.qz-x.on) li.ans button > b{background:#2F9E6A}
.qz-st{margin-top:.6em;font-size:.68em;color:var(--mute);display:flex;align-items:center;gap:.5em}
.dot{width:.6em;height:.6em;border-radius:50%;background:#E8452C;box-shadow:0 0 0 0 rgba(232,69,44,.5);animation:livep 1.6s infinite}
@keyframes livep{70%{box-shadow:0 0 0 .5em rgba(232,69,44,0)}}
.qz-reset,.lv-clear{display:none;margin-left:auto;font-size:.95em;font-weight:900;border:2px solid var(--ink);border-radius:99px;padding:.1em .7em}
body:not(.locked)[data-mode] .qz-reset,body:not(.locked)[data-mode] .lv-clear{display:inline-block}
body[data-mode="read"] .qz-x{display:block}

/* ---- stats ---- */
.sts{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:1em}
.sts.n2{--n:2}.sts.n3{--n:3}.sts.n4{--n:4}
.sts li{background:#fff;border:2.5px solid var(--ink);border-radius:.7em;padding:.8em 1em 1em;display:flex;flex-direction:column;gap:.25em;animation:itIn .55s both;animation-delay:calc(.35s + var(--k,0)*.1s)}
.sts b{font-size:2.6em;line-height:1;font-weight:900;color:var(--coral);letter-spacing:-.03em}
.sts span{font-weight:900;font-size:.95em;line-height:1.3}
.sts small{font-size:.68em;color:var(--mute);line-height:1.4}

/* ---- practice ---- */
.prc{display:grid;grid-template-columns:1fr 14em;gap:1.6em;align-items:start}
.prc-goal{font-size:1.2em;font-weight:900;line-height:1.35;margin-bottom:.6em}
.prc .checks li{font-size:1.02em}
.prc-done{margin-top:.7em;font-size:.82em;display:flex;gap:.6em;align-items:center}
.prc-done b{flex:none;background:#2F9E6A;color:#fff;border-radius:99px;padding:.1em .7em;font-size:.85em}
.prc-r{display:flex;flex-direction:column;align-items:center;gap:1em}
.prc .tbtn{width:6.6em;height:6.6em}
.stuck{width:100%;background:#fff;border:2.5px dashed var(--ink);border-radius:.6em;padding:.6em .8em;font-size:.72em;line-height:1.45}
.stuck-h{font-weight:900;color:var(--coral);margin-bottom:.3em}
.stuck dt{font-weight:900;margin-top:.35em}
.stuck dd{color:#4a4450}

/* ---- flip ---- */
.flp{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:1em}
.flp.n2{--n:2}.flp.n3{--n:3}.flp.n4{--n:4}
.fc{perspective:1200px;animation:itIn .55s both;animation-delay:calc(.35s + var(--k,0)*.08s)}
.fc-in{position:relative;display:block;width:100%;min-height:8.4em;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.9,.3,1);text-align:left}
.fc.on .fc-in{transform:rotateY(180deg)}
.fc-f,.fc-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2.5px solid var(--ink);border-radius:.7em;padding:.8em 1em;display:flex;flex-direction:column;gap:.35em}
.fc-f{background:#fff}
.fc-f b{font-size:1.15em;font-weight:900;line-height:1.3}
.fc-d{font-size:.8em;color:#4a4450;line-height:1.4}
.fc-f small{margin-top:auto;font-size:.62em;font-weight:900;color:var(--coral);letter-spacing:.06em}
.fc-f small::before{content:"↻ "}
.fc-b{background:var(--ink);color:var(--cream);transform:rotateY(180deg);justify-content:center;font-size:.86em;line-height:1.5}
.fc-in:hover .fc-f{box-shadow:0 .5em 1em -.5em rgba(22,20,26,.35)}
body[data-mode="read"] .fc-in{min-height:7.4em}

/* ---- story ---- */
.sty{display:grid;grid-template-columns:1.25fr 1fr;gap:1.6em;align-items:center}
.sty-img{margin:0;position:relative}
.sty-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.5em;border:2.5px solid var(--ink);box-shadow:.4em .4em 0 rgba(22,20,26,.15);display:block}
.sty-img figcaption{font-size:.56em;color:var(--mute);margin-top:.4em}
.sty-t small{font-size:.66em;font-weight:900;color:var(--coral);letter-spacing:.12em}
.sty-p{font-size:1.45em;font-weight:900;line-height:1.55;margin:.2em 0 .7em;text-wrap-style:pretty}
.sty .pts.mini{grid-template-columns:1fr;gap:.5em}

/* ---- prompt ---- */
.prm-t{background:#fff;border:2.5px solid var(--ink);border-radius:.6em;padding:.8em 1em;font-size:.98em;line-height:2.05}
.pk{border-radius:.3em;padding:.15em .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pk i{font-style:normal;font-size:.62em;font-weight:900;color:#fff;border-radius:99px;padding:.05em .5em;margin-right:.3em;vertical-align:.15em}
.pk[data-k="대상"]{background:rgba(107,78,255,.14)}.pk[data-k="대상"] i{background:#6B4EFF}
.pk[data-k="목적"],.pk[data-k="할 일"]{background:rgba(255,91,58,.14)}.pk[data-k="목적"] i,.pk[data-k="할 일"] i{background:var(--coral)}
.pk[data-k="사실"],.pk[data-k="자료"]{background:rgba(47,158,106,.15)}.pk[data-k="사실"] i,.pk[data-k="자료"] i{background:#2F9E6A}
.pk[data-k="형식"]{background:rgba(31,79,216,.12)}.pk[data-k="형식"] i{background:#1F4FD8}
.pk[data-k="금지"],.pk[data-k="하지 말 일"]{background:rgba(22,20,26,.09)}.pk[data-k="금지"] i,.pk[data-k="하지 말 일"] i{background:var(--ink)}
.pk:not([data-k="대상"]):not([data-k="목적"]):not([data-k="할 일"]):not([data-k="사실"]):not([data-k="자료"]):not([data-k="형식"]):not([data-k="금지"]):not([data-k="하지 말 일"]){background:rgba(255,197,58,.3)}
.pk:not([data-k="대상"]):not([data-k="목적"]):not([data-k="할 일"]):not([data-k="사실"]):not([data-k="자료"]):not([data-k="형식"]):not([data-k="금지"]):not([data-k="하지 말 일"]) i{background:#9a7400}
.prm-chk{margin-top:.8em}
.prm-h{font-size:.7em;font-weight:900;color:var(--coral);letter-spacing:.08em;margin-bottom:.35em}
.prm-chk .ckl{grid-template-columns:repeat(3,1fr)}

/* ---- live board ---- */
.lv{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.4em;align-items:stretch}
.lv-q{font-size:1.5em;font-weight:900;line-height:1.3;margin-bottom:.6em;text-wrap-style:balance}
.lv-f{display:flex;gap:.5em}
.lv-f input{flex:1;min-width:0;font:inherit;font-size:.95em;font-weight:700;padding:.55em .8em;border:2.5px solid var(--ink);border-radius:.6em;background:#fff}
.lv-f button{flex:none;font-weight:900;font-size:.95em;background:var(--coral);color:#fff;border-radius:.6em;padding:0 1.1em}
.lv-ex{margin-top:.6em;font-size:.72em;color:var(--mute);display:flex;flex-wrap:wrap;gap:.4em;align-items:center}
.lv-ex b{color:var(--ink)}
.lv-ex span{background:#fff;border:1.5px dashed rgba(22,20,26,.35);border-radius:99px;padding:.1em .7em}
.lv-st{margin-top:.8em;font-size:.68em;color:var(--mute);display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.lv-link{font-weight:900;border:2px solid var(--ink);border-radius:99px;padding:.1em .7em;font-size:.95em}
.lv-board{background:rgba(255,255,255,.55);border:2.5px solid var(--ink);border-radius:.7em;padding:.7em;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.5em;max-height:12.5em;overflow:auto}
body[data-mode="present"] .lv-board{height:12.5em}
.lv-board li{background:#fff;border:2px solid var(--ink);border-radius:.6em;padding:.4em .7em;font-size:.78em;line-height:1.4;max-width:100%;animation:lvIn .4s cubic-bezier(.2,1.4,.4,1) both;position:relative;box-shadow:.18em .18em 0 rgba(22,20,26,.12)}
.lv-board li:nth-child(4n+1){background:#FFF6D6}.lv-board li:nth-child(4n+2){background:#FFE7E0}.lv-board li:nth-child(4n+3){background:#E6F4EC}
.lv-board li.lv-empty{background:none;border:0;box-shadow:none;color:var(--mute);font-size:.72em}
.lv-board li .x{display:none;position:absolute;right:-.5em;top:-.5em;width:1.3em;height:1.3em;border-radius:50%;background:var(--ink);color:#fff;font-size:.8em;line-height:1.3em;text-align:center}
body:not(.locked) .lv-board li:hover .x{display:block}
@keyframes lvIn{from{opacity:0;transform:scale(.6) rotate(-4deg)}}

/* ---- bridge ---- */
.r-bridge .rbody{flex:1}
.brg{display:flex;flex-direction:column;justify-content:center;height:100%}
.brg-q{font-size:2.3em;font-weight:900;line-height:1.25;letter-spacing:-.02em;text-wrap-style:balance}
.brg-n{margin-top:1em;font-size:1em;font-weight:900;color:var(--coral);letter-spacing:.06em}
.brg-n::before{content:"→ "}

/* ---- capture ---- */
.capw{display:grid;grid-template-columns:1fr 1.05fr;gap:1.4em;align-items:center}
.capw .shot{aspect-ratio:16/10;margin:0}
.capw .slot-empty p{font-size:.95em}
.capw .slot-empty small{font-size:.62em;max-width:26em}

/* ---- 마우스 올리면 뜨는 상세 설명 ---- */
#tipPop{position:fixed;z-index:500;max-width:min(420px,80vw);background:var(--ink);color:var(--cream);font-size:15px;line-height:1.55;font-weight:700;border-radius:12px;padding:10px 14px;box-shadow:0 14px 34px -12px rgba(0,0,0,.55);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .16s,transform .16s;word-break:keep-all}
#tipPop.on{opacity:1;transform:none}
#tipPop::before{content:"자세히";display:block;font-size:11px;letter-spacing:.12em;color:var(--yel);margin-bottom:2px}

/* ---- 발표 모드: 세로로 채우기 ---- */
body[data-mode="present"] .r{display:flex;flex-direction:column}
body[data-mode="present"] .r .rbody{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
body[data-mode="present"] .r .rbody.sidea{display:grid}
body[data-mode="present"] .r .rfoot{margin-top:.8em}

/* ---- 읽기 모드 · 좁은 화면 ---- */
body[data-mode="read"] .r .head{padding-right:3.6em}
body[data-mode="read"] .gicon{width:3.2em;height:3.2em}
@media (max-width:820px){
  .pts,.stp,.flw,.sts,.flp,.ckl,.qz-o,.qz-o.n3,.prm-chk .ckl{grid-template-columns:1fr}
  .stp .it + .it::before,.flw .it + .it::before{display:none}
  .ba,.sty,.lv,.prc,.capw,.rbody.sidea,.dl{grid-template-columns:1fr}
  .ba-arr{transform:rotate(135deg)}
  .rart{max-width:9em;margin:0 auto}
  .tblw{overflow-x:auto}
  .rf-row{flex-direction:column;align-items:flex-start}
  .tipc,.srcl{max-width:100%;text-align:left;margin-left:0}
  .fc-in{min-height:7em}
}

/* ---- 넘침 방지 ---- */
body[data-mode="present"] .r .rbody{justify-content:safe center}
.sty{grid-template-columns:1fr 1fr}
.sty-img img{max-height:11.5em}
.tbl.many th,.tbl.many td{padding:.38em .7em}
.tbl.many{font-size:.76em}
.prm-t{font-size:.9em;line-height:1.95}
.capw .shot{aspect-ratio:auto;height:10.5em}
.sty-n{margin-top:.8em}
.capw .stp.n4,.capw .stp.n5{gap:.55em}
.capw .stp.n4 .it,.capw .stp.n5 .it{padding:.4em .8em .45em 2.5em}
.capw .stp.n4 .it > p,.capw .stp.n5 .it > p{font-size:.72em}
/* 작은 글도 끝줄에 낱말 하나만 남지 않게 */
.it > p,.fc-d,.fc-b span,.tipc,.srcl,.dl span,.tbl td,.lead2,.sty-p,.prc-goal,.stuck dd,.qz-x{text-wrap-style:balance!important}
/* 실제 화면 캡처 */
.shotimg{margin:0;display:flex;flex-direction:column;gap:.35em}
.shotimg img{width:100%;border-radius:.5em;border:2.5px solid var(--ink);box-shadow:.4em .4em 0 rgba(22,20,26,.14);display:block;background:#fff}
.shotimg figcaption{font-size:.56em;color:var(--mute)}
.capw.withshot{align-items:center}
.withshot .ckl,.withshot .pts{grid-template-columns:1fr}
.withshot .tbl{font-size:.7em}
.shotimg{align-items:center}
.shotimg img{width:auto;max-width:100%;max-height:12em;object-fit:contain}
.withshot .shotimg img{max-height:11em}
.capw{grid-template-columns:1fr 1.25fr}
body[data-mode="present"] .shotimg img{max-height:410px}
body[data-mode="present"] .withshot .shotimg img{max-height:370px}
body[data-mode="read"] .shotimg img{max-height:none}