/* 옹고집 도술 연구소 — 2차 개편 구성요소: 전체 화면 틀, 짚 인형, 부적, 놀이, 열차, 판결문 */

/* ───── 전체 화면 틀(1·4단계): 오른쪽 패널 없이 넓게, 안내자는 「힌트」 단추로 ───── */
.work.full{display:flex;flex-direction:column;padding:92px 0 0}
.fullcard{flex:1 1 0;min-height:0;margin:0 18px;border-radius:14px!important;padding:20px 30px;overflow:hidden;display:flex;flex-direction:column;border-image:url(../images/brush.webp) 88 fill / 30px stretch;border-width:30px!important;border-style:solid;background:transparent;box-shadow:none!important}
.fullcard>.ptitle{margin-bottom:10px;flex:none}
.fbar{flex:none;height:104px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:22px;padding:8px 34px 12px}
.fb-l{display:flex;align-items:center;gap:14px;min-width:0}.fb-l b{font-size:28px;white-space:nowrap}.fb-l em{font-style:normal;font-size:21px;font-weight:700;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-r{display:flex;align-items:center;gap:14px}
.mvcnt{font-size:22px;font-weight:800;color:var(--ink2)}
.dstrip{display:flex;align-items:center;gap:12px}
.curdoll{height:84px;width:auto;filter:drop-shadow(0 3px 0 rgba(42,33,25,.25))}
.pips{display:flex;gap:6px}.pips i{width:16px;height:16px;border-radius:50%;background:#e2d5b4;border:2px solid var(--ink)}.pips i.dn{background:var(--org)}.pips i.cur{background:var(--mus);box-shadow:0 0 0 4px rgba(226,168,58,.4)}
.hintbtn{position:absolute;left:34px;bottom:120px;z-index:20;display:flex;align-items:center;gap:8px;height:64px;padding:0 20px 0 8px;border-radius:99px;background:#fffaf0;border:2px solid var(--ink);box-shadow:0 4px 0 rgba(42,33,25,.45);font-size:22px;font-weight:800}
.hintbtn img{height:52px;width:auto;border-radius:50%}
.hintbtn:hover{background:var(--hi)}
.hintbub{position:absolute;left:34px;bottom:196px;z-index:20;width:640px;max-width:calc(100% - 68px);opacity:0;pointer-events:none;transform:translateY(14px) scale(.96);transform-origin:left bottom;transition:.25s}
.hintbub.on{opacity:1;pointer-events:auto;transform:none}
.hintbub .talk{background:#fffaf0;border:2px solid var(--ink);border-radius:18px;padding:12px 16px;box-shadow:0 8px 22px rgba(70,45,20,.25)}
.hintbub .talk img{width:96px}.hintbub .bubble{border:0;padding:6px 8px;font-size:23px}

/* ───── 1단계 읽기: 큰 장면 + 두루마리 글 ───── */
.rdfull{display:grid;grid-template-columns:1fr 820px;gap:22px;flex:1;min-height:0}
.rdimg{position:relative;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#3a2a1c}
.rdimg img.sc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.rdimg .pgn{position:absolute;left:14px;top:14px;margin:0;background:rgba(42,33,25,.82);font-size:24px}
.rdtxt{display:flex;flex-direction:column;gap:12px;min-height:0}
.scrollpaper{flex:1;min-height:0;position:relative;border:solid transparent!important;border-width:44px 76px!important;border-image:url(../images/scroll.webp) 13% 11% 13% 11% fill stretch;padding:0 6px;display:flex;flex-direction:column;justify-content:center}
.scrollpaper .stitle{font-size:24px;font-weight:800;color:var(--org2);margin-bottom:10px;letter-spacing:.04em}
.scrollpaper p{font-size:32px;line-height:1.8;font-weight:600}
.wdhelp{min-height:100px;flex:none}
.wcard{grid-template-columns:200px 1fr;padding:10px 18px}.wcard b{font-size:34px}.wcard span{font-size:24px}.wcard em{font-size:20px}
.rdtxt .vw{background:#ffe9a8;border-bottom-color:var(--org)}

/* ───── 재판 화면(전체 폭) ───── */
.trial{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.trial .tq{padding:8px 24px 8px 14px}.trial .tq img.sato{height:104px}.trial .tq p{font-size:30px}
.tpair{flex:1;min-height:0;grid-template-columns:1fr 92px 1fr}
.tside{min-height:0}.tbub{min-height:100px;font-size:26px}
.tfig{height:auto;flex:1;min-height:0;margin-top:14px}.tfig .tpor{height:100%;max-height:330px;width:auto}
.tside .btn{margin-top:12px;height:58px}
.trlow{flex:none;min-height:96px}.trq{font-size:26px;font-weight:800;margin-bottom:8px}.trq b{color:var(--org2)}
.opts3c{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.opts3c .opt{grid-template-columns:40px 1fr;font-size:21px;padding:10px 14px}.opts3c .opt .n{width:38px;height:38px;font-size:19px}

/* ───── 2단계 증거 문장 ───── */
.evl{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.evs{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:center;text-align:left;padding:14px 20px;border-radius:12px;background:#fff;border:2px solid var(--ink);font-size:25px;font-weight:700;line-height:1.5;transition:.12s}
.evs i{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:#fff}
.evs:hover{background:#fff3d4;transform:translateX(4px)}.evs.bad{animation:shake .4s;background:var(--nol)}
.evs.found{background:var(--okl);border-color:var(--ok);pointer-events:none}.evs.found i{background:var(--ok);box-shadow:inset 0 0 0 4px #fff}

/* ───── 3단계 부적 실험실 ───── */
.labw.lab3{grid-template-columns:380px 1fr}
.dollbox{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:12px 10px;text-align:center}
.dollbox img.por{height:310px;width:auto;object-fit:contain}.dollbox b{font-size:30px}.dollbox span{font-size:21px;font-weight:600;color:var(--ink2)}
.bjrack{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.bj{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border-radius:12px;background:#fff;border:2px solid var(--ink);transition:.15s}
.bj img{height:122px;width:auto}.bj b{font-size:20px}
.bj:hover{background:#fff3d4;transform:translateY(-4px)}.bj.on{background:var(--hi);box-shadow:0 4px 0 var(--org)}
.flyimg{filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}

/* ───── 놀이: 카드 뒤집기 · 차례 맞추기 · 짝 이어 주기 ───── */
.memgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 14px}
.mc{position:relative;height:196px;border-radius:14px;border:2px solid var(--ink);background:#fff;perspective:900px;overflow:hidden;padding:0}
.mc .mb,.mc .mf2{position:absolute;inset:0;display:grid;place-items:center;transition:transform .45s,opacity .45s;backface-visibility:hidden}
.mc .mb img{height:92%;width:auto}
.mc .mf2{padding:12px 16px;font-size:26px;font-weight:800;line-height:1.4;text-align:center;opacity:0;transform:rotateY(-90deg);background:#fff}
.mc .mf2.t{background:#e3f1f2;color:var(--teal2);font-size:34px}.mc .mf2.a{background:#fff2d6}
.mc.open .mb{opacity:0;transform:rotateY(90deg)}.mc.open .mf2{opacity:1;transform:none}
.mc.done{border-color:var(--ok);box-shadow:0 0 0 3px rgba(58,138,92,.35)}
.mc:not(.open):hover{transform:translateY(-4px)}
.seqrow{display:flex;align-items:stretch;justify-content:center;gap:6px;margin:14px 0 18px}
.seqs{flex:1;min-height:132px;border:2px solid var(--ink);border-radius:12px;background:#f0e3c4;padding:10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.seqs b{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:21px}
.seqs span{font-size:22px;font-weight:700;line-height:1.4;text-wrap:balance}
.seqs.on{background:#fff;border-color:var(--ok);animation:pop .4s both}.seqs.on b{background:var(--ok)}.seqs.next{border-color:var(--org);box-shadow:0 0 0 4px rgba(199,68,46,.3)}
.seqarrow{width:34px;height:auto;align-self:center;flex:none}
.seqtray{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.seqc{padding:16px 20px;border-radius:12px;background:#fff;border:2px solid var(--ink);font-size:25px;font-weight:700;text-align:left;box-shadow:0 5px 0 rgba(42,33,25,.14);transition:.12s}
.seqc:hover{background:#fff3d4;transform:translateY(-3px)}.seqc.bad{animation:shake .4s;background:var(--nol)}
.mtgrid{display:grid;grid-template-columns:1fr 70px 1fr;gap:12px;align-items:stretch;margin-top:10px}
.mtcol{display:flex;flex-direction:column;gap:14px}
.mtc{flex:1;min-height:104px;padding:12px 18px;border-radius:12px;background:#fff;border:2px solid var(--ink);font-size:25px;font-weight:700;line-height:1.45;text-align:left;box-shadow:0 5px 0 rgba(42,33,25,.14);transition:.12s}
.mtc small{display:block;font-size:17px;font-weight:800;color:var(--teal2);margin-bottom:2px}
.mtc:hover{background:#fff3d4}.mtc.sel{background:var(--hi);border-color:var(--org)}.mtc.done{background:var(--okl);border-color:var(--ok);pointer-events:none}.mtc.bad{animation:shake .4s}
.mtmid{display:flex;flex-direction:column;gap:14px}.mtmid span{flex:1;display:grid;place-items:center;font-size:40px;color:var(--muted)}.mtmid span.on{color:var(--ok)}

/* ───── 4단계 순간이동기(전체 화면 배치) ───── */
.w4full{display:grid;grid-template-columns:860px 1fr;gap:24px;flex:1;min-height:0}
.w4l{display:flex;flex-direction:column;gap:12px;min-height:0}
.w4l .wpv img.sc{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.w4l .dgrid{grid-template-columns:repeat(4,1fr);gap:8px}
.w4l .btn.wide{height:62px;font-size:25px}
.w4r{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}
.w4r .chain{gap:10px}.w4r .cc{min-height:0;padding:10px 16px}.w4r .cc p{font-size:21px}

/* ───── 5단계 열차 운행 ───── */
.trroute{position:relative;height:430px;margin:6px 0 10px;border:2px solid var(--ink);border-radius:14px;background:linear-gradient(#fdf6e2,#f1e2bd);overflow:hidden}
.trk{position:absolute;left:0;right:0;top:100px;height:20px;background:repeating-linear-gradient(90deg,#6b4f34 0 14px,transparent 14px 44px),linear-gradient(#8f8f8f,#6f6f6f);border-top:3px solid #3b3b3b;border-bottom:3px solid #3b3b3b;background-size:auto,100% 8px;background-position:0 0,0 6px;background-repeat:repeat-x,no-repeat}
.trainimg{position:absolute;left:calc(var(--p,-10) * 1%);top:20px;height:92px;width:auto;transform:translateX(-50%);transition:left .9s linear;z-index:3}
.trroute.stopped .trainimg{transition:left .5s ease-out}
.tst{position:absolute;top:128px;left:calc(var(--x) - 11.6%);width:23.2%;bottom:10px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px 10px;border-radius:12px;background:#fff;border:2px solid var(--ink);text-align:center;transition:.15s}
.tst .lamp{position:absolute;left:50%;top:-100px;margin-left:-26px;width:52px}.tst .lamp img{width:52px;height:auto;display:block}
.tst .lamp.red img{filter:drop-shadow(0 0 14px #ff3b2a)}
.tst .dot{width:42px;height:42px;font-size:21px;margin-top:2px}.tst .stnm{font-size:21px;font-weight:800;color:var(--cave)}
.tst .tx{font-size:21px;font-weight:700;line-height:1.5;text-wrap:balance}
.tst:not([disabled]):hover{background:#fff3d4;transform:translateY(-3px)}
.tst.here{border-color:var(--org);box-shadow:0 0 0 4px rgba(199,68,46,.3);background:#fff8e6}
.tst.sel{background:var(--nol);border-color:var(--no)}.tst.sel .dot{background:var(--no);color:#fff}
.tst.healed{background:var(--okl);border-color:var(--ok);animation:pop .45s both}.tst.healed .dot{background:var(--ok);color:#fff}
.tst[disabled]{pointer-events:none}
.trctl{display:flex;gap:16px;justify-content:center;margin:4px 0 6px}
.btn.brake{background:var(--org);gap:12px}.btn.brake img{height:50px;width:auto}
.testrail{position:relative;height:116px;margin:6px 0}.testrail .trk{top:62px}.testrail .trainimg{top:0}
.route .rt.now{background:#fff3d4;border-color:var(--org);box-shadow:0 0 0 4px rgba(199,68,46,.28)}

/* ───── 도장 팝업: 짚 인형 변신 ───── */
.dollmodal{width:760px}
.dtrans{position:relative;height:330px;display:grid;place-items:center}
.dtrans img{position:absolute;height:320px;width:auto;filter:drop-shadow(0 6px 0 rgba(42,33,25,.2))}
.dtrans .dto{opacity:1}

/* ───── 진행 표시(오른쪽 패널): 짚 인형 ───── */
.mission .pg img{height:44px;width:auto}
.mission .pg{width:54px;height:54px;border-radius:12px}
.mission .mtori.doll{height:230px;bottom:70px;right:14px;animation:none;filter:drop-shadow(0 4px 0 rgba(42,33,25,.2))}
#intro .in-gears img{height:124px}

/* ───── 마무리: 판결문 ───── */
.decree{position:relative;aspect-ratio:2.19/1;width:100%}
.decree .dscroll{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.decree .dbody{position:absolute;left:13%;right:13%;top:20%;bottom:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px}
.dtag{background:var(--org);color:#fff;border-radius:8px;padding:0 16px;font-size:20px;font-weight:800;height:32px;display:inline-flex;align-items:center}
.dname{font-size:34px;font-weight:800;line-height:1.2}
.decree p{font-size:19px;font-weight:700;line-height:1.5;text-wrap:balance}
.dsign{display:flex;align-items:center;gap:12px;margin-top:2px}.dsign span{font-size:17px;font-weight:800;color:var(--ink2);line-height:1.3;text-align:right}
.dsign .dd{height:70px;width:auto}.dsign .dseal{height:54px;width:auto}

/* ───── 힌트 말풍선: 여우 얼굴 옆에 글이 붙는 한 덩어리 카드로 ───── */
.hintbub{width:700px;bottom:196px}
.hintbub .talk{grid-template-columns:100px 1fr;gap:0;align-items:center;padding:10px 20px 10px 12px;background:#fffaf0;border:2px solid var(--ink);border-radius:20px;box-shadow:0 10px 26px rgba(70,45,20,.25)}
.hintbub .talk img{width:100px;height:100px;object-fit:contain;animation:none}
.hintbub .bubble{background:transparent;border:0;border-radius:0;padding:4px 6px 4px 14px;border-left:2px solid var(--line);font-size:24px;line-height:1.6;font-weight:700;text-wrap:pretty}
.hintbub .bubble b{color:var(--org2)}
.hintbtn{bottom:120px}
.hintbtn.pulse{animation:hpulse 1.6s ease-in-out 4}
@keyframes hpulse{0%,100%{box-shadow:0 4px 0 rgba(42,33,25,.45)}50%{box-shadow:0 4px 0 rgba(42,33,25,.45),0 0 0 10px rgba(226,168,58,.5)}}
/* 전체 화면 카드는 얇은 선 */
.fullcard{border-image:none!important;border:2px solid var(--ink)!important;background:var(--card)!important;box-shadow:0 10px 26px rgba(70,45,20,.17)!important;margin:0 18px 6px;padding:20px 30px}
/* 카드 뒤집기: 세로 카드 6장 한 줄 */
.memgrid{grid-template-columns:repeat(6,1fr);gap:14px}
.mc{height:auto;aspect-ratio:5/7}
.mc .mf2{font-size:22px;padding:10px 12px;line-height:1.4}.mc .mf2.t{font-size:27px}
.mc .mb img{height:100%;width:100%;object-fit:cover}

/* ───── 1단계 읽기: 오른쪽은 위(글 블록) · 아래(낱말 안내 블록)로 겹치지 않게 쌓음 ───── */
.rdfull{grid-template-columns:1fr 840px}
.rdtxt{display:flex;flex-direction:column;gap:12px;min-height:0}
.scrollpaper{flex:1 1 0;min-height:0;position:relative;border:0!important;border-image:none!important;background:url(../images/readbg.webp) center/100% 100% no-repeat;padding:62px 74px 58px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.scrollpaper .stitle{font-size:23px;margin-bottom:10px}
.scrollpaper p{font-size:31px;line-height:1.8}
.wdhelp{flex:none;min-height:104px;display:flex;align-items:stretch}
.wdhelp .wcard,.wdhelp .wtip{width:100%;background:#fff3d4;border:2px solid var(--ink);border-radius:12px;padding:12px 20px;display:flex;align-items:center}
.wdhelp .wtip{font-size:23px;font-weight:700;color:var(--ink2);justify-content:center;text-align:center}
.wdhelp .wcard{display:grid;grid-template-columns:190px 1fr;gap:2px 20px}
/* 열차: 달릴 때 화면 오른쪽 밖으로 나가는 부분은 잘라서 넘침 없게 */
.trroute,.testrail{overflow:hidden}
.trainimg{max-width:none}
/* 도장 팝업: 짚 인형 이미지는 위치 기준 상자 안에서 폭·높이를 직접 지정(너비 0으로 사라지던 문제) */
.dtrans{display:flex;align-items:center;justify-content:center;height:340px;position:relative}
.dtrans img{position:absolute;left:50%;top:50%;height:320px;width:auto;max-width:none;transform:translate(-50%,-50%)}

/* 3단계 「내 주인공 고르기」: 카드 3장이 폭을 꽉 채우는 큰 블록으로 */
.keeps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.keeps .kp{flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:12px 14px;min-height:196px;border-radius:14px;text-align:left}
.keeps .kp img.por{height:176px;width:auto;flex:none;object-fit:contain}
.keeps .kp b{display:block;font-size:30px;line-height:1.25}
.keeps .kp span{display:block;font-size:24px;font-weight:700;color:var(--ink2);margin-top:2px}
.keeps .kp.on{background:var(--hi);box-shadow:0 5px 0 var(--org)}
/* 4단계 배경 고르기 카드는 폭을 반반으로 */
.keeps.big{grid-template-columns:repeat(2,1fr)}.keeps.big .kp{flex-direction:column;min-height:0}
.keeps.big .kp img.sc{width:100%;height:auto;aspect-ratio:16/9}
/* 열차 그림은 상자 안에서 잘리도록 만든 것이라 화면 밖 판정에서 제외 */

/* ───── 힌트: 표시줄 안의 단추 + 필요할 때만 뜨는 말풍선(말풍선도 표시줄 위에 붙어 활동을 가리지 않게 닫기 쉬움) ───── */
.hintbtn{position:static;flex:none;height:56px;padding:0 18px 0 6px;font-size:21px;margin-right:6px}
.hintbtn img{height:46px}
.hintbub{bottom:112px;left:18px}
.fb-l{gap:12px}
/* ───── 잘리는 내용은 스크롤로 ───── */
.fullcard,.main,.sbody,.w4r,.w4l,.rdtxt,.trial,.evl,.chain,.maptb{scrollbar-width:thin;scrollbar-color:#b59a68 transparent}
.fullcard{overflow-y:auto}
.w4full{overflow:visible}
.w4r{overflow-y:auto;padding-right:6px}.w4l{overflow-y:auto}
.maptb{max-height:none;overflow:visible}
.main{overflow-y:auto}
.sbody{overflow-y:auto}
.scrollpaper p{overflow-y:auto;max-height:100%}
.keeps{overflow:visible}

/* ───── 소품 짝 이어 주기: 짝마다 색, 화살표 그림, 알맞은 폭 ───── */
.mtgrid{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:0 14px;max-width:1500px;margin:14px auto 6px;width:100%}
.mtcol{gap:16px}
.mtc{position:relative;min-height:112px;padding:16px 22px 16px 28px;font-size:27px;border-left-width:10px;border-left-color:var(--pc,var(--ink));box-shadow:0 5px 0 rgba(42,33,25,.12)}
.mtc.p1{--pc:#c7442e}.mtc.p2{--pc:#2a7f86}.mtc.p3{--pc:#e2a83a}
.mtc small{display:inline-block;margin-bottom:6px;padding:1px 12px;border-radius:99px;background:var(--pc,#ddd);color:#fff;font-size:17px;font-weight:800}
.mtc.p3 small{color:var(--ink)}
.mtc.l small::after{content:' 소품'}.mtc.r small::after{content:' 로 바뀜'}
.mtc:hover{background:#fff8e6;transform:translateY(-2px)}
.mtc.sel{background:#fff1bf;border-color:var(--ink);border-left-color:var(--pc);box-shadow:0 0 0 4px rgba(226,168,58,.5),0 5px 0 rgba(42,33,25,.12)}
.mtc.done{background:#fffaf0;border-color:var(--ink);border-left-color:var(--pc);box-shadow:0 5px 0 var(--pc)}
.mtc.done::after{content:'✓';position:absolute;right:16px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--pc);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}
.mtc.p3.done::after{color:var(--ink)}
.mtmid{gap:16px}.mtmid span{flex:1;display:grid;place-items:center;opacity:.35;filter:grayscale(.6);transition:.3s}
.mtmid span img{width:96px;height:auto}
.mtmid span.on{opacity:1;filter:none}
/* 놀이 마무리 안내 상자는 위와 간격을 두고, 가운데로 */
#fb .fb.ok{margin-top:18px}

/* ───── 차례 맞추기: 큰 칸 4개 + 큰 카드, 화면 폭을 꽉 활용 ───── */
.seqrow{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr 46px 1fr;align-items:stretch;gap:0;margin:18px 0 20px}
.seqs{display:flex;flex-direction:column;min-height:196px;border:2px solid var(--ink);border-radius:14px;background:#f3e8cc;overflow:hidden;padding:0;gap:0;text-align:center}
.seqs .sh{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;background:var(--cave);color:#fff;border-bottom:2px solid var(--ink)}
.seqs .sh b{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--cave);display:grid;place-items:center;font-size:22px;font-weight:800}
.seqs .sh em{font-style:normal;font-size:24px;font-weight:800}
.seqs .sb{flex:1;display:grid;place-items:center;padding:14px 16px;font-size:26px;font-weight:700;line-height:1.5;text-wrap:balance}
.seqs .sb i{font-style:normal;font-size:21px;font-weight:700;color:var(--muted)}
.seqs.next{border-color:var(--org);box-shadow:0 0 0 4px rgba(199,68,46,.3)}.seqs.next .sh{background:var(--org)}
.seqs.on{background:#fff;border-color:var(--ok);animation:pop .4s both}.seqs.on .sh{background:var(--ok)}.seqs.on .sh b{color:var(--ok)}
.seqarrow{width:44px;height:auto;align-self:center;justify-self:center}
.seqlbl{font-size:23px;font-weight:800;color:var(--ink2);margin:0 0 10px;display:flex;align-items:center;gap:10px}
.seqlbl::before{content:'';width:10px;height:26px;border-radius:5px;background:var(--mus)}
.seqtray{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:18px}
.seqc{min-height:104px;padding:18px 26px;border-radius:14px;font-size:27px;font-weight:700;line-height:1.45;display:flex;align-items:center}
/* 안내 문구는 카드와 떨어진 별도 상자 */
.hint:not(.talk .hint){margin-top:6px}
#fb .hint{background:#fff3d4;border:2px dashed var(--line);border-radius:12px;padding:12px 18px;font-size:23px;font-weight:700;color:var(--ink2);margin-top:4px}

/* ───── 겹침 방지: 안내(#fb) 상자는 항상 위 내용과 간격을 두고, 내용은 위에서 아래로 쌓음 ───── */
.main>*,.fullcard>*{flex-shrink:0}
.main #fb,.fullcard #fb{margin-top:16px;min-height:0}
.main #fb:empty,.fullcard #fb:empty{margin:0}
.main .opts+#fb,.fullcard .opts+#fb{margin-top:18px}
.main .fb,.fullcard .fb{position:relative;z-index:1}
.fullcard{gap:0}

/* ───── 마무리 다듬기: 라벨은 글과 줄을 나눔, 전체 화면 틀의 보기는 크게 ───── */
.mtc small{display:block;width:fit-content;margin:0 0 8px}
.mtc{display:flex;flex-direction:column;justify-content:center}
.mtc.done::after{right:18px}
.mtc.r{padding-right:70px}.mtc.l{padding-right:70px}
.fullcard .quiz{font-size:36px;padding:28px 34px}
.fullcard .opts{gap:16px;margin-top:6px}
.fullcard .opt{grid-template-columns:56px 1fr;min-height:104px;padding:18px 28px;font-size:29px;border-radius:14px}
.fullcard .opt .n{width:52px;height:52px;font-size:26px}
.fullcard #fb .fb{font-size:25px;padding:16px 24px}
.fullcard .hint{font-size:24px}

/* 4단계 「내 배경 고르기」: 배경 3장이 한 줄에 모두 보이게 */
.keeps.big{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.keeps.big .kp{flex-direction:column;align-items:stretch;min-height:0;padding:10px 10px 12px;gap:2px;text-align:center}
.keeps.big .kp img.sc{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:2px solid var(--ink)}
.keeps.big .kp b{font-size:30px;margin-top:6px}.keeps.big .kp span{font-size:22px;margin-top:0}
.keeps.big .kp.unseen{opacity:.45;filter:grayscale(.7);pointer-events:none}
.keeps.big .kp.on{background:var(--hi);box-shadow:0 0 0 4px var(--org),0 5px 0 rgba(42,33,25,.14)}
.fullcard .keeps.big~.fb.info{font-size:23px;padding:12px 20px;margin-top:12px}
.fullcard .keeps.big~.lbl{margin:12px 0 6px;font-size:25px}
.fullcard .keeps.big~.field{height:62px;font-size:26px}
.dollmodal .cbody{text-wrap:balance;line-height:1.6}

/* ───── 글자 대비 높이기 ───── */
:root{--muted:#665641;--ink2:#4f4130}
/* 비활성 버튼: 색 위의 흐린 글씨 대신 밝은 바탕 + 진한 글씨 */
#stage .btn[disabled],#stage .btn.teal[disabled],#stage .btn.brake[disabled],#stage .btn.mus[disabled],#stage .btn.line[disabled]{background:#eadfc4!important;color:#4a3d2b!important;border-color:#8d7d5d!important;box-shadow:0 4px 0 #b8ab8d!important;opacity:1}
#stage .btn.brake[disabled] img{filter:grayscale(.5) opacity(.7)}
/* 입력칸 안내 문구는 진하게, 글 칸은 흰 바탕 유지 */
#stage .field::placeholder,#stage .titlebox input::placeholder,#stage .nm::placeholder{color:#6a5a44;opacity:1;font-weight:600}
/* 작은 보조 글씨(원래 문장, 낱말 설명 등)와 힌트 상자 */
#stage .cc small.was,#stage .mrow .was,#stage .wcard em,#stage .conn span,#stage .psub,#stage .hint{color:#4f4130}
#stage .count{color:#4f4130}
/* 칩·보조 버튼: 글씨는 항상 진하게 */
#stage .egs button,#stage .chip,#stage .cc2{color:var(--ink)}
#stage .cc2.on{color:#fff}
/* 단계 표시 줄에서 아직 안 간 단계는 흐리지 않게 */
#stage .sg{color:#3d3226}
/* 5단계 노선 만들기: 칸 사이 간격을 조금 더 주어 읽기 쉽게 */
#stage .build .field{font-size:26px;line-height:1.5}
#stage .build .bwr .egs.sm button{font-size:20px}

/* 판결문: 종이 안쪽 영역에만 글을 두고 「인형 | 글 | 직인」 3칸으로 */
.decree .dbody{left:17%;right:17%;top:23%;bottom:21%;display:grid;grid-template-columns:78px 1fr 84px;gap:10px;align-items:center;justify-content:normal;text-align:center}
.decree .dl{display:grid;place-items:center}.decree .dd{height:96px;width:auto}
.decree .dm{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.decree .dtag{height:26px;font-size:17px;padding:0 14px}
.decree .dname{font-size:30px;line-height:1.15}
.decree p{font-size:16.5px;line-height:1.5;font-weight:700;text-wrap:balance}
.decree .dr{display:flex;flex-direction:column;align-items:center;gap:4px}
.decree .dseal{height:60px;width:auto}.decree .dr span{font-size:13px;font-weight:800;color:var(--ink2);line-height:1.2;text-align:center}

/* 마무리 화면 오른쪽 열: 버튼·안내자·배운 것이 한 화면에 들어오도록 압축 */
.fin .finacts{gap:8px}.fin .finacts .btn{height:52px;font-size:22px;padding:0 20px}
.fin .col .talk{grid-template-columns:96px 1fr}.fin .col .talk img{width:96px}.fin .col .talk .bubble{font-size:21px;padding:10px 14px}
.fin .card.learn{padding:10px 16px;overflow:hidden}.fin .card.learn h3{font-size:22px;margin-bottom:4px}.fin .card.learn .small{font-size:18px;line-height:1.45}

/* 차례 칸: 번호 머리띠는 칸 폭 전체, 본문은 아래 영역을 채움 */
.seqrow .seqs{align-items:stretch;justify-content:flex-start;text-align:center}
.seqrow .seqs .sh{width:100%;flex:none;border-radius:0}
.seqrow .seqs .sh b{background:#fff;color:var(--cave);width:36px;height:36px}
.seqrow .seqs .sh em{color:#fff}
.seqrow .seqs .sb{width:100%;flex:1}
.seqrow .seqs.next .sh b{color:var(--org)}
.seqrow .seqarrow{width:42px;margin:0 2px}

/* 왼쪽 위 제목: GPT 이미지 로고(한 어구 한 색) */
.brand{gap:0}
.hdrlogo{height:60px;width:auto;display:block;margin:-4px 0 0 2px;filter:drop-shadow(0 2px 0 rgba(42,33,25,.18))}
body.in-title #top .brand{display:none}

/* ───── 마지막 화면 새 배치: 설계도 | 판결문 + 내 이야기 | 저장·안내 ───── */
.fin2{position:absolute;inset:0;display:grid;grid-template-columns:790px minmax(0,1fr) 430px;gap:22px;padding:96px 28px 22px 0}
.fin2 .fcol{display:flex;flex-direction:column;gap:14px;min-height:0;min-width:0}
/* 왼쪽: 설계도 카드가 남는 높이를 채움 */
.fin2 .f-plan .pcard{flex:1 1 0;height:auto;min-height:0;border-radius:0 18px 18px 0;border-left:0}
.fin2 .bgsw{padding-left:14px;display:flex;gap:10px;align-items:center;flex:none}
.fin2 .bgsw .lbl{margin-left:6px;font-size:21px}
/* 가운데: 판결문(위) + 이야기(아래, 남는 높이를 채우고 넘치면 스크롤) */
.fin2 .f-story .decree{flex:none;width:100%;aspect-ratio:2.19/1}
.fin2 .storyc{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:6px;padding:16px 22px 18px;border-radius:16px;margin:0}
.fin2 .storyc h3{font-size:34px;margin:0}
.fin2 .storyc .small{font-size:20px;color:var(--ink2)}
.fin2 .storyc .sbodyx{flex:1 1 0;min-height:0;overflow-y:auto;font-size:28px;line-height:1.75;padding:16px 20px}
/* 오른쪽: 버튼·안내자·배운 것 */
.fin2 .f-act .finacts{gap:10px;flex:none}.fin2 .f-act .finacts .btn{height:62px;font-size:25px;padding:0 20px}
.fin2 .f-act .talk{flex:none;grid-template-columns:104px 1fr}.fin2 .f-act .talk img{width:104px}
.fin2 .f-act .talk .bubble{font-size:23px;padding:12px 16px}
.fin2 .f-act .card.learn{flex:1 1 0;min-height:0;padding:14px 20px;overflow:auto}.fin2 .f-act .card.learn h3{font-size:24px;margin-bottom:6px}.fin2 .f-act .card.learn .small{font-size:21px;line-height:1.6}

/* 마지막 화면: 글이 짧아도 상자를 꽉 채우도록 글자 크기를 자동으로 키움(fitText) */
.fin2 .f-act .card.learn{display:flex;flex-direction:column;overflow:hidden}
.fin2 .f-act .card.learn .small{flex:1 1 0;min-height:0;overflow:hidden;line-height:1.65}
.fin2 .storyc .sbodyx{display:flex;flex-direction:column;justify-content:center;overflow:hidden;line-height:1.7}
.fin2 .storyc .sbodyx{text-wrap:pretty}

/* ───── 오늘 배운 것: 세 개의 색 블록 ───── */
.fin2 .f-act .card.learn{padding:14px 16px 16px;gap:10px}
.fin2 .f-act .card.learn h3{font-size:25px;margin:0;display:flex;align-items:center;gap:10px}
.fin2 .f-act .card.learn h3::before{content:'';width:10px;height:26px;border-radius:5px;background:var(--mus)}
.lblocks{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:10px}
.lb{flex:1 1 0;min-height:0;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:10px 16px 10px 12px;border-radius:14px;background:#fff;border:2px solid var(--ink);border-left:10px solid var(--c);box-shadow:0 4px 0 rgba(42,33,25,.14);overflow:hidden}
.lb1{--c:#c7442e}.lb2{--c:#2a7f86}.lb3{--c:#e2a83a}
.lb .lbg{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(42,33,25,.25))}
.lb .lbt{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:0;max-height:100%;overflow:hidden}
.lb .lbt b{font-size:0.9em;color:var(--c);line-height:1.2;white-space:nowrap}
.lb2 .lbt b{color:#1f6469}.lb3 .lbt b{color:#a8761a}
.lb .lbt span{font-size:0.78em;font-weight:700;line-height:1.5;color:var(--ink);text-wrap:balance}

/* 판결문의 사또(사람이 된 인형): 종이 안쪽 높이를 가득 채우도록 크게 */
.decree .dbody{grid-template-columns:150px 1fr 92px;gap:8px;top:20%;bottom:18%}
.decree .dl{height:100%;display:grid;align-items:end;justify-items:center}
.decree .dd{height:100%;max-height:176px;width:auto;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(42,33,25,.2))}

/* 판결문 내용: 작게, 두 줄(줄마다 끊기지 않게) */
.decree .dbody{left:15%;right:15%;grid-template-columns:136px 1fr 84px}
.decree p{font-size:14.5px;line-height:1.6;display:flex;flex-direction:column;align-items:center}
.decree p span{display:block;white-space:nowrap}