/* 토의 왕국 탐험대 — 문제 아파트의 디자인 규칙을 이어받음: 두꺼운 잉크 테두리, 오른쪽·아래 그림자 블록, 방눈금 배경, Paperlogy 500 이상 */
@font-face{font-family:'Paperlogy';font-weight:500;font-display:swap;src:url(../fonts/Paperlogy-500.woff2) format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:700;font-display:swap;src:url(../fonts/Paperlogy-700.woff2) format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:800;font-display:swap;src:url(../fonts/Paperlogy-800.woff2) format('woff2')}
:root{
  --bg:#fdf0e4;--grid:rgba(120,70,40,.07);--ink:#2a211d;--muted:#6f5f56;--paper:#fffdf8;--cream:#fff6d9;
  --yellow:#f7d46a;--coral:#ff7a5c;--teal:#25a99b;--violet:#7a86e8;--sky:#dcefff;--peach:#f9d3c3;--line:#e4d6c6;--mint:#d8f3ec;--pink:#ffe3dc;--lav:#e6e8ff;
  --r:10px;--bw:3px;--sh:5px 5px 0 var(--ink);--lh:2.5rem;
}
*{box-sizing:border-box}
html{font-synthesis:none;font-size:clamp(16px,.3vw + 12.2px,19px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:'Paperlogy',system-ui,sans-serif;font-weight:500;font-size:1.06rem;line-height:1.6;color:var(--ink);
  background:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
p,li,.bubble,.case{text-wrap:pretty}
h1,h2,h3,.who{text-wrap:balance}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
b,strong{font-weight:800}
[hidden]{display:none!important}
#app{flex:1 0 auto;outline:0;display:flex;flex-direction:column}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 머리 */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:8px 16px;background:rgba(255,253,248,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:var(--bw) solid var(--ink)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.mark{width:34px;height:34px;display:block}
.wordmark{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;padding:3px 12px;border-radius:99px;background:#efe6dc}
.steps{display:flex;gap:6px;flex:1;justify-content:center;min-width:0;flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 7px;border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-weight:700;font-size:.9rem;cursor:pointer;white-space:nowrap;transition:.18s}
.step i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#efe6dc;color:var(--muted);font-weight:800;font-size:.85rem}
.step i.mi{border-radius:6px;background:linear-gradient(135deg,#a8e6a1 50%,#f7d46a 50%)}
.step:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.step.on{border-color:var(--ink);color:var(--ink);background:var(--yellow)}
.step.on i{background:var(--ink);color:var(--yellow)}
.step.done i{background:var(--teal);color:#fff}
.steps .step:not(.on) .sn{display:none}
.steps .step:not(.on){padding-right:7px}
.step.lock{opacity:.5;cursor:not-allowed;border-style:solid}
.top-r{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.saved{font-size:.85rem;font-weight:700;color:var(--muted);text-align:right}
.tbtn{border:2px solid var(--line);background:#fff;border-radius:10px;padding:5px 12px;font-weight:700;font-size:.88rem;cursor:pointer;color:var(--muted)}
.tbtn:hover{border-color:var(--ink);color:var(--ink)}
.brandlogo{height:40px;width:auto;border-radius:10px}
.fsbtn{position:absolute;top:14px;right:14px;z-index:3;display:grid;place-items:center;width:46px;height:46px;border:var(--bw) solid var(--ink);border-radius:8px;background:#fff;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.fsbtn:hover{background:var(--yellow)}
.fsbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.fsbtn.top-fs{position:static;width:36px;height:36px;box-shadow:2px 2px 0 var(--ink)}

/* 단추 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.55em 1.4em;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:1.02rem;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .15s;line-height:1.35}
.btn:hover:not(:disabled){background:#ffe08a}
.btn:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn.coral{background:var(--coral);color:#fff}
.btn.teal{background:var(--teal);color:#fff}
.btn.soft{background:#fff;box-shadow:3px 3px 0 var(--ink)}
.btn.soft:hover:not(:disabled){background:#fff6e6}
.btn.big{font-size:1.2rem;padding:.65em 1.8em}
.btn.sm{font-size:.9rem;padding:.3em .95em;box-shadow:3px 3px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.rowbtn{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin-top:16px}
.input,textarea.fldta,.fld textarea,.fld input{width:100%;border:var(--bw) solid var(--ink);border-radius:8px;padding:.5em .8em;background:#fff;font-weight:500;line-height:1.6;resize:vertical;box-shadow:inset 2px 2px 0 rgba(42,33,29,.08)}
.input:focus-visible,.fld textarea:focus-visible,.fld input:focus-visible{outline:3px solid var(--coral);outline-offset:1px}

/* 표지 */
.coverfull{flex:1;position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;background:#2a211d}
.coverfull>img.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.cover-start{position:absolute;left:0;right:0;bottom:4%;text-align:center}
.cover-start .btn{animation:bob 1.8s ease-in-out infinite;font-size:clamp(1.05rem,2vw,1.5rem)}
@keyframes bob{50%{transform:translateY(-8px)}}

/* 이야기·이름 */
.story{flex:1;display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(12px,2vw,28px);padding:clamp(12px,2vw,28px);align-items:stretch;min-height:100vh;min-height:100dvh}
.story .pic{border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;background:#fff;min-height:240px}
.story .pic img{width:100%;height:100%;object-fit:cover;display:block}
.story .say{display:flex;flex-direction:column;gap:14px;justify-content:center}
.whorow{display:flex;align-items:center;gap:12px}
.sprite{width:clamp(72px,9vw,120px);height:auto;flex:0 0 auto;display:block}
.sprite.sm{width:clamp(56px,6vw,80px)}
.who{align-self:center;padding:.2em 1em;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--yellow);font-weight:800;font-size:clamp(.95rem,1.5vw,1.2rem)}
.bubble{padding:clamp(14px,1.8vw,24px);border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff;box-shadow:var(--sh);font-size:clamp(1.1rem,1.9vw,1.55rem);line-height:1.65;font-weight:700}
.bubble.sm{font-size:1rem;padding:10px 14px;line-height:1.55;box-shadow:4px 4px 0 var(--ink)}
.pop{animation:pop .3s}
@keyframes pop{0%{transform:scale(.94);opacity:.4}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
.dots{display:flex;gap:8px;justify-content:center}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:#fff}
.dots i.on{background:var(--yellow)}
.finishbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0}
.namebox{display:flex;flex-direction:column;gap:6px;font-weight:800}
.namebox .input{font-size:1.3rem;font-weight:700;max-width:340px}

/* 별 */
.stars{display:inline-flex;gap:3px;vertical-align:middle}
.st{width:18px;height:18px;background:#e4d6c6;clip-path:polygon(50% 2%,62% 36%,98% 38%,69% 59%,80% 94%,50% 73%,20% 94%,31% 59%,2% 38%,38% 36%);display:block}
.st.on{background:#ffb800}
.stars.big .st{width:32px;height:32px}

/* 지도 */
.mapwrap{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 12px 8px;gap:10px}
.mapstage{position:relative;width:min(100%,calc((100vh - 176px)*16/9));aspect-ratio:16/9;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;background:#cfe9c5}
.mapstage>img.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;cursor:pointer;padding:0;z-index:2}
.node b{display:grid;place-items:center;width:clamp(36px,4.6vw,58px);height:clamp(36px,4.6vw,58px);border:var(--bw) solid var(--ink);border-radius:50%;background:var(--yellow);font-size:clamp(1.05rem,2vw,1.6rem);box-shadow:3px 3px 0 var(--ink);transition:transform .12s}
.node:hover:not(:disabled) b{transform:scale(1.1)}
.node .nm{padding:.05em .7em;border:2px solid var(--ink);border-radius:99px;background:#fff;font-weight:800;font-size:clamp(.72rem,1.15vw,.95rem);white-space:nowrap}
.node.done b{background:var(--teal);color:#fff}
.node.now b{animation:bob 1.4s ease-in-out infinite;background:var(--coral);color:#fff}
.node.lock{cursor:not-allowed;filter:grayscale(.7);opacity:.8}
.node.lock b{background:#ddd}
.node .stars .st{width:14px;height:14px}
.mapbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;width:min(100%,calc((100vh - 176px)*16/9))}
.mapbar .bubble{flex:0 1 auto;max-width:520px}
.mstars{display:inline-flex;align-items:center;gap:6px;font-weight:800;padding:.2em .9em;border:var(--bw) solid var(--ink);border-radius:99px;background:#fff}

/* 스테이지 틀 */
.stg{display:grid;grid-template-columns:minmax(210px,290px) 1fr;gap:20px;width:100%;max-width:1240px;margin:0 auto;padding:18px 18px 28px;align-items:start}
.side{position:sticky;top:76px;display:flex;flex-direction:column;gap:14px}
.side .pic{border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;aspect-ratio:1/1;background:#fff}
.side .pic img{width:100%;height:100%;object-fit:cover;display:block}
.guide{display:flex;align-items:flex-start;gap:8px}
.guide .bubble{flex:1}
.card{border:var(--bw) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:var(--sh);padding:clamp(14px,1.8vw,24px)}
.card>h2{display:flex;align-items:center;gap:12px;font-size:1.35rem;font-weight:800;margin-bottom:14px}
.card>h2 .no{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--yellow);font-size:1.05rem;flex:0 0 auto}
.card>h2 small{display:block;font-size:.88rem;color:var(--muted);font-weight:700}
.lead{font-weight:700;margin-bottom:12px}
.tip{min-height:1.6em;margin-top:10px;font-weight:700;color:#a8321a}
.tip:empty{display:none}
.prog{display:flex;gap:6px;margin-bottom:12px}
.prog i{flex:1;height:10px;border:2px solid var(--ink);border-radius:99px;background:#fff}
.prog i.on{background:var(--teal)}.prog i.cur{background:var(--yellow)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.case{padding:14px 16px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--cream);font-weight:700;font-size:1.12rem;margin-bottom:14px}

/* 1. 징검다리 */
.slots{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.slot{flex:1 1 120px;min-height:3.2em;display:flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--muted);font-weight:700}
.slot b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#efe6dc;font-size:.85rem;flex:0 0 auto;color:var(--ink)}
.slot.fill{border-style:solid;background:var(--mint);color:var(--ink)}
.slot.fill b{background:var(--teal);color:#fff}
.river{padding:16px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:repeating-linear-gradient(180deg,#bfe6ff 0 14px,#a9dbfa 14px 28px)}
.stones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.stone{min-width:150px;padding:.75em 1.2em;border:var(--bw) solid var(--ink);border-radius:60% 40% 55% 45%/50% 55% 45% 50%;background:#f1e9df;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,background .15s}

/* 2. 심사 */
.cand{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;margin-bottom:12px}
.cand .pic{border:var(--bw) solid var(--ink);border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;box-shadow:4px 4px 0 var(--ink)}
.cand img{width:100%;height:100%;object-fit:cover;display:block}
.cand h3{font-size:1.15rem;margin-bottom:6px}
.cand .case{margin:0}
.crits{display:flex;flex-direction:column;gap:8px}
.crit{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 12px;border:2px solid var(--ink);border-radius:10px;background:#fff}
.crit.bad{border-color:#d93a3a;background:#ffeceb}
.crit .q{font-weight:800}
.yn{display:inline-flex;gap:8px}
.yb{padding:.3em 1em;border:2px solid var(--ink);border-radius:99px;background:#fff;font-weight:800;cursor:pointer}
.yb.on{background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}
.yb:disabled{cursor:default}
.verdict{display:flex;align-items:center;gap:14px;margin-top:12px;padding:10px 14px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff}
.stamp{display:inline-block;padding:.1em .8em;border:5px solid #d93a3a;border-radius:8px;color:#d93a3a;font-weight:800;font-size:1.5rem;animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both;white-space:nowrap}
.stamp.pass{border-color:#1d8f66;color:#1d8f66}
@keyframes stamp{from{transform:scale(2.4);opacity:0}}
.verdict p{font-weight:700}
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.topic{display:flex;flex-direction:column;gap:6px;text-align:left;padding:10px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s}
.topic:hover{transform:translateY(-3px)}
.topic.on{background:var(--yellow)}
.topic img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;border:2px solid var(--ink)}
.topic span{font-size:.92rem;font-weight:600;color:#4a3d36}

/* 3. 토의 보드 */
.phases{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ph{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 7px;border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-weight:800;cursor:default}
button.ph{cursor:pointer}
.ph b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#efe6dc;font-size:.85rem}
.ph.on{border-color:var(--ink);background:var(--yellow);color:var(--ink)}
.ph.on b{background:var(--ink);color:var(--yellow)}
.ph.done b{background:var(--teal);color:#fff}
.ph:disabled{opacity:.5;cursor:not-allowed}
.topicbar{display:flex;gap:12px;align-items:center;margin-bottom:12px;padding:8px;border:2px solid var(--ink);border-radius:var(--r);background:var(--cream)}
.topicbar img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid var(--ink)}
.topicbar b,.topicbar span{display:block}
.topicbar span{font-weight:600;font-size:.95rem}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.fld>span{font-weight:800}
.fld>span small{font-weight:600;color:var(--muted);margin-left:6px}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.note{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:var(--bw) solid var(--ink);border-radius:6px;background:var(--nc,#fff);box-shadow:4px 4px 0 var(--ink)}
.note .by{font-size:.9rem}
.note p{font-weight:700}
.note .rs{font-weight:600;font-size:.95rem}
.qa{padding:8px 10px;border:2px solid var(--ink);border-radius:8px;background:rgba(255,255,255,.75)}
.qq{font-weight:800;font-size:.92rem}
.aa{font-weight:600;font-size:.95rem}
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:var(--bw) solid var(--ink);border-radius:var(--r);overflow:hidden;background:#fff}
.tbl th,.tbl td{padding:8px 10px;border-bottom:2px solid var(--line);text-align:center;font-size:.95rem}
.tbl thead th,.tbl tr:first-child th{background:var(--sky);font-weight:800}
.tbl th[scope=row]{text-align:left;background:#fff;min-width:200px}
.tbl th[scope=row] span{display:block;font-weight:600;font-size:.9rem}
.tbl td.bad{background:#ffeceb}
.tbl tr.sel th[scope=row],.tbl tr.sel td{background:var(--cream)}
.ck{width:34px;height:34px;border:var(--bw) solid var(--ink);border-radius:8px;background:#fff;cursor:pointer;position:relative}
.ck.on{background:var(--teal)}
.ck.on::after{content:"";position:absolute;left:9px;top:3px;width:9px;height:17px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(40deg)}
.rd{padding:.25em .8em;border:2px solid var(--ink);border-radius:99px;background:#fff;font-weight:800;cursor:pointer}
.rd.on{background:var(--yellow)}
.rd:disabled{opacity:.5;cursor:not-allowed}
.basis{margin-top:12px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chiprow.col{flex-direction:column;align-items:flex-start}
.chiprow.top{margin:0 0 12px}
.chip{border:2px solid var(--ink);border-radius:99px;background:#fff;padding:.25em .95em;font-weight:700;font-size:.95rem;cursor:pointer;transition:.12s;text-align:left}
.chip:hover:not(:disabled){background:var(--yellow)}
.chip.on{background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}
.chip:disabled{opacity:.55;cursor:default}

/* 4. 이유 퍼즐 */
.puz{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pl,.pr{display:flex;flex-direction:column;gap:10px}
.slotop{border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff;overflow:hidden}
.slotop.on{box-shadow:4px 4px 0 var(--coral);border-color:var(--ink)}
.slotop.ok{background:var(--mint)}
.opn{display:block;width:100%;padding:10px 12px;border:0;border-bottom:2px solid var(--ink);background:var(--peach);font-weight:800;text-align:left;cursor:pointer}
.slotop.on .opn{background:var(--yellow)}
.slotop.ok .opn{background:#bfe9de}
.lnk{padding:10px 12px;font-weight:700;color:var(--muted);min-height:3em}
.slotop.ok .lnk{color:var(--ink)}
.reasoncard{display:block;padding:10px 12px;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--sky);font-weight:700;text-align:left;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s}
.reasoncard:hover:not(:disabled){transform:translateY(-2px)}
.reasoncard.on{background:var(--yellow)}
.reasoncard.used{opacity:.35;box-shadow:none;cursor:default}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:14px}
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.bin{display:flex;flex-direction:column;gap:6px;text-align:left;min-height:130px;padding:10px 12px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff;cursor:pointer}
.bin:nth-child(1){background:var(--pink)}.bin:nth-child(2){background:var(--mint)}.bin:nth-child(3){background:var(--lav)}
.bin .ex{font-weight:600;font-size:.88rem;color:#4a3d36}
.bin .in{padding:6px 8px;border:2px solid var(--ink);border-radius:8px;background:#fff;font-weight:700;font-size:.9rem}

/* 5. 해부 */
.pens{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pen{display:inline-flex;align-items:center;gap:8px;padding:.3em 1em .3em .5em;border:2px solid var(--ink);border-radius:99px;background:#fff;font-weight:800;cursor:pointer}
.pen i{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:var(--pc,#fff)}
.pen.eraser i{background:repeating-linear-gradient(45deg,#fff 0 4px,#eee 4px 8px)}
.pen.on{background:var(--cream);box-shadow:3px 3px 0 var(--ink)}
.letter{padding:clamp(14px,2vw,26px);border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff;box-shadow:4px 4px 0 var(--ink);font-size:1.12rem;line-height:2.2}
.letter h3{font-size:1.2rem;margin-bottom:8px;line-height:1.5}
.sent{padding:.1em .15em;border-radius:4px;cursor:pointer;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .15s}
.sent:hover{outline:2px solid var(--ink)}
.sent.fixed{cursor:default}.sent.fixed:hover{outline:0}
.sent.bad{outline:2px solid #d93a3a;outline-offset:1px}
.sent.gap{display:inline-block;padding:.05em .8em;border:2px solid var(--ink);background:#fff0f0;color:#a8321a;font-weight:800;cursor:default}
.qbox{margin-top:14px;padding:10px 12px;border:2px solid var(--ink);border-radius:var(--r);background:var(--cream)}
.fills{display:flex;flex-direction:column;gap:8px;margin-top:8px}

/* 6. 변신 공장 */
.secname{display:inline-block;margin-bottom:8px;padding:.1em .9em;border:2px solid var(--ink);border-radius:99px;background:var(--lav);font-weight:800}
.belt{display:flex;align-items:center;gap:14px;margin-bottom:12px;padding:14px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:repeating-linear-gradient(90deg,#efe6dc 0 24px,#e4d6c6 24px 28px)}
.broken{flex:1;padding:12px 14px;border:var(--bw) solid #d93a3a;border-radius:10px;background:#fff0f0;font-weight:800;font-size:1.18rem}
.gear{width:54px;height:54px;border:var(--bw) solid var(--ink);border-radius:50%;background:var(--yellow);display:grid;place-items:center;flex:0 0 auto;animation:spin 3s linear infinite}
.gear i{width:20px;height:20px;border-radius:50%;border:var(--bw) solid var(--ink);background:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.parts{display:flex;flex-direction:column;gap:10px}
.part{padding:10px 14px;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--mint);font-weight:700}
.btnpart{text-align:left;cursor:pointer;box-shadow:3px 3px 0 var(--ink);font-size:1.05rem;transition:transform .12s}
.btnpart:hover{transform:translateY(-2px);background:#c8efe4}

/* 7. 쓰기 */
.plan{display:block}
.write{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:14px;align-items:start}
.sticky{padding:12px;border:var(--bw) solid var(--ink);border-radius:6px;background:var(--cream);box-shadow:4px 4px 0 var(--ink);font-size:.92rem;font-weight:600}
.sticky em{display:block;font-style:normal;font-weight:800;color:var(--muted);font-size:.82rem;margin-top:6px}
.paperwrap{display:flex;flex-direction:column;gap:8px}
.ti{width:100%;padding:.4em .8em;border:var(--bw) solid var(--ink);border-radius:8px;background:#fff;font-weight:800;font-size:1.15rem}
.paper{width:100%;min-height:19rem;padding:0 1rem;border:var(--bw) solid var(--ink);border-radius:8px;background-color:#fffef6;background-image:repeating-linear-gradient(transparent 0 calc(var(--lh) - 2px),#d9cdbd calc(var(--lh) - 2px) var(--lh));background-attachment:local;line-height:var(--lh);font-size:1.1rem;font-weight:500;resize:vertical}
.helper{display:flex;flex-wrap:wrap;gap:6px}
.hchip{padding:.1em .8em;border:2px solid var(--ink);border-radius:99px;font-weight:800;font-size:.88rem;background:#fff}
.hchip.ok{background:var(--mint)}.hchip.todo{background:#fff6d9}
.readbox{padding:14px 16px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fffef6;margin-bottom:12px;line-height:2}
.readbox h3{margin-bottom:6px}
.readbox.flat{border:0;padding:0;background:none}
.checks{display:flex;flex-direction:column;gap:8px}
.chk{display:flex;align-items:center;gap:10px;padding:8px 12px;border:2px solid var(--ink);border-radius:10px;background:#fff;font-weight:700;cursor:pointer}
.chk.on{background:var(--mint)}
.chk input{width:22px;height:22px;accent-color:var(--teal);flex:0 0 auto}

/* 마무리 */
.endwrap{flex:1;display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:center;max-width:1180px;width:100%;margin:0 auto;padding:22px 18px}
.cert{position:relative;padding:clamp(18px,3vw,36px);border:var(--bw) solid var(--ink);border-radius:14px;background:#fffdf1;box-shadow:8px 8px 0 var(--ink);outline:4px double var(--yellow);outline-offset:-14px;text-align:center}
.certcrown{width:86px;height:86px;object-fit:contain;display:block;margin:0 auto 6px}
.cert .ct{font-weight:800;color:var(--muted);letter-spacing:.06em}
.cert h2{font-size:clamp(2rem,4vw,3rem);margin:6px 0 10px;color:var(--coral);-webkit-text-stroke:.03em var(--ink);paint-order:stroke fill}
.cinfo{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px auto 0;max-width:420px;text-align:left}
.cinfo span{color:var(--muted);font-weight:700}
.cert .stamp{position:absolute;right:26px;bottom:24px}
.endside{display:flex;flex-direction:column;gap:12px}
.endpic{width:100%;aspect-ratio:3/2;object-fit:cover;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
.endside .rowbtn{justify-content:flex-start}

/* 팝업 */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;background:rgba(42,33,29,.55);animation:fade .18s}
@keyframes fade{from{opacity:0}}
.mbox{width:min(560px,100%);max-height:92vh;overflow:auto;border:var(--bw) solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:8px 8px 0 var(--ink);padding:22px 24px 18px;animation:rise .22s}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
.mbox h3{font-size:1.4rem;font-weight:800;margin-bottom:8px}
.mbox h4{margin:12px 0 2px;font-weight:800}
.mbox p{font-weight:700;line-height:1.65;color:#4a3d36}
.mbox .note{font-weight:600;color:var(--muted)}
.mbtns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.mbox.fin{width:min(700px,100%)}
.finwrap{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center}
.finimg{width:130px;height:130px;object-fit:contain}
.mbox.fin .mbtns{justify-content:flex-start}
.plist{margin:6px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.plist li{padding:8px 12px;border:2px solid var(--ink);border-radius:10px;background:#fff;font-weight:800}
.plist li span{display:block;font-weight:600;font-size:.92rem;color:var(--muted)}
.plist.n{counter-reset:n}.plist.n li{counter-increment:n;padding-left:44px;position:relative}
.plist.n li::before{content:counter(n);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:grid;place-items:center;font-size:.85rem}
#toast{position:fixed;left:50%;bottom:36px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:.7em 1.4em;border-radius:99px;opacity:0;pointer-events:none;transition:.28s;z-index:90;font-weight:700;max-width:92vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 화면 크기 */
@media (max-width:900px){
  .stg{grid-template-columns:1fr}
  .side{position:static;flex-direction:row;align-items:flex-start}
  .side .pic{width:34%;flex:0 0 auto}.guide{flex:1}
  .story{grid-template-columns:1fr}
  .endwrap{grid-template-columns:1fr}
  .puz{grid-template-columns:1fr}
  .write{grid-template-columns:1fr}
  .steps .sn{display:none}
  }
@media (max-width:560px){
  .cand{grid-template-columns:90px 1fr}
  .finwrap{grid-template-columns:1fr;text-align:center}.finimg{margin:auto}
  .brandlogo{height:30px}
  .top{gap:8px;padding:6px 10px}
  .stone{min-width:0;flex:1 1 130px}
  .saved{display:none}
}
@media (max-height:790px) and (min-width:901px){
  .guide .sprite{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ 2차 개편: 참고 앱(문제 아파트)의 블록·배경 그림·여백·팝업 방식 ============ */
.mark{width:40px;height:40px;object-fit:contain;display:block}
.fsico{display:block;width:22px;height:22px;background-repeat:no-repeat;background-image:
  linear-gradient(#2a211d,#2a211d),linear-gradient(#2a211d,#2a211d),linear-gradient(#2a211d,#2a211d),linear-gradient(#2a211d,#2a211d),
  linear-gradient(#2a211d,#2a211d),linear-gradient(#2a211d,#2a211d),linear-gradient(#2a211d,#2a211d),linear-gradient(#2a211d,#2a211d);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  background-size:9px 3px,3px 9px,9px 3px,3px 9px,9px 3px,3px 9px,9px 3px,3px 9px}
.fsbtn.top-fs{display:grid;place-items:center}

/* 배경 풍경: 아래쪽에 연하게 깔림 */
#app{position:relative;z-index:1}
body.sc-map::before,body.sc-stage::before,body.sc-end::before{content:"";position:fixed;left:0;right:0;bottom:0;height:min(38vh,380px);background:url(../images/skyline.webp?v=2) center bottom/cover no-repeat;mix-blend-mode:multiply;opacity:.6;pointer-events:none;z-index:0}

/* 전체 화면 그림 + 대화 블록 (이야기·이름) */
.vn{position:relative;flex:1;min-height:100vh;min-height:100dvh;background:#2a211d;overflow:hidden}
.vn>img.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 36%;display:block}
.dlg{position:absolute;left:clamp(14px,5vw,96px);right:clamp(14px,5vw,96px);bottom:clamp(14px,4vh,42px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,2vw,26px);align-items:center;padding:clamp(14px,1.8vw,24px) clamp(16px,2.2vw,32px);border:var(--bw) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:var(--sh)}
.portrait{width:clamp(76px,8vw,112px);aspect-ratio:1;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--cream);display:grid;place-items:end center;overflow:hidden;flex:0 0 auto}
.portrait .sprite{width:90%;max-height:100%;object-fit:contain}
.portrait.sm{width:66px}
.dtxt{display:flex;flex-direction:column;gap:6px;min-width:0}
.dtop{display:flex;align-items:center;gap:12px}
.dsay{font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:700;line-height:1.55}
.dbtns{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.vn .input{max-width:380px;font-size:1.25rem;font-weight:700;padding:.4em .8em}

/* 스테이지: 왼쪽 안내 블록 + 오른쪽 활동 블록 */
.stg{grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(18px,2.4vw,34px);max-width:1400px;padding:clamp(18px,2.4vw,36px) clamp(16px,2.6vw,40px) 40px}
.stg>*{min-width:0}
.card{padding:0;overflow:hidden;border-radius:12px}
.card>h2{margin:0;padding:12px 20px;background:var(--yellow);border-bottom:var(--bw) solid var(--ink);font-size:1.25rem}
.card>h2 .no{background:#fff}
.card>h2 small{display:none}
.card>.cbody{padding:clamp(16px,2vw,30px)}
.side .pic{aspect-ratio:3/2;border-radius:10px;box-shadow:4px 4px 0 var(--ink);margin-bottom:6px}
.side .pic img{object-position:50% 50%}
.gcard .cbody{display:flex;flex-direction:column;gap:20px}
.guide{align-items:center;gap:12px}
.tblwrap{max-width:100%}

/* 1. 징검다리: 돌과 물을 그림으로 */
.river{padding:clamp(18px,2.4vw,34px);border:var(--bw) solid var(--ink);border-radius:var(--r);background:#bfe6ff url(../images/water.webp?v=2) center/cover no-repeat}
.stones{gap:clamp(8px,1.4vw,22px);align-items:center}
.stone{position:relative;min-width:0;width:clamp(150px,17vw,220px);aspect-ratio:2/1;padding:0 10%;border:0;border-radius:0;background:transparent url(../images/stone1.webp?v=2) center/100% 100% no-repeat;box-shadow:none;display:grid;place-items:center;font-weight:800;font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.25;color:#2a211d;text-shadow:0 1px 0 rgba(255,255,255,.75);filter:drop-shadow(3px 5px 0 rgba(42,33,29,.35));transition:transform .15s,filter .15s}
.stone span{display:block;transform:translateY(-8%)}
.stone:hover{transform:translateY(-5px) rotate(-1deg);background-color:transparent;filter:drop-shadow(3px 9px 0 rgba(42,33,29,.35)) brightness(1.06)}
.stone.st2{background-image:url(../images/stone2.webp?v=2)}.stone.st3{background-image:url(../images/stone3.webp?v=2)}.stone.st4{background-image:url(../images/stone4.webp?v=2)}.stone.st5{background-image:url(../images/stone5.webp?v=2)}.stone.st6{background-image:url(../images/stone6.webp?v=2)}
.slot{border-radius:10px;background:#fff;box-shadow:3px 3px 0 var(--ink);border-style:solid;border-color:var(--ink);border-width:2px}
.slot:not(.fill){border-style:solid;box-shadow:none}

/* 4. 퍼즐 조각 */
.reasoncard,.opn{position:relative;padding-left:56px}
.reasoncard::before,.opn::before{content:"";position:absolute;left:12px;top:50%;width:32px;height:32px;transform:translateY(-50%);background:url(../images/puz1.webp?v=2) center/contain no-repeat}
.opn::before{background-image:url(../images/puz2.webp?v=2)}
.slotop{box-shadow:4px 4px 0 var(--ink)}
.cards .reasoncard,.pr .reasoncard,.fills .reasoncard{box-shadow:4px 4px 0 var(--ink)}

/* 5. 형광펜 */
.pen{padding:.25em 1.1em .25em .4em}
.pen i{width:38px;height:38px;border:0;border-radius:0;background:center/contain no-repeat;transform:rotate(0)}
.pen.prob i{background-image:url(../images/hl1.webp?v=2)}.pen.sug i{background-image:url(../images/hl2.webp?v=2)}.pen.rea i{background-image:url(../images/hl3.webp?v=2)}.pen.eraser i{background-image:url(../images/eraser.webp?v=2)}

/* 6. 변신 공장 */
.belt{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:16px 16px 84px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--cream)}
.belt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;border-top:var(--bw) solid var(--ink);background:#e9ddcf url(../images/belt.webp?v=2) repeat-x center/auto 100%}
.gear{width:70px;height:70px;border:0;border-radius:0;background:url(../images/gear.webp?v=2) center/contain no-repeat;animation:spin 5s linear infinite}
.gear i{display:none}

/* 팝업: 제목 띠 + 캐릭터 */
.mbox{width:min(620px,100%);padding:0;overflow:auto;border-radius:12px;box-shadow:8px 8px 0 var(--ink)}
.mhead{display:flex;align-items:center;gap:12px;padding:10px 22px;background:var(--yellow);border-bottom:var(--bw) solid var(--ink);position:sticky;top:0;z-index:1}
.mhead h3{margin:0;font-size:1.3rem}
.sprite.xs{width:50px}
.mbody{padding:22px 26px 20px}
.mbox.fin{width:min(720px,100%)}
.finimg{filter:drop-shadow(3px 4px 0 rgba(42,33,29,.25))}

/* 마무리 */
.endpic{aspect-ratio:16/9}

/* 지도 */
.mapwrap{padding:clamp(14px,2vw,30px) 12px 10px}

@media (max-width:900px){
  .stg{grid-template-columns:1fr}
  .side{position:static}
  .side .gcard .cbody{flex-direction:row;align-items:center}
  .side .pic{width:44%;flex:0 0 auto;margin:0}
  .dlg{grid-template-columns:auto 1fr}
  .dbtns{grid-column:1/-1;flex-direction:row;justify-content:flex-end}
}
@media (max-width:560px){
  .portrait{width:64px}
  .stone{width:44%;min-width:130px}
  .side .gcard .cbody{flex-direction:column;align-items:stretch}.side .pic{width:100%}
  .belt{flex-wrap:wrap}
}

/* ============ 3차 개편: 상단 블록 통일 · 한 화면 맞춤 · 아래쪽 대화 블록 ============ */
/* 상단: 오른쪽 로고만 빼고 모두 같은 블록 모양 */
.top{gap:12px;padding:8px clamp(10px,1.6vw,22px);border-bottom:var(--bw) solid var(--ink)}
.brand,.step,.chipwho,.blk{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:42px;border:var(--bw) solid var(--ink);border-radius:10px;background:#fff;box-shadow:3px 3px 0 var(--ink);color:var(--ink);font-weight:800;font-size:.95rem;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s}
.brand{gap:8px;padding:0 14px 0 8px;background:var(--cream)}
.wordmark{padding:0;background:none;border-radius:0;font-size:1.1rem}
.mark{width:30px;height:30px}
.steps{gap:8px;flex-wrap:nowrap;overflow:visible}
.step{gap:7px;padding:0 12px 0 6px;color:var(--ink);font-size:.92rem}
.steps .step:not(.on){padding:0 6px}
.step i{width:26px;height:26px;font-size:.88rem;background:#efe6dc;color:var(--ink)}
.step.on{background:var(--yellow)}
.step.done i{background:var(--teal);color:#fff}
.step.lock{opacity:.5;border-style:solid;box-shadow:none;cursor:not-allowed}
.step:hover:not(:disabled):not(.on),.blk:hover{background:var(--cream)}
.step:active:not(:disabled),.blk:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.chipwho{padding:0 14px;background:var(--coral);color:#fff;cursor:default;box-shadow:3px 3px 0 var(--ink)}
.chipwho:empty{display:none}
.blk{padding:0 14px}
.blk.fsb{width:42px;padding:0}
.fsico{margin:0}
.step i.mi{border-radius:7px}

/* 스테이지: 위(그림 + 제목 블록) / 가운데(활동 블록) / 아래(수달 대화 블록) 로 한 화면에 */
.stg{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);height:calc(100vh - 62px);height:calc(100dvh - 62px);max-width:1400px;width:100%;margin:0 auto;padding:clamp(10px,1.8vh,22px) clamp(12px,2.6vw,40px) clamp(10px,1.8vh,22px);box-sizing:border-box}
.toprow{display:flex;gap:clamp(12px,1.6vw,22px);align-items:stretch;flex:0 0 auto}
.hero{height:clamp(96px,17vh,180px);aspect-ratio:2000/310;border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:var(--sh);overflow:hidden;background:#fff;flex:0 0 auto}
.hero img{display:block;width:100%;height:100%;object-fit:cover}
.ttl{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:0 clamp(14px,2vw,28px);border:var(--bw) solid var(--ink);border-radius:12px;background:var(--yellow);box-shadow:var(--sh)}
.ttl .no{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:var(--bw) solid var(--ink);background:#fff;font-size:1.35rem;font-weight:800;flex:0 0 auto}
.ttl b{display:block;font-size:clamp(1.15rem,1.8vw,1.6rem);font-weight:800;line-height:1.25}
.ttl small{display:block;font-size:.95rem;font-weight:700;color:#5a4a2a}
.stg>.card.main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0}
.stg>.card.main>.cbody{flex:1;min-height:0;overflow:auto;padding:clamp(12px,1.8vh,24px) clamp(14px,2vw,30px)}
.dock{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:8px 18px 8px 10px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:var(--sh)}
.dock .dtxt{flex-direction:row;align-items:center;gap:12px}
.dock .dsay.sm{font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.5}
.portrait.sm{width:62px}
#say{margin:0}
body.sc-stage{overflow-x:hidden}

/* 높이가 낮은 화면(교실 노트북·크롬북)에서는 간격과 글자를 조금 줄인다 */
@media (max-height:800px){
  .lead{margin-bottom:8px}
  .case{padding:9px 12px;margin-bottom:9px;font-size:1.02rem}
  .prog{margin-bottom:8px}.prog i{height:8px}
  .river{padding:10px 14px}
  .stone{width:clamp(130px,14vw,180px)}
  .crit{padding:5px 10px}.crits{gap:6px}
  .cand{grid-template-columns:104px 1fr;margin-bottom:8px}
  .letter{line-height:1.95;padding:12px 16px;font-size:1.03rem}
  .tbl th,.tbl td{padding:5px 8px}.ck{width:30px;height:30px}.ck.on::after{left:8px;top:2px}
  .rowbtn{margin-top:10px}
  .btn{padding:.45em 1.2em}.btn.big{padding:.5em 1.5em}
  .portrait.sm{width:54px}
  .belt{padding:10px 12px 70px;margin-bottom:10px}.belt::after{height:54px}.gear{width:54px;height:54px}
  .fld{margin-bottom:8px}
  .paper{min-height:11rem}
}
@media (max-width:900px){
  .stg{height:auto;min-height:calc(100dvh - 62px)}
  .toprow{flex-direction:column}
  .hero{width:100%;height:auto}
  .ttl{padding:10px 14px}
  .stg>.card.main>.cbody{overflow:visible}
}
@media (max-width:640px){
  .brand .wordmark{display:none}
  .steps{gap:5px}.step{height:38px}.brand,.chipwho,.blk{height:38px}.blk.fsb{width:38px}
  .chipwho{display:none}
}

/* 4차: 폭 채우기 · 한 화면 맞춤 세부 */
.stg{align-items:stretch}
.topics{grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px)}
.topic{padding:8px;gap:4px}
.topic img{aspect-ratio:16/10}
.topic span{font-size:.88rem;line-height:1.4}
.plan{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(12px,2vw,26px)}
.plan .fld textarea{min-height:0}
.chiprow.top{margin-bottom:8px}
@media (max-height:800px){
  .topic img{aspect-ratio:2/1}
  .topic span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .phases{margin-bottom:8px}.ph{padding:3px 12px 3px 6px}
  .notes{gap:10px}.note{padding:8px 12px;gap:3px}
  .puz{gap:12px}.pl,.pr{gap:7px}.opn{padding:7px 10px}.lnk{padding:6px 10px;min-height:2.2em}
  .reasoncard{padding-top:7px;padding-bottom:7px}
  .cards{gap:7px;margin-bottom:8px}.bin{min-height:96px;padding:7px 10px}
  .secname{margin-bottom:5px}.parts{gap:7px}.part{padding:7px 12px}
  .topicbar img{width:56px;height:56px}.topicbar{margin-bottom:8px}
  .fld>span{font-size:.95rem}.fld textarea,.fld input{padding:.3em .7em}
  .chk{padding:5px 10px}.checks{gap:5px}.readbox{padding:8px 12px;margin-bottom:8px;line-height:1.7}
  .write{gap:10px}.sticky{padding:8px;font-size:.85rem}.hero{height:clamp(84px,14vh,160px)}
}
.stone:hover,.stone:focus-visible{background-size:100% 100%;background-repeat:no-repeat;background-position:center}

/* 5차: 더 촘촘하게 */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fills .reasoncard{height:100%}
@media (max-width:900px){.checks,.fills{grid-template-columns:1fr}}
@media (max-height:800px){
  .hero{height:clamp(76px,12vh,150px)}
  .stg{gap:10px;padding-top:10px;padding-bottom:10px}
  .ttl .no{width:40px;height:40px;font-size:1.2rem}
  .dock{padding:6px 16px 6px 8px}
  .tbl{font-size:.9rem}.tbl th[scope=row]{min-width:0}.tbl th,.tbl td{font-size:.9rem}
  .qbox{margin-top:8px;padding:7px 10px}
  .readbox h3{margin-bottom:2px;font-size:1.05rem}
  .lead{font-size:.98rem}
  .plan .fld{margin-bottom:6px}
  .basis{margin-top:8px}
  .verdict{margin-top:8px;padding:6px 12px}
  .tip{margin-top:6px;min-height:0}
}


/* ============ 6차: 스크롤 없이 한 화면 · 토의 왕국 배경 · 큰 제목 블록 ============ */
html{font-size:clamp(13px,min(.55vw + 9.6px,1.9vh + 3px),22px)}
body.sc-map,body.sc-stage,body.sc-end{background-color:#fdf0e4;background-image:linear-gradient(rgba(120,70,40,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,70,40,.045) 1px,transparent 1px),linear-gradient(rgba(255,249,240,.38),rgba(255,249,240,.38)),url(../images/kingdombg.webp?v=3);background-size:28px 28px,28px 28px,auto,cover;background-position:0 0,0 0,0 0,center bottom;background-attachment:scroll,scroll,fixed,fixed;background-repeat:repeat,repeat,no-repeat,no-repeat}
body.sc-map::before,body.sc-stage::before,body.sc-end::before{display:none}

/* 위: 그림(남는 높이만큼 자람) + 제목 블록 */
.toprow{flex:1 1 0;min-height:64px;max-height:44vh;height:auto}
.hero{height:auto;aspect-ratio:auto;flex:1 1 0;min-width:0}
.hero img{height:100%}
.ttl{flex:0 0 clamp(210px,25vw,350px);gap:clamp(10px,1.2vw,18px);background:var(--yellow) radial-gradient(circle at 100% 0,rgba(255,255,255,.55) 0 18%,transparent 19%) no-repeat;position:relative;overflow:hidden}
.ttl .no{width:clamp(44px,6.4vh,64px);height:clamp(44px,6.4vh,64px);font-size:clamp(1.3rem,3vh,2rem);box-shadow:3px 3px 0 var(--ink)}
.tt{display:flex;flex-direction:column;gap:5px;min-width:0}
.ttl b{font-size:clamp(1.25rem,2.4vw,2.1rem);letter-spacing:-.02em}
.ttl .sub{align-self:flex-start;padding:.1em .8em;border:2px solid var(--ink);border-radius:99px;background:#fff;font-weight:800;font-size:.92rem}
.pdots{display:flex;gap:5px}
.pdots i{width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;background:#fff}
.pdots i.d{background:var(--teal)}.pdots i.c{background:var(--coral);transform:scale(1.25)}
.stg>.card.main{flex:0 1 auto}
.stg>.card.main>.cbody{flex:0 1 auto;padding:clamp(8px,1.6vh,22px) clamp(12px,2vw,28px)}

/* 가로로 넓은 화면에서는 한 줄에 펼쳐 높이를 아낀다 */
@media (min-width:901px){
  .crits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .crit{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:8px 12px}
  .notes{grid-template-columns:repeat(4,1fr)}
  .parts{display:grid;grid-template-columns:repeat(3,1fr)}
  .cand{grid-template-columns:clamp(72px,14vh,160px) 1fr}
  .cand h3{margin-bottom:4px}
}
.paper{min-height:clamp(5.5rem,22vh,15rem)}
.hint-row{display:none}
@media (max-height:640px){
  .lead{margin-bottom:5px;font-size:.92rem}
  .case{padding:6px 10px;margin-bottom:6px}
  .prog{margin-bottom:5px}
  .stg{gap:8px;padding-top:8px;padding-bottom:8px}
  .rowbtn{margin-top:6px}
  .btn{font-size:.92rem}.btn.big{font-size:1.02rem}
  .dock{padding:4px 12px 4px 6px}.portrait.sm{width:46px}
  .verdict{margin-top:5px;padding:4px 10px}.stamp{font-size:1.1rem;border-width:3px}
  .ph{font-size:.9rem}.phases{margin-bottom:5px}
  .river{padding:6px 10px}.stone{width:clamp(110px,12vw,150px)}
  .slots{margin-bottom:6px}.slot{min-height:2.4em;padding:3px 8px}
  .topic img{aspect-ratio:3/1}
  .letter{line-height:1.8;padding:8px 12px}
  .pens{margin-bottom:6px}.pen i{width:30px;height:30px}
  .belt{padding:8px 10px 56px;margin-bottom:6px}.belt::after{height:44px}.gear{width:42px;height:42px}.broken{padding:7px 10px}
  .secname{margin-bottom:3px}
  .stg>.card.main>.cbody{padding:8px 12px}
  .tbl th,.tbl td{padding:3px 6px}.ck{width:26px;height:26px}.ck.on::after{left:7px;top:1px;width:7px;height:14px}
}
@media (max-width:900px){
  .toprow{flex:0 0 auto;max-height:none}
  .hero{aspect-ratio:3/1;flex:none;width:100%}
  .ttl{flex:none}
}

.stg{gap:clamp(8px,1.3vh,14px);padding:clamp(8px,1.4vh,16px) clamp(10px,1.6vw,24px)}
.stg>.card.main>.cbody{padding:clamp(8px,1.4vh,18px) clamp(12px,1.6vw,24px)}
.toprow{gap:clamp(8px,1.2vw,16px)}
.mapwrap{padding:clamp(8px,1.4vh,16px) 10px 8px}


/* ============ 7차: 왼쪽 열(그림·제목·수달) + 오른쪽 활동 블록 — 세로 공간을 모두 활동에 ============ */
.stg{display:grid;grid-template-columns:clamp(250px,27vw,400px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(10px,1.4vw,22px);height:calc(100vh - 62px);height:calc(100dvh - 62px);max-width:1500px;width:100%;margin:0 auto;padding:clamp(8px,1.4vh,18px) clamp(10px,1.6vw,24px);align-items:stretch}
.lcol{display:flex;flex-direction:column;gap:clamp(8px,1.3vh,16px);min-height:0}
.lcol>*{min-width:0}
.hero{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9;border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:var(--sh);overflow:hidden;background:#fff}
.hero img{display:block;width:100%;height:100%;object-fit:cover}
.ttl{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"no tt" "dots dots";align-items:center;gap:8px clamp(10px,1vw,16px);padding:clamp(8px,1.2vh,14px) clamp(12px,1.2vw,18px);border:var(--bw) solid var(--ink);border-radius:12px;background:var(--yellow);box-shadow:var(--sh);overflow:visible}
.ttl .no{grid-area:no;width:clamp(40px,6vh,58px);height:clamp(40px,6vh,58px);font-size:clamp(1.2rem,2.8vh,1.8rem)}
.ttl .tt{grid-area:tt;display:flex;flex-direction:column;gap:3px;min-width:0}
.ttl b{font-size:clamp(1.2rem,2.1vw,1.9rem);line-height:1.2;white-space:normal;word-break:keep-all}
.ttl .sub{align-self:flex-start;padding:.05em .75em;font-size:.9rem}
.pdots{grid-area:dots;display:flex;gap:6px;justify-content:center}
.pdots i{width:clamp(12px,1.5vh,16px);height:clamp(12px,1.5vh,16px)}
.dock{flex:1 1 auto;min-height:0;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:var(--sh)}
.dock .portrait.sm{width:clamp(48px,8vh,72px);flex:0 0 auto}
.dock .dtxt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.dock .dsay.sm{font-size:clamp(.95rem,1.25vw,1.15rem);line-height:1.45}
.stg>.card.main{height:100%;min-height:0;margin:0;display:flex;flex-direction:column}
.stg>.card.main>.cbody{flex:1 1 auto;min-height:0;overflow:auto;padding:clamp(10px,1.8vh,22px) clamp(12px,1.6vw,24px);display:flex;flex-direction:column;justify-content:flex-start}
/* 좁아진 활동 블록에 맞춘 배치 */
.notes{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.topics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.parts{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.crits{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.bins{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.checks{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fills{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.plan{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stones{justify-content:space-evenly}
@media (max-height:640px){
  .ttl{padding:6px 12px;gap:4px 10px}.ttl .no{width:36px;height:36px;font-size:1.1rem}.ttl b{font-size:1.1rem}.ttl .sub{font-size:.8rem}
  .dock{padding:4px 10px 4px 6px}
}
@media (max-width:900px){
  .stg{display:flex;flex-direction:column;height:auto;min-height:calc(100dvh - 62px)}
  .lcol{display:contents}
  .hero{order:1}.ttl{order:2}.stg>.card.main{order:3;height:auto}.dock{order:4;flex:0 0 auto}
  .stg>.card.main>.cbody{overflow:visible}
}

/* 끌어서 놓기 */
[data-act=s1stone],[data-act=s1case],[data-act=s4r],[data-act=s4c],[data-act=s5pen],[data-act=s5fill],[data-act=s6o]{touch-action:none;-webkit-user-select:none;user-select:none}
.ghost{position:fixed!important;z-index:120;margin:0!important;pointer-events:none;opacity:.94;transform:rotate(-2deg) scale(1.04);box-shadow:8px 10px 0 rgba(42,33,29,.35)!important;transition:none!important}
.dragging{opacity:.35}
body.isdrag,body.isdrag *{cursor:grabbing!important}
.dropok{outline:4px solid var(--coral)!important;outline-offset:3px;background-color:#fff3d6!important}
.stone.ghost{filter:drop-shadow(6px 10px 0 rgba(42,33,29,.35))}

/* 점선 없이: 비어 있는 칸은 연한 바탕으로 구분한다 */
.slot:not(.fill){background:#f4ece2;border-color:#9c8b7c;box-shadow:none}
.lnk{background:#fbf6ee}
.bin{border-style:solid}
.sent.bad{outline:3px solid #d93a3a;outline-offset:1px}
.sent.gap{border:2px solid #d93a3a}
.broken{border-style:solid}
.qa{border-style:solid;border-width:2px}
.step.lock{border-style:solid}
.dropok{outline:4px solid var(--coral)!important;outline-offset:3px}

/* 4단계 둘째 판: 이유 카드는 왼쪽에 한 줄씩, 방법 상자는 오른쪽에 */
.puz.r2{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
.puz.r2 .pl{gap:8px}
.puz.r2 .reasoncard{padding-top:8px;padding-bottom:8px;font-size:.98rem;line-height:1.45}
.puz.r2 .pr{gap:8px}
.puz.r2 .bin{flex:1 1 0;min-height:0;padding:8px 12px;gap:4px}
.puz.r2 .bin b{font-size:1rem}
.puz.r2 .bin .ex{font-size:.82rem}
.puz.r2 .bin .in{font-size:.85rem;padding:3px 8px}
@media (max-width:700px){.puz.r2{grid-template-columns:1fr}}

/* ============ 8차: 가독성·블록 정리 ============ */
/* 줄바꿈: 낱말 단위, 짧은 글은 균형 있게 */
.dsay,.bubble,.lead,.ttl b,.ttl .sub,.case,.verdict p,.tip,.mbody p,.topic b,.topic span,.hchip,.chip,.stone span,.node .nm{text-wrap:balance;word-break:keep-all}
.lead{text-wrap:pretty}

/* 팝업: 내용에 맞게 너비가 달라지고, 한 줄로 되는 글은 한 줄로 */
.mbox{width:fit-content;min-width:min(440px,94vw);max-width:min(920px,96vw)}
.mbox.fin{width:fit-content;min-width:min(560px,94vw);max-width:min(900px,96vw)}
.mbox.help{min-width:min(520px,94vw)}
.finwrap{grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,28px)}
.finwrap p{font-size:1.1rem;line-height:1.6;max-width:44em}
.mbtns{flex-wrap:wrap}

/* 수달 대화 블록 */
.dock .who{align-self:flex-start;padding:.05em .8em;font-size:.95rem}
.dock .dtxt{align-items:flex-start}
.dock .dsay.sm{margin:0;text-align:left}

/* 7단계 계획: 이름표 달린 블록 4개를 2×2로 */
.plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:clamp(8px,1.4vh,14px) clamp(10px,1.4vw,18px);flex:1 1 auto;min-height:0;margin-bottom:8px}
.plan .fld{display:flex;flex-direction:column;margin:0;min-height:0;border:var(--bw) solid var(--ink);border-radius:10px;background:#fff;box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.plan .fld>span{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:6px 12px;border-bottom:var(--bw) solid var(--ink);font-size:1rem}
.plan .fld>span small{margin:0;font-size:.82rem;font-weight:700;color:#5a4a3a}
.plan .fld:nth-child(1)>span{background:#ffe3dc}.plan .fld:nth-child(2)>span{background:#d8f3ec}.plan .fld:nth-child(3)>span{background:#dcefff}.plan .fld:nth-child(4)>span{background:#e6e8ff}
.plan .fld textarea,.plan .fld input{flex:1 1 auto;min-height:2.6em;border:0;border-radius:0;box-shadow:none;resize:none;padding:.5em .9em;background:#fff}
.plan .fld input{flex:0 0 auto}
.plan .fld .chiprow{padding:4px 10px 8px;margin:0;gap:6px}
.plan .fld .chip{font-size:.85rem;padding:.12em .75em}
@media (max-width:700px){.plan{grid-template-columns:1fr;grid-auto-rows:auto}}

/* 가독성: 글자 대비·크기 */
.lead{font-size:1.04rem;color:#2a211d}
.note p,.sticky,.topic span,.cinfo span{color:#3d322b}
.tbl th[scope=row] span{color:#3d322b}
.chip,.yb,.rd{font-size:.98rem}
.btn{font-size:1.05rem}

/* 그림 소품 */
.pen.eraser i{background-image:url(../images/eraser.webp?v=4)}
.belt::after{background:#e9ddcf url(../images/beltlong.webp?v=4) center/100% 100% no-repeat}
.stamp::before{content:"";display:inline-block;width:1.3em;height:1.3em;margin-right:.35em;vertical-align:-.25em;background:url(../images/stamp-no.webp?v=4) center/contain no-repeat}
.stamp.pass::before{background-image:url(../images/stamp-ok.webp?v=4)}
.cert .stamp::before{display:none}
.note .by::before{content:"";display:inline-block;width:1.3em;height:1.3em;margin-right:.35em;vertical-align:-.3em;background:url(../images/note.webp?v=4) center/contain no-repeat}
.qbox>b::before{content:"";display:inline-block;width:1.4em;height:1.4em;margin-right:.35em;vertical-align:-.35em;background:url(../images/lens.webp?v=4) center/contain no-repeat}
.belt::after{height:clamp(44px,8vh,64px);background:#e9ddcf url(../images/beltlong.webp?v=4) center bottom/100% auto no-repeat}
/* 수달 대화 블록: 세로로 크게 */
.dock{flex-direction:column;justify-content:center;text-align:center;gap:clamp(6px,1.2vh,12px);padding:10px 14px}
.dock .portrait.sm{width:clamp(64px,15vh,132px)}
.dock .dtxt{align-items:center}
.dock .who{align-self:center}
.dock .dsay.sm{text-align:center;font-size:clamp(1rem,1.5vw,1.28rem)}
@media (max-width:900px){.dock{flex-direction:row;text-align:left}.dock .dtxt{align-items:flex-start}.dock .dsay.sm{text-align:left}.dock .portrait.sm{width:64px}}

/* 9차: 이야기·이름 대화 블록 — 높이를 줄이고 단추를 같은 크기로 옆에 나란히 */
.dlg{padding:clamp(8px,1.1vw,14px) clamp(14px,1.8vw,24px);gap:clamp(10px,1.6vw,20px)}
.dlg .portrait{width:clamp(56px,5.6vw,80px)}
.dlg .dbtns{flex-direction:row;align-items:center;gap:12px}
.dlg .dbtns .btn,.dlg .dbtns .btn.big{font-size:1.05rem;padding:.5em 1.3em;min-width:7.2em;white-space:nowrap}
.dlg .dsay{white-space:pre-line}
/* 이름 화면 대화 블록을 작게 */
.dlg .input{padding:.25em .7em;font-size:.95rem;line-height:1.4;max-width:14em}
.dlg .dtxt{gap:4px}
.dlg .dsay{font-size:clamp(.95rem,1.35vw,1.15rem);line-height:1.4;margin:0}
.dlg .who{padding:.05em .8em;font-size:.95rem}
.dlg .portrait{width:clamp(48px,4.6vw,66px)}

/* 10차: 지도 아래 안내 블록(수달+말+별 합침) · 단계 왼쪽 수달 도움말 블록 */
.mapbar{flex-wrap:nowrap;justify-content:flex-start;gap:clamp(10px,1.4vw,18px);padding:8px clamp(12px,1.6vw,22px) 8px 8px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:var(--sh)}
.mapbar .portrait.sm{width:clamp(52px,7vh,68px);flex:0 0 auto}
.mapbar .mtxt{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.mapbar .who{padding:.05em .8em;font-size:.95rem;flex:0 0 auto}
.mapbar .msay{margin:0;font-weight:700;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.4;word-break:keep-all}
.mapbar .mstars{flex:0 0 auto;margin-left:auto;padding:.3em .9em;background:var(--cream);box-shadow:3px 3px 0 var(--ink)}
.mapbar .mstars span:first-child{font-size:.95rem}
.mapbar .btn{flex:0 0 auto}
@media (max-width:900px){.mapbar{flex-wrap:wrap}.mapbar .mtxt{flex:1 1 60%}}

.dock{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;gap:0;padding:0;overflow:hidden}
.dock .dhead{flex:0 0 auto;padding:.3em 1em;background:var(--yellow);border-bottom:var(--bw) solid var(--ink);font-weight:800;font-size:.95rem}
.dock .dbody{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.6vh,16px);padding:clamp(8px,1.6vh,16px) 14px;background:radial-gradient(circle at 50% 30%,#fff 0 30%,transparent 31%),var(--mint)}
.dock .portrait.sm{width:clamp(72px,17vh,140px);box-shadow:4px 4px 0 var(--ink)}
.dock .dtxt{align-items:stretch;width:100%}
.dock .dsay.sm{margin:0;padding:.6em .9em;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff;box-shadow:3px 3px 0 var(--ink);text-align:center;font-weight:700;font-size:clamp(1rem,1.5vw,1.28rem);position:relative}
.dock .dsay.sm::before{content:"";position:absolute;left:50%;top:-10px;width:14px;height:14px;background:#fff;border-left:var(--bw) solid var(--ink);border-top:var(--bw) solid var(--ink);transform:translateX(-50%) rotate(45deg)}
@media (max-width:900px){.dock .dbody{flex-direction:row;justify-content:flex-start}.dock .portrait.sm{width:64px}.dock .dsay.sm{text-align:left}.dock .dsay.sm::before{left:-10px;top:50%;transform:translateY(-50%) rotate(-45deg)}}

/* 11차: 징검다리를 가로로 한 줄 · 글자는 돌 가운데 */
.river .stones{flex-wrap:nowrap;justify-content:center;gap:clamp(2px,.6vw,10px)}
.river .stone{flex:1 1 0;width:auto;max-width:25%;padding:0 5%;aspect-ratio:2/1.15}
.river .stone span{transform:none;text-wrap:balance;word-break:keep-all}
@media (max-width:900px){.river .stones{flex-wrap:wrap}.river .stone{flex:0 0 44%;max-width:none}}
/* 1단계: 아래 빈 공간까지 강이 차지하고, 돌 글자는 두 줄 */
.stg>.card.main>.cbody:has(.river){flex:1 1 auto;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,16px)}
.cbody:has(.river) .river{flex:1 1 auto;min-height:0;display:grid;align-items:center}
.cbody:has(.river) .slot{min-height:clamp(3em,6vh,4.2em);font-size:clamp(1rem,1.3vw,1.2rem)}
.river .stone{font-size:clamp(1.05rem,1.5vw,1.4rem)}
.river .stone span{max-width:5.6em}
/* 도움말 말풍선: 꼬리 없이 둥근 사각형 */
.dock .dsay.sm::before{display:none}
@media (max-width:900px){.dock .dsay.sm::before{display:none}}
/* 아래 안내(.tip)를 블록에 넣고 가운데 정렬 */
.tip{align-self:center;max-width:100%;margin-top:clamp(6px,1.2vh,12px);padding:.55em 1.1em;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--pink);box-shadow:3px 3px 0 var(--ink);text-align:center;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.5;text-wrap:balance;word-break:keep-all}
.tip:empty{display:none}

/* 12차: 읽기 편한 줄바꿈 — 왼쪽 정렬이어야 할 이유가 없는 글은 가운데 정렬 + 균형 줄바꿈 */
.lead,.case,.tip,.verdict p,.mbody p,.topic,.topic b,.topic span,.reasoncard,.opn,.bin,.chip,.btnpart,.bubble,.dock .dsay.sm,.hchip,.slot span,.crit p,.finwrap p,.tipbox,.guide p{text-align:center;text-wrap:balance;word-break:keep-all;overflow-wrap:break-word}
.opn,.chip,.btnpart,.reasoncard,.topic{justify-content:center;align-items:center}
.case{margin-left:auto;margin-right:auto}
@media (max-width:900px){.dock .dsay.sm{text-align:center}}
/* 13차: 도움말 블록 배경 그림 · 징검다리 지그재그 · 문제 카드 가운데 정렬 */
.dock .dbody{background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)),url(../images/dockbg.webp?v=1) center bottom/cover no-repeat}
.river .stones{align-items:center}
.river .stone{max-width:28%;margin:0 -1%}
.river .stone:nth-child(odd){transform:translateY(-14%)}.river .stone:nth-child(even){transform:translateY(14%)}
.river .stone:nth-child(odd):hover{transform:translateY(calc(-14% - 5px)) rotate(-1deg)}.river .stone:nth-child(even):hover{transform:translateY(calc(14% - 5px)) rotate(-1deg)}
@media (max-width:900px){.river .stone{transform:none!important;margin:0}}
.crit{flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center}.crit .q{text-align:center;text-wrap:balance;word-break:keep-all}
/* 14차: 장면 문장 블록 — 이름표를 달고 읽기 좋게 */
.case:has(+.river){position:relative;margin:clamp(10px,1.8vh,18px) auto 0;padding:1.3em 1.4em .9em;max-width:min(100%,46em);font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.6;background:linear-gradient(var(--cream),var(--cream)) padding-box;box-shadow:4px 4px 0 var(--ink)}
.case:has(+.river)::before{content:"토의 장면";position:absolute;left:50%;top:0;transform:translate(-50%,-55%);padding:.05em .95em;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--yellow);font-size:.8rem;font-weight:800;line-height:1.5;white-space:nowrap}

/* 15차: 별은 그림(PNG)으로, 통과 팝업은 가운데 정렬 */
.st{background:url(../images/star-off.webp?v=1) center/contain no-repeat;clip-path:none;width:22px;height:22px}
.st.on{background-image:url(../images/star-on.webp?v=1)}
.stars{gap:4px}
.stars.big{gap:10px}.stars.big .st{width:clamp(44px,6vh,60px);height:clamp(44px,6vh,60px)}
.mbox.fin .stars.big .st.on{animation:starpop .5s cubic-bezier(.3,1.6,.5,1) both}
.mbox.fin .stars.big .st.on:nth-child(2){animation-delay:.18s}.mbox.fin .stars.big .st.on:nth-child(3){animation-delay:.36s}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
.mbox.fin .finwrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(6px,1.4vh,14px)}
.mbox.fin .finimg{width:clamp(96px,16vh,140px);height:clamp(96px,16vh,140px)}
.mbox.fin .finwrap>div{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,16px)}
.mbox.fin .finwrap p{margin:0;max-width:30em;font-weight:700}
.mbox.fin .mbtns{justify-content:center;gap:14px}
.mbox.fin .mbtns .btn,.mbox.fin .mbtns .btn.big{min-width:9em;font-size:1.1rem;padding:.55em 1.2em;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.mbox.fin .stars.big .st.on{animation:none}}

/* 16차: 지도 단추 · 2단계 큰 그림 2열 */
.steps .step[data-act=map]{background:var(--mint);padding:0 12px 0 6px;gap:8px}
.steps .step[data-act=map] .sn{display:inline;font-weight:800}
.steps .step[data-act=map].on{background:var(--yellow)}
.step i.mi{width:28px;height:28px;border-radius:6px;border:2px solid var(--ink);background:url(../images/map.webp?v=1) center/cover no-repeat}
.steps .step[data-act=map]:hover{background:var(--yellow)}

.s2grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:stretch;margin-top:clamp(6px,1.2vh,12px)}
.s2pic{position:relative;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);overflow:hidden;background:#fff;min-height:0;aspect-ratio:1/1;align-self:start;width:100%;max-height:calc(100vh - 240px);justify-self:center}
.s2pic img{width:100%;height:100%;object-fit:cover;display:block}
.s2pic .pno{position:absolute;left:12px;top:12px;padding:.1em .9em;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--yellow);font-weight:800;font-size:.95rem}
.s2side{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px);justify-content:center;min-width:0}
.s2side h3{margin:0;text-align:center;font-size:clamp(1.25rem,1.9vw,1.7rem)}
.s2side .case{margin:0}
.s2side .crits{display:flex;flex-direction:column;gap:clamp(6px,1.1vh,10px)}
.s2side .crit{padding:clamp(8px,1.4vh,14px) 12px}
.s2side .rowbtn{justify-content:center}
@media (max-width:900px){.s2grid{grid-template-columns:1fr}.s2pic{max-width:340px;max-height:none}}
.st,.st.on{background-color:transparent}
.st,.st.on{background-size:contain;background-position:center;background-repeat:no-repeat}
.stars.big .st{width:clamp(56px,9vh,76px);height:clamp(56px,9vh,76px)}.mbox.fin .finimg{margin-bottom:0}
.s2side .crit{flex-direction:row;justify-content:space-between;gap:10px;padding:clamp(6px,1.1vh,10px) 12px}
.s2side .crit .q{flex:1 1 0;min-width:0}
.s2side .crit .yn{flex:0 0 auto;margin:0}
/* 17차: 퍼즐 아이콘과 글자가 겹치지 않게 좌우 여백을 대칭으로 */
.puz .opn,.puz .reasoncard,.reasoncard,.opn{padding-left:54px;padding-right:54px}
.puz.r2 .reasoncard{padding-left:54px;padding-right:54px}
/* 18차: 휴대폰 상단 바 — 두 줄(위: 이름·단추, 아래: 단계 가로 스크롤) */
@media (max-width:700px){
  .top{flex-wrap:wrap;row-gap:6px}
  .top .brand .wordmark,.top .brandlogo{display:none}
  .top .top-r{margin-left:auto;gap:6px}
  .top .steps{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 2px 6px;scrollbar-width:thin}
  .top .steps .step{flex:0 0 auto}
}
@media (max-width:900px){
  .puz.r2 .pr{height:auto}
  .puz.r2 .bin{flex:0 0 auto;min-height:auto;height:auto;padding:10px 12px;gap:6px}
  .puz.r2 .bin .ex{font-size:.9rem}
  .puz.r2 .bin .in{font-size:.9rem}
}

/* 19차: 증서 도장은 아래 가운데 · 돌 글자는 모두 두 줄 */
.cert .stamp{position:static;display:block;width:fit-content;margin:16px auto 0}
.river .stone span{max-width:4.6em}
/* 4단계 첫 판: 이유 조각이 7개라 간격을 조금 줄임 */
.puz:not(.r2) .pr{gap:6px}
.puz:not(.r2) .pr .reasoncard{padding-top:7px;padding-bottom:7px;line-height:1.35}
.puz:not(.r2) .pl{gap:8px}
/* 지도: 아래 안내 블록이 커진 만큼 지도 폭 기준을 조정 */
.mapstage,.mapbar{width:min(100%,calc((100vh - 200px)*16/9))}

/* 20차: 인쇄용 제안서 · 소리 단추 · 끝 화면 안내 */
#printSheet{display:none}
.endtip{margin:0 0 10px;padding:.5em .9em;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--cream);box-shadow:3px 3px 0 var(--ink);text-align:center;font-weight:700;text-wrap:balance;word-break:keep-all}
#sndBtn[aria-pressed=false]{background:#efe6dc;color:var(--muted)}
@media print{
  @page{size:A4;margin:18mm 16mm}
  html,body{background:#fff!important}
  body>*:not(#printSheet){display:none!important}
  #printSheet{display:block;color:#000;font-family:'Paperlogy',sans-serif;font-weight:500;font-size:13pt;line-height:1.9;word-break:keep-all}
  #printSheet h1{margin:0 0 10mm;padding-bottom:4mm;border-bottom:2.5pt solid #000;text-align:center;font-size:22pt;font-weight:800;line-height:1.4}
  #printSheet .to{margin:0 0 6mm;font-size:13pt}
  #printSheet .sum{width:100%;margin:0 0 8mm;border-collapse:collapse;font-size:11.5pt;line-height:1.6}
  #printSheet .sum th,#printSheet .sum td{padding:2mm 3mm;border:1pt solid #000;vertical-align:top;text-align:left}
  #printSheet .sum th{width:30mm;background:#eee;font-weight:800;white-space:nowrap}
  #printSheet .pbody p{margin:0 0 3mm;text-indent:1em}
  #printSheet .from{margin:10mm 0 0;text-align:right}
  #printSheet .reply{margin-top:12mm;padding:3mm 4mm;border:1.5pt solid #000;border-radius:3mm;page-break-inside:avoid}
  #printSheet .reply .lines{height:34mm;background:repeating-linear-gradient(transparent 0 9mm,#999 9mm calc(9mm + 0.6pt))}
}

/* ===== 21차: 단계 화면 뼈대 정리(기준 앱 「문제 아파트를 구해줘!」 구조) =====
   왼쪽: 그림 · 이번 미션 · 수달 안내줄 / 오른쪽: 노란 머리띠 카드. 자동 확대는 쓰지 않는다. */
.stg{display:grid;grid-template-columns:clamp(280px,27vw,400px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(12px,1.6vw,24px);height:calc(100dvh - 62px);max-width:1500px;width:100%;margin:0 auto;padding:clamp(10px,1.6vh,20px) clamp(12px,2vw,28px);box-sizing:border-box;align-items:stretch}
.lcol{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,16px);min-height:0}
.lcol>*{min-width:0}
.lcol .hero{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9}
.mission{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:var(--sh);overflow:hidden}
.mission .mh{flex:0 0 auto;padding:.35em 1em;background:var(--yellow);border-bottom:var(--bw) solid var(--ink);font-weight:800;font-size:1.05rem}
.mission ul{margin:0;padding:clamp(10px,1.6vh,18px) clamp(12px,1.2vw,18px);list-style:none;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px);overflow:auto}
.mission li{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:1.05rem;line-height:1.5;word-break:keep-all;text-wrap:pretty}
.mission li i{flex:0 0 auto;width:1.35em;height:1.35em;margin-top:.1em;border:2.5px solid var(--ink);border-radius:50%;background:var(--cream)}
.dock2{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:var(--sh)}
.dock2 .portrait.sm{width:clamp(52px,8vh,68px);flex:0 0 auto;box-shadow:3px 3px 0 var(--ink)}
.dock2 .dsay.sm{margin:0;text-align:left;font-weight:700;font-size:1rem;line-height:1.45;word-break:keep-all;text-wrap:pretty}
.stg>.card.main{height:100%;min-height:0;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
.chead{flex:0 0 auto;display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);padding:clamp(8px,1.4vh,14px) clamp(14px,1.6vw,22px);background:var(--yellow);border-bottom:var(--bw) solid var(--ink)}
.chead .no{flex:0 0 auto;display:grid;place-items:center;width:clamp(40px,5.6vh,52px);height:clamp(40px,5.6vh,52px);border:var(--bw) solid var(--ink);border-radius:50%;background:#fff;font-size:1.3rem;font-weight:800;box-shadow:3px 3px 0 var(--ink)}
.chead .tt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.chead h2{margin:0;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.2;font-weight:800}
.chead .sub{padding:.05em .75em;border:2px solid var(--ink);border-radius:99px;background:#fff;font-weight:800;font-size:.9rem}
.chead .pdots{margin-left:auto;display:flex;gap:6px}
.chead .pdots i{width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;background:#fff}
.chead .pdots i.d{background:var(--teal)}.chead .pdots i.c{background:var(--coral);transform:scale(1.25)}
.stg>.card.main>.cbody{flex:1 1 auto;min-height:0;overflow:auto;padding:clamp(12px,2vh,22px) clamp(14px,1.8vw,26px);display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px)}
.cbody .lead{text-align:left;font-weight:700;font-size:1.1rem;line-height:1.6;margin:0}
@media (max-width:900px){
  .stg{display:flex;flex-direction:column;height:auto;padding:12px}
  .lcol{display:contents}
  .lcol .hero{order:1}.stg>.card.main{order:2;height:auto}.mission{order:3;flex:0 0 auto}.dock2{order:4}
  .stg>.card.main>.cbody{overflow:visible}
  .chead .pdots{display:none}
}
.mission .mk{margin:0 clamp(12px,1.2vw,18px) clamp(10px,1.6vh,16px);padding:10px 12px 12px;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--cream)}
.mission .mk b{display:inline-block;margin-bottom:8px;padding:.05em .8em;border:2px solid var(--ink);border-radius:99px;background:var(--yellow);font-size:.9rem;font-weight:800}
.mission .mk ol{margin:0;padding:0;list-style:none;counter-reset:k;display:flex;flex-direction:column;gap:6px}
.mission .mk li{counter-increment:k;display:flex;gap:8px;align-items:center;font-size:1rem;font-weight:700;line-height:1.4}
.mission .mk li::before{content:counter(k);flex:0 0 auto;display:grid;place-items:center;width:1.5em;height:1.5em;border:2px solid var(--ink);border-radius:50%;background:#fff;font-size:.85rem;font-weight:800}
.mission ul{flex:0 0 auto}
.mission{overflow:auto}
/* 3단계: 입력칸이 남는 높이를 나눠 갖는다 */
.cbody:has(#s3o) .fld{flex:1 1 0;min-height:5.5rem;display:flex;flex-direction:column;margin:0}
.cbody:has(#s3o) .fld textarea{flex:1;resize:none;font-size:1.15rem;line-height:1.55}
/* 4단계 첫 판: 카드 높이를 같게 */
.puz:not(.r2) .pl,.puz:not(.r2) .pr{display:grid;grid-auto-rows:1fr}
.puz:not(.r2){align-items:stretch}

/* 22차: 5·6단계 — 남는 공간을 글자와 요소 크기로 채운다 */
.cbody:has(.readbox){justify-content:flex-start}
.cbody .readbox{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,2.4vh,28px) clamp(16px,2vw,32px);font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:2.15}
.cbody .readbox h3{font-size:1.25em;text-align:center;margin-bottom:.6em}
.cbody:has(.belt) .belt{flex:0 0 auto;padding:clamp(20px,3.4vh,40px) clamp(16px,2vw,28px) clamp(70px,10vh,110px)}
.cbody:has(.belt) .belt::after{height:clamp(56px,9vh,96px)}
.cbody:has(.belt) .broken{font-size:clamp(1.3rem,2vw,1.8rem);padding:clamp(14px,2.4vh,26px) clamp(16px,1.8vw,26px)}
.cbody:has(.belt) .parts{flex:1 1 auto;align-content:center;gap:clamp(10px,1.8vh,18px)}
.cbody:has(.belt) .btnpart{font-size:clamp(1.15rem,1.6vw,1.4rem);padding:clamp(14px,2.6vh,28px) 16px;display:flex;align-items:center;justify-content:center}
.cbody:has(.belt) .lead{text-align:center;font-size:clamp(1.1rem,1.5vw,1.3rem)}
.cbody .pens{gap:clamp(10px,1.2vw,18px)}
.cbody .letter{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,2.6vh,30px) clamp(18px,2.2vw,36px);font-size:clamp(1.2rem,1.65vw,1.5rem);line-height:2.2}
.cbody .letter h3{font-size:1.2em;text-align:center;margin-bottom:.5em}
.cbody .pens .pen{font-size:clamp(1.05rem,1.3vw,1.2rem);padding:.45em 1em}
.cbody .letter{flex:1 1 0;min-height:0;overflow:auto;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:2.05}
.cbody .rowbtn{flex:0 0 auto}

/* 23차: 넘침 보정 — 고쳐쓰기 글 상자는 남는 높이 안에서만 크게, 안내는 항상 보이게 */
.cbody .readbox,.cbody .letter{min-height:0;overflow:auto}
.cbody .readbox{flex:1 1 0;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.95}
.cbody .readbox h3{margin-bottom:.3em}
.cbody>*{flex-shrink:0}
.cbody>.readbox,.cbody>.letter{flex-shrink:1}
.cbody>.tip{flex:0 0 auto;margin:0}
.cbody .chk,.cbody .chks{flex:0 0 auto}

/* 24차: 낮은 화면(높이 ≤ 800px)에서는 오른쪽 활동을 더 넓고 촘촘하게 */
@media (max-height:800px) and (min-width:901px){
  .stg{grid-template-columns:clamp(250px,22vw,330px) minmax(0,1fr);gap:clamp(10px,1.2vw,16px)}
  .chead{padding:6px 16px}.chead .no{width:40px;height:40px;font-size:1.1rem}.chead h2{font-size:1.35rem}
  .stg>.card.main>.cbody{padding:10px 16px;gap:8px}
  .cbody .lead{font-size:1rem;line-height:1.5}
  .mission li,.mission .mk li{font-size:.95rem}
  .mission ul{padding:8px 12px;gap:6px}
  .cbody .readbox{font-size:1.05rem;line-height:1.85}
  .cbody:has(.river) .river{min-height:0}
  .puz:not(.r2) .pr .reasoncard,.puz .reasoncard{padding-top:5px;padding-bottom:5px;font-size:.95rem;line-height:1.35}
  .s2pic{max-height:calc(100vh - 230px)}
  .tip{padding:.35em .8em;font-size:.95rem}
  .cbody:has(#s3o) .fld{min-height:4rem}
  .cbody:has(.belt) .belt{padding-top:12px;padding-bottom:62px}
  .cbody:has(.belt) .btnpart{padding:10px 12px;font-size:1.05rem}
}
.cbody>.plan,.cbody>.puz,.cbody>.river,.cbody>.tblwrap,.cbody>.paperwrap{flex-shrink:1;min-height:0}
@media (max-height:800px) and (min-width:901px){
  .s2side .crit{padding:5px 10px}
  .s2side .crits{gap:5px}
  .s2side .verdict{padding:4px 10px;margin:0}
  .s2side{gap:7px}
  .cbody .tip{text-wrap:balance}
}

/* 25차: 이야기 장면 — 장 이름표, 글자 나타나는 대화 블록 */
.vn .chap{position:absolute;left:clamp(14px,3vw,40px);top:clamp(14px,3vh,32px);display:inline-flex;align-items:center;gap:10px;padding:.25em .5em .25em 1.1em;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font-weight:800;font-size:clamp(1rem,1.5vw,1.3rem)}
.vn .chap b{padding:.05em .8em;border-radius:99px;background:#fff;border:2px solid var(--ink);font-size:.8em}
.vn .dlg .dsay{min-height:2.9em;font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.5;text-align:left;margin:0}
.vn .dlg .dtxt{align-items:flex-start}
.vn .dlg{cursor:pointer}
.btn.coral:hover:not(:disabled){background:#ff5f3d;color:#fff}

/* 휴대폰: 안쪽 스크롤 대신 페이지를 길게 */
@media (max-width:900px){
  .cbody .readbox,.cbody .letter{flex:0 0 auto;min-height:auto;overflow:visible;font-size:1.1rem;line-height:1.9}
  .cbody>.plan,.cbody>.puz,.cbody>.river,.cbody>.tblwrap,.cbody>.paperwrap{flex-shrink:0}
  .cbody:has(#s3o) .fld{flex:0 0 auto}
  .cbody:has(#s3o) .fld textarea{min-height:5.5rem}
}

/* 26차: 왼쪽 열 — 미션은 내용만큼, 남는 공간은 큰 수달 안내 블록이 채운다 */
.mission{flex:0 0 auto}
.dock2{flex:1 1 0;min-height:0;flex-direction:column;justify-content:center;gap:clamp(8px,1.6vh,16px);padding:clamp(8px,1.6vh,16px) 14px;text-align:center;overflow:hidden;background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)),url(../images/dockbg.webp?v=1) center bottom/cover no-repeat,var(--mint)}
.dock2 .portrait.sm{width:auto;height:clamp(60px,min(16vh,100%),150px);aspect-ratio:1;box-shadow:4px 4px 0 var(--ink)}
.dock2 .dsay.sm{width:100%;padding:.55em .8em;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff;box-shadow:3px 3px 0 var(--ink);text-align:center;font-size:clamp(1rem,1.25vw,1.15rem);text-wrap:balance}
@media (max-width:900px){.dock2{flex-direction:row;flex:0 0 auto;text-align:left}.dock2 .portrait.sm{height:64px}.dock2 .dsay.sm{text-align:left}}
@media (max-height:899px) and (min-width:901px){
  .dock2{flex:0 0 auto;flex-direction:row;text-align:left;padding:8px 14px 8px 8px;background:var(--paper)}
  .dock2 .portrait.sm{width:clamp(52px,8vh,68px);height:auto}
  .dock2 .dsay.sm{width:auto;border:0;box-shadow:none;padding:0;background:none;text-align:left}
}

/* 27차: 증서 화면 — 큰 축하 그림 + 증서 + 단추 */
.endwrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);max-width:1360px;height:calc(100dvh - 62px);align-items:stretch;padding:clamp(10px,1.6vh,22px) clamp(12px,2vw,28px);box-sizing:border-box}
.endside{order:-1;min-height:0;gap:clamp(8px,1.4vh,14px)}
.endside .endpic{flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto;object-position:50% 40%}
.endside .endtip{flex:0 0 auto;margin:0}
.endside .rowbtn{flex:0 0 auto;justify-content:center}
.cert{display:flex;flex-direction:column;justify-content:center;align-self:stretch;min-height:0}
.cert h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.cert .certcrown{width:clamp(80px,14vh,120px);height:clamp(80px,14vh,120px)}
.cinfo{grid-template-columns:auto 1fr;max-width:480px;font-size:1.1rem;gap:8px 18px}
@media (max-width:900px){.endwrap{display:flex;flex-direction:column;height:auto}.endside{order:0}.endside .endpic{flex:0 0 auto;aspect-ratio:16/9}}
@media (min-width:901px){
  .lcol .hero{flex:1 1 auto;aspect-ratio:auto;min-height:clamp(120px,22vh,200px)}
  .lcol .hero img{height:100%;object-fit:cover}
}

/* 28차: 표지 시작 블록 */
.coverfull::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(42,33,29,.5));pointer-events:none}
.cover-start{z-index:2;bottom:clamp(14px,4vh,40px)}
.cover-card{display:inline-flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,14px);padding:clamp(12px,2vh,20px) clamp(20px,3vw,44px);border:var(--bw) solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:var(--sh);max-width:min(92vw,720px)}
.cover-info{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cover-info span{padding:.1em .9em;border:2px solid var(--ink);border-radius:99px;background:var(--cream);font-weight:800;font-size:clamp(.85rem,1.1vw,1rem)}
.cover-info span:first-child{background:var(--yellow)}
.cover-card .btn{animation:bob 1.8s ease-in-out infinite;white-space:nowrap}
.cover-hint{margin:0;font-weight:700;font-size:clamp(.9rem,1.2vw,1.05rem);text-wrap:balance;word-break:keep-all;text-align:center}
@media (prefers-reduced-motion:reduce){.cover-card .btn{animation:none}}
@media (min-width:701px){
  .cover-start{left:auto;right:clamp(16px,3vw,48px);text-align:right}
  .cover-card{max-width:min(46vw,560px)}
}
@media (max-width:700px){
  .coverfull{background:linear-gradient(#bfe3ff 0,#fdf0e4 60%)}
  .coverfull>img.fill{object-fit:contain;object-position:50% 6%;height:auto;aspect-ratio:16/9;top:8px;bottom:auto}
  .coverfull::after{display:none}
  .cover-start{bottom:clamp(14px,4vh,32px)}
}
@media (max-width:700px){
  .coverfull{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(16px,4vh,36px);padding:8px 0 24px}
  .coverfull>img.fill{position:static;width:100%;top:auto}
  .cover-start{position:static;text-align:center;right:auto}
}

/* 29차: 휴대폰 지도 — 일곱 곳 카드 목록 · 증서 단추 정돈 */
.stagelist{display:none}
@media (max-width:900px){
  .mapwrap{height:auto;padding-bottom:20px}
  .stagelist{display:flex;flex-direction:column;gap:10px;list-style:none;margin:12px auto 0;padding:0 12px;width:100%;max-width:560px;box-sizing:border-box}
  .sli{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:10px;width:100%;padding:6px 12px 6px 6px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);text-align:left;cursor:pointer;position:relative}
  .sli img{width:84px;height:56px;object-fit:cover;border-radius:8px;border:2px solid var(--ink);display:block}
  .sli .sno{position:absolute;left:0;top:0;width:26px;height:26px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font-weight:800;font-size:.9rem;transform:translate(-30%,-30%)}
  .sli .stx{display:flex;flex-direction:column;min-width:0}
  .sli .stx b{font-size:1.05rem;line-height:1.3}
  .sli .stx small{font-size:.85rem;font-weight:700;color:var(--muted)}
  .sli .sst em{font-style:normal;font-weight:800;font-size:.8rem;padding:.1em .7em;border:2px solid var(--ink);border-radius:99px;background:var(--coral);color:#fff;white-space:nowrap}
  .sli .sst em.lk{background:#efe6dc;color:var(--muted)}
  .sli.now{background:var(--cream);box-shadow:3px 3px 0 var(--coral)}
  .sli.done{background:var(--mint)}
  .sli.lock{opacity:.55;cursor:not-allowed;box-shadow:none}
  .sli.lock img{filter:grayscale(.8)}
  .sli .stars .st{width:20px;height:20px}
  .mapstage .node{pointer-events:none}
  .endside .rowbtn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .endside .rowbtn .btn{width:100%;white-space:normal;padding:.6em .5em;text-align:center}
}

/* 30차: 모아의 말 — 어느 화면 높이에서도 잘리지 않고 크게 보이는 가로 배치 */
.dock2,.dock2:is(*){flex:0 0 auto!important;flex-direction:row!important;align-items:center;gap:12px;padding:10px 12px 10px 10px;text-align:left!important;overflow:visible;background:var(--mint)!important;background-image:url(../images/dockbg.webp?v=1)!important;background-size:cover!important;background-position:center bottom!important}
.dock2 .portrait.sm{flex:0 0 auto;width:clamp(60px,9vh,84px)!important;height:auto!important;aspect-ratio:1;box-shadow:3px 3px 0 var(--ink)}
.dock2 .dsay.sm{flex:1 1 auto;min-width:0;width:auto!important;margin:0;padding:.65em .9em!important;border:var(--bw) solid var(--ink)!important;border-radius:12px;background:#fff!important;box-shadow:3px 3px 0 var(--ink)!important;text-align:left!important;font-size:clamp(1.05rem,1.3vw,1.25rem)!important;line-height:1.5;font-weight:700;color:#2a211d;text-wrap:balance;word-break:keep-all;position:relative}
.dock2 .dsay.sm::before{content:"모아";position:absolute;left:10px;top:0;transform:translateY(-62%);padding:0 .7em;border:2px solid var(--ink);border-radius:99px;background:var(--yellow);font-size:.78rem;font-weight:800;line-height:1.5}
.dock2 .dsay.sm{margin-top:.5em}
@media (max-width:900px){.dock2 .portrait.sm{width:60px!important}}
@media (min-width:901px){
  .lcol .hero{flex:0 0 auto;aspect-ratio:3/2;min-height:0}
  .lcol .hero img{object-position:60% 50%}
  .mission{flex:1 1 auto;min-height:0}
}

/* 31차: 가운데 점(·)은 글자 중앙 높이로 올림 */
.mdot{font-style:normal;position:relative;top:-.12em;margin:0 .1em}

/* 표지: 단추만 */
.coverfull::after{height:26%}
.cover-start{left:0;right:0;text-align:center}
.cover-btn{font-size:clamp(1.2rem,2.2vw,1.8rem);padding:.7em 2.2em;animation:bob 1.8s ease-in-out infinite;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.cover-btn{animation:none}}
@media (max-width:700px){.cover-start{position:static}}

/* 이번 미션: 카드 아래에 한 줄씩 */
.goals{flex:0 0 auto;list-style:none;margin:0;padding:clamp(8px,1.4vh,14px) clamp(14px,1.8vw,26px);display:flex;flex-direction:column;gap:6px;border-top:var(--bw) solid var(--ink);background:var(--cream)}
.goals li{display:flex;gap:10px;align-items:center;font-weight:800;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.4;word-break:keep-all}
.goals li i{flex:0 0 auto;width:1.2em;height:1.2em;border:2.5px solid var(--ink);border-radius:50%;background:#fff}
@media (min-width:901px){
  .lcol .hero{flex:0 0 auto;aspect-ratio:16/10}
  .mission{flex:0 0 auto}
  .mission:not(:has(.mk)){display:none}
  .dock2{flex:1 1 0!important;min-height:0;flex-direction:column!important;justify-content:flex-end;text-align:center!important}
  .dock2 .portrait.sm{flex:1 1 0;min-height:0;width:100%!important;height:auto!important;aspect-ratio:auto;border:0;box-shadow:none;background:transparent;display:grid;place-items:end center}
  .dock2 .portrait.sm .sprite{width:auto;height:100%;max-width:100%;object-fit:contain}
  .dock2 .dsay.sm{flex:0 0 auto;width:100%!important;text-align:center!important}
}
@media (min-width:901px) and (max-height:800px){.dock2 .portrait.sm{min-height:70px}}

/* 장면 이름표가 잘리지 않게 */
.case:has(+.river){overflow:visible;margin-top:clamp(18px,3vh,28px)}

/* 32차: 겹침 방지 — 하단 미션을 낮은 화면에서 촘촘하게, 심사 질문은 줄을 고르게 */
@media (min-width:901px) and (max-height:800px){
  .goals{padding:6px 16px;gap:2px}
  .goals li{font-size:.95rem}
  .s2pic{max-height:calc(100vh - 330px)}
  .stg>.card.main>.cbody{padding:8px 16px}
}
.s2side .crit .q{text-wrap:balance;word-break:keep-all}
.mission .mk{margin-top:12px}
.mission .mk li{white-space:normal}
.case,.cbody .lead{overflow-wrap:break-word}

/* 34차: 장면 문장 블록과 강 블록의 높이를 고정 — 문제마다 크기가 변하지 않게 */
.case:has(+.river){height:clamp(104px,17vh,140px);min-height:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding-top:1.1em;padding-bottom:.6em}
.cbody:has(.river) .river{flex:1 1 0;min-height:0;height:auto}

/* 35차: 모아 표정 바꾸기 */
.dock2 .sprite{transition:transform .2s}
.dock2 .sprite.moodok{animation:hop .5s ease 2}
.dock2 .sprite.moodno{animation:shake .4s ease 2}
@keyframes hop{50%{transform:translateY(-10px)}}

/* 2단계: 그림은 작게, 오른쪽 심사 블록은 번호 카드로 — 한 화면에 */
.s2grid{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(12px,1.6vw,22px);align-items:center;flex:1 1 auto;min-height:0}
.s2pic{max-height:calc(100dvh - 300px);box-shadow:4px 4px 0 var(--ink)}
.s2side{gap:clamp(6px,1.1vh,12px);justify-content:center}
.s2side h3{display:inline-block;align-self:center;margin:0;padding:.1em 1em;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--yellow);box-shadow:3px 3px 0 var(--ink);font-size:clamp(1.15rem,1.7vw,1.5rem)}
.s2side .case{margin:0;padding:.7em 1em;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.5;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--cream);box-shadow:3px 3px 0 var(--ink)}
.s2side .crits{counter-reset:cr}
.s2side .crit{counter-increment:cr;position:relative;flex-direction:row;align-items:center;gap:10px;padding:clamp(6px,1.1vh,10px) 12px clamp(6px,1.1vh,10px) 46px;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.s2side .crit::before{content:counter(cr);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font-weight:800;font-size:.9rem}
.s2side .crit .q{flex:1;text-align:left;font-size:clamp(1rem,1.25vw,1.15rem);font-weight:800;line-height:1.35;text-wrap:balance}
.s2side .yb{min-width:5.2em;padding:.35em .8em;border-width:3px;font-size:1rem}
.s2side .yb.on{background:var(--teal);color:#fff;border-color:var(--ink)}
.s2side .crit.bad{background:#ffeceb}
.s2side .rowbtn{margin:0}
.s2side .rowbtn .btn{padding:.5em 2em}

/* 36차: 2단계 — 맨 위 한 줄 요약, 아래 왼쪽 그림 · 오른쪽 세 기준 */
.s2top{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap;padding:8px 14px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--cream);box-shadow:3px 3px 0 var(--ink)}
.s2top .pno2{flex:0 0 auto;padding:.1em .8em;border:2px solid var(--ink);border-radius:99px;background:#fff;font-weight:800;font-size:.9rem}
.s2top h3{flex:0 0 auto;margin:0;padding:.1em .9em;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--yellow);font-size:clamp(1.05rem,1.5vw,1.3rem);white-space:nowrap}
.s2top .case{margin:0;padding:0;border:0;background:none;box-shadow:none;height:auto;display:block;font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1.4;font-weight:700;text-align:left;text-wrap:balance}
.s2top .case::before{display:none}
.s2grid{align-items:stretch}
.s2side{justify-content:center}
.s2pic{align-self:center;max-height:calc(100dvh - 330px)}
@media (max-width:900px){.s2top{flex-wrap:wrap}}
/* 상단 바 단추 모양 동일 */
#sndBtn[aria-pressed=false]{background:#efe6dc;color:var(--muted)}
/* 심사 결과는 팝업으로 */
.pophint{margin:0 0 12px;text-align:center;font-weight:700;font-size:1.1rem;line-height:1.6;text-wrap:balance;word-break:keep-all}
.vpop{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:12px}
.vpop p{margin:0;text-align:center;font-weight:700;font-size:1.1rem;line-height:1.6;text-wrap:balance;word-break:keep-all;max-width:28em}
.mbtns{justify-content:center}
.vpop p,.pophint,.mbody .vpop p{text-wrap:pretty!important;max-width:36em!important}
.mbox:has(.vpop),.mbox:has(.pophint){width:fit-content;max-width:min(94vw,640px)}

/* 37차: 3단계 결정 표 — 스크롤 없이, 번호 있는 카드형 행 */
.cbody .tblwrap{overflow:visible;flex:0 0 auto}
.tbl{border-spacing:0 6px;border:0;background:transparent;border-radius:0;overflow:visible}
.tbl thead th{background:var(--sky);border:var(--bw) solid var(--ink);border-left:0;border-right:0;padding:6px 8px;font-size:.95rem}
.tbl thead th:first-child{border-left:var(--bw) solid var(--ink);border-radius:12px 0 0 12px}
.tbl thead th:last-child{border-right:var(--bw) solid var(--ink);border-radius:0 12px 12px 0}
.tbl tbody th,.tbl tbody td{background:#fff;border:var(--bw) solid var(--ink);border-left:0;border-right:0;padding:6px 10px;border-bottom-width:var(--bw)}
.tbl tbody th:first-child{border-left:var(--bw) solid var(--ink);border-radius:12px 0 0 12px;min-width:0;width:40%}
.tbl tbody td:last-child{border-right:var(--bw) solid var(--ink);border-radius:0 12px 12px 0}
.tbl tbody th b{display:inline-block;margin-bottom:2px;padding:.02em .7em;border:2px solid var(--ink);border-radius:99px;background:var(--yellow);font-size:.88rem}
.tbl tbody tr:nth-child(2) th b{background:var(--mint)}.tbl tbody tr:nth-child(3) th b{background:var(--pink)}.tbl tbody tr:nth-child(4) th b{background:var(--lav)}
.tbl tbody th span{font-size:1rem;line-height:1.35;word-break:keep-all}
.tbl tr.sel th,.tbl tr.sel td{background:var(--cream)}
.ck{width:30px;height:30px}.ck.on::after{left:8px;top:2px;width:8px;height:15px}
.tbl .rd{min-width:4.6em}
@media (max-width:900px){.cbody .tblwrap{overflow-x:auto}}
/* 주제 고르기 화면: 단추 가운데 */
.cbody:has(.topics) .rowbtn{justify-content:center}
.cbody:has(.topics) .lead{text-align:center}

/* 38차: 스크롤해도 단계 이름표와 표 제목 줄이 위에 고정 */
.cbody>.phases{position:sticky;top:0;z-index:5;margin:0;padding:4px 0 6px;background:var(--paper)}
.tbl thead th{position:sticky;top:46px;z-index:4;background:var(--sky)}
.stg>.card.main>.cbody{scroll-padding-top:100px}
.tbl tr:first-child th{position:sticky;top:46px;z-index:4;background:var(--sky);border:var(--bw) solid var(--ink);border-left:0;border-right:0;padding:6px 8px}
.tbl tr:first-child th:first-child{border-left:var(--bw) solid var(--ink);border-radius:12px 0 0 12px}
.tbl tr:first-child th:last-child{border-right:var(--bw) solid var(--ink);border-radius:0 12px 12px 0}
/* 낮은 화면: 모아는 가로 배치(겹침 방지) */
@media (min-width:901px) and (max-height:820px){
  .dock2{flex:0 0 auto!important;flex-direction:row!important;text-align:left!important;justify-content:flex-start}
  .dock2 .portrait.sm{flex:0 0 auto;width:clamp(64px,10vh,84px)!important;height:auto!important;min-height:0;aspect-ratio:1;border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--cream)}
  .dock2 .portrait.sm .sprite{width:90%;height:auto;max-height:100%}
  .dock2 .dsay.sm{flex:1 1 auto;width:auto!important;text-align:left!important}
  .lcol{overflow:hidden}
}

/* 39차: 표 구분선 · 만족 단추 한 줄 · 안내문 줄바꿈 · 4단계 방법 상자 겹침 해결 */
#say,.dsay{white-space:pre-line}
.cbody .lead{text-wrap:pretty;word-break:keep-all}
.tbl tbody td+td,.tbl tbody th+td{border-left:1.5px solid var(--line)}
.tbl tr:first-child th+th{border-left:1.5px solid rgba(42,33,29,.18)}
.tbl .rd{white-space:nowrap;min-width:5.6em;padding:.3em .8em}
.tbl tbody td:last-child{width:1%;white-space:nowrap}
.puz.r2 .pr{display:flex;flex-direction:column;gap:8px;min-height:0}
.puz.r2 .bin{flex:1 1 auto;min-height:min-content;overflow:visible}
.puz.r2 .bin .ex{display:block}
.puz.r2{align-items:start}
@media (min-width:901px) and (max-height:820px){
  .dock2{gap:8px;padding:8px 10px 8px 8px}
  .dock2 .portrait.sm{width:clamp(52px,8vh,64px)!important}
  .dock2 .dsay.sm{font-size:clamp(.92rem,1.05vw,1.02rem)!important;padding:.55em .6em!important;text-wrap:pretty;line-height:1.45}
}

/* 40차: 네모 빈칸 · 톱니바퀴 */
.blank4{display:inline-block;width:2.4em;height:1.2em;margin:0 .25em;vertical-align:-.2em;border:3px solid var(--ink);border-radius:6px;background:#fff;box-shadow:inset 2px 2px 0 rgba(42,33,29,.12)}
.cbody:has(.belt) .belt{position:relative}
.cbody:has(.belt) .gear{width:clamp(64px,10vh,92px);height:clamp(64px,10vh,92px);filter:drop-shadow(3px 4px 0 rgba(42,33,29,.45));animation:spin 6s linear infinite;flex:0 0 auto}
.cbody:has(.belt) .gear::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85) 0 55%,transparent 56%);z-index:-1}
.cbody:has(.belt) .belt:has(.broken.shake) .gear{animation-duration:1s}
@media (prefers-reduced-motion:reduce){.cbody:has(.belt) .gear{animation:none}}

/* 41차: 7단계 글쓰기 화면 */
.write{display:grid;grid-template-columns:clamp(190px,22%,260px) minmax(0,1fr);gap:clamp(10px,1.4vw,18px);align-items:stretch;flex:1 1 auto;min-height:0}
.write .sticky{position:static;margin:0;padding:10px 12px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--cream);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;gap:8px;overflow:auto}
.write .sticky>b{align-self:flex-start;padding:.05em .9em;border:2px solid var(--ink);border-radius:99px;background:var(--yellow);font-size:.95rem}
.write .sticky p{margin:0;padding:6px 8px;border-radius:8px;background:#fff;border:2px solid var(--line);font-size:.95rem;line-height:1.4;font-weight:700;word-break:keep-all}
.write .sticky p em{display:block;font-style:normal;font-size:.8rem;font-weight:800;color:var(--muted);margin-bottom:1px}
.write .sticky p:nth-of-type(1){border-color:#f0c4b8}.write .sticky p:nth-of-type(2){border-color:#b9e3d9}.write .sticky p:nth-of-type(3){border-color:#bcd9f2}.write .sticky p:nth-of-type(4){border-color:#cfd3f7}
.write .paperwrap{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.write .paper{flex:1 1 auto;min-height:6rem;font-size:clamp(1.05rem,1.4vw,1.25rem)}
.write .ti{font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:800}
.write .helper{gap:6px}
.write .helper>*{font-size:.92rem}
.cbody>.rowbtn{flex-wrap:wrap;justify-content:center;gap:8px}
@media (max-width:900px){.write{grid-template-columns:1fr}.write .sticky{flex-direction:row;flex-wrap:wrap}.write .sticky p{flex:1 1 40%}}

/* 42차: 글자 크기를 기준 앱 수준으로 키움(가독성) */
html{font-size:clamp(14px,min(.5vw + 10.4px,2.05vh + 2.4px),23px)}
body{font-size:1.08rem}
.cbody .lead{font-size:1.15rem;font-weight:700;line-height:1.55}
.mission li,.goals li{font-size:1.02rem}
.pophint{white-space:pre-line}
.vpop p{white-space:pre-line}
.pophint b{color:var(--coral)}
.tip{display:none!important}
.pophint{white-space:pre-line}

/* 고쳐쓰기: 쓴 글이 한눈에 보이게 */
.cbody:has(.readbox){justify-content:flex-start}
.cbody .readbox{flex:1 1 auto;min-height:0;overflow:auto;max-height:none;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.9}
.mbody .checks{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.mbox:has(.checks){width:min(94vw,560px)}
.endtip{white-space:pre-line}

/* 톱니바퀴: 새 그림 */
.cbody:has(.belt) .gear{background:url(../images/gear2.webp?v=1) center/contain no-repeat!important;border:0}
.cbody:has(.belt) .gear::before{display:none}

/* 7단계 '내 계획': 가로 한 줄 · 세로선 구분 · 마우스를 올리면 전체 */
.write{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
.write .sticky{flex-direction:row;align-items:stretch;gap:0;padding:0;overflow:hidden;max-height:3.4em}
.write .sticky>b{flex:0 0 auto;align-self:center;margin:0 10px}
.write .sticky p{flex:1 1 0;min-width:0;margin:0;border:0;border-left:2px solid var(--line);border-radius:0;background:transparent;padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.write .sticky p em{display:inline;margin-right:6px}
.write .sticky:hover,.write .sticky:focus-within{max-height:none;overflow:visible;position:relative;z-index:6;background:var(--cream)}
.write .sticky:hover p{white-space:normal;overflow:visible;text-overflow:clip}

/* 장면 문장 줄바꿈 · 드래그 모양 */
.case{white-space:pre-line}
body.isdrag .stone:not(.ghost){opacity:.55}
.stone.ghost{opacity:1;transform:rotate(-3deg) scale(1.12);filter:drop-shadow(8px 14px 0 rgba(42,33,29,.4)) brightness(1.05)!important;cursor:grabbing}
.slot.over,.slotdrop.over{background:var(--yellow)!important;border-color:var(--coral)!important;transform:scale(1.04);box-shadow:0 0 0 4px rgba(255,122,92,.4)!important;transition:transform .12s}
.stone.dragging{opacity:.25;filter:grayscale(.6)}
.dropok{background:var(--yellow)!important;outline:4px solid var(--coral)!important;outline-offset:2px;transform:scale(1.03);transition:transform .12s}
.slot.dropok b{background:var(--coral);color:#fff}
/* 6단계: 긴 문장도 잘리지 않게 */
.cbody:has(.belt) .belt{padding-bottom:clamp(76px,11vh,118px)}
.cbody:has(.belt) .broken{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.5}

/* 증서: 생성한 액자 배경 */
.cert{background:#fffdf1 url(../images/certbg.webp?v=1) center/100% 100% no-repeat;outline:0;border:0;box-shadow:6px 6px 0 var(--ink);padding:clamp(40px,7vh,72px) clamp(40px,6vw,80px)}
.cert .certcrown{width:clamp(64px,11vh,96px);height:clamp(64px,11vh,96px)}

/* 수달은 공간에 맞춰 줄어든다(잘리지 않게) */
.dock2 .portrait.sm{overflow:hidden;min-height:0;display:grid;place-items:end center}
.dock2 .portrait.sm .sprite{width:auto!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain}
.dock2{min-height:0}
@media (min-width:901px){.dock2 .portrait.sm{max-height:100%}}
@media (max-width:900px){.dock2 .portrait.sm{width:56px!important;height:56px!important;aspect-ratio:1}}
.brandlink{display:inline-flex;align-items:center;flex:0 0 auto;border-radius:10px}.brandlink:hover{filter:brightness(1.06);transform:translateY(-1px)}.brandlink:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

/* 7단계 계획: 칸 높이는 내용 기준(대상 칩이 잘리지 않게), 모자라면 활동 블록 안에서만 스크롤 */
@media (min-width:701px){
  .cbody>.plan,.plan{grid-template-rows:auto auto;grid-auto-rows:auto;align-content:start;flex:0 0 auto}
  .plan .fld{overflow:visible}
  .cbody>.plan{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}
  .plan .fld textarea{min-height:4em;height:4.2em;flex:1 1 0}
  .plan .fld input{min-height:2.3em}
  .plan .fld .chiprow{padding:4px 8px 8px;gap:4px}
  .plan .fld .chip{font-size:.78rem;padding:.06em .5em;white-space:nowrap}
}

/* 상단 바: 좁은 화면(1280 안팎)에서 겹치지 않게 지도 글자를 접는다 */
@media (min-width:901px) and (max-width:1340px){
  .steps .step[data-act=map] .sn{display:none}
  .steps .step[data-act=map]{padding:0 6px}
  .steps{gap:6px}
}

/* 낮은 화면(높이 820px 이하): 3·4단계가 한 화면에 들어오게 줄인다 */
@media (min-width:901px) and (max-height:820px){
  /* 4단계 2부: 카드는 위에 3열, 방법 상자는 아래에 3열 */
  .puz.r2{display:flex;flex-direction:column;gap:8px}
  .puz.r2 .pl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .puz.r2 .pr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
  .puz.r2 .reasoncard{padding:5px 8px 5px 40px;font-size:.92rem;line-height:1.35}
  .puz.r2 .bin{padding:6px 10px;gap:3px;height:auto;min-height:0}
  .puz.r2 .bin .in{font-size:.8rem;padding:2px 6px;margin:0;line-height:1.3}
  .puz.r2 .bin .ex{font-size:.78rem}
  /* 3단계 3부: 표의 한 행을 한 줄로 */
  .tbl{border-spacing:0 4px}
  .tbl tbody th,.tbl tbody td{padding:3px 8px}
  .tbl tbody th:first-child{width:50%}
  .tbl tbody th b{margin:0 8px 0 0;font-size:.8rem}
  .tbl tbody th span{font-size:.92rem;line-height:1.3}
  .tbl .rd{padding:.12em .7em;font-size:.9rem}
  .cbody .basis{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
  .cbody .basis>b{margin:0}
  .cbody .basis .chiprow{margin:0}
}

/* 이름 입력: 가운데 아래에 알맞은 너비로, 입력칸과 단추를 한 줄에 */
.vn .dlg:has(#nameIn){left:50%;right:auto;width:min(720px,calc(100% - 28px));transform:translateX(-50%);grid-template-columns:auto 1fr;cursor:default;bottom:clamp(18px,6vh,60px)}
.vn .dlg:has(#nameIn) .dsay{min-height:0;font-size:clamp(1.15rem,1.7vw,1.45rem);text-align:left}
.vn .dlg:has(#nameIn) .dtxt{gap:10px;align-items:stretch}
.nameRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nameRow .input{flex:1 1 12em;max-width:none;min-width:0;height:48px;padding:0 .9em;font-size:1.3rem;font-weight:700;border-radius:10px;background:#fff;box-shadow:inset 3px 3px 0 rgba(42,33,29,.08)}
.nameRow .input::placeholder{color:#8a7b6c;font-weight:600}
.nameRow .btn,.nameRow .btn.big{flex:0 0 auto;height:48px;padding:0 1.4em;font-size:1.05rem;white-space:nowrap}

/* 아래 목표 줄: 가로로 놓고, 체크가 든 동그라미로 */
.goals{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:8px 14px;padding:clamp(8px,1.3vh,12px) clamp(12px,1.6vw,22px)}
.goals li{flex:1 1 0;min-width:13em;justify-content:flex-start;gap:9px;padding:.35em .9em .35em .5em;border:2px solid rgba(42,33,29,.22);border-radius:99px;background:#fffdf4;font-size:clamp(.92rem,1.15vw,1.05rem);line-height:1.3;text-wrap:balance}
.goals li i{position:relative;width:1.7em;height:1.7em;border:2.5px solid var(--ink);border-radius:50%;background:var(--mint,#d8f3ec);box-shadow:2px 2px 0 var(--ink)}
.goals li i::after{content:"";position:absolute;left:34%;top:16%;width:24%;height:46%;border:solid var(--ink);border-width:0 3px 3px 0;border-radius:1px;transform:rotate(42deg);opacity:.35}
.goals.all li{background:#fff7cc;border-color:var(--ink)}
.goals.all li i{background:var(--teal,#2aa89a)}
.goals.all li i::after{border-color:#fff;opacity:1}
@media (max-width:700px){.goals li{flex:1 1 100%}}

/* 1단계 팝업: 토의 순서 안내 · 정답 해설 */
.mbox.guidebox{width:min(94vw,680px)}
.guide4{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.guide4 li{display:flex;align-items:center;gap:12px;padding:8px 14px;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.guide4 li:nth-child(1){background:#ffe3dc}.guide4 li:nth-child(2){background:#d8f3ec}.guide4 li:nth-child(3){background:#dcefff}.guide4 li:nth-child(4){background:#e6e8ff}
.guide4 .gn{flex:0 0 auto;display:grid;place-items:center;width:2em;height:2em;border:var(--bw) solid var(--ink);border-radius:50%;background:var(--yellow);font-weight:800}
.guide4 strong{display:block;font-size:1.05rem;font-weight:800}
.guide4 span{display:block;font-size:.95rem;font-weight:600;line-height:1.5;white-space:pre-line;word-break:keep-all}
.guidenote{margin:0 0 12px;text-align:center;font-weight:700;color:#5a4a3a;font-size:.98rem}
.stbadge{display:inline-block;padding:.1em 1em;border:2px solid var(--ink);border-radius:99px;background:var(--yellow);font-weight:800;font-size:.95rem}
@media (max-height:760px){.guide4{gap:6px}.guide4 li{padding:5px 12px}.guide4 span{font-size:.9rem;line-height:1.4}.guidenote{margin-bottom:8px}}

/* 정답 해설: 두 줄이 되도록 팝업을 넓힌다 */
.mbox.expbox{width:min(94vw,720px);max-width:none}
.mbox.expbox .vpop p{max-width:none!important;text-wrap:balance!important}

/* 2~6단계 해설 팝업 */
.mbox.expbox .vpop{width:100%;gap:10px;margin-bottom:10px}
.mbox.expbox .vpop p{font-size:1.06rem;line-height:1.6}
.pairs{display:flex;flex-direction:column;gap:6px;width:100%}
.pairrow{display:flex;align-items:center;gap:12px;padding:6px 12px 6px 6px;border:2px solid var(--ink);border-radius:12px;background:var(--pc,#fff);text-align:left}
.pairrow b{flex:0 0 6.4em;padding:.15em .4em;border:2px solid var(--ink);border-radius:99px;background:#fff;font-size:.82rem;font-weight:800;text-align:center;white-space:nowrap}
.pairrow span{flex:1 1 auto;font-weight:700;font-size:.98rem;line-height:1.45;word-break:keep-all;text-wrap:pretty}
.crichips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.crichip{padding:.15em .8em;border:2px solid var(--ink);border-radius:99px;font-weight:700;font-size:.88rem;background:#d8f3ec}
.crichip.no{background:#ffe3dc}
.crichip::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.45em;border-radius:50%;background:var(--ink);vertical-align:.05em}
.crichip.no::before{border-radius:2px;transform:rotate(45deg)}
@media (max-height:760px){.mbox.expbox .vpop{gap:6px}.pairrow{padding:4px 10px 4px 4px}.mbox.expbox .vpop p{font-size:1rem;line-height:1.5}}

/* 5단계 질문 상자: 제목과 선택지를 한 줄에, 선택지는 형광펜 색으로 */
.qbox{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:12px;padding:10px 16px;border:var(--bw) solid var(--ink);border-radius:12px;background:#fffdf4;box-shadow:4px 4px 0 var(--ink)}
.qbox>b{flex:0 0 auto;font-size:1.1rem;font-weight:800}
.qbox .chiprow{flex:1 1 auto;justify-content:flex-end;margin:0;gap:10px}
.qbox .chip{padding:.3em 1.1em;border:var(--bw) solid var(--ink);font-size:1rem;font-weight:800;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.qbox .chip[data-k=prob]{background:#fff3b0}.qbox .chip[data-k=sug]{background:#d3f2cd}.qbox .chip[data-k=rea]{background:#d3e9ff}
.qbox .chip:hover:not(:disabled){transform:translateY(-2px);box-shadow:3px 5px 0 var(--ink)}
.qbox .chip:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.qbox .chip.on{outline:3px solid var(--coral);outline-offset:2px}
.qbox .chip:disabled{opacity:.6;box-shadow:none}
@media (max-width:700px){.qbox .chiprow{justify-content:center}}

/* 고쳐쓰기 글 상자: 넘쳐도 제목이 잘리지 않게(안전한 가운데 정렬), 글자는 자동으로 줄어든다 */
.cbody .readbox{justify-content:flex-start}
.cbody .readbox>:first-child{margin-top:auto}
.cbody .readbox>:last-child{margin-bottom:auto}
.cbody .readbox h3{flex:0 0 auto}

/* 5단계: 이유 퍼즐은 한 줄씩 아래로 3개, 글은 모두 보이게 */
.qbox:has(.fills){flex-direction:column;align-items:stretch;gap:8px;padding:8px 14px 12px}
.fills{display:flex;flex-direction:column;gap:7px;margin:0}
.fills .reasoncard{height:auto;min-height:0;padding-top:6px;padding-bottom:6px;font-size:1rem;line-height:1.4;white-space:nowrap}
@media (max-width:900px){.fills .reasoncard{white-space:normal}}
.cbody .letter{justify-content:flex-start}
.cbody .letter>:first-child{margin-top:auto}.cbody .letter>:last-child{margin-bottom:auto}

@media (min-width:901px) and (max-height:820px){
  .cbody:has(.fills) .lead{display:none}
  .cbody:has(.fills) .qbox{margin-top:0;padding:6px 14px;gap:6px 14px}
  .cbody:has(.fills) .qbox .chip{padding:.12em .9em;font-size:.92rem;box-shadow:2px 2px 0 var(--ink)}
  .qbox:has(.fills){padding:6px 14px 10px;gap:6px}
  .fills{gap:5px}
  .fills .reasoncard{padding-top:3px;padding-bottom:3px;font-size:.95rem}
}

/* 6단계: 고장 난 문장 판 + 번호 붙은 부품 */
.cbody:has(.belt) .broken{position:relative;text-align:center;border:var(--bw) solid #d93a3a;background:repeating-linear-gradient(135deg,#fff4f1 0 14px,#ffeae5 14px 28px);box-shadow:3px 3px 0 rgba(42,33,29,.85)}
.cbody:has(.belt) .broken::before{content:"고장 난 문장";position:absolute;left:14px;top:0;transform:translateY(-58%);padding:.02em .9em;border:2px solid var(--ink);border-radius:99px;background:#ff7a5c;color:#fff;font-size:.78rem;font-weight:800;line-height:1.6;letter-spacing:0}
.cbody:has(.belt) .belt{padding-top:clamp(26px,4vh,44px)}
.cbody:has(.belt) .parts{counter-reset:pt;align-content:start}
.cbody:has(.belt) .btnpart{counter-increment:pt;position:relative;padding-left:3.4em;padding-right:1em;background:#e2f6ef;box-shadow:4px 4px 0 var(--ink);text-align:center}
.cbody:has(.belt) .btnpart::before{content:counter(pt);position:absolute;left:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:1.9em;height:1.9em;border:2px solid var(--ink);border-radius:50%;background:#fff;font-size:.9rem;font-weight:800;line-height:1}
.cbody:has(.belt) .btnpart:hover{background:#c8efe4;transform:translateY(-3px);box-shadow:4px 7px 0 var(--ink)}
.cbody:has(.belt) .btnpart:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.cbody:has(.belt) .btnpart:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
@media (max-width:900px){.cbody:has(.belt) .btnpart{padding-left:3em}}

/* 6단계 부품: 한 줄씩 아래로 3개, 글씨는 작게 */
.cbody:has(.belt) .parts{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,12px);flex:0 0 auto}
.cbody:has(.belt) .btnpart{display:flex;align-items:center;justify-content:center;padding:clamp(8px,1.4vh,13px) 1em clamp(8px,1.4vh,13px) 3.4em;font-size:clamp(.95rem,1.25vw,1.1rem);line-height:1.4;white-space:nowrap}
@media (max-width:900px){.cbody:has(.belt) .btnpart{white-space:normal}}
@media (min-width:901px) and (max-height:740px){.cbody:has(.belt) .btnpart{padding-top:6px;padding-bottom:6px}.cbody:has(.belt) .parts{gap:7px}}

/* 7단계 계획: 하나의 긴 블록, 네 줄이 가로로 온전히 보이게 */
.planrows{display:flex;flex-direction:column;flex:0 0 auto;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff;box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.prow{display:flex;align-items:stretch;min-height:50px}
.prow+.prow{border-top:var(--bw) solid var(--ink)}
.plab{flex:0 0 12em;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:6px 14px;border-right:var(--bw) solid var(--ink)}
.plab b{font-size:1.02rem;font-weight:800;line-height:1.3}
.plab small{font-size:.76rem;font-weight:700;color:#5a4a3a;line-height:1.3}
.prow.c1 .plab{background:#ffe3dc}.prow.c2 .plab{background:#d8f3ec}.prow.c3 .plab{background:#dcefff}.prow.c4 .plab{background:#e6e8ff}
.pcon{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:5px 12px}
.pin{width:100%;min-width:0;border:0;border-radius:8px;background:transparent;font:inherit;font-weight:600;font-size:1.05rem;line-height:1.4;padding:.35em .5em;color:var(--ink);text-overflow:ellipsis}
.pin:hover{background:#fffaf0}
.pin:focus-visible{outline:3px solid var(--coral);outline-offset:-2px;background:#fffdf4}
.audrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;width:100%}
.audbtn{padding:.28em .8em;border:2px solid var(--ink);border-radius:10px;background:#fff;box-shadow:2px 2px 0 var(--ink);font-weight:800;font-size:.9rem;white-space:nowrap;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
.audbtn:hover{background:#fff3c4;transform:translateY(-2px);box-shadow:2px 4px 0 var(--ink)}
.audbtn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.audbtn.on{background:var(--yellow);box-shadow:inset 0 0 0 2px #fff,2px 2px 0 var(--ink)}
.audbtn.on::before{content:"";display:inline-block;width:.35em;height:.65em;margin:0 .5em .12em 0;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.audbtn:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.pin.short{flex:0 1 9.5em;width:9.5em;border:2px solid var(--ink);background:#fff;padding:.2em .6em;font-size:.9rem;border-radius:10px}
@media (max-width:700px){.prow{flex-direction:column}.plab{flex:0 0 auto;border-right:0;border-bottom:var(--bw) solid var(--ink);flex-direction:row;align-items:baseline;gap:8px}}
.plab{flex-basis:10.6em}
.audrow{gap:5px 6px;flex-wrap:nowrap}
.audbtn{padding:.22em .6em;font-size:.84rem}
.audbtn.on::before{margin-right:.35em}
.pin.short{flex:1 1 6em;width:auto;min-width:5.5em;font-size:.84rem}
@media (max-width:1100px){.audrow{flex-wrap:wrap}}
@media (min-width:901px) and (max-height:740px){.prow{min-height:44px}.plab{padding:4px 12px}.pin{padding:.25em .5em}.cbody .chiprow.top{margin-bottom:4px}}
.audrow{flex-wrap:wrap}
.pin.short{flex:0 1 8.5em;width:8.5em}

/* 누구에게: 직접 쓰기 칸 */
.audown{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;padding:0 3px 0 11px;border:2px solid var(--ink);border-radius:10px;background:#fff7d6;box-shadow:2px 2px 0 var(--ink);cursor:text;transition:background .12s}
.audown>span{font-size:.8rem;font-weight:800;white-space:nowrap}
.audown .pin.short{flex:0 1 9.5em;width:9.5em;min-width:6em;margin:3px 0;padding:.2em .6em;border:2px solid #cdbfae;border-radius:7px;background:#fff;font-size:.88rem;font-weight:700}
.audown .pin.short::placeholder{color:#8a7b6c;font-weight:600}
.audown.on{background:var(--yellow)}
.audown.on .pin.short{border-color:var(--ink)}
.audown:focus-within{outline:3px solid var(--coral);outline-offset:2px}
.audown .pin.short:focus-visible{outline:0}

/* 7단계 글쓰기·고쳐쓰기 다듬기 */
.write .sticky,.write .sticky:hover,.write .sticky:focus-within{max-height:none;overflow:hidden;position:static;align-items:stretch;background:#fffdf4;box-shadow:3px 3px 0 var(--ink)}
.write .sticky>b{align-self:center;margin:0 12px}
.write .sticky p,.write .sticky:hover p{display:flex;flex-direction:column;justify-content:center;gap:1px;white-space:normal;overflow:hidden;text-overflow:clip;padding:5px 12px;font-size:.88rem;line-height:1.35}
.write .sticky p em{display:inline-block;align-self:flex-start;margin:0 0 1px;padding:0 .6em;border-radius:99px;font-size:.72rem;line-height:1.5;color:var(--ink)}
.write .sticky p:nth-of-type(1) em{background:#ffe3dc}.write .sticky p:nth-of-type(2) em{background:#d8f3ec}.write .sticky p:nth-of-type(3) em{background:#dcefff}.write .sticky p:nth-of-type(4) em{background:#e6e8ff}
.write .sticky p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.write .sticky p em{display:block}
.write .ti{box-shadow:3px 3px 0 var(--ink);transition:box-shadow .12s}
.write .ti:focus-visible,.write .paper:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.write .paper{padding-left:2.9rem;padding-right:1.1rem;background-image:linear-gradient(90deg,transparent 2.1rem,#efb7a8 2.1rem calc(2.1rem + 2px),transparent calc(2.1rem + 2px)),repeating-linear-gradient(transparent 0 calc(var(--lh) - 2px),#d9cdbd calc(var(--lh) - 2px) var(--lh));box-shadow:3px 3px 0 var(--ink)}
.write .helper{align-items:center;gap:6px 8px;padding:6px 10px;border:2px solid var(--ink);border-radius:12px;background:#fffdf4}
.write .helper::before{content:"글쓰기 도우미";flex:0 0 auto;margin-right:2px;padding:.05em .8em;border-radius:99px;background:var(--yellow);border:2px solid var(--ink);font-size:.82rem;font-weight:800}
.hchip{display:inline-flex;align-items:center;gap:.4em}
.hchip::before{content:"";flex:0 0 auto;width:1.05em;height:1.05em;border:2px solid var(--ink);border-radius:50%;background:#fff;box-sizing:border-box}
.hchip.ok::before{background:var(--teal,#2aa89a);box-shadow:inset 0 0 0 2px #fff,0 0 0 0 #000}
.hchip.ok::after{content:"";position:absolute}
.hchip.todo::before{background:#ffd54f}
.cbody .readbox h3{padding-bottom:.35em;border-bottom:2px solid #eadfce}
.cbody .readbox{box-shadow:4px 4px 0 var(--ink)}

/* 증서: 가로로 긴 3:2 액자 */
@media (min-width:901px){
  .endwrap{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:stretch}
  .cert{aspect-ratio:3/2;align-self:center;width:100%;max-height:100%;min-height:0;box-sizing:border-box;padding:6.5% 11%;background:#fcf6e1 url(../images/certbg_wide.webp?v=1) center/100% 100% no-repeat;justify-content:center}
  .cert .certcrown{width:clamp(52px,9vh,84px);height:clamp(52px,9vh,84px);margin-bottom:2px}
  .cert .ct{font-size:clamp(.9rem,1.2vw,1.1rem);margin:0}
  .cert h2{font-size:clamp(1.9rem,3.6vw,3rem);margin:2px 0 6px}
  .cert .certin>p:not(.ct){margin:0 0 6px;font-size:clamp(.88rem,1.15vw,1.05rem);line-height:1.5}
  .cinfo{max-width:440px;font-size:clamp(.9rem,1.2vw,1.05rem);gap:4px 16px;margin-top:8px}
  .cert .stamp{margin-top:8px;padding:.1em 1em;font-size:clamp(1rem,1.5vw,1.3rem)}
}
@media (min-width:901px){
  .endwrap{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .cert .certin>p:not(.ct){max-width:30em;margin-left:auto;margin-right:auto;text-wrap:balance}
}
@media (min-width:901px){.cert{padding:9% 11% 6%}.cert .certcrown{width:clamp(46px,8vh,72px);height:clamp(46px,8vh,72px)}}

/* 증서 화면 재배치: 그림·증서는 같은 높이의 윗줄, 안내와 단추 3개는 가운데 아랫줄 */
@media (min-width:901px){
  .endwrap{--eh:min(calc(100dvh - 252px),calc((100vw - 110px)*.6/1.5));display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--eh) auto auto;justify-content:stretch;align-content:center;align-items:stretch;height:auto;min-height:calc(100dvh - 62px);gap:12px clamp(14px,2vw,28px);max-width:1500px;padding:12px clamp(12px,2vw,28px);box-sizing:border-box}
  .endside{display:contents}
  .endside .endpic{grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;aspect-ratio:auto;max-height:none;object-fit:cover;object-position:50% 35%}
  .cert{grid-column:2;grid-row:1;align-self:stretch;height:var(--eh);width:calc(var(--eh)*1.5);aspect-ratio:auto;max-height:none;container-type:size;box-sizing:border-box;padding:14cqh 12cqw 12cqh;background:#fcf6e1 url(../images/certbg_wide.webp?v=1) center/100% 100% no-repeat;background-origin:border-box;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);justify-content:center;gap:0}
  .cert .certcrown{width:11cqh;height:11cqh;margin:0 auto .6cqh}
  .cert .ct{font-size:3.7cqh;margin:0;line-height:1.3}
  .cert h2{font-size:10cqh;margin:.4cqh 0 1.2cqh;line-height:1.1}
  .cert .certin>p:not(.ct){margin:0 auto 1.2cqh;max-width:30em;font-size:3.5cqh;line-height:1.5}
  .cinfo{max-width:none;width:fit-content;margin:1.4cqh auto 0;font-size:3.7cqh;gap:.8cqh 2.4cqw;line-height:1.35}
  .cert .stamp{margin-top:1.6cqh;padding:0 1em;font-size:4.2cqh;line-height:1.6}
  .endside .endtip{grid-column:1/-1;grid-row:2;justify-self:center;width:fit-content;max-width:100%;margin:0;box-sizing:border-box}
  .endside .rowbtn{grid-column:1/-1;grid-row:3;justify-content:center;flex-wrap:nowrap;display:flex;gap:14px}
  .endside .rowbtn .btn{white-space:nowrap}
}
@media (min-width:901px){
  .endwrap{--eh:min(calc(100dvh - 252px),calc((100vw - 110px)*.54/1.5))}
  .cert{container-type:normal;padding:calc(var(--eh)*.15) calc(var(--eh)*.17) calc(var(--eh)*.11)}
  .cert .certcrown{width:calc(var(--eh)*.115);height:calc(var(--eh)*.115);margin:0 auto calc(var(--eh)*.006)}
  .cert .ct{font-size:calc(var(--eh)*.036)}
  .cert h2{font-size:calc(var(--eh)*.105);margin:calc(var(--eh)*.004) 0 calc(var(--eh)*.012)}
  .cert .certin>p:not(.ct){font-size:calc(var(--eh)*.034);margin:0 auto calc(var(--eh)*.012)}
  .cinfo{font-size:calc(var(--eh)*.036);margin:calc(var(--eh)*.014) auto 0;gap:calc(var(--eh)*.008) calc(var(--eh)*.026)}
  .cert .stamp{margin-top:calc(var(--eh)*.016);font-size:calc(var(--eh)*.04)}
}
@media (min-width:901px){.endwrap{--eh:min(calc(100dvh - 226px),calc((100vw - 110px)*.55/1.5))}}

/* 증서 화면: 안내 문구를 없애고, 아래에 같은 너비의 블록 3개 */
@media (min-width:901px){
  .endwrap{--eh:min(calc(100dvh - 176px),calc((100vw - 110px)*.55/1.5));grid-template-rows:var(--eh) auto}
  .endside .endtip{display:none}
  .endside .rowbtn{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);justify-content:stretch;width:100%}
  .endside .rowbtn .btn,.endside .rowbtn .btn.soft{width:100%;height:clamp(50px,7.5vh,64px);padding:0 .6em;font-size:clamp(1rem,1.5vw,1.25rem);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-align:center}
}
@media (min-width:901px){.endwrap{--eh:min(calc(100dvh - 176px),calc((100vw - 110px)*.62/1.5))}}
@media (min-width:901px){.endwrap{--eh:min(calc(100dvh - 176px),calc((100vw - 110px)*.62/1.5),640px)}}