/* ══════════════════════════════════════════════════════════════
   책띠 공방 — 4학년 그림책 3~4차시
   글꼴: 페이퍼로지(Paperlogy) · 눈누 · SIL 오픈폰트라이선스(OFL)
   외부 CDN을 쓰지 않고 같은 폴더의 파일을 읽습니다. 학교 방화벽에서도 뜹니다.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:"Paperlogy";src:url("../fonts/Paperlogy-4Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Paperlogy";src:url("../fonts/Paperlogy-7Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Paperlogy";src:url("../fonts/Paperlogy-7Bold.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --font:"Paperlogy","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --ink:#2A2721; --inktext:#241F1A; --paper:#FFFBF3; --line:rgba(42,39,33,.05); --sub:#5C5648;
  --yellow:#FFDE7A; --yellow-soft:#FFF4D6;
  --mint:#A9E3C4;  --mint-soft:#E4F6EC;
  --blue:#AED7F4;  --blue-soft:#E6F2FC;
  --peach:#DCD3C4; --peach-soft:#F2EDE4;
  --pink:#FBC3D8;  --pink-soft:#FDEAF1;
  --lav:#CFC4EF;   --lav-soft:#EFEAFB;
  --lime:#D5E7A4;  --lime-soft:#EDF4D9;
  --aqua:#A9DCE3;  --aqua-soft:#DFF0F3;
  --accent:#FFEFAE; --accent-soft:#FFF8DE;
  --maxw:1240px; --r-lg:22px; --r-md:16px;
  --base:clamp(1.12rem,.98rem + .55vw,1.4rem);
  --lbl:clamp(1.02rem,.93rem + .42vw,1.24rem);
  --z:1;
}

*{box-sizing:border-box;font-family:var(--font)}
html{font-size:calc(100% * var(--z));-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;color:var(--inktext);font-weight:400;font-size:var(--base);line-height:1.66;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  padding-bottom:clamp(62px,7.2vh,80px);
  background-color:var(--paper);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:26px 26px;
  overscroll-behavior:none;
}
p,li,span,label,button,textarea,input,div,select,h1,h2,h3,h4{word-break:keep-all;overflow-wrap:break-word}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button,textarea,input,select,option{font-family:var(--font)}
textarea,input,select{font-size:var(--base)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #2E6DB4;outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ══ 공통 블록 ══ */
.card{background:#fff;border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--ink);padding:clamp(16px,2.4vw,26px)}
.card-sm{background:#fff;border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:5px 5px 0 var(--ink);padding:clamp(12px,1.8vw,19px)}
.pagehead{background:#fff;border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:5px 5px 0 var(--ink);padding:clamp(12px,1.7vw,18px) clamp(14px,2vw,22px);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.45em .8em}
.pagehead>.pill{grid-column:1;margin:0}
.pagehead h2.stitle{grid-column:2}
.pagehead .guide{grid-column:1/-1}
@media (max-width:660px){.pagehead{grid-template-columns:1fr}.pagehead>.pill,.pagehead h2.stitle{grid-column:1}}
.pagehead>.pill{background:var(--yellow)}
.pagehead h2.stitle{margin:0}
.pagehead .guide{width:auto;align-self:stretch;margin-inline:0;text-align:left;border-width:2px;box-shadow:3px 3px 0 var(--ink)}

.pill{display:inline-flex;align-items:center;gap:.4em;background:#fff;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:.5em 1.2em;font-weight:700;font-size:clamp(1.14rem,1rem + .6vw,1.5rem);width:fit-content;max-width:100%}
.pill.fill-yellow{background:var(--yellow)} .pill.fill-mint{background:var(--mint)}
.pill.fill-pink{background:var(--pink)}     .pill.fill-lav{background:var(--lav)}
.pill.fill-blue{background:var(--blue)}     .pill.fill-lime{background:var(--lime)}
.pill.sm{font-size:var(--lbl);padding:.38em .95em;box-shadow:2px 2px 0 var(--ink)}
.pill.clickable{cursor:pointer}
.pill.clickable:active{transform:translate(3px,3px);box-shadow:none}

h1.title,h2.stitle{font-weight:700;margin:0}
h1.title{font-size:clamp(1.8rem,1.2rem + 2.6vw,3rem);line-height:1.3}
h2.stitle{font-size:clamp(1.24rem,1.04rem + .95vw,1.7rem);margin-bottom:0;line-height:1.35}
h3.mini{font-size:clamp(1.06rem,.96rem + .44vw,1.28rem);font-weight:700;margin:0 0 .3em;line-height:1.4}
.sub{color:var(--sub);font-size:var(--lbl);margin:0;line-height:1.55}
b,strong{font-weight:700}

.guide{display:block;font-weight:700;line-height:1.45;text-align:center;font-size:clamp(1.14rem,1rem + .62vw,1.5rem);border:3px solid var(--ink);border-radius:var(--r-md);padding:.55em 1.05em;background:var(--accent-soft);box-shadow:4px 4px 0 var(--ink);width:fit-content;max-width:100%;align-self:center;margin-inline:auto}

.btn{border:3px solid var(--ink);cursor:pointer;border-radius:999px;padding:.85em 1.6em;font-weight:700;font-size:var(--base);box-shadow:4px 4px 0 var(--ink);background:#fff;color:var(--inktext);transition:transform .08s}
.btn:active:not(:disabled){transform:translate(4px,4px);box-shadow:none}
.btn.primary{background:var(--yellow)} .btn.blue{background:var(--blue)}
.btn.mint{background:var(--mint)}       .btn.pink{background:var(--pink)}
.btn.ghost{background:#fff}
.btn.sm{font-size:var(--lbl);padding:.5em 1.15em;border-width:2px;box-shadow:3px 3px 0 var(--ink)}
.btn.sm:active:not(:disabled){transform:translate(3px,3px);box-shadow:none}
.btn:disabled{opacity:.42;cursor:not-allowed}

/* ══ 상단 내비 ══ */
.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;padding:8px clamp(12px,3vw,26px);position:sticky;top:0;z-index:40;background:rgba(255,251,243,.94);backdrop-filter:blur(4px);border-bottom:3px solid var(--ink)}
.topbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zoomselect{position:relative;display:inline-flex;align-items:center}
.zoomselect select{appearance:none;background:#fff;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:.5em 2em .5em 1.1em;font-weight:700;font-size:var(--lbl);color:var(--inktext);cursor:pointer}
.zoomselect .chev{position:absolute;right:1.1em;top:50%;margin-top:-3px;pointer-events:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--inktext)}
.brand{height:clamp(28px,2.7vw,38px);width:auto;display:block;flex-shrink:0}

/* ══ 단계 칩 ══ */
.progress{display:flex;gap:7px;flex-wrap:wrap;padding:8px clamp(12px,3vw,26px) 0}
.steppill{flex-shrink:0;display:flex;align-items:center;gap:.4em;border:2px solid var(--ink);border-radius:999px;padding:.42em 1.1em .42em .42em;font-size:clamp(1rem,.92rem + .35vw,1.22rem);font-weight:700;line-height:1;background:#fff;color:var(--sub);box-shadow:2px 2px 0 var(--ink)}
.steppill .lbl{line-height:1;display:inline-flex;align-items:center}
.steppill .num{width:1.7em;height:1.7em;border-radius:50%;border:2px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;line-height:1;font-size:.78em;font-weight:700;flex-shrink:0;color:var(--inktext)}
.steppill.on{background:var(--pink);color:var(--inktext);box-shadow:4px 4px 0 var(--ink)}
.steppill.on .num{background:var(--ink);color:#fff}
.steppill.done{background:var(--mint-soft);color:var(--inktext);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.steppill.done .num{background:var(--mint)}
.steppill.done:active{transform:translate(3px,3px);box-shadow:none}
.steppill.visited{background:#fff;color:var(--inktext);cursor:pointer}
.steppill.visited:active{transform:translate(2px,2px);box-shadow:none}

/* ══ 무대 ══ */
.stagewrap{flex:1 1 0%;display:flex;padding:clamp(10px,1.6vw,18px) clamp(12px,2.4vw,26px)}
.stage{display:none;flex-direction:column;gap:clamp(10px,1.3vw,15px);width:100%;max-width:var(--maxw);margin:0 auto;animation:.32s ease rise}
.stage.on{display:flex}
.stage>*{min-width:0}
.stage>.pill{align-self:flex-start}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.btnrow{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px clamp(12px,2.6vw,32px);background:rgba(255,251,243,.97);backdrop-filter:blur(5px);border-top:3px solid var(--ink)}
.btnrow .btn{font-size:clamp(1.02rem,.94rem + .42vw,1.28rem);padding:.58em 1.35em;border-width:2px;box-shadow:3px 3px 0 var(--ink)}
.btnrow .btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:none}
.navcond{font-size:clamp(.96rem,.9rem + .28vw,1.14rem);padding:.42em .95em;box-shadow:2px 2px 0 var(--ink);text-align:center;flex:0 1 auto}

/* ══ 격자 ══ */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(11px,1.5vw,18px);align-items:start}
.two.lead{grid-template-columns:1.15fr .85fr}
.two.trail{grid-template-columns:.85fr 1.15fr}
@media (max-width:900px){.two,.two.lead,.two.trail{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:clamp(9px,1.2vw,14px)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ══ 입력 ══ */
.field{width:100%;border:3px solid var(--ink);border-radius:var(--r-md);background:#fff;padding:.6em .85em;font-weight:400;line-height:1.7;box-shadow:3px 3px 0 var(--ink)}
textarea.field{resize:vertical;min-height:5.2em}
.field::placeholder{color:#A8A08F}
label.lab{display:block;font-weight:700;font-size:var(--lbl);margin-bottom:.3em}

/* ══════════ 그림책 표지 자리 (선생님이 이미지를 넣는 칸) ══════════
   assets/img/ 에 파일이 있으면 그림이 채워지고, 없으면 점선 윤곽선이 남습니다. */
.bookslot{position:relative;width:100%;aspect-ratio:4/5;border:3px dashed var(--ink);border-radius:12px;background:#fff;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8% 9%;gap:.35em}
.bookslot .bs-title{font-weight:700;font-size:clamp(1.02rem,.9rem + .75vw,1.5rem);line-height:1.35}
.bookslot .bs-by{font-size:clamp(.82rem,.78rem + .3vw,1rem);color:var(--sub);line-height:1.4}
.bookslot .bs-tag{margin-top:.5em;font-size:clamp(.74rem,.7rem + .26vw,.9rem);color:var(--sub);border:2px dashed var(--ink);border-radius:8px;padding:.3em .7em;line-height:1.4;opacity:.75}
.bookslot .bs-file{font-size:clamp(.68rem,.66rem + .2vw,.82rem);color:var(--sub);opacity:.6;word-break:break-all}
.bookslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bookslot.filled{border-style:solid}

/* ══ 1단계 · 벗겨 보기 ══ */
.peelwrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.bookstage{position:relative;width:min(100%,236px);user-select:none;touch-action:none}
.bookstage .bookslot{border-width:3px;box-shadow:6px 6px 0 var(--ink)}
.bandlayer{position:absolute;left:-4%;right:-4%;bottom:11%;cursor:grab;transition:transform .28s cubic-bezier(.3,1.3,.5,1),opacity .28s;z-index:2}
.bandlayer.dragging{cursor:grabbing;transition:none}
.bandlayer.off{transform:translateY(52%) rotate(-5deg);opacity:.25}
.bandlayer svg{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:4px;box-shadow:0 5px 0 rgba(42,39,33,.32)}
.peelhint{font-weight:700;font-size:var(--lbl);background:var(--lav-soft);border:2px solid var(--ink);border-radius:999px;padding:.4em 1.1em;box-shadow:2px 2px 0 var(--ink);text-align:center}

.slidebox{border:3px solid var(--ink);border-radius:var(--r-md);background:#fff;box-shadow:4px 4px 0 var(--ink);padding:clamp(10px,1.4vw,15px) clamp(12px,1.7vw,18px)}
.slidebox.locked{opacity:.42;pointer-events:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:14px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow-soft)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}
input[type=range]::-moz-range-track{height:14px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow-soft)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}
.gapbar{display:flex;align-items:flex-end;gap:16px;height:104px;padding:0 6px}
.gapbar .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end}
.gapbar .bar{width:100%;border:3px solid var(--ink);border-radius:8px 8px 0 0;min-height:6px;transition:height .45s cubic-bezier(.3,1.2,.5,1)}
.gapbar .bar.a{background:var(--peach)} .gapbar .bar.b{background:var(--pink)}
.gapbar .cap{font-weight:700;font-size:clamp(.94rem,.88rem + .3vw,1.1rem);line-height:1.3;text-align:center}

/* ══ 2단계 · 탐정단 ══ */
.detwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(14px,2vw,22px);align-items:start}
@media (max-width:900px){.detwrap{grid-template-columns:1fr}}
.booktabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.booktab{border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:2px 2px 0 var(--ink);padding:.4em 1em;font-weight:700;font-size:var(--lbl);cursor:pointer;display:flex;align-items:center;gap:.4em}
.booktab.on{background:var(--blue);box-shadow:4px 4px 0 var(--ink)}
.booktab.fin{background:var(--mint-soft)}
.booktab:active{transform:translate(2px,2px);box-shadow:none}
.bandview{border:3px solid var(--ink);border-radius:var(--r-md);background:var(--peach-soft);box-shadow:4px 4px 0 var(--ink);padding:clamp(12px,2vw,20px);display:flex;flex-direction:column;align-items:center;gap:12px}
.bandview .bandonly{width:100%;max-width:540px}
.bandview .bandonly svg{width:100%;height:auto;display:block;border:3px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 var(--ink)}
.bandview .bookmini{width:min(58%,180px)}
.bandview .capsm{font-size:clamp(.88rem,.84rem + .3vw,1.04rem);color:var(--sub);font-weight:700;text-align:center;line-height:1.4}

.eltable{display:flex;flex-direction:column;gap:7px}
.elrow{display:flex;align-items:center;gap:.55em;border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:2px 2px 0 var(--ink);padding:.42em .5em .42em .55em;cursor:pointer;font-weight:700;font-size:clamp(1rem,.94rem + .36vw,1.2rem);text-align:left;width:100%}
.elrow .box{width:1.45em;height:1.45em;border:2px solid var(--ink);border-radius:6px;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.86em;line-height:1}
.elrow.on{background:var(--lime-soft);box-shadow:3px 3px 0 var(--ink)}
.elrow.on .box{background:var(--lime)}
.elrow:active{transform:translate(2px,2px);box-shadow:none}
.elrow .mark{margin-left:auto;font-size:.8em;font-weight:700;border-radius:999px;padding:.12em .7em;border:2px solid var(--ink);white-space:nowrap}
.elrow .mark.yes{background:var(--mint)} .elrow .mark.no{background:var(--peach-soft);color:var(--sub)}
.checked .elrow{cursor:default}
.checked .elrow:active{transform:none;box-shadow:2px 2px 0 var(--ink)}

/* ══ 3단계 · 탐정 회의 ══ */
.cnt{font-weight:700}

.pickrow{display:flex;gap:8px;flex-wrap:wrap}
.pickchip{border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:2px 2px 0 var(--ink);padding:.42em 1em;font-weight:700;font-size:var(--lbl);cursor:pointer}
.pickchip.on{background:var(--pink);box-shadow:4px 4px 0 var(--ink)}
.pickchip:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}
.pickchip:disabled{opacity:.38;cursor:not-allowed}

.reveal{border:3px dashed var(--ink);border-radius:var(--r-md);background:var(--lav-soft);padding:clamp(14px,2.2vw,24px);text-align:center}
.reveal .big{font-size:clamp(1.26rem,1rem + 1.1vw,1.95rem);font-weight:700;line-height:1.55}
.reveal .big em{font-style:normal;background:var(--yellow);padding:.08em .3em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ══ 5단계 · 문장 대장간 ══ */
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px}
.frame{border:3px solid var(--ink);border-radius:var(--r-md);background:#fff;box-shadow:4px 4px 0 var(--ink);padding:.75em .9em;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:.25em}
.frame .fname{font-weight:700;font-size:var(--lbl)}
.frame .fex{font-size:clamp(.92rem,.86rem + .32vw,1.08rem);color:var(--sub);line-height:1.5}
.frame.on{box-shadow:6px 6px 0 var(--ink);transform:translate(-1px,-1px)}
.frame.on.c0{background:var(--yellow-soft)} .frame.on.c1{background:var(--mint-soft)}
.frame.on.c2{background:var(--blue-soft)}   .frame.on.c3{background:var(--pink-soft)}
.frame.on.c4{background:var(--lav-soft)}
.frame .done{font-size:.82em;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:.05em .6em;background:var(--mint);align-self:flex-start}

.trybox{border:3px solid var(--ink);border-radius:var(--r-md);background:var(--accent-soft);box-shadow:4px 4px 0 var(--ink);padding:clamp(14px,2vw,20px);display:flex;flex-direction:column;gap:.6em}
.madelist{display:flex;flex-direction:column;gap:8px}
.made{display:flex;align-items:center;gap:.6em;border:3px solid var(--ink);border-radius:var(--r-md);background:#fff;box-shadow:3px 3px 0 var(--ink);padding:.55em .8em;cursor:pointer;text-align:left;font-size:clamp(1.02rem,.95rem + .4vw,1.26rem);line-height:1.5}
.made .radio{width:1.4em;height:1.4em;border:3px solid var(--ink);border-radius:50%;flex-shrink:0;background:#fff}
.made.on{background:var(--yellow-soft);box-shadow:5px 5px 0 var(--ink)}
.made.on .radio{background:var(--ink);box-shadow:inset 0 0 0 3px #fff}
.made .tag{font-size:.78em;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:.05em .6em;background:var(--peach-soft);flex-shrink:0}
.made .del{margin-left:auto;font-size:.84em;border:2px solid var(--ink);border-radius:999px;padding:.1em .6em;background:#fff;flex-shrink:0}
.counter{font-size:.88em;font-weight:700;color:var(--sub);text-align:right}

/* ══ 6단계 · 배치 시험대 ══ */
.labgrid{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(14px,2vw,22px);align-items:start}
@media (max-width:1000px){.labgrid{grid-template-columns:1fr}}
.slots{display:flex;flex-direction:column;gap:7px}
.slot{display:flex;align-items:center;gap:.5em;border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:2px 2px 0 var(--ink);padding:.4em .8em;font-weight:700;font-size:clamp(.98rem,.92rem + .34vw,1.16rem);cursor:pointer;text-align:left;width:100%}
.slot .box{width:1.4em;height:1.4em;border:2px solid var(--ink);border-radius:6px;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.84em;line-height:1}
.slot.on{background:var(--aqua-soft);box-shadow:3px 3px 0 var(--ink)}
.slot.on .box{background:var(--aqua)}
.slot.fix{background:var(--yellow-soft);cursor:default}
.slot.fix .box{background:var(--yellow)}
.slot:disabled{opacity:.4;cursor:not-allowed}
.slot .need{margin-left:auto;font-size:.76em;font-weight:700;color:#B4453C;white-space:nowrap}

.gauge{display:flex;gap:6px;margin:.4em 0 .1em}
.gauge i{flex:1;height:16px;border:3px solid var(--ink);border-radius:6px;background:#fff}
.gauge i.f{background:var(--aqua)} .gauge i.fix{background:var(--yellow)}

.lays{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:560px){.lays{grid-template-columns:repeat(2,1fr)}}
.lay{border:3px solid var(--ink);border-radius:12px;background:#fff;box-shadow:3px 3px 0 var(--ink);padding:5px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center}
.lay.on{box-shadow:5px 5px 0 var(--ink);background:var(--lime-soft)}
.lay svg{width:100%;height:auto;display:block;border:2px solid var(--ink);border-radius:4px}
.lay .nm{font-size:clamp(.84rem,.8rem + .28vw,1rem);font-weight:700;line-height:1.2}

.swat{display:flex;gap:7px;flex-wrap:wrap}
.sw{width:2.3em;height:2.3em;border:3px solid var(--ink);border-radius:50%;box-shadow:2px 2px 0 var(--ink);cursor:pointer;flex-shrink:0}
.sw.on{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
.stick{display:flex;gap:6px;flex-wrap:wrap}
.stbtn{width:2.9em;height:2.9em;border:2px solid var(--ink);border-radius:10px;background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px}
.stbtn svg{width:100%;height:100%;display:block}
.stbtn.on{background:var(--yellow);box-shadow:4px 4px 0 var(--ink)}

.previewpane{border:3px solid var(--ink);border-radius:var(--r-lg);background:var(--peach-soft);box-shadow:5px 5px 0 var(--ink);padding:clamp(14px,2.2vw,24px);display:flex;flex-direction:column;align-items:center;gap:12px}
.previewpane .bandonly{width:100%;max-width:560px}
.previewpane .bandonly svg{width:100%;height:auto;display:block;border:3px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 var(--ink)}

/* ══ 7단계 · 매대 ══ */
.shelf{background:var(--peach-soft);border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:5px 5px 0 var(--ink);padding:clamp(14px,2.2vw,24px)}
.shelfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:clamp(12px,1.8vw,18px)}
.shelfcard{background:#fff;border:3px solid var(--ink);border-radius:var(--r-md);box-shadow:4px 4px 0 var(--ink);padding:10px;display:flex;flex-direction:column;gap:8px}
.shelfcard.mine{background:var(--yellow-soft)}
.shelfcard svg{width:100%;height:auto;display:block;border:2px solid var(--ink);border-radius:5px}
.shelfcard .who{font-weight:700;font-size:var(--lbl);display:flex;align-items:center;gap:.35em;flex-wrap:wrap}
.shelfcard .who .me{font-size:.7em;border:2px solid var(--ink);border-radius:999px;padding:.02em .55em;background:var(--yellow)}
.shelfcard .bk{font-size:clamp(.86rem,.82rem + .28vw,1.02rem);color:var(--sub);line-height:1.4}
.likebtn{border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:2px 2px 0 var(--ink);padding:.3em .8em;font-weight:700;font-size:clamp(.9rem,.86rem + .3vw,1.06rem);display:flex;align-items:center;gap:.35em;align-self:flex-start}
.likebtn.on{background:var(--pink)}
.likebtn:active{transform:translate(2px,2px);box-shadow:none}
.empty{text-align:center;color:var(--sub);padding:2em 1em;font-weight:700;line-height:1.7}
.codebox{width:100%;border:3px solid var(--ink);border-radius:var(--r-md);background:var(--yellow-soft);box-shadow:3px 3px 0 var(--ink);padding:.6em .8em;font-size:clamp(.86rem,.82rem + .26vw,1rem);line-height:1.5;word-break:break-all;font-weight:400;resize:vertical;min-height:4.4em}

/* ══ 되돌아보기 ══ */
.lookrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:2px dashed #E3DCCD;padding:.55em 0}
.lookrow:last-child{border-bottom:0}
.lookrow .q{font-weight:700;font-size:var(--lbl);flex:1 1 260px;line-height:1.5}
.faces{display:flex;gap:6px;margin-left:auto}
.face{width:2.5em;height:2.5em;border:3px solid var(--ink);border-radius:50%;background:#fff;box-shadow:2px 2px 0 var(--ink);font-size:1.05em;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.face.on{background:var(--yellow);box-shadow:4px 4px 0 var(--ink)}
.face:active{transform:translate(2px,2px);box-shadow:none}

/* ══ 크레딧 푸터 ══ */
footer.credit{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6.7px;font-size:clamp(.94rem,.9rem + .28vw,1.1rem);font-weight:400;line-height:1.6;color:#7A7266;padding:11px 12px 15px}
footer.credit .dot{width:4px;height:4px;border-radius:50%;background:#7A7266;flex-shrink:0}
footer.credit .bar{width:2px;height:1.05em;border-radius:1px;background:#7A7266;opacity:.55;flex-shrink:0;margin-inline:2px}
footer.credit a{font-weight:700;text-decoration:none}
footer.credit a:hover{text-decoration:underline}
footer.credit .c-dou{color:#159C79}
footer.credit .c-gga{color:#2E6DB4}

/* ══ 알림 ══ */
.toast{position:fixed;left:50%;bottom:calc(clamp(62px,7.2vh,80px) + 14px);transform:translateX(-50%) translateY(16px);z-index:60;background:var(--ink);color:#fff;border-radius:999px;padding:.6em 1.5em;font-weight:700;font-size:var(--lbl);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 6px 0 rgba(0,0,0,.25);max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══ 인쇄 ══ */
.printonly{display:none}
@media print{
  @page{size:A4 portrait;margin:11mm}
  html{font-size:100%}
  body{background:#fff!important;padding:0;display:block;min-height:0}
  .noprint,.topbar,.progress,.btnrow,.stagewrap,footer.credit,.toast{display:none!important}
  .printonly{display:block!important}
  .psheet{page-break-after:always;break-after:page}
  .psheet:last-child{page-break-after:auto;break-after:auto}
  .pcard{border:2px solid #000;border-radius:10px;padding:7mm;margin-bottom:5mm}
  .pband{border:1.5px dashed #555;padding:2mm;margin:0 0 3mm}
  .pband svg{width:100%;height:auto;display:block}
  h1.ptitle{font-size:18pt;margin:0 0 2mm;font-weight:700}
  .pmeta{font-size:10pt;color:#444;margin:0 0 5mm}
  .plabel{font-weight:700;font-size:11.5pt;margin:0 0 1.5mm}
  .pans{font-size:12pt;line-height:2.05;border-bottom:1px solid #bbb;min-height:1.9em;padding:0 0 1mm;margin:0 0 4mm;white-space:pre-wrap}
  .prule{border-bottom:1px solid #ccc;height:2.05em}
  .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
  .pcut{font-size:9.5pt;color:#555;margin:0 0 2mm;line-height:1.5}
}

/* ══════════════════════════════════════════════════════════════
   화면 한 판에 담기 — 넓은 화면에서 세로를 줄이는 조정
   ══════════════════════════════════════════════════════════════ */
.trio{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,1fr);gap:clamp(11px,1.5vw,18px);align-items:start}
@media (max-width:1020px){.trio{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.trio{grid-template-columns:1fr}}

/* 2단계 */
.peelwrap{gap:10px}
.empty{padding:1.1em .8em}

/* 3단계 — 찾을 것 목록을 두 줄로 */
@media (min-width:901px){
  .eltable{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
  .elrow{font-size:clamp(.92rem,.86rem + .3vw,1.06rem);padding:.34em .45em .34em .5em}
  .elrow .mark{font-size:.76em;padding:.08em .55em}
}
.bandview{gap:9px;padding:clamp(10px,1.5vw,15px)}
.bandview .bookmini{width:min(48%,138px)}
.bandview .capsm{font-size:clamp(.84rem,.8rem + .26vw,.96rem)}
.booktabs{margin-bottom:10px}

/* 4단계 — 표를 촘촘하게 */
.pickrow{gap:6px}
.pickchip{padding:.34em .8em;font-size:clamp(.92rem,.86rem + .3vw,1.08rem)}
.reveal{padding:clamp(11px,1.6vw,17px)}
.reveal .big{font-size:clamp(1.14rem,.96rem + .85vw,1.6rem);line-height:1.5}

/* 6단계 */
.frames{gap:8px}
.frame{padding:.6em .75em;gap:.15em}
.trybox{padding:clamp(11px,1.6vw,16px);gap:.5em}
.made{padding:.45em .7em}
.madelist{gap:6px;max-height:min(34vh,300px);overflow-y:auto}

/* 7단계 — 세 칸으로 나눕니다 */
.labgrid{grid-template-columns:minmax(0,268px) minmax(0,292px) minmax(0,1fr)}
@media (max-width:1240px){.labgrid{grid-template-columns:minmax(0,250px) minmax(0,1fr)}}
@media (max-width:860px){.labgrid{grid-template-columns:1fr}}
.previewpane{gap:9px;padding:clamp(11px,1.6vw,18px)}
.previewpane .bookstage{width:min(100%,172px)}
.slot{padding:.32em .7em}
.slots{gap:5px}
.stbtn{width:2.5em;height:2.5em}
.sw{width:2em;height:2em}
.lays{gap:6px}
.lay{padding:4px;gap:3px}

/* 8단계 */
.shelf{padding:clamp(11px,1.6vw,18px)}
.shelfgrid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:clamp(10px,1.4vw,15px)}
.shelfcard{padding:8px;gap:6px}
.codebox{min-height:3.4em}
.lookrow{padding:.38em 0}
.face{width:2.2em;height:2.2em}

/* ══ 조정 2차 — 조작 칸을 가로로 눕혀 세로를 줄입니다 ══ */
.pill{font-size:clamp(1.02rem,.94rem + .4vw,1.24rem);padding:.4em 1em}
.pill.sm{font-size:clamp(.92rem,.88rem + .28vw,1.06rem);padding:.3em .8em}
.topbar{padding:6px clamp(12px,3vw,26px)}
.topbar-right{gap:8px}
.zoomselect select{padding:.38em 1.9em .38em 1em}
.btn.sm{padding:.42em 1.05em}
footer.credit{padding:8px 12px 11px}
.pagehead{padding:clamp(10px,1.4vw,15px) clamp(12px,1.8vw,20px);gap:.35em .7em}
.pagehead .guide{font-size:clamp(1.02rem,.94rem + .45vw,1.28rem);padding:.45em .9em}

.labgrid{grid-template-columns:minmax(0,258px) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1180px){.labgrid{grid-template-columns:minmax(0,240px) minmax(0,1fr)}}
@media (max-width:840px){.labgrid{grid-template-columns:1fr}}

.dressing{display:flex;flex-direction:column;gap:9px}
.drow{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.7em}
.drow+.drow{border-top:2px dashed #E3DCCD;padding-top:9px}
.dlab{font-weight:700;font-size:clamp(.94rem,.88rem + .3vw,1.08rem);line-height:1.25;white-space:nowrap}
.dlab small{font-weight:400;color:var(--sub);font-size:.82em}
.sw{width:1.75em;height:1.75em;border-width:2px}
.sw.on{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.swat{gap:6px}
.stbtn{width:2.1em;height:2.1em;border-radius:8px;padding:3px}
.stick{gap:5px}
.previewpane .bookstage{width:min(100%,152px)}
.previewpane .bandonly{max-width:500px}
.slot{padding:.28em .65em}
.slots{gap:4px}
.gauge i{height:13px;border-width:2px}

/* 2단계 — 책띠 글씨가 읽히도록 조금 크게, 막대는 상자 안에 */
.stage[data-stage="3"] .bookstage{width:min(100%,280px)}
.gapbar{height:112px}

/* 작은 표지 자리 — 글씨가 넘쳐 잘리지 않도록 */
.bookmini .bookslot,.previewpane .bookslot{padding:7% 8%;gap:.12em;border-width:2px}
.bookmini .bs-title,.previewpane .bs-title{font-size:clamp(.72rem,.68rem + .22vw,.88rem);line-height:1.3}
.bookmini .bs-by,.previewpane .bs-by{font-size:clamp(.6rem,.58rem + .14vw,.7rem)}
.bookmini .bs-tag,.previewpane .bs-tag{font-size:clamp(.56rem,.54rem + .12vw,.64rem);padding:.18em .45em;margin-top:.3em;border-width:1px}
.bookmini .bs-file,.previewpane .bs-file{display:none}

/* 매대 — 친구 책띠의 글씨가 읽혀야 고를 수 있습니다 */
.shelfgrid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.shelfcard .who{gap:.45em}

/* 좁은 화면에서 표가 칸 밖으로 밀고 나가지 않게 — 표는 제 상자 안에서만 옆으로 움직입니다 */
.two>*,.trio>*,.labgrid>*,.detwrap>*,.stack>*{min-width:0}

/* ══ 탐정단 — 확인한 뒤 "어디?"를 누르면 책띠에서 짚어 줍니다 ══ */
.elrow.findable{cursor:pointer}
.elrow.findable:active{transform:translate(2px,2px);box-shadow:none}
.elrow.findable .mark.yes{background:var(--mint);cursor:pointer}
.elrow.lit{background:#FFE3EE;box-shadow:4px 4px 0 var(--ink)}
.elrow.lit .mark.yes{background:#FF3E7F;color:#fff;border-color:#FF3E7F}
.elrow:disabled{opacity:.5}
.checked .elrow:not(.findable){cursor:default}
.bandlit{pointer-events:none}
.bandonly svg .bandlit{animation:litpop .28s ease}
@keyframes litpop{from{opacity:0}to{opacity:1}}

/* ══ 완성 단계 ══ */
.finalpane{background:var(--peach-soft);border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:5px 5px 0 var(--ink);padding:clamp(14px,2.2vw,24px);display:flex;flex-direction:column;align-items:center;gap:12px}
.finalpane .bandonly{width:100%;max-width:720px}
.finalpane .bandonly svg{width:100%;height:auto;display:block;border:3px solid var(--ink);border-radius:8px;box-shadow:5px 5px 0 var(--ink)}

/* ══ 탐정단 — 책띠를 두른 실제 책 사진에서 찾습니다 ══ */
.photo{position:relative;width:100%;max-width:760px;aspect-ratio:1672/941;border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);overflow:hidden;background:#EFE7DA}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hilite{position:absolute;border:4px solid #FF3E7F;border-radius:8px;box-shadow:0 0 0 3px rgba(255,62,127,.28),0 0 0 9999px rgba(28,24,20,.46);animation:hipop .3s ease}
@keyframes hipop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.hlabel{position:absolute;left:-3px;bottom:100%;margin-bottom:5px;background:#FF3E7F;color:#fff;font-weight:700;border-radius:8px 8px 8px 0;padding:.14em .6em;white-space:nowrap;font-size:clamp(.86rem,.8rem + .32vw,1.06rem);line-height:1.45}
.hilite.show[style*="top:0"] .hlabel,.hilite.show[style*="top:3"] .hlabel{bottom:auto;top:100%;margin:5px 0 0;border-radius:0 8px 8px 8px}
.bandview{background:var(--peach-soft)}

/* ══════════════ 띠지 탐정단 — 책장 ══════════════ */
.bookshelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(11px,1.5vw,17px)}
@media (max-width:620px){.bookshelf{grid-template-columns:1fr 1fr}}
.bcard{display:flex;flex-direction:column;align-items:stretch;gap:.3em;text-align:left;
  background:#fff;border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:5px 5px 0 var(--ink);
  padding:9px;cursor:pointer;transition:transform .1s}
.bcard:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.bcard:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.bcard.fin{background:var(--mint-soft)}
.bcard__pic{display:block;width:100%;aspect-ratio:1672/941;border:2px solid var(--ink);border-radius:9px;overflow:hidden;background:#EFE7DA}
.bcard__pic img{width:100%;height:100%;object-fit:cover;display:block}
.bcard__t{font-weight:700;font-size:clamp(1rem,.94rem + .4vw,1.2rem);line-height:1.3;margin-top:.25em}
.bcard__by{font-size:clamp(.82rem,.78rem + .26vw,.95rem);color:var(--sub);line-height:1.3}
.bcard__st{margin-top:.35em;align-self:flex-start;font-size:clamp(.82rem,.78rem + .26vw,.96rem);font-weight:700;
  border:2px solid var(--ink);border-radius:999px;padding:.15em .7em;background:var(--yellow-soft)}
.bcard.fin .bcard__st{background:var(--mint)}

/* ══════════════ 탐정 돋보기 팝업 ══════════════ */
.scrim{position:fixed;inset:0;background:rgba(28,24,20,.62);z-index:50;backdrop-filter:blur(2px)}
.detmodal{position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1180px,94vw);max-height:94vh;display:flex;flex-direction:column;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:8px 8px 0 var(--ink);
  overflow:hidden;animation:.22s ease dmin}
@keyframes dmin{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.dm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px clamp(10px,1.6vw,16px);border-bottom:3px solid var(--ink);background:#fff}
.dm-gap{flex:1 1 auto}
.dm-head .btn.sm.on{background:var(--yellow)}
.dm-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,268px);gap:clamp(10px,1.4vw,15px);
  padding:clamp(10px,1.6vw,16px);overflow:auto;flex:1 1 auto}
@media (max-width:860px){.dm-body{grid-template-columns:1fr}}
.dm-photo{max-width:none;cursor:crosshair;touch-action:manipulation}
.dm-side{display:flex;flex-direction:column;min-width:0}
.foundlist{display:flex;flex-direction:column;gap:5px}
.fitem{display:flex;align-items:center;gap:.5em;border:2px solid var(--ink);border-radius:999px;background:#fff;
  padding:.3em .8em;font-weight:700;font-size:clamp(.94rem,.88rem + .3vw,1.08rem);box-shadow:2px 2px 0 var(--ink)}
.fitem.on{background:var(--lime-soft)}
.fitem .fnum{width:1.3em;height:1.3em;border:2px solid var(--ink);border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.8em;flex-shrink:0}
.fitem.on .fnum{background:var(--lime)}
.fitem .blank{font-style:normal;font-weight:400;color:#A8A08F}
.dm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:9px clamp(10px,1.6vw,16px);border-top:3px solid var(--ink);background:#fff}
.dm-foot .sub{font-size:clamp(.9rem,.86rem + .3vw,1.06rem)}

/* 못 찾은 자리에 뜨는 물음표 */
.hint{position:absolute;border:4px dashed #FF3E7F;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,62,127,.13);animation:hintblink 1.1s ease-in-out infinite}
.hint span{font-weight:700;color:#FF3E7F;font-size:clamp(1.1rem,1rem + .7vw,1.7rem);
  text-shadow:0 0 5px #fff,0 0 5px #fff,0 0 5px #fff}
@keyframes hintblink{0%,100%{opacity:.45}50%{opacity:1}}

/* 돋보기 */
.lens{position:absolute;width:clamp(110px,15vw,170px);height:clamp(110px,15vw,170px);
  margin-left:calc(clamp(110px,15vw,170px) / -2);margin-top:calc(clamp(110px,15vw,170px) / -2);
  border:4px solid var(--ink);border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,255,255,.6);
  background-repeat:no-repeat;pointer-events:none;z-index:3}

@media (prefers-reduced-motion:reduce){.hint{animation:none;opacity:.85}}

/* ══ 찾은 자리 표시 — 여러 개가 떠도 사진이 어두워지지 않게 ══ */
.hilite{box-shadow:0 0 0 3px rgba(255,62,127,.30);border-width:3px;cursor:pointer}
.hilite .hlabel{display:none}
.hilite.show{border-width:4px;box-shadow:0 0 0 4px rgba(255,62,127,.45),0 6px 16px rgba(0,0,0,.3);z-index:4}
.hilite.show .hlabel{display:block}
.hilite::after{content:"✓";position:absolute;right:-11px;top:-11px;width:22px;height:22px;border-radius:50%;
  background:#FF3E7F;color:#fff;font-weight:700;font-size:13px;line-height:22px;text-align:center;
  border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.hilite.show::after{display:none}
.fitem.on{cursor:pointer}
.fitem.on:active{transform:translate(2px,2px);box-shadow:none}
.fitem.peek{background:#FFE3EE;box-shadow:4px 4px 0 var(--ink)}

/* 마지막 손질 */
.finalpane .bandonly{max-width:620px}
.finalpane{gap:10px}
@media (max-width:620px){
  .hilite::after{width:17px;height:17px;font-size:11px;line-height:17px;right:-8px;top:-8px;border-width:1.5px}
  .hilite{border-width:2px}
  .dm-head{gap:6px;padding:8px 10px}
  .dm-body{padding:10px}
}

/* 책띠 전체에 걸친 것 — 책마다 다르게 설명합니다 */
.wlist{display:flex;flex-direction:column;gap:7px;margin:.6em 0 .2em}
.wrow{display:flex;flex-direction:column;gap:.12em;border-left:4px solid var(--lav);padding-left:.65em}
.wrow--x{border-left-color:var(--pink)}
.wname{font-weight:700;font-size:clamp(.94rem,.88rem + .3vw,1.08rem)}
.wtxt{font-weight:400;font-size:clamp(.88rem,.84rem + .28vw,1rem);line-height:1.55;color:var(--sub)}
.wsum{margin-top:.5em;padding-top:.5em;border-top:2px dashed #D9D2C2;font-weight:700;
  font-size:clamp(.94rem,.88rem + .3vw,1.08rem)}
#dmExtra{background:var(--lav-soft)}

/* ══════════════════════════════════════════════════════════════
   남는 세로 공간 채우기 — 책장은 화면 높이에 맞춰 자랍니다
   ══════════════════════════════════════════════════════════════ */
.stage{flex:1 1 auto}
.stage[data-stage="3"] .bookshelf{flex:1 1 auto;align-content:stretch}
.stage[data-stage="3"] .bcard{height:100%;padding:11px}
.bcard__pic{flex:1 1 auto;min-height:132px;max-height:360px;aspect-ratio:auto}
.bcard__pic img{object-position:center 48%}
.bcard__t{font-size:clamp(1.04rem,.96rem + .48vw,1.32rem);margin-top:.35em}
.bcard__by{font-size:clamp(.86rem,.82rem + .28vw,1rem)}
.bcard__st{font-size:clamp(.86rem,.82rem + .28vw,1.02rem);padding:.2em .85em;margin-top:.45em}

/* 3단계 · 내 그림책 — 빈 아래 공간만큼 쓰는 칸을 넓혀 줍니다 */
.stage[data-stage="5"] .two{flex:1 1 auto;align-items:stretch}
.stage[data-stage="5"] .card-sm{height:100%}
.stage[data-stage="5"] .card-sm > div:last-child{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.stage[data-stage="5"] textarea.field{flex:1 1 auto;min-height:4.4em}
.stage[data-stage="5"] .card-sm > div:last-child > label{flex:0 0 auto}

/* 4단계 · 문장 대장간 — 고른 문장 목록이 남는 자리를 씁니다 */
.stage[data-stage="DEL"] .two{flex:1 1 auto;align-items:stretch}
.stage[data-stage="DEL"] .two > *{height:100%}
.stage[data-stage="DEL"] .trybox{justify-content:flex-start}
.stage[data-stage="DEL"] .madelist{max-height:none;flex:1 1 auto;overflow:auto}
.stage[data-stage="DEL"] .card-sm{display:flex;flex-direction:column}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 발견 요약 */
.stage[data-stage="4"] .two{flex:1 1 auto;align-items:stretch}
.stage[data-stage="4"] .two > .stack{justify-content:flex-start}
.stage[data-stage="4"] .card-sm:first-child{display:flex;flex-direction:column}

/* 표를 한 판에 담기 */
td.y i{width:.85em;height:.85em}
.stage[data-stage="4"] .card-sm{padding:clamp(11px,1.5vw,16px)}

/* 오른쪽 칸의 빈 자리는 '왜 넣지 않았을까' 쓰는 칸이 가져갑니다 */
.stage[data-stage="4"] .two > .stack{flex:1 1 auto}
.stage[data-stage="4"] .two > .stack > .card-sm:nth-child(3){flex:1 1 auto;display:flex;flex-direction:column}
.stage[data-stage="4"] #whyOut{flex:1 1 auto;min-height:4.2em}

/* 6단계 · 완성 — 띠와 돌아보기를 나란히 */
.stage[data-stage="7"] .two{flex:1 1 auto;align-items:stretch}
.stage[data-stage="7"] .two > *{height:100%}
.stage[data-stage="7"] .finalpane{justify-content:center}
.stage[data-stage="7"] .finalpane .bandonly{max-width:100%}
.stage[data-stage="7"] .card-sm{display:flex;flex-direction:column}
.stage[data-stage="7"] #lookRows{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-around}
@media (max-width:900px){.stage[data-stage="7"] .two > *{height:auto}}

/* ══════════════════════════════════════════════════════════════
   1단계 · 무슨 책일까 — 띠 하나로 시작하는 호기심
   ══════════════════════════════════════════════════════════════ */
.hookgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(12px,1.8vw,20px);align-items:start;flex:1 1 auto}
@media (max-width:900px){.hookgrid{grid-template-columns:1fr}}
.hookpic{position:relative;border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--ink);
  background:var(--paper);overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:clamp(8px,1.2vw,14px);min-height:0}
.hkflag{position:absolute;left:14px;top:14px;background:#FF3E7F;color:#fff;font-weight:700;border:2px solid var(--ink);
  border-radius:999px;padding:.2em .9em;font-size:clamp(.88rem,.84rem + .3vw,1.06rem);box-shadow:3px 3px 0 var(--ink)}

.guesses{display:flex;flex-direction:column;gap:8px}
.guess{display:grid;grid-template-columns:auto 1fr;gap:.2em .55em;border-left:4px solid var(--aqua);padding-left:.7em}
.gnum{grid-row:1/3;width:1.6em;height:1.6em;border:2px solid var(--ink);border-radius:50%;background:var(--aqua-soft);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85em;align-self:start}
.gq{font-size:clamp(.86rem,.82rem + .26vw,.98rem);color:var(--sub);font-weight:700}
.ga{font-size:clamp(.94rem,.88rem + .32vw,1.1rem);line-height:1.5}

/* ══ 3단계 · 탐정 회의 — 다시 보기 ══ */
.recallcard{display:flex;flex-direction:column}
.recall{display:flex;gap:7px;margin-bottom:11px;flex-wrap:wrap}
.rthumb{flex:1 1 0;min-width:52px;max-width:92px;aspect-ratio:1.2;border:2px solid var(--ink);border-radius:9px;
  overflow:hidden;background:#EFE7DA;box-shadow:2px 2px 0 var(--ink);cursor:pointer;padding:0;transition:transform .1s}
.rthumb img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.rthumb.on{box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px);outline:3px solid var(--aqua)}
.recallbig{flex:1 1 auto;display:flex;flex-direction:column;gap:7px;min-height:0}
.recallbig .photo{max-width:100%;box-shadow:4px 4px 0 var(--ink)}

.asks{background:var(--accent-soft)}
.asklist{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:.4em}
.asklist li{font-size:clamp(.94rem,.88rem + .32vw,1.1rem);line-height:1.5}
.asklist li::marker{color:var(--sub)}

/* ══ 세로 길이 조이기 ══ */
/* 1단계 · 호기심 */
.hookpic{padding:clamp(6px,.9vw,11px)}
.stage[data-stage="2"] .card-sm{padding:clamp(10px,1.4vw,15px)}
.guesses{gap:6px}
.guess{padding-left:.6em}
.ga{font-size:clamp(.9rem,.86rem + .28vw,1.02rem);line-height:1.45}
.stage[data-stage="2"] .hookgrid{align-items:stretch}
.stage[data-stage="2"] .stack{justify-content:flex-start}

/* 3단계 · 탐정 회의 */
.recallbig .photo{max-width:min(100%,520px);margin-inline:auto}
.recall{margin-bottom:9px}
.rthumb{max-width:82px}
.asks{padding:clamp(9px,1.2vw,13px)!important}
.asklist{gap:.3em;padding-left:1.05em}
.asklist li{font-size:clamp(.9rem,.86rem + .28vw,1.02rem);line-height:1.45}
.stage[data-stage="4"] .reveal{padding:clamp(9px,1.3vw,14px)}
.stage[data-stage="4"] .reveal .big{font-size:clamp(1.02rem,.92rem + .62vw,1.34rem);line-height:1.45}
.stage[data-stage="4"] .pickchip{padding:.3em .75em;font-size:clamp(.88rem,.84rem + .28vw,1rem)}
.stage[data-stage="4"] .recallbig .capsm{font-size:clamp(.86rem,.82rem + .26vw,.98rem)}

/* 3단 배치 — 이야기 나누는 단계는 가로로 펼칩니다 */
.meetgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(11px,1.5vw,17px);align-items:stretch;flex:1 1 auto}
@media (max-width:1100px){.meetgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:720px){.meetgrid{grid-template-columns:1fr}}
.meetgrid > .stack{justify-content:flex-start}
.stage[data-stage="4"] .meetgrid > .stack > .card-sm:first-child{flex:0 0 auto}

.hookgrid--last{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}
.hookgrid--last > .stack{display:contents}
.hookgrid--last .card-sm{align-self:start}
@media (max-width:1000px){.hookgrid--last{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:720px){.hookgrid--last{grid-template-columns:1fr}}

/* ══ 1단계 · 띠를 벗겨도 책이 움직이지 않도록 같은 자리에 겹칩니다 ══ */
.hkstage{position:relative;width:100%;aspect-ratio:1536/1024;max-height:min(52vh,430px);margin-inline:auto}
.hkimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  transition:opacity .55s ease}
#hkOff{opacity:0}
#hkOff.show{opacity:1}
#hkOn.gone{opacity:0}
.hookpic{align-items:center}

/* 띠를 크게 보는 작은 창 */
.hkrow{display:grid;grid-template-columns:auto 1fr;gap:.85em;align-items:start}
.hkpeek{width:clamp(76px,8vw,104px);flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.25em}
.hkpeek img{width:100%;height:auto;display:block;border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink)}
.hkpeek__c{font-size:clamp(.74rem,.72rem + .2vw,.86rem);font-weight:700;color:var(--sub);text-align:center;line-height:1.3}
.hkq{min-width:0}
@media (max-width:520px){.hkrow{grid-template-columns:1fr}.hkpeek{width:min(46%,140px)}}

/* 띠를 벗겨도 책이 제자리에 — 사진 칸 너비를 두 장면에서 똑같이 고정합니다 */
.hookgrid{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
.hookgrid--last{grid-template-columns:minmax(0,560px) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1100px){
  .hookgrid{grid-template-columns:minmax(0,480px) minmax(0,1fr)}
  .hookgrid--last{grid-template-columns:minmax(0,480px) minmax(0,1fr)}
}
@media (max-width:900px){
  .hookgrid,.hookgrid--last{grid-template-columns:1fr}
  .hookgrid--last > .stack{display:contents}
}

/* 단계 칩 줄을 가운데로 */
.progress{justify-content:center}

/* 두 장면 모두 2단 — 사진 칸이 완전히 같고, 칩은 가로로 퍼집니다 */
.hookgrid--last{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
.hookgrid--last > .stack{display:flex}
@media (max-width:1100px){.hookgrid--last{grid-template-columns:minmax(0,480px) minmax(0,1fr)}}
@media (max-width:900px){.hookgrid--last{grid-template-columns:1fr}.hookgrid--last > .stack{display:flex}}

/* 한 판에 담기 */
.hookgrid,.hookgrid--last{grid-template-columns:minmax(0,505px) minmax(0,1fr)}
@media (max-width:1100px){.hookgrid,.hookgrid--last{grid-template-columns:minmax(0,440px) minmax(0,1fr)}}
@media (max-width:900px){.hookgrid,.hookgrid--last{grid-template-columns:1fr}}
.hkstage{max-height:min(46vh,372px)}
.stage[data-stage="2"] .pickchip{padding:.3em .78em;font-size:clamp(.88rem,.84rem + .28vw,1rem)}
.stage[data-stage="2"] .card-sm{padding:clamp(9px,1.25vw,14px)}
.hookpic{padding:clamp(5px,.8vw,9px)}

/* 상단 오른쪽 — 글자 크기 고르개와 버튼의 크기·글씨를 똑같이 */
.topbar-right .zoomselect select,
.topbar-right .btn.sm{
  font-size:var(--lbl);font-weight:700;line-height:1.45;
  padding:.44em 1.1em;border:2px solid var(--ink);border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);background:#fff;color:var(--inktext);
  height:auto;box-sizing:border-box;
}
.topbar-right .zoomselect select{padding-right:2.2em}
.topbar-right .zoomselect .chev{right:1.05em}

/* ══════════════ 크게 보기 창 ══════════════ */
.lightbox{position:fixed;z-index:61;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1100px,94vw);max-height:94vh;display:flex;flex-direction:column;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:8px 8px 0 var(--ink);
  overflow:hidden;animation:.2s ease dmin}
#lbScrim{z-index:60}
.lb-head{display:flex;align-items:center;gap:8px;padding:9px clamp(10px,1.6vw,16px);
  border-bottom:3px solid var(--ink);background:#fff}
.lb-body{padding:clamp(8px,1.4vw,16px);overflow:auto;display:flex;align-items:center;justify-content:center}
.lb-body img{max-width:100%;max-height:78vh;width:auto;height:auto;display:block;
  border:2px solid var(--ink);border-radius:10px;cursor:zoom-out}

/* 크게 보기 단추 */
.zoombtn{position:absolute;right:10px;bottom:10px;z-index:4;
  border:2px solid var(--ink);border-radius:999px;background:rgba(255,251,243,.94);
  box-shadow:3px 3px 0 var(--ink);padding:.32em .9em;font-weight:700;
  font-size:clamp(.86rem,.82rem + .28vw,1.02rem);cursor:pointer}
.zoombtn:active{transform:translate(3px,3px);box-shadow:none}
.hkstage{cursor:zoom-in}

/* 띠 크게 보기 칸이 이제 단추입니다 */
.hkpeek{border:0;background:none;padding:0;cursor:pointer;text-align:center}
.hkpeek:active img{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.hkpeek img{transition:transform .1s}
.hkpeek__c{color:var(--inktext)}

/* ══════════════ 확인 창 ══════════════ */
.askbox{position:fixed;z-index:71;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(440px,92vw);background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--ink);padding:clamp(16px,2.4vw,24px);
  display:flex;flex-direction:column;gap:.55em;animation:.18s ease dmin}
#askScrim{z-index:70}
.askmsg{margin:0;font-weight:700;font-size:clamp(1.14rem,1.02rem + .6vw,1.44rem);line-height:1.45}
.asksub{margin:0;color:var(--sub);font-size:clamp(.92rem,.88rem + .3vw,1.06rem);line-height:1.55}
.askrow{display:flex;gap:9px;justify-content:flex-end;margin-top:.5em;flex-wrap:wrap}
.askrow .btn{font-size:clamp(1rem,.94rem + .34vw,1.14rem);padding:.5em 1.2em}

/* ══ 1단계 — 사진에 윤곽선, 좌우 블록 높이 맞추기 ══ */
.hkstage{border:3px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);
  background:var(--paper)}
.hookgrid,.hookgrid--last{align-items:stretch}
.hookgrid > .hookpic{height:100%}
.hookgrid > .stack{height:100%}
.hookgrid > .stack > .hkwords{flex:0 0 auto}
.hookgrid > .stack > #hkAskBox{flex:1 1 auto;display:flex;flex-direction:column}
.hookgrid > .stack > #hkAskBox textarea{flex:1 1 auto;min-height:3.6em}
.hookgrid--last > .stack > #hkGuessBox{flex:0 0 auto}
.hookgrid--last > .stack > #hkWhyBox{flex:1 1 auto;display:flex;flex-direction:column}

/* 띠에 적힌 말 */
.hkwords{background:var(--aqua-soft)}
.wordlist{margin:.2em 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.wordlist li{border-left:4px solid var(--aqua);padding:.14em 0 .14em .7em;
  font-size:clamp(.96rem,.9rem + .34vw,1.14rem);line-height:1.5;font-weight:700}
.wordlist li::before{content:"“"} .wordlist li::after{content:"”"}
.hkwhy{margin-top:.65em!important;padding-top:.55em;border-top:2px dashed #CFE0E3;font-weight:700;color:var(--inktext)}

/* 띠 그림과 띠 문구를 한 블록에 */
.hkwords .hkrow{grid-template-columns:auto 1fr;gap:.8em;align-items:start}
.hkwords .hkpeek{width:clamp(62px,6.2vw,84px)}
.hkwords .hkpeek__c{font-size:clamp(.7rem,.68rem + .18vw,.8rem)}
.hkwords .wordlist{gap:5px;margin-top:.15em}
.hkwords .wordlist li{font-size:clamp(.92rem,.87rem + .3vw,1.06rem);line-height:1.45;padding-left:.6em}
.hkwhy{margin-top:.55em!important;padding-top:.5em;font-size:clamp(.9rem,.86rem + .28vw,1.02rem)}

/* 1단계를 한 판에 */
.hookgrid > .stack > #hkAskBox textarea{min-height:3em}
.hkwords{padding:clamp(8px,1.1vw,12px)!important}
.hkwords .wordlist{gap:4px}
.stage[data-stage="2"] .card-sm{padding:clamp(9px,1.2vw,13px)}
.hkwhy{margin-top:.45em!important;padding-top:.42em}

/* ══════════════════════════════════════════════════════════════
   하단 버튼바를 절대 넘지 않게 — 쪽 전체가 아니라 본문만 움직입니다
   ══════════════════════════════════════════════════════════════ */
html,body{height:100%}
body{
  height:100dvh;min-height:0;overflow:hidden;padding-bottom:0;
}
.stagewrap{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.topbar,.progress,footer.credit,.btnrow{flex:0 0 auto}

/* 버튼바는 더 이상 떠 있지 않고 맨 아래 줄에 놓입니다 */
.btnrow{position:static;left:auto;right:auto;bottom:auto;z-index:auto}

/* 알림은 버튼바 위에 뜹니다 */
.toast{bottom:clamp(74px,9vh,96px)}

@media print{
  body{height:auto;overflow:visible}
  .stagewrap{overflow:visible}
}

/* 크레딧은 버튼바 위로, 버튼바가 맨 아래 줄 */
footer.credit{order:1}
.btnrow{order:2}
footer.credit{padding:6px 12px 4px}

/* 띠 크게 보기 — 글씨가 읽히도록 키웁니다 */
.hkwords .hkpeek{width:clamp(104px,10.5vw,144px)}
.hkwords .hkpeek__c{font-size:clamp(.82rem,.78rem + .26vw,.96rem)}
.hkwords .hkrow{gap:1em}

/* 띠 그림은 크게, 다만 한 판을 너무 벗어나지 않게 */
.hkwords .hkpeek{width:clamp(96px,9.6vw,128px)}
.hookgrid > .stack > #hkAskBox textarea{min-height:2.8em}

/* 본문과 아래 줄 사이에 숨 쉴 자리 — 그림자까지 잘리지 않도록 */
.stagewrap{
  padding-bottom:clamp(20px,3vh,34px);
  padding-top:clamp(10px,1.6vw,16px);
}
footer.credit{padding:10px 12px 8px;border-top:2px dashed #E3DCCD}
.btnrow{border-top:3px solid var(--ink)}

/* 스크롤 상자의 padding-bottom 은 끝까지 내렸을 때 사라지므로, 여백을 본문 쪽에 둡니다 */
.stagewrap{padding-bottom:0}
.stage{padding-bottom:clamp(22px,3.2vh,36px)}

/* 아래 여백 — padding 은 스크롤 끝에서 사라지므로 실제 칸을 하나 둡니다 */
.stage{padding-bottom:0}
.stage::after{content:"";display:block;flex:0 0 auto;height:clamp(22px,3.2vh,36px)}

/* ══ 사진은 그림자 없이, 빈틈 없는 둥근 실선으로만 ══ */
.hkstage,
.photo,
.bcard__pic,
.bkth,
.recallbig .photo,
.hkpeek img,
.shelfcard svg{
  box-shadow:none;
  border:3px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  background:var(--ink);
}
.bkth,.hkpeek img,.bcard__pic{border-width:2px;border-radius:10px}
.hkimg{object-fit:cover}
.photo img,.bcard__pic img,.bkth img,.hkpeek img{display:block}

/* 크레딧 위 점선 없앰 */
footer.credit{border-top:0}

/* 크레딧을 웹앱 맨 아래로 (버튼바 아래) */
.btnrow{order:1}
footer.credit{order:2}

/* 띠 문구 — 남는 자리를 글씨가 가져갑니다 */
.hkwords .hkrow{align-items:stretch;gap:1.1em}
.hkwords .hkq{display:flex;flex-direction:column;justify-content:center;gap:.35em;min-width:0}
.hkwords h3.mini{font-size:clamp(1.1rem,1rem + .5vw,1.34rem);margin-bottom:.1em}
.hkwords .wordlist{flex:1 1 auto;justify-content:space-evenly;gap:9px;margin-top:.1em}
.hkwords .wordlist li{
  font-size:clamp(1.06rem,.94rem + .58vw,1.38rem);
  line-height:1.42;padding-left:.8em;border-left-width:5px;
}
.hkwhy{font-size:clamp(1rem,.92rem + .38vw,1.16rem)!important;line-height:1.5}
.hkwords .hkpeek{align-self:center}

/* ══ 단계 칩을 상단 내비 안으로, 더 작게 ══ */
.topbar{flex-wrap:wrap;row-gap:6px;padding:7px clamp(12px,3vw,26px) 8px}
.topbar .progress{order:3;flex:1 0 100%;padding:0;gap:5px;justify-content:center;margin-top:1px}
.topbar .steppill{
  font-size:clamp(.8rem,.76rem + .24vw,.94rem);
  padding:.26em .7em .26em .26em;gap:.3em;border-width:2px;box-shadow:1px 1px 0 var(--ink);
}
.topbar .steppill .num{width:1.55em;height:1.55em;font-size:.8em;border-width:1.5px}
.topbar .steppill.on{box-shadow:2px 2px 0 var(--ink)}
.topbar .steppill.done{box-shadow:2px 2px 0 var(--ink)}

/* ══ 1단계 블록 정리 — 사진이 칸을 꽉 채우고, 폭은 사진이 정합니다 ══ */
.hookgrid,.hookgrid--last{
  grid-template-columns:auto minmax(350px,1fr);
  align-items:stretch;
}
@media (max-width:1000px){
  .hookgrid,.hookgrid--last{grid-template-columns:minmax(0,1fr)}
}
.hookpic{
  height:100%;display:flex;align-items:center;justify-content:center;
  max-width:min(56vw,640px);padding:clamp(7px,1vw,11px);
}
.hkstage{
  height:100%;width:auto;max-width:100%;max-height:none;
  aspect-ratio:1400/933;margin:0;
}
.zoombtn{right:calc(clamp(7px,1vw,11px) + 8px);bottom:calc(clamp(7px,1vw,11px) + 8px)}

/* ══════════════════════════════════════════════════════════════
   상단 메뉴바 — 한 줄로: [이름]  [단계 칩]  [설정]
   ══════════════════════════════════════════════════════════════ */
.topbar{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:8px 14px;
  padding:7px clamp(12px,2vw,20px);row-gap:7px;
}
.topbar-left{grid-column:1;grid-row:1;gap:8px}
.topbar .progress{grid-column:2;grid-row:1;justify-content:center;padding:0;margin:0;gap:5px;flex-wrap:wrap}
.topbar-right{grid-column:3;grid-row:1;gap:8px;justify-self:end}

/* 이름표와 설정 단추를 한 줄에 맞게 */
.topbar-left #homeBtn{font-size:clamp(.9rem,.85rem + .28vw,1.04rem);padding:.36em .95em}
.topbar-right .zoomselect select,
.topbar-right .btn.sm{font-size:clamp(.9rem,.85rem + .28vw,1.04rem);padding:.36em .9em;box-shadow:2px 2px 0 var(--ink)}
.topbar-right .zoomselect select{padding-right:1.9em}
.topbar-right .zoomselect .chev{right:.85em}
.brand{height:clamp(24px,2.2vw,32px)}

/* 단계 칩 */
.topbar .steppill{font-size:clamp(.76rem,.72rem + .22vw,.9rem);padding:.24em .62em .24em .24em}
.topbar .steppill .num{width:1.5em;height:1.5em}

/* 좁은 화면에서는 칩을 아랫줄로 */
@media (max-width:1180px){
  .topbar{grid-template-columns:auto auto}
  .topbar-left{grid-column:1;grid-row:1}
  .topbar-right{grid-column:2;grid-row:1}
  .topbar .progress{grid-column:1 / -1;grid-row:2;margin-top:1px}
}

/* 좁은 화면 — 메뉴바가 화면을 너무 먹지 않게 */
@media (max-width:560px){
  .topbar{padding:6px 10px;gap:6px 8px}
  .topbar-left #homeBtn{font-size:.84rem;padding:.3em .8em}
  .topbar-right{gap:6px;flex-wrap:nowrap}
  .topbar-right .zoomselect select,
  .topbar-right .btn.sm{font-size:.82rem;padding:.28em .7em}
  .topbar-right .zoomselect select{padding-right:1.7em}
  .brand{height:20px}
  .topbar .progress{gap:4px}
  .topbar .steppill{font-size:.72rem;padding:.2em .52em .2em .2em}
  .topbar .steppill .num{width:1.45em;height:1.45em}
}

/* ══ 단계 칩을 오른쪽 설정 단추와 같은 크기로 ══ */
.topbar .steppill{
  font-size:clamp(.9rem,.85rem + .28vw,1.04rem);
  padding:.32em .85em .32em .32em;gap:.38em;
  box-shadow:2px 2px 0 var(--ink);
}
.topbar .steppill .num{width:1.6em;height:1.6em;font-size:.82em;border-width:2px}
.topbar .steppill.on,.topbar .steppill.done{box-shadow:3px 3px 0 var(--ink)}
.topbar .progress{gap:6px}

/* 한 줄에 다 들어갈 만큼 넓을 때만 한 줄 */
@media (max-width:1560px){
  .topbar{grid-template-columns:auto auto}
  .topbar-left{grid-column:1;grid-row:1}
  .topbar-right{grid-column:2;grid-row:1}
  .topbar .progress{grid-column:1 / -1;grid-row:2;margin-top:2px}
}
@media (max-width:560px){
  .topbar .steppill{font-size:.8rem;padding:.24em .6em .24em .24em}
  .topbar .steppill .num{width:1.5em;height:1.5em}
}

/* ══ 왼쪽 제목 버튼 — 시각적 문해력 쑥쑥 그림책 자료로 ══ */
#homeBtn{
  background:#fff;display:inline-flex;align-items:center;gap:.3em;
  text-decoration:none;box-shadow:4px 4px 0 var(--ink);white-space:nowrap;
}
#homeBtn:hover{background:var(--yellow-soft)}
#homeBtn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.homebtn__ic{font-weight:900;line-height:1}
.pill__brand{color:#12A98D;font-weight:700}

/* ══════════════════════════════════════════════════════════════
   책띠가 스르르 벗겨지는 연출
   ══════════════════════════════════════════════════════════════ */
#hkOff{opacity:1}              /* 띠 없는 표지가 늘 아래에 깔려 있습니다 */
#hkOn{opacity:1;z-index:2}     /* 띠를 두른 사진이 그 위에 */
#hkOn.gone{opacity:0}

/* 누를 때만 도는 연출 — 위에서 아래로 스르르 걷힙니다 */
.hkstage.anim #hkOn{
  opacity:1;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s cubic-bezier(.38,.02,.2,1),
             opacity .5s ease .72s,
             filter 1.15s ease;
}
.hkstage.anim.go #hkOn{
  clip-path:inset(0 0 100% 0);
  opacity:0;
  filter:brightness(1.4) saturate(.6);
}

/* 걷히는 자리를 따라 흐르는 빛 */
.sweep{
  position:absolute;left:52%;right:4%;height:26%;top:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,248,210,.55) 55%,
    rgba(255,255,255,.95) 78%,
    rgba(255,255,255,0) 100%);
  mix-blend-mode:screen;filter:blur(4px);
}
.hkstage.anim.go .sweep{animation:sweepdown 1.2s cubic-bezier(.38,.02,.2,1) forwards}
@keyframes sweepdown{
  0%{transform:translateY(-100%);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateY(400%);opacity:0}
}

/* 반짝이 */
.sparks{position:absolute;inset:0;z-index:4;pointer-events:none}
.spark{
  position:absolute;display:block;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 16%,rgba(255,238,160,.6) 32%,transparent 66%);
}
.spark::before,.spark::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 44%,#FFF6C9 50%,transparent 56%);
}
.spark::after{transform:rotate(90deg)}
.hkstage.anim.go .spark{animation:sparkpop .8s ease-out forwards}
@keyframes sparkpop{
  0%{opacity:0;transform:scale(.2) rotate(0deg)}
  30%{opacity:1;transform:scale(1.2) rotate(30deg)}
  100%{opacity:0;transform:scale(.4) rotate(80deg)}
}

@media (prefers-reduced-motion:reduce){
  .hkstage.anim #hkOn{transition:none}
  .sweep,.spark{display:none}
}

/* ══ 사진은 어느 장면에서도 같은 크기·같은 자리 ══ */
.hookgrid,.hookgrid--last{grid-template-columns:minmax(0,560px) minmax(0,1fr);align-items:start}
@media (max-width:1040px){.hookgrid,.hookgrid--last{grid-template-columns:minmax(0,1fr)}}
.hookpic{height:auto;max-width:none;align-self:start}
.hkstage{width:100%;height:auto;aspect-ratio:1400/933}
.hookgrid > .stack{align-self:start}

/* 두 장면의 머리말 높이를 붙들어, 아래 내용이 위아래로 흔들리지 않게 */
.stage[data-stage="2"] .pagehead{min-height:clamp(96px,11.5vh,124px)}

/* ══ 두 칸을 같은 고정 높이로 — 사진은 어느 장면에서도 같은 크기·같은 자리 ══ */
.hookgrid,.hookgrid--last{grid-template-columns:auto minmax(330px,1fr);align-items:start}
@media (max-width:1040px){.hookgrid,.hookgrid--last{grid-template-columns:minmax(0,1fr)}}

.hookgrid > .hookpic,.hookgrid--last > .hookpic,
.hookgrid > .stack,.hookgrid--last > .stack{
  height:clamp(296px,45vh,392px);align-self:start;
}
.hookgrid > .hookpic,.hookgrid--last > .hookpic{max-width:min(58vw,660px)}
.hkstage{height:100%;width:auto;max-width:100%;aspect-ratio:1400/933;margin:0 auto}
.hookgrid > .stack,.hookgrid--last > .stack{overflow-y:auto;overflow-x:hidden;padding-right:2px}

@media (max-width:1040px){
  .hookgrid > .hookpic,.hookgrid--last > .hookpic,
  .hookgrid > .stack,.hookgrid--last > .stack{height:auto;overflow:visible}
  .hkstage{width:100%;height:auto}
}

/* ══════════════════════════════════════════════════════════════
   첫 페이지 — 그림 한 장으로
   ══════════════════════════════════════════════════════════════ */
.stage--cover{padding:0}
.stage--cover::after{display:none}
.cover{
  position:relative;flex:1 1 auto;min-height:0;
  border:3px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;background:var(--ink);
}
.cover__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;display:block}
.cover__panel{
  position:absolute;left:50%;bottom:clamp(12px,2.6vh,26px);transform:translateX(-50%);
  width:min(470px,90%);
  background:rgba(255,251,243,.95);backdrop-filter:blur(4px);
  border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:5px 5px 0 var(--ink);
  padding:clamp(11px,1.8vw,17px);display:flex;flex-direction:column;gap:.42em;
}
.cover__panel .lab{margin-bottom:0}
.cover__row{display:flex;gap:9px;align-items:stretch}
.cover__row .field{flex:1 1 auto;min-width:0}
.cover__row .btn{flex:0 0 auto;white-space:nowrap;padding:.6em 1.35em;font-size:var(--base)}
.cover__note{margin:0;color:var(--sub);font-size:clamp(.8rem,.76rem + .24vw,.92rem);line-height:1.45}
@media (max-width:520px){
  .cover__row{flex-direction:column}
  .cover__row .btn{width:100%}
}

/* 푸터를 더 얇게 */
footer.credit{padding:4px 12px 5px;font-size:clamp(.86rem,.82rem + .24vw,1rem);line-height:1.4}
footer.credit .bar{height:.95em}

/* 세로가 넉넉하면 사진도 그만큼 크게 */
.hookgrid > .hookpic,.hookgrid--last > .hookpic,
.hookgrid > .stack,.hookgrid--last > .stack{height:clamp(300px,44vh,468px)}

/* 안내 문구를 본문 아래(푸터 위)에 둡니다 */
.condbar{order:0;flex:0 0 auto;display:flex;justify-content:center;padding:0 12px clamp(6px,1.2vh,12px)}
.condbar[hidden],.condbar:has(.navcond[hidden]){padding-bottom:0}
.navcond{background:var(--accent-soft);border-width:2px;box-shadow:3px 3px 0 var(--ink);
  font-size:clamp(.98rem,.92rem + .34vw,1.16rem);padding:.42em 1.15em}
.btnrow{justify-content:space-between}

/* ══ 1단계 — 남은 높이를 정확히 채워 스크롤이 생기지 않게 ══ */
.stage[data-stage="2"]{min-height:0}
.stage[data-stage="2"] .hookgrid,
.stage[data-stage="2"] .hookgrid--last{flex:1 1 auto;min-height:0}
.hookgrid > .hookpic,.hookgrid--last > .hookpic,
.hookgrid > .stack,.hookgrid--last > .stack{height:100%;min-height:0;align-self:stretch}
.hookgrid > .stack,.hookgrid--last > .stack{overflow:visible;display:flex;flex-direction:column}

/* 띠 문구 칸을 조여 두 칸이 남는 높이 안에 들어오게 */
.hkwords .hkpeek{width:clamp(78px,7.6vw,104px)}
.hkwords .hkrow{gap:.85em}
.hkwords .wordlist{gap:6px}
.hkwords .wordlist li{font-size:clamp(.98rem,.9rem + .44vw,1.2rem);line-height:1.35;padding-left:.7em}
.hkwords h3.mini{font-size:clamp(1.02rem,.95rem + .4vw,1.2rem)}
.hkwhy{font-size:clamp(.92rem,.88rem + .3vw,1.06rem)!important;margin-top:.4em!important;padding-top:.38em}
.hookgrid > .stack > .hkwords{flex:0 0 auto}
.hookgrid > .stack > #hkAskBox{flex:1 1 auto;min-height:0}
.hookgrid > .stack > #hkAskBox textarea{flex:1 1 auto;min-height:2.4em}
.hookgrid--last > .stack > #hkGuessBox{flex:0 0 auto}
.hookgrid--last > .stack > #hkWhyBox{flex:1 1 auto;min-height:0;overflow:auto}

/* 사진은 남은 높이에 맞춰 */
.hkstage{height:100%;width:auto;max-width:100%;aspect-ratio:1400/933;margin:0 auto}

@media (max-width:1040px){
  .stage[data-stage="2"] .hookgrid,.stage[data-stage="2"] .hookgrid--last{flex:0 0 auto}
  .hookgrid > .hookpic,.hookgrid--last > .hookpic,
  .hookgrid > .stack,.hookgrid--last > .stack{height:auto}
  .hkstage{width:100%;height:auto}
}

/* ══ 표지는 쪽 전체를 덮습니다 ══ */
.stagewrap:has(.stage--cover.on){padding:0}
.stage--cover{padding:0;margin:0}
.stage--cover::after{display:none}
.cover{border:0;border-radius:0;box-shadow:none;background:var(--ink)}
.cover__bg{object-position:center 40%}
.cover__go{
  position:absolute;left:50%;bottom:clamp(16px,4.5vh,46px);transform:translateX(-50%);
  font-size:clamp(1.22rem,1.05rem + .75vw,1.72rem);padding:.55em 1.9em;
  box-shadow:5px 5px 0 var(--ink);z-index:2;
  animation:2s ease-in-out infinite covergo;
}
.cover__go:hover{background:#FFD24D}
.cover__go:active{transform:translateX(-50%) translate(4px,4px);box-shadow:1px 1px 0 var(--ink);animation:none}
@keyframes covergo{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.cover__go{animation:none}}

/* ══ 1단계 — 오른쪽 두 칸은 위아래(상하)로 ══ */
.hookgrid,.hookgrid--last{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
.hookgrid > .hookpic,.hookgrid--last > .hookpic{grid-row:auto;max-width:100%}
.hookgrid > .stack,.hookgrid--last > .stack{
  display:flex;flex-direction:column;gap:clamp(8px,1.1vw,13px);
  height:100%;min-height:0;align-self:stretch;overflow:visible;
}
/* 칸은 제 몫만큼만 차지하고, 서로 겹치지 않습니다 */
.hkwords,#hkAskBox,#hkGuessBox,#hkWhyBox{
  height:auto;align-self:auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
.hookgrid > .stack > .hkwords{flex:0 1 auto}
.hookgrid > .stack > #hkAskBox{flex:1 1 auto;min-height:0}
.hkwords .hkrow{flex:0 1 auto;min-height:0}
.hkwords .wordlist{min-height:0}
/* 버튼은 늘 칸의 맨 아래에 */
#hkAskBox > .row{margin-top:auto;flex:0 0 auto}
#hkAskBox textarea{flex:1 1 auto;min-height:2.4em}
.hookgrid--last > .stack > #hkGuessBox{flex:0 0 auto}
.hookgrid--last > .stack > #hkWhyBox{flex:1 1 auto;min-height:0;overflow:auto}
@media (max-width:1040px){
  .hookgrid,.hookgrid--last{grid-template-columns:minmax(0,1fr)}
  .hookgrid > .stack,.hookgrid--last > .stack{height:auto}
  .hkwords,#hkAskBox,#hkGuessBox,#hkWhyBox{overflow:visible}
}

/* ══ 표지 — 여백 한 점 없이 쪽 전체를 덮습니다 ══ */
.stagewrap:has(.stage--cover.on){padding:0 !important}
.stage--cover{max-width:none !important;width:100%;height:100%;padding:0;margin:0;gap:0}
.stage--cover > .cover{flex:1 1 auto;width:100%;min-height:0;border:0;border-radius:0;box-shadow:none}
.stage--cover .cover__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ══ 짐작 칸이 넘치지 않게 — 쓰는 칸이 남는 높이에 맞춰 줄어듭니다 ══ */
#hkAskBox > h3.mini,#hkAskBox > .sub{flex:0 0 auto}
#hkAskBox textarea{flex:1 1 auto;min-height:0 !important;height:auto}
#hkAskBox > .sub{margin-bottom:.35em !important}
#hkAskBox > .row{margin-top:.55em !important}
.hkwords .wordlist{overflow:hidden}

/* ══ 아래 줄을 낮게 — 앞으로·다음은 실선 위에 ══ */
.btnrow{border-top:0;padding-top:5px;padding-bottom:5px}
footer.credit{border-top:3px solid var(--ink);padding:4px 12px 5px}
.condbar{padding-bottom:clamp(4px,.8vh,9px)}
.btnrow .btn{font-size:clamp(.96rem,.9rem + .32vw,1.14rem);padding:.42em 1.2em;box-shadow:3px 3px 0 var(--ink)}
.btnrow{padding-top:6px;padding-bottom:6px}

/* ══ 표지 → 1단계 — 뚝 끊기지 않게 ══ */
.stagewrap:has(.stage--cover.on){overflow:hidden}
.cover{transition:opacity .3s ease,transform .3s ease}
.cover--out{opacity:0;transform:scale(1.035)}
.cover--out .cover__go{opacity:0;transition:opacity .18s ease;animation:none}
@media (prefers-reduced-motion:reduce){.cover,.cover--out{transition:none;transform:none}}

/* ══ 띠 문구 칸 — 줄이 서로 겹치지 않게 (칸을 억지로 줄이지 않습니다) ══ */
.hookgrid > .stack > .hkwords{flex:0 0 auto}
.hkwords .hkrow{flex:0 0 auto;min-height:auto}
.hkwords .wordlist{overflow:visible;min-height:auto}
.hkwords .hkwhy{flex:0 0 auto}

/* ══ 1단계 오른쪽 칸 — 잘리거나 겹치지 않게, 모자라면 그 칸만 살짝 밀립니다 ══ */
.hookgrid > .stack,.hookgrid--last > .stack{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:3px}
.hkwords,#hkAskBox,#hkGuessBox,#hkWhyBox{overflow:visible}
.hookgrid > .stack > .hkwords,
.hookgrid > .stack > #hkAskBox{flex:0 0 auto}
#hkAskBox textarea{min-height:2.6em !important}
#hkAskBox > .row{margin-top:.5em !important}
.stage[data-stage="2"] .pagehead{min-height:0}

/* ══ 화면이 낮을수록 1단계 오른쪽 칸을 차곡차곡 줄여, 스크롤 없이 한 판에 ══ */
@media (max-height:950px){
  .hookgrid > .stack,.hookgrid--last > .stack{gap:9px}
  .stage[data-stage="2"] .card-sm{padding:9px 11px}
  .hkwords .hkpeek{width:clamp(72px,7vw,92px)}
  .hkwords .hkrow{gap:.7em}
  .hkwords .wordlist{gap:4px}
  .hkwords .wordlist li{font-size:clamp(.92rem,.86rem + .34vw,1.06rem);line-height:1.3}
  .hkwords h3.mini{font-size:clamp(.98rem,.92rem + .32vw,1.1rem)}
  .hkwhy{font-size:clamp(.88rem,.84rem + .26vw,1rem)!important;margin-top:.32em!important;padding-top:.3em}
  #hkAsk{font-size:clamp(.98rem,.92rem + .32vw,1.12rem)}
  #hkHint{font-size:clamp(.82rem,.78rem + .22vw,.92rem)!important;margin-bottom:.28em!important}
  #hkAskBox textarea{min-height:2.1em !important}
  #hkAskBox > .row{margin-top:.4em !important}
  #hkGo{padding:.38em 1.05em;font-size:clamp(.94rem,.88rem + .3vw,1.08rem)}
}
@media (max-height:850px){
  .hookgrid > .stack,.hookgrid--last > .stack{gap:7px}
  .stage[data-stage="2"] .card-sm{padding:7px 10px}
  .hkwords .hkpeek{width:clamp(62px,6vw,78px)}
  .hkwords .wordlist{gap:3px}
  .hkwords .wordlist li{font-size:clamp(.86rem,.82rem + .28vw,.98rem);line-height:1.26;padding-left:.6em}
  .hkwords h3.mini{font-size:clamp(.94rem,.9rem + .26vw,1.02rem)}
  .hkwhy{font-size:clamp(.84rem,.8rem + .22vw,.94rem)!important;margin-top:.26em!important;padding-top:.24em}
  #hkAsk{font-size:clamp(.94rem,.9rem + .28vw,1.04rem)}
  #hkAskBox textarea{min-height:1.9em !important}
  #hkGo{padding:.34em 1em;font-size:clamp(.9rem,.86rem + .26vw,1.02rem)}
  .stage[data-stage="2"] .pagehead .stitle{font-size:clamp(1.1rem,1rem + .5vw,1.36rem)}
}

/* ══ 쓰는 칸은 넉넉하게 — 줄어드는 건 둘레 쪽입니다 ══ */
#hkAskBox textarea{min-height:3.2em !important;resize:none}
@media (max-height:950px){
  #hkAskBox textarea{min-height:3em !important}
  .hkwords .hkpeek{width:clamp(66px,6.4vw,84px)}
}
@media (max-height:850px){
  #hkAskBox textarea{min-height:2.7em !important}
  .hkwords .hkpeek{width:clamp(58px,5.6vw,72px)}
  .hkwords .wordlist li{font-size:clamp(.84rem,.8rem + .26vw,.95rem)}
}

/* ══ 낮은 화면에서는 둘레(머리말·여백·안내바)부터 줄입니다 ══ */
@media (max-height:880px){
  .stage{gap:9px}
  .stage::after{height:12px}
  .stagewrap{padding-top:9px}
  .stage[data-stage="2"] .pagehead{padding:7px clamp(12px,1.6vw,18px);gap:.3em .7em;min-height:0}
  .stage[data-stage="2"] .pagehead > .pill{padding:.34em .95em;font-size:clamp(.98rem,.92rem + .38vw,1.16rem)}
  .stage[data-stage="2"] .pagehead h2.stitle{font-size:clamp(1.08rem,1rem + .5vw,1.34rem)}
  .condbar{padding-bottom:4px}
  .navcond{font-size:clamp(.9rem,.86rem + .26vw,1.02rem);padding:.32em .95em}
  .btnrow{padding-top:4px;padding-bottom:4px}
}
@media (max-height:780px){
  .stage{gap:7px}
  .stage::after{height:8px}
  .stagewrap{padding-top:7px}
  .topbar{padding-top:5px;padding-bottom:5px}
  .btnrow .btn{padding:.34em 1.05em;font-size:clamp(.9rem,.86rem + .26vw,1.04rem)}
}

/* ══ 내가 짐작한 것 — 물음표 동그라미 없이 깔끔하게 ══ */
.gnum{display:none}
.guess{grid-template-columns:1fr;gap:.22em;border-left-width:5px;padding-left:.8em}
.gq{color:var(--sub);font-weight:700}
.ga{font-weight:600}
.ga .blank{color:var(--sub);font-weight:400;font-style:normal;opacity:.8}

/* ══ 쓰는 칸은 화면 높이를 따라갑니다 — 낮은 화면에서도 한 판에 ══ */
#hkAskBox textarea{min-height:0 !important;height:clamp(62px,10.5vh,116px)}
@media (max-height:760px){
  .stage[data-stage="2"] .card-sm{padding:6px 9px}
  .hkwords .hkrow{gap:.6em}
  .hkwords .wordlist{gap:2px}
  .hkwords .wordlist li{line-height:1.22}
  .hkwhy{margin-top:.22em!important;padding-top:.2em}
}
@media (max-height:760px){
  .stage[data-stage="2"] .pagehead{padding:5px 10px}
  .hookgrid > .stack,.hookgrid--last > .stack{gap:6px}
  #hkAskBox > .row{margin-top:.3em !important}
}

/* ══ 안내줄은 자리를 늘 차지합니다 (내용이 바뀌어도 옆 그림이 움직이지 않게) ══ */
.condbar{padding-bottom:clamp(6px,1.1vh,12px) !important}
.navcond.done{background:var(--mint);}

/* ══ 표지에서 빠져나갈 때 — 버튼이 튀지 않게 그대로 함께 사라집니다 ══ */
.cover--out{pointer-events:none}
.cover--out .cover__go{opacity:1;animation:2s ease-in-out infinite covergo;transition:none}

/* ══ 칸의 그림자가 잘리지 않게 — 스크롤 상자 안쪽에 자리를 둡니다 ══ */
.hookgrid > .stack,.hookgrid--last > .stack{padding:0 8px 8px 0}

/* ══ 안내줄의 높이를 못 박습니다 — 글이 바뀌어도 옆 그림이 들썩이지 않게 ══ */
.condbar{align-items:center;min-height:clamp(44px,5.6vh,60px);box-sizing:border-box}
@media (min-width:820px){
  .navcond{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
@media (max-height:880px){.condbar{min-height:clamp(40px,5vh,52px)}}
@media (max-height:780px){.condbar{min-height:clamp(36px,4.6vh,46px)}}

/* ══ 왼쪽 사진과 오른쪽 칸의 아래끝을 맞춥니다 ══ */
.hookgrid > .stack,.hookgrid--last > .stack{padding:0 8px 8px 0;margin:0 -8px -8px 0}
.hookgrid > .stack > #hkAskBox{flex:1 1 auto;min-height:0}
.hookgrid > .stack,.hookgrid--last > .stack{height:calc(100% + 8px)}
@media (max-width:1040px){.hookgrid > .stack,.hookgrid--last > .stack{height:auto;margin:0;padding:0}}

/* ══ 띠 전체에 걸친 것 — 그림책 아래에 가로로 펼칩니다 ══ */
.dm-body{grid-template-rows:minmax(0,1fr) auto}
.dm-photo{grid-column:1;grid-row:1}
.dm-side{grid-column:2;grid-row:1/-1}
#dmExtra{
  grid-column:1;grid-row:2;margin-top:0;
  background:var(--lav-soft);text-align:left;padding:.6em .85em;
}
#dmExtra .whead{display:block;line-height:1.5;font-size:clamp(.9rem,.86rem + .28vw,1.02rem);color:var(--inktext)}
#dmExtraTxt{font-weight:400;margin:0}
.wlist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:7px clamp(12px,1.6vw,20px);margin:.5em 0 .1em;
}
.wrow{min-width:0}
@media (max-width:860px){
  .dm-body{grid-template-rows:auto auto auto}
  .dm-photo,.dm-side,#dmExtra{grid-column:1}
  .dm-side{grid-row:2}
  #dmExtra{grid-row:3}
  .wlist{grid-template-columns:1fr}
}

/* ══ 책띠 전체에 걸친 것 — 읽기 쉽게 ══ */
#dmExtra{padding:.7em .95em .75em}
#dmExtra .whead{
  display:block;text-align:left;line-height:1.55;
  font-size:clamp(.96rem,.9rem + .32vw,1.1rem);color:var(--inktext);font-weight:400;
  padding-bottom:.5em;border-bottom:2px dashed #C9BFE8;
}
#dmExtra .whead b{font-weight:800}
.wlist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.55em clamp(14px,1.8vw,26px);margin:.65em 0 0;align-items:start;
}
.wrow{
  display:flex;flex-direction:column;gap:.3em;align-items:flex-start;
  border-left:0;padding-left:0;min-width:0;
}
.wrow + .wrow{position:relative}
.wname{
  display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:999px;
  box-shadow:2px 2px 0 var(--ink);padding:.16em .8em;
  font-weight:800;font-size:clamp(.9rem,.86rem + .26vw,1.02rem);color:var(--inktext);
}
.wrow--x .wname{background:var(--pink)}
.wtxt{
  font-weight:400;color:var(--inktext);text-align:left;
  font-size:clamp(.92rem,.87rem + .3vw,1.04rem);line-height:1.62;
}

/* ══ 사진이 아래 설명 칸을 덮지 않게 — 남은 높이에 맞춰 줄어듭니다 ══ */
.dm-photo{
  height:100%;width:auto;max-width:100%;min-height:0;
  justify-self:center;align-self:center;margin:0 auto;
}
@media (max-width:860px){
  .dm-photo{width:100%;height:auto}
}

/* ══ 팝업은 늘 같은 높이 — 사진이 남은 자리를 정확히 채웁니다 ══ */
.detmodal{height:94vh}
.dm-photo{height:100%;width:auto;max-width:100%;max-height:100%}
@media (max-width:860px){
  .detmodal{height:auto}
  .dm-photo{width:100%;height:auto;max-height:none}
}

/* ══ 힌트 물음표 — 사진 위에서도 또렷하게 ══ */
.hint{
  border:4px dashed #FF3E7F;border-radius:10px;
  background:rgba(255,255,255,.5);
  box-shadow:0 0 0 3px rgba(255,62,127,.3),0 0 14px rgba(255,62,127,.45);
}
.hint span{
  display:flex;align-items:center;justify-content:center;
  min-width:1.55em;height:1.55em;padding:0 .1em;
  background:#fff;border:2px solid #FF3E7F;border-radius:999px;
  color:#FF3E7F;font-weight:800;text-shadow:none;
  box-shadow:2px 2px 0 rgba(255,62,127,.5);
}
@keyframes hintblink{0%,100%{opacity:.82}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hint{animation:none;opacity:1}}
#dmExtra{margin-top:clamp(9px,1.4vh,16px)}

/* ══ 3단계 · 탐정 회의 — 물음 하나 / 물음 둘 / 함께 이야기해 봅시다 를 위아래로 ══ */
.meetgrid{grid-template-columns:minmax(0,.82fr) minmax(0,2fr)}
@media (max-width:1100px){.meetgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}
@media (max-width:820px){.meetgrid{grid-template-columns:1fr}}
.meetcol{display:flex;flex-direction:column;gap:clamp(8px,1.1vw,13px);height:100%;min-height:0}
.qwide{width:100%}
#qOne{flex:0 0 auto}
#qTwo{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.meetcol .asks{flex:0 0 auto}

.qsub{margin-bottom:.45em;font-size:clamp(.86rem,.82rem + .26vw,.98rem)}
#needPick{gap:6px 7px}

/* 물음 둘 — 쓰는 칸과 단추를 한 줄로 길게 */
.qtworow{display:flex;align-items:stretch;gap:9px;flex:1 1 auto;min-height:0}
.qtworow .field{flex:1 1 auto;min-width:0;min-height:clamp(52px,7.5vh,96px);resize:none}
.qtworow .btn{flex:0 0 auto;align-self:flex-end;white-space:nowrap}
@media (max-width:560px){
  .qtworow{flex-direction:column}
  .qtworow .btn{align-self:flex-end}
}

/* 탐정단이 알아낸 것 — 물음 둘 아래에 가로로 */
#bigIdea{margin-top:9px;flex:0 0 auto}
#bigIdea .big{margin:0;line-height:1.45}

/* ══ 탐정 회의 — 남은 높이 안에 딱 들어오게 ══ */
.stage[data-stage="4"] .meetgrid{flex:1 1 auto;min-height:0;align-items:stretch}
.meetgrid > *{min-height:0}
.recallcard{height:100%;min-height:0;overflow:hidden}
.recallbig{flex:1 1 auto;min-height:0;overflow:hidden;justify-content:flex-start}
.recallbig .photo{height:auto;max-height:100%;width:auto;max-width:100%;margin:0 auto;min-height:0}
.meetcol{height:100%;min-height:0}
.meetcol > .asks{flex:0 1 auto;min-height:0;overflow:hidden}
.meetcol > #qOne{flex:0 1 auto;min-height:0}

/* 다시 보기 큰 그림 — 남은 높이에 맞춰 */
.recallbig .photo{width:100%;max-width:min(100%,520px);height:auto;max-height:100%;margin-inline:auto}

/* 세 칸이 잘리지 않도록 조금씩 조입니다 */
.stage[data-stage="4"] .card-sm{padding:clamp(9px,1.2vw,13px)}
.qtworow .field{min-height:clamp(44px,6.2vh,82px)}
.meetcol .asks{padding:clamp(8px,1.1vw,12px)!important}
.meetcol .asklist{gap:.26em;padding-left:1em}
.meetcol .asklist li{font-size:clamp(.88rem,.84rem + .28vw,1.02rem);line-height:1.42}
.stage[data-stage="4"] #needPick .pickchip{padding:.26em .68em;font-size:clamp(.86rem,.82rem + .26vw,.98rem)}
.stage[data-stage="4"] #qOne .qsub{margin-bottom:.35em}
.stage[data-stage="4"] .mini{margin-bottom:.3em}

/* ══ 탐정 회의 — 위 제목만큼 가로로 길게, 네 칸을 위아래로 ══ */
.meetgrid{
  display:flex;flex-direction:column;gap:clamp(8px,1.1vw,13px);
  flex:1 1 auto;min-height:0;width:100%;
}
.meetgrid > *{width:100%;min-height:0}

/* 다시 보기 — 한 줄짜리 띠, 큰 그림은 손을 올리면 떠오릅니다 */
.recallbar{
  position:relative;display:flex;align-items:center;gap:.7em 1em;flex-wrap:wrap;
  flex:0 0 auto;padding:clamp(7px,.95vw,11px) clamp(10px,1.3vw,15px);overflow:visible;
}
.recallbar .rb__t{margin:0;flex:0 0 auto}
.recallbar .rb__s{flex:0 0 auto;font-size:clamp(.82rem,.78rem + .24vw,.94rem)}
.recallbar .recall{margin:0 0 0 auto;flex-wrap:nowrap;gap:6px}
.recallbar .rthumb{flex:0 0 auto}
.recallbar .recallbig{
  position:absolute;right:clamp(10px,1.3vw,15px);bottom:calc(100% + 9px);z-index:20;
  width:min(360px,54vw);flex:0 0 auto;height:auto;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:6px 6px 0 var(--ink);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.recallbar:hover .recallbig,
.recallbar:focus-within .recallbig{opacity:1;visibility:visible;transform:none}
.recallbar .recallbig .photo{width:100%;max-width:100%;max-height:none;margin:0}
.recallbar .recallbig .capsm{margin:.4em 0 0;text-align:center}

/* 물음 하나 — 꼬리표를 제목 옆에 붙여 한 줄 아낍니다 */
#qOne{flex:0 0 auto}
#qOne .mini{display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap;margin-bottom:.4em}
#qOne .qsub{margin:0;font-weight:400}

#qTwo{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.meetgrid > .asks{flex:0 0 auto}
.meetgrid .asklist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.3em clamp(14px,1.8vw,24px);padding-left:1.05em;
}
@media (max-width:760px){.meetgrid .asklist{grid-template-columns:1fr}}

/* ══ 다시 보기 띠는 한 줄로, 큰 그림은 아래쪽 빈자리에 떠오릅니다 ══ */
.meetgrid{position:relative;justify-content:flex-start}
.recallbar{flex-wrap:nowrap;gap:.55em .9em;padding:clamp(6px,.8vw,9px) clamp(10px,1.3vw,15px)}
.recallbar .rb__t{white-space:nowrap;font-size:clamp(.96rem,.9rem + .32vw,1.12rem)}
.recallbar .rb__s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.recallbar .recall{margin:0 0 0 auto;flex-wrap:nowrap;gap:6px}
.recallbar .rthumb{width:clamp(42px,4.4vw,62px);height:clamp(30px,3.1vw,42px)}

.meetgrid > .recallbig{
  position:absolute;right:0;bottom:0;z-index:22;
  width:min(560px,46vw);height:auto;flex:0 0 auto;margin:0;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:7px 7px 0 var(--ink);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  pointer-events:none;
}
.recallbar:hover ~ .recallbig,
.recallbar:focus-within ~ .recallbig{opacity:1;visibility:visible;transform:none}
.meetgrid > .recallbig .photo{width:100%;max-width:100%;max-height:none;margin:0;box-shadow:4px 4px 0 var(--ink)}
.meetgrid > .recallbig .capsm{margin:.45em 0 0;text-align:center}

/* 칸들은 제 높이만큼만 */
#qTwo{flex:0 0 auto}
.qtworow .field{min-height:clamp(48px,6.6vh,92px)}
@media (max-width:820px){
  .recallbar{flex-wrap:wrap}
  .recallbar .rb__s{display:none}
  .meetgrid > .recallbig{position:static;width:100%;opacity:1;visibility:visible;transform:none;box-shadow:5px 5px 0 var(--ink)}
}
.stage[data-stage="4"] .recallbar{flex-direction:row;align-items:center}
.qtworow .field{min-height:clamp(44px,5.6vh,84px)}
.meetgrid > .asks{padding:clamp(7px,.95vw,11px) clamp(10px,1.3vw,15px)!important}
.meetgrid .asklist li{line-height:1.4}
.stage[data-stage="4"] .meetgrid > .recallbar{flex-direction:row !important;align-items:center;flex-wrap:nowrap}
.qtworow .field{min-height:0 !important;height:clamp(54px,7.2vh,100px)}

/* ══ 탐정단이 알아낸 것 — 한 줄로 납작하게 ══ */
#bigIdea{
  display:flex;align-items:center;gap:.7em;flex-wrap:wrap;
  margin-top:8px;padding:.42em .75em;text-align:left;
}
#bigIdea .bi__tag{flex:0 0 auto;padding:.24em .8em;font-size:clamp(.84rem,.8rem + .24vw,.95rem)}
#bigIdea .big{
  flex:1 1 240px;min-width:0;margin:0;text-align:left;
  font-size:clamp(1rem,.92rem + .46vw,1.24rem);line-height:1.4;
}
/* 알아낸 것이 뜨면 쓰는 칸을 살짝 줄여 한 판을 지킵니다 */
#qTwo:has(#bigIdea:not([hidden])) .qtworow .field{height:clamp(44px,5.2vh,74px)}
.meetgrid{gap:clamp(7px,.95vw,12px)}
#qTwo:has(#bigIdea:not([hidden])) .qtworow .field{height:clamp(42px,4.8vh,70px)}

/* ══ 탐정 회의 — 낮은 화면에서는 둘레부터 조입니다 ══ */
@media (max-height:880px){
  .stage[data-stage="4"] .pagehead{padding:7px clamp(12px,1.6vw,18px)}
  .stage[data-stage="4"] .pagehead > .pill{padding:.3em .9em;font-size:clamp(.94rem,.9rem + .32vw,1.1rem)}
  .stage[data-stage="4"] .pagehead h2.stitle{font-size:clamp(1.04rem,.98rem + .46vw,1.28rem)}
  .stage[data-stage="4"] .card-sm{padding:7px 11px}
  .recallbar .rthumb{width:clamp(38px,3.9vw,52px);height:clamp(26px,2.7vw,35px)}
  .stage[data-stage="4"] #needPick .pickchip{padding:.2em .62em;font-size:clamp(.82rem,.78rem + .24vw,.94rem)}
  .meetgrid .asklist li{font-size:clamp(.84rem,.8rem + .26vw,.96rem);line-height:1.36}
  #bigIdea{padding:.34em .7em;margin-top:6px}
  #bigIdea .big{font-size:clamp(.96rem,.9rem + .4vw,1.14rem)}
}
@media (max-height:780px){
  .stage[data-stage="4"] .card-sm{padding:6px 10px}
  .recallbar .rb__s{display:none}
  .recallbar .rthumb{width:clamp(34px,3.5vw,46px);height:clamp(23px,2.4vw,31px)}
  .stage[data-stage="4"] .mini{font-size:clamp(.92rem,.88rem + .3vw,1.04rem)}
  .meetgrid .asklist li{font-size:clamp(.8rem,.78rem + .22vw,.9rem);line-height:1.32}
  #bigIdea .big{font-size:clamp(.9rem,.86rem + .34vw,1.04rem)}
  .meetgrid{gap:6px}
}

/* ══ 탐정 회의 — 이전 배치로 되돌립니다 (왼쪽 다시 보기 + 오른쪽 위아래 세 칸) ══ */
.meetgrid{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,2fr);
  gap:clamp(8px,1.1vw,13px);align-items:stretch;flex:1 1 auto;min-height:0;position:relative;
}
@media (max-width:1100px){.meetgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}
@media (max-width:820px){.meetgrid{grid-template-columns:1fr}}

.stage[data-stage="4"] .meetgrid > .recallcard{
  display:flex !important;flex-direction:column !important;align-items:stretch;
  height:100%;min-height:0;overflow:hidden;padding:clamp(9px,1.2vw,13px);
}
.recallcard .rb__t{margin:0 0 .25em;white-space:normal}
.recallcard .rb__s{margin:0 0 .5em;font-size:clamp(.82rem,.78rem + .24vw,.94rem)}
.recallcard .recall{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 9px}
.recallcard .rthumb{width:auto;height:auto}
.recallcard .recallbig{
  position:static;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;
  width:auto;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
}
.recallcard .recallbig .photo{
  width:100%;max-width:min(100%,520px);height:auto;max-height:100%;margin-inline:auto;
  box-shadow:4px 4px 0 var(--ink);
}
.recallcard .recallbig .capsm{margin:.35em 0 0;text-align:center}

.meetcol{display:flex;flex-direction:column;gap:clamp(8px,1.1vw,13px);height:100%;min-height:0}
.meetcol > #qOne{flex:0 0 auto}
.meetcol > #qTwo{flex:0 0 auto}
.meetcol > .asks{flex:0 1 auto;min-height:0}
.meetgrid .asklist{grid-template-columns:1fr}

/* ══════════════════════════════════════════════════════════════
   4단계 · 함께 읽기 — 표지를 눌러 펼쳐 보는 그림책
   ══════════════════════════════════════════════════════════════ */
.readgrid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
  gap:clamp(10px,1.5vw,18px);align-items:stretch;flex:1 1 auto;min-height:0;
}
@media (max-width:900px){.readgrid{grid-template-columns:1fr}}

/* 표지 — 누르면 펼쳐집니다 */
.bookcover{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:100%;min-height:0;padding:clamp(10px,1.4vw,16px);
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:5px 5px 0 var(--ink);cursor:pointer;overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease;
}
.bookcover:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.bookcover:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.bookcover img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border:3px solid var(--ink);border-radius:12px;
}
.bookcover__cta{
  position:absolute;left:50%;bottom:clamp(12px,2vh,22px);transform:translateX(-50%);
  background:var(--yellow);border:2px solid var(--ink);border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);padding:.38em 1.1em;white-space:nowrap;
  font-weight:700;font-size:clamp(.94rem,.88rem + .32vw,1.1rem);
}
.bookcover.read .bookcover__cta{background:#fff}
.bookcover__done{
  position:absolute;right:12px;top:12px;
  background:var(--mint);border:2px solid var(--ink);border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);padding:.24em .8em;
  font-weight:800;font-size:clamp(.84rem,.8rem + .26vw,.96rem);
}

/* 오른쪽 — 책 소개와 쓰는 칸 */
.readcol{display:flex;flex-direction:column;gap:clamp(8px,1.1vw,13px);height:100%;min-height:0}
.readmeta{flex:0 0 auto;background:var(--lime-soft)}
.readmeta .rm__t{margin:.35em 0 .1em;font-weight:800;line-height:1.3;
  font-size:clamp(1.12rem,1rem + .62vw,1.5rem)}
.readmeta .rm__b{margin:0;color:var(--sub);font-size:clamp(.88rem,.84rem + .28vw,1rem)}
.readmeta .rm__g{margin:.5em 0 0;line-height:1.5;font-size:clamp(.9rem,.86rem + .3vw,1.04rem)}
.readcol > .card-sm:not(.readmeta){flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.readcol textarea.field{flex:1 1 auto;min-height:2.4em;resize:none}
.labsub{font-weight:400;color:var(--sub)}
.card-sm.locked{opacity:.55}
.card-sm.locked textarea{background:#F3EFE6;cursor:not-allowed}

/* ── 펼쳐 보기 창 ── */
.bookmodal{
  position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1180px,94vw);height:94vh;display:flex;flex-direction:column;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--ink);overflow:hidden;animation:.22s ease dmin;
}
.bk-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px clamp(10px,1.6vw,16px);border-bottom:3px solid var(--ink);background:#fff}
.bk-body{
  position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,1.6vw,18px);cursor:pointer;
  background:repeating-linear-gradient(90deg,#F1EADC 0 26px,#EFE7DA 26px 52px);
}
.bk-page{
  height:100%;width:auto;max-width:100%;display:flex;align-items:center;justify-content:center;
  transform-origin:left center;
}
.bk-page img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border:3px solid var(--ink);border-radius:10px;box-shadow:6px 6px 0 rgba(42,39,33,.3);
  background:#fff;
}
.bk-page.is-cover img{border-radius:14px}
.bk-page.flip-r{animation:.46s cubic-bezier(.3,.02,.2,1) flipr}
.bk-page.flip-l{animation:.46s cubic-bezier(.3,.02,.2,1) flipl}
@keyframes flipr{
  0%{transform:perspective(1600px) rotateY(-38deg) translateX(9%);opacity:.25;filter:brightness(1.18)}
  60%{opacity:1}
  100%{transform:none;opacity:1;filter:none}
}
@keyframes flipl{
  0%{transform:perspective(1600px) rotateY(38deg) translateX(-9%);opacity:.25;filter:brightness(1.18)}
  60%{opacity:1}
  100%{transform:none;opacity:1;filter:none}
}
@media (prefers-reduced-motion:reduce){.bk-page.flip-r,.bk-page.flip-l{animation:none}}

.bk-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:clamp(38px,3.4vw,50px);height:clamp(52px,5vw,72px);
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:3px solid var(--ink);border-radius:12px;
  box-shadow:3px 3px 0 var(--ink);cursor:pointer;
  font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);font-weight:800;line-height:1;color:var(--ink);
}
.bk-nav--l{left:clamp(6px,1vw,14px)}
.bk-nav--r{right:clamp(6px,1vw,14px)}
.bk-nav:hover:not(:disabled){background:var(--yellow)}
.bk-nav:active:not(:disabled){transform:translateY(-50%) translate(2px,2px);box-shadow:none}
.bk-nav:disabled{opacity:.3;cursor:default}

.bk-foot{
  display:flex;align-items:center;gap:clamp(10px,1.5vw,18px);flex-wrap:wrap;
  padding:10px clamp(10px,1.6vw,16px);border-top:3px solid var(--ink);background:#fff;
}
.bk-txt{
  flex:1 1 260px;min-width:0;margin:0;line-height:1.55;
  font-size:clamp(.98rem,.9rem + .44vw,1.2rem);
}
.bk-txt b{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 .06em}
.bk-dots{display:flex;gap:7px;flex:0 0 auto}
.bkdot{
  width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;
  background:#fff;cursor:pointer;padding:0;
}
.bkdot.seen{background:var(--lime-soft)}
.bkdot.on{background:var(--ink);transform:scale(1.15)}
.bk-foot .btn{flex:0 0 auto}
@media (max-width:700px){
  .bookmodal{width:96vw;height:92vh}
  .bk-foot{gap:8px}
  .bk-txt{flex:1 1 100%;font-size:clamp(.9rem,.86rem + .3vw,1rem)}
}

/* ══ 탐정단이 알아낸 것 — 한 줄 덧붙임 ══ */
#bigIdea{flex-direction:column;align-items:flex-start;gap:.3em}
#bigIdea .bi__sub{
  margin:0;line-height:1.5;color:var(--inktext);
  font-size:clamp(.88rem,.84rem + .28vw,1rem);
}

/* ══ 물음 하나 · 물음 둘 — 이름표를 단추처럼, 띄어쓰기는 반듯하게 ══ */
#qOne .mini,#qTwo .mini{display:block}          /* flex 를 풀어 낱말 사이가 벌어지지 않게 */
.qhead{
  display:flex !important;align-items:center;gap:.5em;flex-wrap:wrap;
  margin-bottom:.5em;line-height:1.35;
}
.qhead__n{
  flex:0 0 auto;padding:.26em .85em;border-width:2px;box-shadow:3px 3px 0 var(--ink);
  font-size:clamp(.86rem,.82rem + .26vw,.98rem);font-weight:800;
}
.qhead__t{
  flex:1 1 auto;min-width:0;font-weight:800;
  font-size:clamp(1rem,.94rem + .38vw,1.18rem);
  word-break:keep-all;line-break:strict;
}
.qhead__t b{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 .06em}
.qhead__s{
  flex:0 0 auto;font-weight:400;color:var(--sub);
  font-size:clamp(.84rem,.8rem + .24vw,.95rem);
}
.qhead__s b{color:var(--inktext);font-weight:800;margin-left:.2em}

/* 쓰는 칸이 글씨를 가리지 않게 */
.qtworow .field{height:clamp(58px,7.6vh,104px);line-height:1.5}
#qTwo:has(#bigIdea:not([hidden])) .qtworow .field{height:clamp(50px,6vh,84px)}
@media (max-height:880px){.qtworow .field{height:clamp(52px,6.6vh,88px)}}

/* ══ 알아낸 것 — 오른쪽 칸 안에서 납작하게 ══ */
#bigIdea{display:block;padding:.5em .8em;margin-top:8px;text-align:left}
#bigIdea .bi__tag{display:inline-flex;margin:0 0 .3em}
#bigIdea .big{display:block;flex:none;margin:0;text-align:left;
  font-size:clamp(.98rem,.92rem + .4vw,1.16rem);line-height:1.45}
#bigIdea .bi__sub{margin:.28em 0 0;font-size:clamp(.86rem,.82rem + .26vw,.98rem)}
.qtworow .field{height:clamp(64px,8vh,108px)}
#qTwo:has(#bigIdea:not([hidden])) .qtworow .field{height:clamp(56px,6.6vh,90px)}

/* ══ 알아낸 것 — 이름표와 문장을 한 줄로 ══ */
#bigIdea{padding:.45em .75em;margin-top:7px}
#bigIdea .bi__tag{display:inline-flex;margin:0 .45em 0 0;vertical-align:1px}
#bigIdea .big{display:inline;font-size:clamp(.96rem,.9rem + .38vw,1.12rem)}
#bigIdea .bi__sub{margin:.22em 0 0;font-size:clamp(.84rem,.8rem + .24vw,.94rem);line-height:1.45}

/* 물음 하나 — 칩을 한 뼘 줄여 자리를 냅니다 */
.stage[data-stage="4"] #needPick{gap:5px 6px}
.stage[data-stage="4"] #needPick .pickchip{padding:.22em .66em;font-size:clamp(.84rem,.8rem + .24vw,.95rem)}
.meetcol > .asks{flex:0 0 auto;overflow:visible}

/* ══ 다시 보기 — 손을 올리면 칸 밖으로 크게 펼쳐집니다 ══ */
.stage[data-stage="4"] .meetgrid > .recallcard{overflow:visible;position:relative}
.recallcard .recallbig{transition:opacity .16s ease}
.recallcard:hover .recallbig,
.recallcard:focus-within .recallbig{
  position:absolute;left:11px;bottom:11px;z-index:40;
  width:min(700px,58vw);
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--ink);padding:11px;
}
.recallcard:hover .recallbig .photo,
.recallcard:focus-within .recallbig .photo{max-width:100%;box-shadow:5px 5px 0 var(--ink)}
.recallcard:hover .recallbig .capsm,
.recallcard:focus-within .recallbig .capsm{font-size:clamp(.92rem,.88rem + .3vw,1.06rem)}
@media (max-width:1100px){
  .recallcard:hover .recallbig,.recallcard:focus-within .recallbig{width:min(560px,54vw)}
}
@media (max-width:820px){
  .recallcard:hover .recallbig,.recallcard:focus-within .recallbig{position:static;width:auto;background:none;border:0;box-shadow:none;padding:0}
}
.meetcol .asklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.3em clamp(14px,1.8vw,24px)}
@media (max-width:760px){.meetcol .asklist{grid-template-columns:1fr}}

/* ══ 함께 읽기 — 예전 '내 그림책' 규칙을 걷어냅니다 ══ */
.stage[data-stage="5"] .readcol > .card-sm{height:auto}
.stage[data-stage="5"] .readcol > .readmeta{flex:0 0 auto}
.stage[data-stage="5"] .readcol > .card-sm:not(.readmeta){flex:1 1 auto;min-height:0}
.stage[data-stage="5"] .readcol > .card-sm > div:last-child{flex:0 0 auto}
.readcol .lab{flex:0 0 auto;margin-bottom:.35em}

/* ══ 함께 읽기 — 다듬기 ══ */
.bookcover{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.55),transparent 60%),
    repeating-linear-gradient(26deg,#F3ECDE 0 22px,#F0E8D8 22px 44px);
}
.bookcover img{
  box-shadow:7px 7px 0 rgba(42,39,33,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
.bookcover:hover img{transform:translateY(-3px) rotate(-.6deg);box-shadow:10px 10px 0 rgba(42,39,33,.3)}
.bookcover__cta{background:var(--yellow);animation:2.4s ease-in-out infinite ctabob}
@keyframes ctabob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
.bookcover.read .bookcover__cta{background:#fff;animation:none}
@media (prefers-reduced-motion:reduce){.bookcover__cta{animation:none}}

.readmeta{border-width:3px}
.rm__top{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;justify-content:space-between}
.rm__prog{flex:0 0 auto;font-size:clamp(.82rem,.78rem + .24vw,.94rem);padding:.24em .8em;border-width:2px;box-shadow:2px 2px 0 var(--ink)}

/* 쓰는 칸 두 개 — 물음 칸과 같은 옷 */
.rbox__h{margin-bottom:.45em;cursor:text}
.rbox__lock{
  flex:0 0 auto;margin-left:auto;font-weight:700;color:var(--sub);
  font-size:clamp(.8rem,.78rem + .22vw,.9rem);
}
.card-sm:not(.locked) .rbox__lock{display:none}
.card-sm.locked{opacity:1;background:#F7F3EA;border-style:dashed}
.card-sm.locked .qhead__n{opacity:.55}
.card-sm.locked .qhead__t{color:var(--sub)}
.card-sm.locked textarea{background:#F0EBE0;color:var(--sub);cursor:not-allowed}
.rbox textarea.field{flex:1 1 auto;min-height:2.6em}

/* ══ 다시 보기 — 남는 자리에 '이 책띠에 있던 것'을 함께 보여 줍니다 ══ */
.recallcard .recallbig{justify-content:flex-start}
.hadlist{
  display:flex;flex-wrap:wrap;gap:4px 5px;margin-top:.15em;
  align-content:flex-start;min-height:0;
}
.hadchip{
  border:2px solid #CFC7B5;border-radius:999px;background:#fff;color:#A9A190;
  padding:.14em .6em;font-size:clamp(.74rem,.72rem + .2vw,.85rem);font-weight:700;
  white-space:nowrap;
}
.hadchip.on{border-color:var(--ink);background:var(--lime-soft);color:var(--inktext)}
.recallcard:hover .recallbig .hadlist,
.recallcard:focus-within .recallbig .hadlist{gap:5px 6px}
.recallcard:hover .hadchip,
.recallcard:focus-within .hadchip{font-size:clamp(.8rem,.76rem + .24vw,.92rem);padding:.18em .7em}

/* ══ 물음 하나 — 열한 칸을 반듯한 격자로 ══ */
.stage[data-stage="4"] #needPick{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:6px;align-items:stretch;
}
.stage[data-stage="4"] #needPick .pickchip{
  width:100%;justify-content:center;text-align:center;
  padding:.3em .5em;font-size:clamp(.84rem,.8rem + .24vw,.96rem);
  word-break:keep-all;line-break:strict;
}
@media (max-width:620px){
  .stage[data-stage="4"] #needPick{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
}

/* 쓰는 칸이 글씨를 자르지 않게 */
.qtworow .field{height:clamp(70px,8.6vh,112px)}
#qTwo:has(#bigIdea:not([hidden])) .qtworow .field{height:clamp(62px,7.2vh,96px)}

/* ══ 탐정 회의 — 세 칸이 한 판에 들어오도록 마지막으로 조입니다 ══ */
.stage[data-stage="4"] #needPick{
  display:flex;flex-wrap:wrap;gap:6px;
  max-width:min(100%,680px);
}
.stage[data-stage="4"] #needPick .pickchip{
  width:auto;padding:.26em .72em;font-size:clamp(.84rem,.8rem + .24vw,.96rem);
}
.meetcol{gap:9px}
.stage[data-stage="4"] .card-sm{padding:8px 11px}
.stage[data-stage="4"] .qhead{margin-bottom:.35em}
.qtworow .field{height:clamp(58px,7vh,92px)}
#qTwo:has(#bigIdea:not([hidden])) .qtworow .field{height:clamp(52px,6.2vh,82px)}
#bigIdea{padding:.4em .7em;margin-top:6px}
#bigIdea .big{font-size:clamp(.94rem,.88rem + .34vw,1.08rem);line-height:1.42}
#bigIdea .bi__sub{font-size:clamp(.82rem,.78rem + .22vw,.92rem);line-height:1.4;margin-top:.18em}
.meetcol .asklist li{font-size:clamp(.86rem,.82rem + .26vw,.98rem);line-height:1.38}

/* ══════════════════════════════════════════════════════════════
   한 판에 욱여넣지 않습니다
   ─ 칸은 제 내용만큼 자라고, 모자라면 본문이 스크롤됩니다.
   ─ 어느 칸도 겹치거나 잘리지 않습니다.
   ══════════════════════════════════════════════════════════════ */
.stagewrap{overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}

/* 세로로 쌓는 칸들 — 자리가 모자라면 줄어드는 대신 늘어납니다 */
.meetcol,.readcol,
.hookgrid > .stack,.hookgrid--last > .stack{
  height:auto !important;min-height:100%;overflow:visible !important;
}
.meetcol > *,.readcol > *,
.hookgrid > .stack > *,.hookgrid--last > .stack > *{
  flex:0 0 auto !important;min-height:0;overflow:visible !important;
}
.stage[data-stage="4"] .meetgrid > .recallcard,
.stage[data-stage="5"] .readcol > .card-sm{height:auto;min-height:0}
.stage[data-stage="4"] .meetgrid{align-items:stretch}
.meetgrid > .recallcard{min-height:100%}

/* 쓰는 칸은 고정 높이 대신 넉넉한 최소 높이로 */
.qtworow .field{height:auto !important;min-height:4.4em !important}
#qTwo:has(#bigIdea:not([hidden])) .qtworow .field{height:auto !important;min-height:3.6em !important}
#hkAskBox textarea{height:auto !important;min-height:4em !important}
.readcol textarea.field{min-height:4.4em}
.rbox textarea.field{flex:0 0 auto}

/* 사진은 칸 높이에 매이지 않습니다 */
.hookgrid > .hookpic{height:auto}
.hkstage{height:auto;width:100%;max-width:100%}
.readgrid{align-items:stretch}
.bookcover{height:auto;min-height:100%}

/* 본문 아래 숨 쉴 자리 */
.stage::after{height:clamp(18px,2.6vh,30px)}
/* 그림책 창 — 아래 글줄을 걷어내고 그림을 더 크게 */
.bk-foot{justify-content:center;gap:clamp(12px,2vw,26px);padding:8px clamp(10px,1.6vw,16px)}
.bk-dots{margin:0}

/* ══ 다시 보기 — 크게 뜨는 창은 칸 오른쪽으로, 썸네일을 가리지 않습니다 ══ */
.recallcard:hover .recallbig,
.recallcard:focus-within .recallbig{
  position:static;width:auto;background:none;border:0;box-shadow:none;padding:0;
}
.recallpop{
  position:absolute;left:calc(100% + 10px);top:0;z-index:40;
  width:min(660px,48vw);
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--ink);padding:11px;
  opacity:0;visibility:hidden;transform:translateX(-8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  pointer-events:none;                 /* 썸네일 위로 마우스가 그대로 지나갑니다 */
}
.recallcard:hover .recallpop,
.recallcard:focus-within .recallpop{opacity:1;visibility:visible;transform:none}
.recallpop .photo{width:100%;max-width:100%;max-height:none;margin:0;box-shadow:5px 5px 0 var(--ink)}
.recallpop .capsm{margin:.45em 0 .3em;text-align:center;font-size:clamp(.92rem,.88rem + .3vw,1.06rem)}
.recallpop .hadlist{justify-content:center;gap:5px 6px}
.recallpop .hadchip{font-size:clamp(.8rem,.76rem + .24vw,.92rem);padding:.18em .7em}
@media (max-width:1100px){.recallpop{width:min(520px,46vw)}}
@media (max-width:900px){.recallpop{display:none}}

/* ══ 크게 보기 — 썸네일을 가리킬 때만, 살짝 뜸을 두고 ══ */
.recallcard:hover .recallpop,
.recallcard:focus-within .recallpop{opacity:0;visibility:hidden;transform:translateX(-8px)}
#recallRow:hover ~ .recallpop,
#recallRow:focus-within ~ .recallpop{
  opacity:1 !important;visibility:visible !important;transform:none !important;
}
.recallpop{
  top:50%;bottom:auto;transform:translateY(-50%) translateX(-8px);
  transition:opacity .16s ease .16s,transform .16s ease .16s,visibility .16s .16s;
}
#recallRow:hover ~ .recallpop,
#recallRow:focus-within ~ .recallpop{transform:translateY(-50%) !important}
.rthumb{cursor:zoom-in}
/* 크게 보기 창은 썸네일을 가리킬 때만 (다시 그려도 흔들리지 않게 클래스로) */
#recallRow:hover ~ .recallpop,
#recallRow:focus-within ~ .recallpop{opacity:0 !important;visibility:hidden !important}
.recallcard.pop .recallpop{
  opacity:1 !important;visibility:visible !important;transform:translateY(-50%) !important;
}
/* 최종 판정 — 썸네일을 가리킬 때(.pop)만 크게 보입니다 */
.recallcard.pop #recallPop{opacity:1 !important;visibility:visible !important;transform:translateY(-50%) !important}
.recallcard:not(.pop) #recallPop{opacity:0 !important;visibility:hidden !important;transform:translateY(-50%) translateX(-8px) !important}

/* ══ 둥근 실선이 모서리에서 끊겨 보이지 않게 ══ */
.photo,.rthumb,.bkth,.bcard__pic,.hkstage,.recallpop .photo,.recallbig .photo{
  overflow:hidden;background-clip:padding-box;isolation:isolate;
}
.photo > img,
.rthumb > img,
.bkth > img,
.bcard__pic > img,
.hkstage > .hkimg,
.recallpop .photo > img,
.recallbig .photo > img{
  border-radius:inherit;
  /* 머리카락만 한 틈도 남지 않도록 아주 살짝 넘겨 그립니다 */
  inset:-0.5px;width:calc(100% + 1px);height:calc(100% + 1px);
}

/* 크게 보기 창 — 보임/숨김은 곧바로, 부드러움은 투명도로만 */
.recallpop{transition:opacity .16s ease .16s,transform .16s ease .16s}
.recallcard.pop #recallPop{visibility:visible !important}
.recallcard:not(.pop) #recallPop{visibility:hidden !important}
/* 다시 보기 칸을 더 넓게 */
.meetgrid{grid-template-columns:minmax(0,1.06fr) minmax(0,1.94fr)}
@media (max-width:1100px){.meetgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}}
@media (max-width:820px){.meetgrid{grid-template-columns:1fr}}
.recallpop{width:min(620px,44vw)}

/* ══ 가운데 크게 뜨던 창은 없앴습니다 — 누르면 화면 가득 보기로 갈음 ══ */
.recallpop{display:none !important}
.recallcard:hover .recallbig,
.recallcard:focus-within .recallbig{
  position:static;width:auto;background:none;border:0;box-shadow:none;padding:0;
  opacity:1;visibility:visible;transform:none;
}

/* ══ 다시 보기 칸을 조금 더 넓게 ══ */
.meetgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr)}
@media (max-width:1100px){.meetgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
@media (max-width:820px){.meetgrid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   사진은 그림자 없이, 빈틈 없는 둥근 실선 하나로만
   (그림자가 모서리에서 선을 두껍게 겹쳐 끊긴 것처럼 보였습니다)
   ══════════════════════════════════════════════════════════════ */
.photo,
.recallbig .photo,
.meetgrid > .recallbig .photo,
.recallcard .recallbig .photo,
.recallcard:hover .recallbig .photo,
.recallcard:focus-within .recallbig .photo,
.rthumb,
.rthumb.on,
.rthumb:hover,
.bkth,
.bcard__pic,
.hkstage,
.hkpeek img,
.hkpeek:active img,
.bookcover img,
.bookcover:hover img,
.bk-page img,
#lbImg{
  box-shadow:none !important;
}
/* 선택된 썸네일은 그림자 대신 테두리로만 표시합니다 */
.rthumb.on{outline:3px solid var(--aqua);outline-offset:1px;transform:none}
.rthumb:hover{transform:translateY(-2px)}
/* 선이 한 겹으로 또렷하게 */
.photo,.recallbig .photo{border:3px solid var(--ink);border-radius:12px;background-clip:padding-box}
.bookcover:hover img{transform:translateY(-3px) rotate(-.6deg)}

/* ══════════════════════════════════════════════════════════════
   탐정단이 알아낸 것 — 이 차시의 결론이 놓이는 자리
   빼는 쪽은 흐리게, 남기는 쪽은 또렷하게. 대비가 곧 내용입니다.
   ══════════════════════════════════════════════════════════════ */
#bigIdea.bigidea{
  display:block;margin-top:10px;padding:.7em .9em .75em;text-align:left;
  background:linear-gradient(180deg,#F6F2FF 0%,var(--lav-soft) 100%);
  border:3px solid var(--ink);border-style:solid;border-radius:var(--r-lg);
  box-shadow:5px 5px 0 var(--ink);
}
#bigIdea .bi__tag{
  display:inline-flex;align-items:center;gap:.35em;
  background:var(--lav);border:2px solid var(--ink);border-radius:999px;
  padding:.22em .85em;margin:0 0 .45em;
  font-weight:800;font-size:clamp(.82rem,.78rem + .24vw,.93rem);color:var(--inktext);
  letter-spacing:-.01em;
}
#bigIdea .bi__tag-ic{font-size:.95em;line-height:1;transform:translateY(-.5px)}

#bigIdea .bi__main{
  display:block;margin:0;font-weight:800;color:var(--inktext);
  font-size:clamp(1.02rem,.94rem + .48vw,1.28rem);line-height:1.5;
  word-break:keep-all;line-break:strict;
}
/* 하지 않는 쪽 — 힘을 뺍니다 */
#bigIdea .bi__no{
  color:#8C8676;font-weight:700;
  text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:#B6AE9B;
}
/* 하는 쪽 — 밑줄 형광으로 또렷하게 */
#bigIdea .bi__yes{
  font-weight:800;color:var(--inktext);
  background:linear-gradient(transparent 54%,var(--yellow) 54%,var(--yellow) 94%,transparent 94%);
  padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
#bigIdea .bi__sub{
  margin:.5em 0 0;padding-left:.7em;border-left:4px solid var(--lav);
  color:var(--inktext);line-height:1.55;
  font-size:clamp(.86rem,.82rem + .26vw,.98rem);
  word-break:keep-all;line-break:strict;
}
#bigIdea .bi__sub b{
  background:linear-gradient(transparent 58%,#FFE6F2 58%);font-weight:800;
}
@media (max-height:880px){
  #bigIdea.bigidea{padding:.55em .8em .6em;margin-top:8px}
  #bigIdea .bi__main{font-size:clamp(.98rem,.9rem + .42vw,1.16rem);line-height:1.45}
  #bigIdea .bi__sub{margin-top:.38em;font-size:clamp(.84rem,.8rem + .22vw,.94rem)}
}

/* ══ 함께 읽기 안내줄 — 또렷하게 읽히도록 ══ */
.readmeta .rm__g{
  display:block;margin:.6em 0 0;padding:.55em .75em;
  background:#fff;border:2px solid var(--ink);border-radius:12px;
  color:var(--inktext);line-height:1.62;
  font-size:clamp(.94rem,.88rem + .34vw,1.08rem);
  word-break:keep-all;line-break:strict;
}
.readmeta .rm__g-t{font-weight:800}
.readmeta .rm__g b{background:linear-gradient(transparent 56%,var(--lime) 56%);padding:0 .08em}
.readmeta .rm__g-s{
  display:block;margin-top:.3em;padding-top:.3em;border-top:2px dashed #DCD5C4;
  color:var(--sub);font-weight:400;
  font-size:clamp(.82rem,.78rem + .24vw,.92rem);line-height:1.5;
}
.readmeta .rm__t{margin:.4em 0 .06em}
.readmeta .rm__b{letter-spacing:-.01em}

/* ══════════════════════════════════════════════════════════════
   그림책 장면 넘기기 — 책장이 돌아가는 대신 스르르 바뀝니다
   (앞 장면을 아래에 깔고 새 장면이 위에서 떠오르는 겹침 전환)
   ══════════════════════════════════════════════════════════════ */
.bk-page{position:relative}
.bk-page.flip-r,.bk-page.flip-l{animation:none !important}
.bk-prev{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  border:3px solid var(--ink);border-radius:10px;background:#fff;
  opacity:0;pointer-events:none;z-index:1;
}
.bk-page.is-cover .bk-prev{border-radius:14px}
.bk-page > #bkImg{position:relative;z-index:2}
.bk-page.xfade .bk-prev{animation:.46s ease forwards bkout}
.bk-page.xfade > #bkImg{animation:.46s ease bkin}
@keyframes bkout{from{opacity:1}to{opacity:0}}
@keyframes bkin{
  from{opacity:0;transform:scale(1.015)}
  55%{opacity:1}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .bk-page.xfade .bk-prev,.bk-page.xfade > #bkImg{animation:none}
  .bk-prev{opacity:0}
}

/* ══ 장면 바뀜 — 두 그림이 정확히 포개져 스르르 바뀝니다 (겹쳐 보이지 않게) ══ */
.bk-prev{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  inset:auto;width:auto;height:auto;
  max-width:100%;max-height:100%;object-fit:contain;
  border:3px solid var(--ink);border-radius:10px;background:#fff;
  opacity:0;pointer-events:none;z-index:1;
}
.bk-page.is-cover .bk-prev{border-radius:14px}
.bk-page > #bkImg{position:relative;z-index:2;transform:none}
.bk-page.xfade .bk-prev{animation:.5s ease-in-out forwards bkout}
.bk-page.xfade > #bkImg{animation:.5s ease-in-out bkin}
@keyframes bkout{from{opacity:1}to{opacity:0}}
@keyframes bkin{from{opacity:0}to{opacity:1}}
/* 앞 장면 자리 바로잡기 — inset 을 먼저 비우고 가운데로 */
.bk-prev{
  inset:auto;
  left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:100%;max-height:100%;
}

/* ══ 배치 시험대 — 함께 읽은 그림책 표지를 실제로 얹습니다 ══ */
.bookslot.filled{border-style:solid;background:var(--ink);padding:0}
.bookslot.filled .bs-title,
.bookslot.filled .bs-by,
.bookslot.filled .bs-tag,
.bookslot.filled .bs-file{display:none}
.bookslot.filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:9px}
.bookstage .bookslot.filled{box-shadow:none}

/* ══════════════════════════════════════════════════════════════
   그림 그리기 — 책띠의 그림 칸을 학생이 직접 그립니다
   ══════════════════════════════════════════════════════════════ */
.drawmodal{
  position:fixed;z-index:52;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1000px,94vw);max-height:94vh;display:flex;flex-direction:column;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--ink);overflow:hidden;animation:.22s ease dmin;
}
.dw-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:9px clamp(10px,1.6vw,16px);border-bottom:3px solid var(--ink);background:#fff}
.dw-body{
  flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,196px) minmax(0,1fr);
  gap:clamp(10px,1.5vw,16px);padding:clamp(10px,1.6vw,16px);overflow:auto;
}
@media (max-width:720px){.dw-body{grid-template-columns:1fr}}

.dw-side{display:flex;flex-direction:column;gap:clamp(8px,1.2vw,13px);min-width:0}
.dw-grp{
  background:#fff;border:2px solid var(--ink);border-radius:12px;
  padding:.5em .6em .6em;display:flex;flex-direction:column;gap:.4em;
}
.dw-lab{font-weight:800;font-size:clamp(.84rem,.8rem + .24vw,.94rem);color:var(--inktext)}

.dw-tools{display:flex;flex-direction:column;gap:5px}
.dw-tools button{
  display:flex;align-items:center;gap:.4em;width:100%;
  border:2px solid var(--ink);border-radius:999px;background:#fff;cursor:pointer;
  padding:.32em .8em;font-weight:700;font-size:clamp(.88rem,.84rem + .26vw,1rem);
  box-shadow:2px 2px 0 var(--ink);
}
.dw-tools button.on{background:var(--yellow)}
.dw-tools button:active{transform:translate(2px,2px);box-shadow:none}

.dw-sizes{display:flex;gap:5px}
.dwsz{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:.2em;
  border:2px solid var(--ink);border-radius:10px;background:#fff;cursor:pointer;
  padding:.35em .2em;font-weight:700;font-size:clamp(.72rem,.7rem + .2vw,.82rem);
  box-shadow:2px 2px 0 var(--ink);
}
.dwsz i{display:block;background:var(--ink);border-radius:50%}
.dwsz.on{background:var(--mint)}
.dwsz:active{transform:translate(2px,2px);box-shadow:none}

.dw-colors{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.dwsw{
  aspect-ratio:1;border:2px solid var(--ink);border-radius:8px;cursor:pointer;padding:0;
  box-shadow:2px 2px 0 var(--ink);
}
.dwsw.on{outline:3px solid var(--aqua);outline-offset:2px;transform:translate(-1px,-1px)}

.dw-canvas{
  display:flex;align-items:center;justify-content:center;min-height:0;
  background:repeating-linear-gradient(90deg,#F1EADC 0 26px,#EFE7DA 26px 52px);
  border:3px solid var(--ink);border-radius:12px;padding:clamp(8px,1.2vw,14px);
}
#drawCanvas{
  width:auto;height:auto;max-width:100%;max-height:min(62vh,560px);aspect-ratio:1;
  background:#fff;border:3px solid var(--ink);border-radius:10px;
  cursor:crosshair;touch-action:none;display:block;
}
#drawCanvas.erasing{cursor:cell}
.dw-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:9px clamp(10px,1.6vw,16px);border-top:3px solid var(--ink);background:#fff;
}

/* ── 배치 시험대의 그림 칸 ── */
#stickList{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.dwopen,.dwnone{
  display:flex;align-items:center;gap:.5em;cursor:pointer;
  border:2px solid var(--ink);border-radius:12px;background:#fff;
  box-shadow:3px 3px 0 var(--ink);padding:.4em .7em;
  font-weight:700;font-size:clamp(.86rem,.82rem + .26vw,.98rem);
}
.dwopen:active,.dwnone:active{transform:translate(3px,3px);box-shadow:none}
.dwopen{background:var(--pink-soft,#FFE9F1)}
.dwopen.has{background:#fff;padding:.3em .6em .3em .3em}
.dwopen img{
  width:44px;height:44px;object-fit:cover;display:block;
  border:2px solid var(--ink);border-radius:8px;background:#fff;
}
.dwopen__ic{font-size:1.15em;line-height:1}
.dwnone.on{background:var(--lime-soft)}
.dwnone__box{
  width:26px;height:26px;flex:0 0 auto;
  border:3px dashed var(--ink);border-radius:7px;opacity:.7;
}
.dwnone__t{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.dwnone__t small{font-weight:400;color:var(--sub);font-size:.82em}

/* ══════════════════════════════════════════════════════════════
   6단계 · 책띠 만들기 — 책띠를 눌러 그 자리에서 바로 고칩니다
   ══════════════════════════════════════════════════════════════ */
.slotbar{display:flex;flex-direction:column;gap:.5em;width:100%}
.slotbar__h{display:flex;align-items:center;gap:.7em 1em;flex-wrap:wrap}
.slotbar__h .mini{margin:0;flex:0 0 auto}
.slotbar__h .gauge{flex:0 0 auto;margin:0}
.slotbar__s{
  flex:1 1 240px;min-width:0;color:var(--sub);
  font-size:clamp(.84rem,.8rem + .26vw,.96rem);line-height:1.45;
  word-break:keep-all;line-break:strict;
}
.slotbar__s b{color:var(--inktext);font-weight:800}
.slotbar .slots{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:7px;align-items:stretch;
}
.slotbar .slots .slot{width:100%;justify-content:flex-start}
@media (max-width:560px){.slotbar .slots{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}

.makegrid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(10px,1.5vw,18px);align-items:stretch;
}
@media (max-width:900px){.makegrid{grid-template-columns:1fr}}

.makestage{
  display:flex;flex-direction:column;gap:.6em;align-items:center;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:5px 5px 0 var(--ink);padding:clamp(10px,1.5vw,16px);min-height:0;
}
.makestage__h{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;justify-content:center;text-align:center}
.makestage__s{color:var(--sub);font-size:clamp(.82rem,.78rem + .24vw,.94rem)}
.makestage__s b{color:var(--inktext);font-weight:800}
.makestage .bookstage{width:min(100%,420px);margin:0 auto}

/* 누를 수 있는 자리 */
.bandlayer svg .rhit{cursor:pointer}
.bandlayer svg .rhit:hover{opacity:.82}
.bandlayer svg .rnow{outline:none;filter:drop-shadow(0 0 0 transparent)}
.bandlayer svg .rnow text,.bandlayer svg .rnow tspan{paint-order:stroke;stroke:#FFE45E;stroke-width:7px;stroke-linejoin:round}
.bandlayer svg rect.rnow{stroke:#FFE45E;stroke-width:6;stroke-dasharray:12 8}

.makeside{display:flex;flex-direction:column;gap:clamp(8px,1.1vw,13px);min-width:0}
.editpane{display:flex;flex-direction:column;gap:.35em}
.editpane .ep__h{margin:0 0 .1em}
.ep__hint{margin:0;color:var(--sub);line-height:1.5;
  font-size:clamp(.84rem,.8rem + .26vw,.96rem);word-break:keep-all;line-break:strict}
.ep__fixed{margin:.3em 0 0;font-weight:800;line-height:1.4;
  font-size:clamp(1rem,.94rem + .38vw,1.16rem)}
.ep__sub{margin:.35em 0 0;color:var(--sub);font-size:clamp(.8rem,.76rem + .22vw,.9rem)}
.ep__ta{margin-top:.35em;min-height:3.4em;resize:none;line-height:1.5}
.ep__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:.45em}
.ep__chip{
  border:2px solid var(--ink);border-radius:999px;background:#fff;cursor:pointer;
  padding:.28em .8em;font-weight:700;box-shadow:2px 2px 0 var(--ink);
  font-size:clamp(.84rem,.8rem + .24vw,.95rem);
}
.ep__chip:hover{background:var(--yellow)}
.ep__chip:active{transform:translate(2px,2px);box-shadow:none}

.bandwrap{display:flex;flex-direction:column;gap:.3em}
.bandwrap__t{font-weight:800;font-size:clamp(.82rem,.78rem + .24vw,.92rem);color:var(--sub)}

/* 6단계 — 한 판에 더 가깝게 */
.stage[data-stage="6"] .pagehead{padding:8px clamp(12px,1.6vw,18px);gap:.25em .7em}
.stage[data-stage="6"] .pagehead .guide{font-size:clamp(.88rem,.84rem + .28vw,1rem);padding:.35em .8em}
.stage[data-stage="6"] .pagehead h2.stitle{font-size:clamp(1.08rem,1rem + .5vw,1.34rem)}
.slotbar{padding:8px clamp(10px,1.3vw,14px)}
.makestage .bookstage{width:min(100%,340px)}
.makestage{padding:9px clamp(9px,1.2vw,14px)}
.makeside{min-height:0}
.makeside .dressing{padding:8px 11px}
@media (max-height:880px){
  .makestage .bookstage{width:min(100%,300px)}
  .stage[data-stage="6"] .card-sm{padding:8px 11px}
}

/* ══ 6단계 — 그림책을 크게, 책띠 두께를 고를 수 있게 ══ */
.makegrid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
@media (max-width:980px){.makegrid{grid-template-columns:1fr}}
.makestage .bookstage{width:min(100%,620px)}
@media (max-height:880px){.makestage .bookstage{width:min(100%,540px)}}
@media (max-height:780px){.makestage .bookstage{width:min(100%,470px)}}

.makestage__tools{
  display:flex;align-items:center;justify-content:center;gap:.7em 1.2em;flex-wrap:wrap;
  width:100%;margin-top:.2em;
}
.drawbig{flex:0 0 auto;font-size:clamp(.96rem,.9rem + .34vw,1.12rem);padding:.42em 1.2em}
.bhrow{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.bhrow__t{font-weight:800;color:var(--sub);font-size:clamp(.82rem,.78rem + .24vw,.92rem)}
.bhbtns{display:flex;gap:5px}
.bhbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.2em;
  min-width:52px;padding:.3em .5em;cursor:pointer;
  border:2px solid var(--ink);border-radius:10px;background:#fff;
  box-shadow:2px 2px 0 var(--ink);
  font-weight:700;font-size:clamp(.74rem,.72rem + .2vw,.84rem);line-height:1;
}
.bhbtn i{display:block;width:26px;background:var(--ink);border-radius:2px;opacity:.75}
.bhbtn.on{background:var(--mint)}
.bhbtn.on i{opacity:1}
.bhbtn:active{transform:translate(2px,2px);box-shadow:none}

/* ══ 다른 책띠 참고하기 ══ */
.refbar{display:flex;flex-direction:column;gap:.45em;width:100%;padding:8px clamp(10px,1.3vw,14px)}
.refbar__h{display:flex;align-items:baseline;gap:.6em 1em;flex-wrap:wrap}
.refbar__h .mini{margin:0;flex:0 0 auto}
.refbar__s{flex:1 1 200px;min-width:0;color:var(--sub);
  font-size:clamp(.82rem,.78rem + .24vw,.94rem);word-break:keep-all;line-break:strict}
.refbar__s b{color:var(--inktext);font-weight:800}
.reflist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
@media (max-width:640px){.reflist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.refth{
  display:flex;flex-direction:column;gap:.25em;align-items:center;cursor:zoom-in;
  border:0;background:none;padding:0;min-width:0;
}
.refth img{
  width:100%;aspect-ratio:1.35;object-fit:cover;object-position:center 52%;display:block;
  border:2px solid var(--ink);border-radius:9px;background:#EFE7DA;
}
.refth:hover img{transform:translateY(-2px)}
.refth__t{
  width:100%;font-weight:700;color:var(--sub);text-align:center;line-height:1.25;
  font-size:clamp(.7rem,.68rem + .18vw,.8rem);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ══ 편집 패널의 '넣을 것 고르기' ══ */
.ep__gauge{margin:.15em 0 .3em}
.ep__slots{display:flex;flex-direction:column;gap:5px;margin-top:.45em}
.ep__slots .slot{width:100%;justify-content:flex-start}
.ep__h{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;justify-content:space-between}
.ep__back{
  border:2px solid var(--ink);border-radius:999px;background:#fff;cursor:pointer;
  padding:.2em .7em;font-weight:700;box-shadow:2px 2px 0 var(--ink);
  font-size:clamp(.76rem,.74rem + .2vw,.86rem);
}
.ep__back:hover{background:var(--yellow)}
.ep__back:active{transform:translate(2px,2px);box-shadow:none}

/* ══════════════════════════════════════════════════════════════
   책띠를 끌어 옮기고, 꼭짓점을 잡아 크기를 바꿉니다
   ══════════════════════════════════════════════════════════════ */
.bookstage{position:relative}
#myStage .bandlayer{
  position:absolute;z-index:3;cursor:grab;touch-action:none;
  transition:none;transform:none;opacity:1;
  display:flex;align-items:stretch;
}
#myStage .bandlayer.dragging{cursor:grabbing}
#myStage .bandlayer svg{
  display:block;width:100%;height:100%;
  border:2px solid var(--ink);border-radius:4px;box-shadow:0 5px 0 rgba(42,39,33,.32);
}
#myStage .bandlayer:hover{outline:2px dashed rgba(42,39,33,.45);outline-offset:3px}

.bhandles{position:absolute;inset:0;pointer-events:none}
.bh{
  position:absolute;width:15px;height:15px;background:#fff;
  border:3px solid var(--ink);border-radius:4px;pointer-events:auto;
  box-shadow:1px 1px 0 rgba(42,39,33,.4);
}
.bh--nw{left:-8px;top:-8px;cursor:nwse-resize}
.bh--ne{right:-8px;top:-8px;cursor:nesw-resize}
.bh--sw{left:-8px;bottom:-8px;cursor:nesw-resize}
.bh--se{right:-8px;bottom:-8px;cursor:nwse-resize}
.bh--n{left:50%;top:-8px;transform:translateX(-50%);cursor:ns-resize;width:22px;border-radius:999px}
.bh--s{left:50%;bottom:-8px;transform:translateX(-50%);cursor:ns-resize;width:22px;border-radius:999px}
.bh--w{left:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize;height:22px;border-radius:999px}
.bh--e{right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize;height:22px;border-radius:999px}
@media (prefers-reduced-motion:no-preference){
  #myStage .bandlayer:not(.dragging){transition:left .1s linear,top .1s linear}
}
.bandreset{flex:0 0 auto;font-size:clamp(.78rem,.76rem + .2vw,.88rem);padding:.3em .8em}

/* ══ 책띠 색 — 미리 고른 빛깔 + 직접 고르기 ══ */
.swat{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.swpick{
  position:relative;display:inline-flex;align-items:center;gap:.35em;cursor:pointer;
  border:2px solid var(--ink);border-radius:10px;background:#fff;
  box-shadow:2px 2px 0 var(--ink);padding:.2em .5em .2em .25em;
  font-weight:700;line-height:1.1;font-size:clamp(.66rem,.64rem + .16vw,.74rem);
}
.swpick.on{background:var(--yellow)}
.swpick:active{transform:translate(2px,2px);box-shadow:none}
.swpick__dot{
  width:22px;height:22px;flex:0 0 auto;display:block;
  border:2px solid var(--ink);border-radius:6px;
  background-image:linear-gradient(135deg,#FF6B8A,#F2B705,#3FA672,#4C86C6,#B36BE0);
}
.swpick__t{color:var(--inktext);white-space:nowrap}
.swpick input[type="color"]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:0;padding:0;
}
/* 글씨 색 — 밝기에 맞추기로 되돌리는 단추 */
.fgauto{
  border:2px solid var(--ink);border-radius:999px;background:#fff;cursor:pointer;
  padding:.24em .7em;font-weight:700;box-shadow:2px 2px 0 var(--ink);
  font-size:clamp(.72rem,.7rem + .18vw,.8rem);white-space:nowrap;
}
.fgauto:hover{background:var(--mint)}
.fgauto:active{transform:translate(2px,2px);box-shadow:none}
#fgSwat .swpick__dot{background-image:none}

/* ══ 그리기 창 — 책띠와 같은 가로로 긴 모양 ══ */
.drawmodal{width:min(1180px,96vw)}
.dw-body{grid-template-columns:minmax(0,186px) minmax(0,1fr)}
#drawCanvas{
  aspect-ratio:auto;width:100%;height:auto;max-width:100%;max-height:min(46vh,420px);
  border:3px solid var(--ink);border-radius:8px;
}
.dw-canvas{
  /* 투명한 곳은 책띠 색이 비쳐 보이도록, 칸 자체는 바탕지 */
  background:repeating-conic-gradient(#EDE6D7 0% 25%, #F6F1E5 0% 50%) 50% / 22px 22px;
}
#dwRatio{font-size:clamp(.74rem,.72rem + .2vw,.84rem);padding:.2em .7em;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
@media (max-width:720px){.dw-body{grid-template-columns:1fr}}

/* ══ 넣을 것 여덟 가지 — 두 줄 격자로 반듯하게 ══ */
.ep__slots{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;margin-top:.5em;align-items:stretch;
}
.ep__slots .slot{
  width:100%;height:100%;justify-content:flex-start;align-items:center;
  padding:.4em .6em;gap:.45em;min-height:2.6em;
  font-size:clamp(.84rem,.8rem + .24vw,.95rem);line-height:1.25;
  text-align:left;word-break:keep-all;line-break:strict;
}
.ep__slots .slot .box{flex:0 0 auto}
@media (max-width:420px){.ep__slots{grid-template-columns:1fr}}

/* 한 자리에 여러 글칸이 올 때 */
.ep__field{display:flex;flex-direction:column;gap:.15em;margin-top:.5em}
.ep__field:first-of-type{margin-top:.3em}
.ep__flab{
  align-self:flex-start;background:var(--lav-soft);border:2px solid var(--ink);
  border-radius:999px;padding:.12em .65em;
  font-weight:800;font-size:clamp(.76rem,.74rem + .2vw,.85rem);
}
.ep__field .ep__hint{margin:.1em 0 0}
.ep__field .ep__ta{margin-top:.2em;min-height:2.8em}
.editpane{max-height:min(58vh,520px);overflow-y:auto;overscroll-behavior:contain}

/* ══ 전체 색상 판 — 늘 펼쳐져 있습니다 ══ */
.swat{display:flex;flex-direction:column;align-items:stretch;gap:.45em}
.palette{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));
  gap:3px;width:100%;
}
.pc{
  aspect-ratio:1;min-width:0;padding:0;cursor:pointer;
  border:1.5px solid rgba(42,39,33,.45);border-radius:5px;
}
.pc:hover{transform:scale(1.18);z-index:2;border-color:var(--ink)}
.pc.on{
  outline:3px solid var(--aqua);outline-offset:1px;
  border-color:var(--ink);transform:scale(1.12);z-index:3;
}
.swpick{
  align-self:flex-start;padding:.2em .6em .2em .25em;
  font-size:clamp(.7rem,.68rem + .18vw,.78rem);
}
.swpick__t{white-space:nowrap}
.swpick__dot{width:20px;height:20px;background-image:none}
.dressing .drow{align-items:flex-start}
.dressing .dlab{padding-top:.15em}

/* ══ 그리기 도구 더하기 — 스프레이 · 그라데이션 · 글자 ══ */
.dw-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.dw-tools button{justify-content:center;padding:.3em .5em;font-size:clamp(.8rem,.78rem + .22vw,.92rem)}
.dw-colors2{grid-template-columns:repeat(6,1fr)}

.dw-stage{position:relative;display:block;width:100%;container-type:size}
#drawCanvas{display:block;width:100%;height:auto}
#drawCanvas.texting{cursor:text}

.dw-texts{position:absolute;inset:0;pointer-events:none;container-type:size}
.dw-texts .dtx{pointer-events:auto}
.dtx{
  position:absolute;display:inline-flex;align-items:flex-start;
  font-weight:800;line-height:1.1;white-space:nowrap;cursor:grab;
  padding:2px 4px;border:2px dashed transparent;border-radius:6px;
}
.dtx:hover,.dtx.on{border-color:rgba(42,39,33,.55);background:rgba(255,255,255,.18)}
.dtx__t{outline:none;min-width:1ch;cursor:text}
.dtx__h{
  position:absolute;right:-9px;bottom:-9px;width:14px;height:14px;
  background:#fff;border:3px solid var(--ink);border-radius:4px;
  cursor:ns-resize;display:none;
}
.dtx__x{
  position:absolute;right:-11px;top:-13px;width:20px;height:20px;padding:0;
  background:#fff;border:2px solid var(--ink);border-radius:50%;cursor:pointer;
  font-size:11px;font-weight:800;line-height:1;display:none;color:var(--ink);
}
.dtx:hover .dtx__h,.dtx.on .dtx__h,
.dtx:hover .dtx__x,.dtx.on .dtx__x{display:block}

/* ══ 색 고르는 조각 — 굵은 윤곽선의 동그라미로 ══ */
.palette{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.pc{
  aspect-ratio:1;border-radius:50%;
  border:3px solid var(--ink);
  box-shadow:1px 1px 0 rgba(42,39,33,.35);
}
.pc:hover{transform:scale(1.22);z-index:2}
.pc.on{
  outline:3px solid var(--aqua);outline-offset:2px;
  border-width:3px;transform:scale(1.16);z-index:3;
  box-shadow:2px 2px 0 var(--ink);
}
.swdrop{
  align-self:flex-start;border:2px solid var(--ink);border-radius:999px;background:#fff;
  cursor:pointer;padding:.24em .8em;font-weight:700;box-shadow:2px 2px 0 var(--ink);
  font-size:clamp(.72rem,.7rem + .18vw,.8rem);white-space:nowrap;
}
.swdrop:hover{background:var(--aqua-soft,#DFF3F6)}
.swdrop:active{transform:translate(2px,2px);box-shadow:none}
.swat{gap:.5em}
.swat > .swpick,.swat > .swdrop,.swat > .fgauto{margin-top:.1em}

/* 그리기 창의 빛깔 조각도 동그랗게 */
.dwsw{border-radius:50%;border-width:3px}
.dwsw.on{outline:3px solid var(--aqua);outline-offset:2px}
/* 글자 층 — 크기 가둠(container-type)이 캔버스를 무너뜨려 걷어냅니다 */
.dw-stage{container-type:normal}
.dw-texts{container-type:normal}

/* ══ 색 조각 — 주요 색 세 줄, 라운딩 사각형 ══ */
.palette{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.pc{
  aspect-ratio:1;border-radius:8px;
  border:3px solid var(--ink);
  box-shadow:2px 2px 0 rgba(42,39,33,.28);
}
.pc:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.pc.on{
  outline:3px solid var(--aqua);outline-offset:2px;
  transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);
}
.swpick__dot{border-radius:6px}
/* 팔레트 마지막 칸 — 스포이트 */
.pcdrop{
  display:flex;align-items:center;justify-content:center;
  background:#fff;font-size:clamp(.8rem,.76rem + .28vw,1rem);line-height:1;
  padding:0;cursor:pointer;
}
.pcdrop:hover{background:var(--aqua-soft,#DFF3F6)}

/* ══════════════════════════════════════════════════════════════
   글 적는 창 — 칸을 누르면 바로 열립니다
   ══════════════════════════════════════════════════════════════ */
.txtmodal{
  position:fixed;z-index:53;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(680px,94vw);max-height:92vh;display:flex;flex-direction:column;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--ink);overflow:hidden;animation:.2s ease dmin;
}
.tx-head{display:flex;align-items:center;gap:8px;
  padding:9px clamp(10px,1.6vw,16px);border-bottom:3px solid var(--ink);background:#fff}
.tx-body{flex:1 1 auto;min-height:0;overflow:auto;padding:clamp(11px,1.7vw,18px);
  display:flex;flex-direction:column;gap:.5em}
.tx-ask{margin:0;font-weight:800;line-height:1.5;
  font-size:clamp(1rem,.94rem + .38vw,1.16rem);word-break:keep-all;line-break:strict}
.tx-ta{min-height:4.2em;resize:none;line-height:1.55;
  font-size:clamp(1rem,.94rem + .4vw,1.18rem)}
.tx-cnt{margin:0;text-align:right;color:var(--sub);
  font-size:clamp(.8rem,.78rem + .22vw,.9rem)}
.tx-cnt b{color:var(--inktext);font-weight:800}
.tx-prev{margin-top:.2em;display:flex;flex-direction:column;gap:.3em}
.tx-prev__t{font-weight:800;color:var(--sub);
  font-size:clamp(.8rem,.78rem + .22vw,.9rem)}
.tx-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:9px clamp(10px,1.6vw,16px);border-top:3px solid var(--ink);background:#fff}

/* ══ 넣을 칸 — 적은 글이 바로 보이고, ✕ 로 뺍니다 ══ */
.slotwrap{position:relative;display:block;min-width:0}
.ep__slots .slotwrap .slot{width:100%;height:100%;min-height:3.1em;align-items:center}
.slot__n{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.2}
.slot__v{
  font-weight:400;color:var(--sub);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:clamp(.7rem,.68rem + .18vw,.78rem);
}
.slotwrap.on .slot__v{color:var(--inktext)}
.slotoff{
  position:absolute;right:-6px;top:-7px;width:20px;height:20px;padding:0;z-index:2;
  background:#fff;border:2px solid var(--ink);border-radius:50%;cursor:pointer;
  font-size:11px;font-weight:800;line-height:1;color:var(--ink);box-shadow:1px 1px 0 var(--ink);
}
.slotoff:hover{background:var(--pink)}
/* 「더 고르기」는 오른쪽 끝에 */
.swat > .swpick{align-self:flex-end;margin-top:0}
.swat > .fgauto{align-self:flex-end}
/* 고른 개수 표시 */
.ep__gauge{display:flex;align-items:center;gap:.4em;margin:.2em 0 .1em}
.ep__gauge .gnow{
  display:inline-flex;align-items:center;gap:.25em;
  background:var(--lime-soft);border:2px solid var(--ink);border-radius:999px;
  padding:.2em .8em;font-weight:700;
  font-size:clamp(.8rem,.78rem + .22vw,.9rem);
}
.ep__gauge .gnow b{font-weight:800;font-size:1.1em}
/* 글 자리도 잡아서 옮길 수 있게 */
#myStage .bandlayer svg text[data-r]{cursor:move}
#myStage .bandlayer svg text[data-r]:hover{opacity:.88}

/* ══ 그리기 창 — 글자만 남긴 큰 도구 단추, 책띠와 같은 색상 판 ══ */
.dw-body{grid-template-columns:minmax(0,254px) minmax(0,1fr)}
@media (max-width:820px){.dw-body{grid-template-columns:1fr}}
.dw-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dw-tools button{
  justify-content:center;text-align:center;
  padding:.52em .4em;border-radius:12px;
  font-size:clamp(.94rem,.88rem + .3vw,1.08rem);font-weight:800;
  box-shadow:3px 3px 0 var(--ink);
}
.dw-tools button.on{background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}
.dw-sizes{gap:6px}
.dwsz{padding:.45em .25em;font-size:clamp(.8rem,.78rem + .22vw,.9rem);border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
.dw-colors{display:block}
.dw-colors .palette{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.dw-colors .pc{border-width:2px;border-radius:6px;box-shadow:1px 1px 0 rgba(42,39,33,.3)}
.dw-colors .pc.on{outline-width:3px;outline-offset:1px;box-shadow:2px 2px 0 var(--ink)}
.dw-grp{padding:.55em .6em .65em}
.dw-lab{font-size:clamp(.88rem,.84rem + .26vw,1rem)}

/* ══ 글자 크기 조절 줄 ══ */
.szrow{
  display:flex;align-items:center;gap:.4em;flex-wrap:wrap;margin-top:.5em;
  background:#fff;border:2px solid var(--ink);border-radius:12px;padding:.35em .55em;
}
.szrow__t{font-weight:800;font-size:clamp(.82rem,.78rem + .24vw,.92rem);margin-right:.15em}
.szrow__v{
  min-width:3.4em;text-align:center;font-weight:800;
  font-size:clamp(.84rem,.8rem + .24vw,.95rem);
}
.szbtn{
  width:2.1em;height:2.1em;padding:0;cursor:pointer;
  border:2px solid var(--ink);border-radius:8px;background:var(--paper);
  font-weight:800;font-size:clamp(.9rem,.86rem + .26vw,1.02rem);line-height:1;
  box-shadow:2px 2px 0 var(--ink);
}
.szbtn:hover{background:var(--yellow)}
.szbtn:active{transform:translate(2px,2px);box-shadow:none}
.szbtn--r{width:auto;padding:0 .7em;font-size:clamp(.78rem,.76rem + .2vw,.86rem)}

/* ══════════════════════════════════════════════════════════════
   책띠 무대 아래 도구 줄 — 두 묶음으로 또렷하게
   ══════════════════════════════════════════════════════════════ */
.makestage__tools{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  width:100%;margin-top:.4em;
}
.tgrp{
  display:flex;align-items:center;justify-content:center;gap:.5em;flex-wrap:wrap;
  background:#fff;border:2px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);padding:.45em .65em;
}
.tgrp__t{
  flex:0 0 auto;font-weight:800;color:var(--sub);letter-spacing:-.01em;
  font-size:clamp(.82rem,.78rem + .24vw,.92rem);
}
.tsep{
  flex:0 0 auto;width:2px;align-self:stretch;margin:.1em .25em;
  background:#E3DCCD;border-radius:2px;
}

/* 두께 단추 */
.bhbtns{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.bhbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.25em;
  min-width:60px;padding:.32em .55em;cursor:pointer;
  border:2px solid var(--ink);border-radius:11px;background:var(--paper);
  box-shadow:2px 2px 0 var(--ink);
  font-weight:800;font-size:clamp(.78rem,.76rem + .2vw,.88rem);line-height:1;
}
.bhbtn i{display:block;width:28px;background:var(--ink);border-radius:2px;opacity:.55}
.bhbtn.on{background:var(--mint)}
.bhbtn.on i{opacity:1}
.bhbtn:hover{background:var(--yellow)}
.bhbtn.on:hover{background:var(--mint)}
.bhbtn:active{transform:translate(2px,2px);box-shadow:none}

/* 그림 그리기 — 이 줄의 주인공 */
.drawbig{
  flex:0 0 auto;cursor:pointer;
  background:var(--yellow);border:3px solid var(--ink);border-radius:999px;
  box-shadow:4px 4px 0 var(--ink);padding:.46em 1.3em;
  font-weight:800;font-size:clamp(1rem,.94rem + .36vw,1.16rem);line-height:1.2;
  animation:none;
}
.drawbig:hover{background:#FFD24D}
.drawbig:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}

/* 되돌리기 · 다시 실행 · 처음 자리로 */
.tbtn{
  flex:0 0 auto;cursor:pointer;
  border:2px solid var(--ink);border-radius:999px;background:var(--paper);
  box-shadow:2px 2px 0 var(--ink);padding:.34em .9em;
  font-weight:700;font-size:clamp(.84rem,.8rem + .24vw,.95rem);line-height:1.2;
  white-space:nowrap;
}
.tbtn:hover:not(:disabled){background:var(--aqua-soft,#DFF3F6)}
.tbtn:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}
.tbtn:disabled{opacity:.38;cursor:default;box-shadow:1px 1px 0 var(--ink)}
#bandReset{background:#fff}
#bandReset:hover{background:var(--pink-soft,#FFE9F1)}

@media (max-width:560px){
  .tgrp{padding:.4em .5em}
  .tsep{display:none}
  .bhbtn{min-width:52px}
}
/* 모두 지우기 — 되돌릴 수 있지만 눈에 띄게 */
.tbtn--warn{background:#fff;border-color:var(--ink)}
.tbtn--warn:hover:not(:disabled){background:var(--pink)}

/* ══ 글자 자리 옮기기 줄 ══ */
.pzrow{
  display:flex;align-items:center;gap:.55em;flex-wrap:wrap;margin-top:6px;
  background:#fff;border:2px solid var(--ink);border-radius:12px;padding:.35em .55em;
}
.pzpad{
  display:grid;grid-template-columns:repeat(3,1.9em);grid-template-rows:repeat(2,1.9em);
  gap:3px;flex:0 0 auto;
}
.pzbtn{
  padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);border-radius:7px;background:var(--paper);
  font-size:.66rem;line-height:1;color:var(--ink);
  box-shadow:1px 1px 0 var(--ink);
}
.pzbtn:hover{background:var(--yellow)}
.pzbtn:active{transform:translate(1px,1px);box-shadow:none}
.pz-u{grid-column:2;grid-row:1}
.pz-l{grid-column:1;grid-row:2}
.pz-c{grid-column:2;grid-row:2;background:#fff}
.pz-r{grid-column:3;grid-row:2}
.pz-d{grid-column:3;grid-row:1}
.pz-v{min-width:4.6em;color:var(--sub);font-weight:700}

/* ══════════════════════════════════════════════════════════════
   글자 크기·자리 — 한 카드에 두 줄로
   ══════════════════════════════════════════════════════════════ */
.tune{
  margin-top:.6em;background:#fff;
  border:2px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);overflow:hidden;
}
.tune__row{
  display:flex;align-items:center;gap:.6em;
  padding:.5em .7em;
}
.tune__row + .tune__row{border-top:2px dashed #E3DCCD}
.tune__t{
  flex:0 0 2.6em;font-weight:800;color:var(--sub);
  font-size:clamp(.84rem,.8rem + .24vw,.94rem);letter-spacing:-.02em;
}
.tune__c{display:flex;align-items:center;gap:.45em;flex:1 1 auto;min-width:0}
.tune__v{
  min-width:3.6em;text-align:center;font-weight:800;color:var(--inktext);
  font-size:clamp(.88rem,.84rem + .26vw,1rem);
}
.tune__v--pz{min-width:4.4em;color:var(--sub);font-weight:700;text-align:left}
.tune__r{
  flex:0 0 auto;cursor:pointer;white-space:nowrap;
  border:2px solid var(--ink);border-radius:999px;background:var(--paper);
  padding:.26em .8em;font-weight:700;box-shadow:2px 2px 0 var(--ink);
  font-size:clamp(.76rem,.74rem + .2vw,.85rem);
}
.tune__r:hover{background:var(--mint)}
.tune__r:active{transform:translate(2px,2px);box-shadow:none}

.szbtn{
  width:2em;height:2em;padding:0;cursor:pointer;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);border-radius:9px;background:var(--paper);
  font-weight:800;font-size:clamp(1rem,.94rem + .3vw,1.16rem);line-height:1;
  box-shadow:2px 2px 0 var(--ink);
}
.szbtn:hover{background:var(--yellow)}
.szbtn:active{transform:translate(2px,2px);box-shadow:none}

/* 십자 방향판 */
.pzpad{
  display:grid;grid-template-columns:repeat(3,1.75em);grid-template-rows:repeat(3,1.75em);
  gap:3px;flex:0 0 auto;
}
.pzbtn{
  padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);border-radius:7px;background:var(--paper);
  font-size:.6rem;line-height:1;color:var(--ink);box-shadow:1px 1px 0 var(--ink);
}
.pzbtn:hover{background:var(--yellow)}
.pzbtn:active{transform:translate(1px,1px);box-shadow:none}
.pz-u{grid-column:2;grid-row:1}
.pz-l{grid-column:1;grid-row:2}
.pz-r{grid-column:3;grid-row:2}
.pz-d{grid-column:2;grid-row:3}

/* ══ 굵기 다섯 단계 — 펜·지우개 따로 ══ */
.dw-sizes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.dwsz{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.22em;
  padding:.35em .12em .4em;min-height:4.1em;
  border:2px solid var(--ink);border-radius:10px;background:#fff;cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
  font-weight:700;font-size:clamp(.62rem,.6rem + .16vw,.72rem);line-height:1.1;
}
.dwsz i{display:block;background:var(--ink);border-radius:50%;flex:0 0 auto}
.dwsz span{white-space:nowrap;word-break:keep-all}
.dwsz.on{background:var(--mint)}
.dwsz:hover{background:var(--yellow)}
.dwsz.on:hover{background:var(--mint)}
.dwsz:active{transform:translate(2px,2px);box-shadow:none}

/* ══ 표지는 아래까지 빈틈없이 ══ */
.stage--cover::after{display:none !important;height:0 !important}
.stage--cover{padding-bottom:0 !important;margin-bottom:0 !important}
.stagewrap:has(.stage--cover.on){padding:0 !important;overflow:hidden}
.stage--cover > .cover{height:100%;min-height:100%}
.cover__bg{object-position:center 52%}

/* ══════════════════════════════════════════════════════════════
   표지의 「시작하기」 — 움직이지 않는 큰 과녁
   (둥실대던 움직임이 누르는 자리를 흔들어 잘 눌리지 않았습니다)
   ══════════════════════════════════════════════════════════════ */
.cover__go{
  animation:none !important;
  left:50%;bottom:clamp(20px,5.5vh,56px);
  transform:translateX(-50%);
  padding:.62em 2.1em;
  font-size:clamp(1.28rem,1.1rem + .8vw,1.8rem);
  border-width:3px;border-radius:999px;
  box-shadow:6px 6px 0 var(--ink);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  will-change:auto;z-index:5;
}
.cover__go::after{           /* 눌리는 자리를 넉넉히 — 손가락으로도 잘 눌립니다 */
  content:"";position:absolute;inset:-14px;border-radius:999px;
}
.cover__go:hover{background:#FFD24D;box-shadow:8px 8px 0 var(--ink)}
.cover__go:active{
  transform:translateX(-50%) translate(3px,3px) !important;
  box-shadow:2px 2px 0 var(--ink) !important;
}
/* 눈길은 움직임 대신 은은한 테두리로 끕니다 */
@media (prefers-reduced-motion:no-preference){
  .cover__go{animation:2.6s ease-in-out infinite covering !important}
}
@keyframes covering{
  0%,100%{box-shadow:6px 6px 0 var(--ink),0 0 0 0 rgba(255,222,122,.9)}
  55%    {box-shadow:6px 6px 0 var(--ink),0 0 0 14px rgba(255,222,122,0)}
}
/* 표지가 물러나는 동안에는 손이 닿지 않게 */
.cover--out{pointer-events:none}
.cover--out .cover__go{opacity:1;animation:none !important;transition:none}
/* 표지 그림을 아래로 내려 담습니다 (값이 작을수록 그림이 내려옵니다) */
.cover__bg{object-position:center 22% !important}

/* ══════════════════════════════════════════════════════════════
   7단계 · 나란히 놓고 견주어 보기
   ══════════════════════════════════════════════════════════════ */
.sidecard{width:100%;display:flex;flex-direction:column;gap:.6em}
.sidecard__h{margin:0}
.sidegrid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  gap:clamp(10px,1.6vw,20px);align-items:center;
}
@media (max-width:820px){.sidegrid{grid-template-columns:1fr}}
.sidebox{margin:0;display:flex;flex-direction:column;gap:.4em;min-width:0}
.sidebox__t{margin:0}
.sidebox__img{
  width:100%;max-width:100%;height:auto;display:block;
  border:3px solid var(--ink);border-radius:12px;background:var(--ink);
}
.sidebox__band svg{
  width:100%;height:auto;display:block;
  border:3px solid var(--ink);border-radius:12px;
}

.sidelists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:640px){.sidelists{grid-template-columns:1fr}}
.sidelist{
  display:flex;flex-direction:column;gap:.35em;
  border:2px solid var(--ink);border-radius:12px;padding:.5em .65em;
}
.sidelist.is-in{background:var(--lime-soft)}
.sidelist.is-out{background:#F5F1E7}
.sidelist__t{
  font-weight:800;font-size:clamp(.86rem,.82rem + .26vw,.98rem);
}
.sidelist__t b{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.7em;padding:0 .25em;margin-left:.25em;
  background:#fff;border:2px solid var(--ink);border-radius:999px;
  font-size:.92em;
}
.sidelist__c{display:flex;flex-wrap:wrap;gap:4px}
.sidelist__c i{
  font-style:normal;font-weight:700;
  background:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:.12em .6em;font-size:clamp(.78rem,.76rem + .2vw,.88rem);
}
.sidelist.is-out .sidelist__c i{color:var(--sub);border-color:#C9C2B2;text-decoration:line-through}
.sidelist__c em{font-style:normal;color:var(--sub);font-size:clamp(.8rem,.78rem + .2vw,.88rem)}

.sideask{
  margin:0;line-height:1.55;word-break:keep-all;line-break:strict;
  font-size:clamp(.9rem,.86rem + .3vw,1.04rem);
}
.sideask b{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 .08em}
/* 처음 본 책띠 — 두 띠의 크기를 비슷하게 */
.sidegrid{grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr);align-items:center}
@media (max-width:820px){.sidegrid{grid-template-columns:1fr}}
.sidebox__img{
  width:auto;max-width:100%;max-height:clamp(140px,19vh,210px);
  margin:0 auto;object-fit:contain;
}
.sidecard{padding:10px 13px}
.sidegrid{gap:clamp(8px,1.2vw,16px)}
.sidelists{gap:7px}
.sidelist{padding:.42em .6em}
/* 표지에서는 안내줄 자리까지 그림이 내려옵니다 (푸터 윗선에 딱 맞게) */
body:has(.stage--cover.on) .condbar{
  display:none !important;min-height:0 !important;padding:0 !important;
}
body:has(.stage--cover.on) .btnrow{display:none !important}

/* ══ 굵기 — 동그라미 크기만 ══ */
.dwsz span{display:none}
.dwsz{min-height:2.9em;padding:.3em .1em;justify-content:center}
.dwsz i{margin:0}

/* ══════════════════════════════════════════════════════════════
   6단계 · 완성 — 크게 보는 책띠 + 색종이
   ══════════════════════════════════════════════════════════════ */
.donegrid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(10px,1.6vw,20px);align-items:start;
}
@media (max-width:980px){.donegrid{grid-template-columns:1fr}}

.donestage{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:.7em;
  background:linear-gradient(180deg,#FFFDF7 0%,var(--paper) 100%);
  border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:5px 5px 0 var(--ink);padding:clamp(12px,1.8vw,20px);
}
.donestage__book{width:min(100%,540px);margin:0 auto;position:relative;z-index:2}
.donestage__tools{
  position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.45em;
  width:100%;text-align:center;
}
.donestage__s{
  color:var(--sub);line-height:1.5;word-break:keep-all;line-break:strict;
  font-size:clamp(.88rem,.84rem + .28vw,1.02rem);
}
.donestage__s b{color:var(--inktext);font-weight:800}

/* 책띠를 벗겼다 씌웠다 */
#doneStage .bandlayer{
  position:absolute;z-index:3;
  transition:transform .5s cubic-bezier(.34,1.28,.5,1),opacity .4s ease;
}
#doneStage .bandlayer svg{
  width:100%;height:100%;display:block;
  border:2px solid var(--ink);border-radius:4px;box-shadow:0 5px 0 rgba(42,39,33,.32);
}
#doneStage .bandlayer.off{transform:translateY(190%) rotate(-6deg);opacity:0}
@media (prefers-reduced-motion:reduce){
  #doneStage .bandlayer{transition:none}
}

/* ── 색종이 ── */
.confetti{
  position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}
.confetti i{
  position:absolute;top:-8%;display:block;opacity:.92;
  animation-name:conffall;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes conffall{
  0%   {transform:translate3d(0,-10%,0) rotate(0deg)}
  50%  {transform:translate3d(var(--sway),55vh,0) rotate(calc(var(--spin) / 2))}
  100% {transform:translate3d(0,118%,0) rotate(var(--spin))}
}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}

.doneside{display:flex;flex-direction:column;gap:clamp(9px,1.2vw,14px)}
.doneside .finalpane{margin:0}

/* ══ PDF 저장 줄 ══ */
.savebar{
  display:flex;flex-direction:column;align-items:center;gap:.5em;width:100%;
  margin-top:clamp(8px,1.2vw,14px);
}
.savebtn{
  padding:.58em 2.2em;border-width:3px;border-radius:999px;
  font-size:clamp(1.1rem,1rem + .55vw,1.44rem);font-weight:800;
  box-shadow:6px 6px 0 var(--ink);
}
.savebtn:hover{background:#FFD24D;box-shadow:8px 8px 0 var(--ink)}
.savebtn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.savebar__s{
  margin:0;text-align:center;color:var(--sub);line-height:1.55;max-width:44em;
  font-size:clamp(.86rem,.82rem + .26vw,.98rem);word-break:keep-all;line-break:strict;
}
.savebar__s b{color:var(--inktext);font-weight:800}

/* ══ 스스로 돌아보기 — 넓게 가로로 ══ */
.donegrid{grid-template-columns:minmax(0,1fr)}
.doneside{width:100%}
.doneside .card-sm{width:100%}
#lookRows{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:6px clamp(14px,2vw,28px);
}
@media (max-width:640px){#lookRows{grid-template-columns:1fr}}
.lookrow{
  display:flex;align-items:center;justify-content:space-between;gap:.8em;
  padding:.42em 0;border-bottom:2px dashed #E3DCCD;
}
.lookrow .q{
  flex:1 1 auto;min-width:0;line-height:1.4;font-weight:700;
  font-size:clamp(.88rem,.84rem + .28vw,1rem);word-break:keep-all;line-break:strict;
}
.lookrow .faces{flex:0 0 auto;display:flex;gap:5px}
.donestage__book{width:min(100%,620px)}

/* ══════════════════════════════════════════════════════════════
   스스로 돌아보기 — 카드 넷을 가로로, 크고 또렷하게
   ══════════════════════════════════════════════════════════════ */
.stage[data-stage="7"] #lookRows{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(8px,1.2vw,14px);
  flex:none;justify-content:stretch;
}
@media (max-width:620px){.stage[data-stage="7"] #lookRows{grid-template-columns:1fr}}

.stage[data-stage="7"] .lookrow{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:.55em;padding:.75em .7em .65em;border-bottom:0;
  background:#fff;border:2px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);text-align:center;
}
.stage[data-stage="7"] .lookrow .q{
  flex:1 1 auto;width:100%;font-weight:800;color:var(--inktext);
  font-size:clamp(1rem,.94rem + .38vw,1.18rem);line-height:1.45;
  word-break:keep-all;line-break:strict;
}
.stage[data-stage="7"] .lookrow .faces{margin:0;gap:9px}
.stage[data-stage="7"] .face{
  width:2.9em;height:2.9em;font-size:1.18em;
  border-width:3px;box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease,background .12s ease;
}
.stage[data-stage="7"] .face:hover{transform:translateY(-2px);background:var(--lime-soft)}
.stage[data-stage="7"] .face.on{
  background:var(--yellow);box-shadow:4px 4px 0 var(--ink);transform:scale(1.08);
}
.stage[data-stage="7"] .face.on:hover{background:var(--yellow)}

/* 한 줄 적기 칸도 크게 */
.stage[data-stage="7"] .doneside .lab{
  font-size:clamp(.96rem,.9rem + .34vw,1.1rem);font-weight:800;
}
.stage[data-stage="7"] #lookFree{
  font-size:clamp(1rem,.94rem + .38vw,1.16rem);padding:.62em .85em;
}
.stage[data-stage="7"] .doneside .card-sm{padding:clamp(12px,1.6vw,18px)}
.stage[data-stage="7"] .doneside .mini{
  font-size:clamp(1.06rem,1rem + .44vw,1.28rem);margin-bottom:.5em;
}
/* 마지막 단계에서는 안내줄 자리를 비웁니다 */
body:has(.stage[data-stage="7"].on) .condbar{
  display:none !important;min-height:0 !important;padding:0 !important;
}
/* 물음이 위아래 비슷한 길이로 나뉘게 */
.stage[data-stage="7"] .lookrow .q{
  text-wrap:balance;-webkit-text-wrap:balance;
  max-width:15em;margin:0 auto;
}

/* ══ 친구들과 견주어 보기 ══ */
.sharebar{
  display:flex;flex-direction:column;align-items:center;gap:.5em;
  width:100%;margin-top:clamp(10px,1.4vw,16px);
  background:linear-gradient(180deg,#FFF6FA 0%,#FFECF4 100%);
  border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:5px 5px 0 var(--ink);padding:clamp(12px,1.8vw,20px);
}
.sharebar__tag{flex:0 0 auto}
.sharebar__h{
  margin:.1em 0 .2em;text-align:center;font-weight:800;line-height:1.4;
  font-size:clamp(1.14rem,1.04rem + .56vw,1.5rem);
  word-break:keep-all;line-break:strict;text-wrap:balance;
}
.sharebar__h b{background:linear-gradient(transparent 56%,var(--yellow) 56%);padding:0 .1em}
.sharelist{
  margin:0;padding:0;list-style:none;width:100%;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:8px clamp(12px,1.8vw,22px);
}
@media (max-width:620px){.sharelist{grid-template-columns:1fr}}
.sharelist li{
  display:flex;gap:.5em;align-items:flex-start;
  background:#fff;border:2px solid var(--ink);border-radius:12px;
  box-shadow:2px 2px 0 var(--ink);padding:.55em .75em;
  line-height:1.5;font-size:clamp(.92rem,.88rem + .3vw,1.06rem);
  word-break:keep-all;line-break:strict;text-wrap:balance;
}
.sharelist li::before{
  content:"›";flex:0 0 auto;font-weight:800;color:var(--pink);
  font-size:1.15em;line-height:1.3;
}
.sharelist li b{font-weight:800}
/* 색종이는 한 번만 천천히 내려옵니다 */
.confetti i{
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}

/* ══ 색종이 — 위에서 아래로만, 중력대로 ══ */
.confetti i{top:0;animation-timing-function:cubic-bezier(.32,.06,.62,1)}
@keyframes conffall{
  0%   {transform:translate3d(0,            var(--y0), 0) rotate(0deg)}
  35%  {transform:translate3d(var(--sway),  calc(var(--y0) + (var(--y1) - var(--y0)) * .34), 0) rotate(calc(var(--spin) * .34))}
  70%  {transform:translate3d(calc(var(--sway) * -.6), calc(var(--y0) + (var(--y1) - var(--y0)) * .7), 0) rotate(calc(var(--spin) * .7))}
  100% {transform:translate3d(0,            var(--y1), 0) rotate(var(--spin))}
}
/* 색종이 — 시작 전에는 칸 밖(보이지 않는 곳)에 머뭅니다 */
.confetti i{animation-fill-mode:both}
/* 색종이 — 처음처럼 계속 흩날립니다 */
.confetti i{animation-iteration-count:infinite;animation-fill-mode:none}