/* 우리 반 토의 — 색과 글꼴은 저장소의 다른 앱(토의 준비 스튜디오)과 같은 값 */
:root{
  --paper:#FBFAF6; --surface:#FFFFFF; --sunken:#F3F1EA; --ink:#232022; --muted:#6E6A63; --faint:#9A958C;
  --rule:#E2DED4; --seal:#C2452D; --seal-soft:#F7E6E1; --sky:#3B6EA5; --sky-soft:#E4EDF6; --leaf:#4F7A4A; --leaf-soft:#E6F0E2;
  --amber:#B57A1F; --amber-soft:#FBF0D9; --note-y:#FFF4C9; --note-b:#E3EFF8;
  --shadow:0 1px 2px rgba(35,32,34,.06),0 10px 30px -14px rgba(35,32,34,.22);
  --sans:"IBM Plex Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --serif:"Gowun Batang","Batang",Georgia,serif;
  --mono:"IBM Plex Mono","Consolas","IBM Plex Sans KR","Malgun Gothic",monospace;
  --cute:"Jua","Gowun Dodum","Malgun Gothic",sans-serif;
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#1A1917; --surface:#242220; --sunken:#201E1C; --ink:#EDE9E0; --muted:#A8A197; --faint:#7D766C; --rule:#37332E;
    --seal:#E2795F; --seal-soft:#3A2622; --sky:#8DB4E0; --sky-soft:#1F2A36; --leaf:#93BE8B; --leaf-soft:#1F2B1D; --amber:#E0B05A; --amber-soft:#33291A;
    --note-y:#3A3420; --note-b:#1F2C38; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6); }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
body.big{font-size:1.25rem}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.35;margin:0 0 .5em}
h2{font-size:1.6em} h3{font-size:1.25em} h4{font-size:1.05em}
p{margin:.4em 0}
small{font-weight:400;color:var(--muted)}
button,input,textarea,select{font:inherit;color:inherit}
img{max-width:100%;display:block}
.loading{color:var(--muted);text-align:center;padding:40px 16px}
.muted,.fine{color:var(--muted)} .fine{font-size:.88em}
.err{color:var(--seal);font-weight:600;min-height:1.2em;margin:.3em 0}
.empty{color:var(--faint);padding:10px 0}
.grow{flex:1}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.row.end{justify-content:flex-end} .row.center{justify-content:center} .row.between{justify-content:space-between;align-items:flex-start}
.center{text-align:center}

/* 단추 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 18px;border-radius:12px;border:1.5px solid var(--rule);
  background:var(--surface);font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{border-color:var(--faint)} .btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.primary{background:var(--seal);border-color:var(--seal);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.small{min-height:36px;padding:0 12px;font-size:.88em;border-radius:9px}
.btn.on{background:var(--sky-soft);border-color:var(--sky);color:var(--sky)}
.btn.wide{width:100%} .btn.big{min-height:56px;font-size:1.1em;padding:0 26px} .btn.huge{min-height:72px;font-size:1.5em;padding:0 48px;border-radius:18px}
.btn.danger,.menu .danger{color:var(--seal)}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* 카드, 입력 */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin:0 0 16px}
.tag{display:inline-block;font-size:.8em;font-weight:700;color:var(--muted);background:var(--sunken);border-radius:999px;padding:2px 10px;margin-bottom:6px}
.fld{display:block;margin:0 0 14px}
.fld .fl{display:block;font-weight:700;margin-bottom:6px}
.fld textarea,.fld input,.codeform input,.sets input,.sets select,.own input{width:100%;border:1.5px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--paper);resize:vertical;line-height:1.55}
.fld textarea:focus,.fld input:focus,.codeform input:focus{border-color:var(--sky);outline:none;background:var(--surface)}
.fld textarea::placeholder,.fld input::placeholder{color:var(--faint)}
.fld .fm{display:flex;justify-content:space-between;font-size:.82em;color:var(--faint);margin-top:4px}
.cnt.short{color:var(--seal)} .cnt.ok{color:var(--leaf)}
.bignum{font-family:var(--mono);font-weight:600;font-size:4em;line-height:1;color:var(--seal)} .bignum small{font-size:.35em;color:var(--muted)}
.fld.narrow{max-width:320px;margin:16px auto 0;text-align:left}
.checks{border:1px dashed var(--rule);border-radius:12px;padding:10px 14px 4px;margin:0 0 6px}
.checks legend{font-weight:700;padding:0 6px}
.checks label{display:flex;gap:10px;align-items:center;min-height:42px;cursor:pointer}
.checks input{width:22px;height:22px;accent-color:var(--leaf)}
.tip{background:var(--amber-soft);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.note{background:var(--sky-soft);border-radius:10px;padding:10px 14px}
.donebar{background:var(--leaf-soft);color:var(--leaf);border-radius:12px;padding:12px 16px;margin:0 0 14px;font-weight:600}
.donebar b{margin-right:6px}

/* 첫 화면 */
.entry{max-width:900px;margin:0 auto;padding:40px 16px 60px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:1.15em;white-space:nowrap}
.brand.big{font-size:2.2em;justify-content:center}
.mark{width:.6em;height:.6em;border:2px solid var(--seal);transform:rotate(45deg);display:inline-block;flex:none}
.entry .sub{text-align:center;color:var(--muted);margin:0 0 28px}
.resume{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border:2px solid var(--seal);background:var(--seal-soft)}
.resume b{display:block;font-size:1.15em} .resume span{color:var(--muted);font-family:var(--mono)}
.codeform{display:flex;gap:8px}
.codeform input{font-family:var(--mono);font-size:1.5em;letter-spacing:.2em;text-transform:uppercase;text-align:center;min-width:0}
.joincard h2{font-size:1.3em}
.nogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:12px 0 18px}
.no{min-height:52px;border-radius:12px;border:1.5px solid var(--rule);background:var(--paper);font-family:var(--mono);font-size:1.15em;font-weight:600;cursor:pointer}
.no.on{background:var(--seal);border-color:var(--seal);color:#fff}
@media (max-width:640px){ .nogrid{grid-template-columns:repeat(6,1fr)} }

/* 머리띠, 4단계 */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.topicchip{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;background:var(--amber-soft);border-radius:10px;padding:6px 12px;font-weight:700;overflow:hidden}
.topicchip span{font-size:.75em;color:var(--amber);white-space:nowrap}
.who{font-family:var(--mono);font-weight:600;color:var(--muted);white-space:nowrap}
.steps{max-width:900px;margin:14px auto 0;padding:0 16px}
.steps ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0;margin:0}
.steps li{display:flex;align-items:center;gap:6px;font-size:.85em;color:var(--faint);border-bottom:3px solid var(--rule);padding:4px 2px 6px;white-space:nowrap;overflow:hidden}
.steps li b{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--sunken);font-family:var(--mono);font-size:.85em;flex:none}
.steps li.past{color:var(--muted);border-color:var(--leaf)} .steps li.past b{background:var(--leaf-soft);color:var(--leaf)}
.steps li.now{color:var(--ink);font-weight:700;border-color:var(--seal)} .steps li.now b{background:var(--seal);color:#fff}
.todo{margin:12px 0 0;font-size:1.05em}
.todo .ph{display:inline-block;background:var(--ink);color:var(--paper);border-radius:8px;padding:1px 10px;margin-right:10px;font-size:.85em;font-weight:700}
.offline{position:sticky;top:60px;z-index:19;background:var(--amber-soft);color:var(--amber);text-align:center;padding:8px;font-weight:600}
.main{max-width:900px;margin:0 auto;padding:18px 16px 120px}
.main.wide{max-width:1320px}
@media (max-width:700px){ .steps li{font-size:0;justify-content:center} .steps li b{font-size:13px} .steps li.now{font-size:.8em} }

/* 1 그림 */
.progress{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-weight:700}
.progress em{font-style:normal;font-family:var(--mono);margin-left:6px;color:var(--muted)}
.progress.small{font-size:.85em;font-weight:500;color:var(--muted);margin:0 auto 0 0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.scard{position:relative;border:1.5px solid var(--rule);border-radius:12px;background:var(--surface);padding:0;overflow:hidden;cursor:pointer;text-align:left;box-shadow:var(--shadow);transition:transform .15s}
.scard:hover{transform:translateY(-2px)}
.scard img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--sunken)}
.scard .pl{display:flex;gap:8px;align-items:center;padding:8px 12px;font-weight:600}
.scard .pl b,.sfig figcaption b{font-family:var(--mono);color:var(--muted);font-size:.9em}
.scard .stamp{position:absolute;top:8px;right:8px;background:var(--surface);border-radius:50%;padding:4px;display:none;box-shadow:var(--shadow)}
.scard.solved{border-color:var(--leaf)} .scard.solved .stamp{display:block}
.scene .back{margin:0 0 8px -8px}
.sfig{margin:0 0 10px;border-radius:14px;overflow:hidden;border:1px solid var(--rule);background:var(--surface)}
.scene{max-width:760px;margin:0 auto}
.sfig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.sfig figcaption{display:flex;gap:8px;padding:8px 14px;font-weight:600}
.sit{font-size:1.1em}
.q{margin:14px 0 8px}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;min-height:56px;padding:12px 16px;border-radius:12px;border:1.5px solid var(--rule);background:var(--surface);cursor:pointer;font-size:1.02em}
.opt .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--faint);flex:none}
.opt.right{border-color:var(--leaf);background:var(--leaf-soft)} .opt.right .dot{background:var(--leaf);border-color:var(--leaf)}
.opt.wrong{border-color:var(--seal);background:var(--seal-soft)} .opt.wrong .dot{border-color:var(--seal)}
.fb{border-radius:12px;padding:12px 16px;margin-top:12px;font-weight:600}
.fb.good{background:var(--leaf-soft);color:var(--leaf)} .fb.bad{background:var(--seal-soft);color:var(--seal)}
.peek summary,.peekboard summary{cursor:pointer;font-weight:600;color:var(--sky);padding:4px 0}
.mini{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0 14px}
.mini figure{margin:0;font-size:.75em;color:var(--muted)} .mini img{border-radius:6px;aspect-ratio:3/2;object-fit:cover}

/* 2·3 주제, 별점 */
.sent h3,.mine h3,.rate h3,.opcard h3{font-size:1.3em}
.rate .why{background:var(--sunken);border-radius:10px;padding:10px 14px}
.crit{margin-top:14px;display:grid;gap:4px}
.cr{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--rule)}
.cq b{color:var(--sky);margin-right:2px}
.sb{display:flex;align-items:center;gap:2px}
.star{background:none;border:0;padding:0;cursor:pointer;width:46px;height:46px;display:inline-grid;place-items:center;border-radius:10px;transition:transform .12s}
.star svg{display:block}
.star:active{transform:scale(1.2)}
.sw{font-style:normal;font-size:.85em;color:var(--amber);width:5.5em;text-align:left;margin-left:4px}
.st.pass .good,.st .good{color:var(--leaf)} .st.refine{color:var(--seal)}

/* 4 투표 */
.ballot{display:grid;gap:10px}
.bal{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;text-align:left;padding:16px;border-radius:14px;border:1.5px solid var(--rule);background:var(--surface);cursor:pointer;font-size:1.1em;font-weight:600}
.bal .radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--faint)}
.bal.on{border-color:var(--seal);background:var(--seal-soft)} .bal.on .radio{border:7px solid var(--seal)}
.bal .bar,.vr .bar{grid-column:1/-1;display:flex;align-items:center;gap:8px}
.bar i{display:block;height:14px;border-radius:7px;background:var(--amber);transition:width .6s cubic-bezier(.22,1,.36,1);min-width:4px}
.bar em{font-style:normal;font-family:var(--mono);font-weight:600;white-space:nowrap}
.topicbig{text-align:center;padding:40px 24px;background:var(--amber-soft)}
.topicbig h2{font-size:2em;margin:14px 0}
.ribbon,.prib{display:inline-block;background:var(--seal);color:#fff;font-weight:700;border-radius:8px;padding:4px 16px}

/* 5 보드 */
.board{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bcol{background:var(--sunken);border-radius:16px;padding:14px}
.bcol h4{font-family:var(--cute);font-weight:400;font-size:1.25em;margin:0 0 10px}
.bcol.cause h4{color:var(--amber)} .bcol.effect h4{color:var(--sky)}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.pnote{position:relative;background:var(--note-y);border-radius:4px;padding:14px 14px 18px;min-height:90px;box-shadow:0 2px 6px -2px rgba(0,0,0,.18);transform:rotate(var(--r));font-family:"Gowun Dodum",var(--sans);font-size:1.02em;line-height:1.5;animation:drop .35s cubic-bezier(.22,1,.36,1)}
.effect .pnote{background:var(--note-b)}
.pnote.mine{outline:2px solid var(--seal);outline-offset:2px}
.pnote .me{position:absolute;right:8px;bottom:4px;font-size:.7em;color:var(--seal);font-weight:700}
.pnote.hid{opacity:.35}
.pnote:has(.hide){padding-bottom:34px}
.pnote .hide{position:absolute;bottom:6px;right:6px;font-size:.72em;border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:0 6px;cursor:pointer;opacity:.7}
@keyframes drop{from{opacity:0;transform:translateY(-10px) rotate(var(--r))}}
@media (max-width:700px){ .board{grid-template-columns:1fr} }

/* 6 의견, 모둠 */
.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.gbtn{min-height:56px;border-radius:12px;border:1.5px solid var(--rule);background:var(--paper);font-weight:700;font-size:1.05em;cursor:pointer}
.gbtn.on{background:var(--sky);border-color:var(--sky);color:#fff}
.seatinfo{margin-top:12px;font-size:1.05em}

/* 7 모둠 토의(학생) */
.timer{text-align:center;background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.timer.mine{border:3px solid var(--seal);background:var(--seal-soft)}
.tlab{font-weight:700;font-size:1.25em}
.tnum{font-family:var(--mono);font-weight:600;font-size:3.6em;line-height:1.1;letter-spacing:.02em}
.tb{height:8px;background:var(--sunken);border-radius:4px;overflow:hidden;margin:6px auto 0;max-width:520px}
.tb i{display:block;height:100%;background:var(--seal);width:0;transition:width .25s linear}
.myturn{background:var(--seal);color:#fff;font-weight:700;font-size:1.25em;border-radius:14px;padding:14px 18px;margin-bottom:12px;text-align:center}
.mate{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
.mate.me{border-color:var(--seal)}
.mate h3{font-size:1.35em}
.mates{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tips{background:var(--amber-soft);border-radius:12px;padding:12px 16px;margin-bottom:12px}
.tips p{margin:.25em 0}
.order{display:flex;gap:10px;justify-content:center;list-style:none;padding:0;flex-wrap:wrap}
.order li{border:1.5px solid var(--rule);border-radius:999px;padding:4px 14px;font-weight:600}
.order li.me{background:var(--seal);border-color:var(--seal);color:#fff}

/* 8 모둠 결정 */
.dk{margin:10px 0}
.dk b{display:block;font-size:.85em;color:var(--muted)}
.dk p{font-size:1.1em;font-weight:600;margin:.1em 0}
.deccard{border-top:6px solid var(--seal)}
.live{border-style:dashed}

/* 알림 */
#toasts{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;display:grid;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:var(--paper);border-radius:12px;padding:10px 18px;font-weight:600;box-shadow:var(--shadow);transition:opacity .4s}
.toast.bad{background:var(--seal);color:#fff} .toast.out{opacity:0}

/* ================= 선생님 화면 ================= */
.top.t .codechip{border:1.5px solid var(--rule);background:var(--paper);border-radius:10px;padding:4px 12px;cursor:pointer;font-weight:600}
.top.t .codechip b{font-family:var(--mono);letter-spacing:.12em}
.top.t .cnt{color:var(--muted);white-space:nowrap} .top.t .cnt b{color:var(--ink);font-family:var(--mono)}
.menuwrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);display:grid;min-width:200px;padding:6px;z-index:30}
.menu button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;font-weight:600}
.menu button:hover{background:var(--sunken)}
.tsteps{display:flex;gap:8px;padding:10px 18px;overflow-x:auto;border-bottom:1px solid var(--rule);background:var(--paper)}
.tg{display:flex;flex-direction:column;gap:4px;border-radius:10px;padding:4px 8px 6px;flex:none}
.tg.now{background:var(--seal-soft)}
.tg .gn{font-size:.72em;font-weight:700;color:var(--muted)}
.tg.z{order:-1;justify-content:flex-end}
.pbs{display:flex;gap:4px}
.pb{border:1.5px solid var(--rule);background:var(--surface);border-radius:8px;padding:4px 10px;font-size:.85em;cursor:pointer;white-space:nowrap}
.pb.past{color:var(--leaf);border-color:var(--leaf-soft)} .pb.now{background:var(--seal);border-color:var(--seal);color:#fff;font-weight:700}
.tfoot{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--surface);border-top:1px solid var(--rule)}
.tfoot .todo{flex:1;margin:0;font-size:.95em}
.split{display:grid;grid-template-columns:minmax(300px,1fr) 2fr;gap:16px;align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.qrcard .lab,.qrbig .lab{color:var(--muted);margin:0}
.qrcard .code,.qrbig .code{font-family:var(--mono);font-weight:600;font-size:3.2em;letter-spacing:.14em;margin:0;line-height:1.2}
.qrcard .qr{width:260px;margin:10px auto} .qrcard .qr svg{width:100%;height:auto}
.url{font-family:var(--mono);color:var(--muted);font-size:.9em;word-break:break-all}
.tgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:10px 0}
.tn{position:relative;display:grid;place-items:center;min-height:46px;border-radius:10px;border:1.5px dashed var(--rule);font-family:var(--mono);font-weight:600;color:var(--faint)}
.tn.in{border:2px solid var(--leaf);color:var(--ink);background:var(--surface)} .tn.off{opacity:.5}
.tn.in.poll{border-style:dashed}
.tn.done{background:var(--leaf);color:#fff;border-color:var(--leaf)}
.tn i{position:absolute;right:3px;top:0;font-style:normal;font-size:.62em}
.bigcount{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bigcount b{font-family:var(--mono);font-size:3.2em;line-height:1}
.bigcount span{font-family:var(--mono);color:var(--muted);font-size:1.2em}
.bigcount em{font-style:normal;font-weight:700;width:100%}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.pi{background:var(--sunken);border-radius:12px;padding:12px 14px} .pi p{color:var(--muted);font-size:.92em}
.ptable{display:grid;gap:10px;margin-top:14px}
.pr{display:grid;grid-template-columns:1.4fr 1fr;gap:6px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px 16px}
.pr.pass{border-color:var(--leaf);box-shadow:inset 4px 0 0 var(--leaf)} .pr.refine{box-shadow:inset 4px 0 0 var(--seal)} .pr.merged{opacity:.55}
.pr .pt b{font-size:1.1em} .pr .pt p{color:var(--muted);font-size:.92em}
.pa{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;align-content:start}
.av{display:flex;align-items:center;gap:4px;font-size:.9em} .av b{color:var(--sky)} .av em{font-style:normal;font-family:var(--mono);font-size:.85em;color:var(--muted)}
.av.low em{color:var(--seal);font-weight:700}
.nr{font-family:var(--mono);color:var(--muted);font-size:.85em}
.pc{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mg{display:inline-flex;gap:4px;align-items:center} .mg select{min-height:36px;border:1.5px solid var(--rule);border-radius:9px;background:var(--paper);max-width:220px}
.chip{display:inline-block;font-size:.75em;font-weight:700;border-radius:999px;padding:1px 10px;margin-right:8px;vertical-align:2px;background:var(--sunken);color:var(--muted)}
.chip.pass{background:var(--leaf-soft);color:var(--leaf)} .chip.refine{background:var(--seal-soft);color:var(--seal)} .chip.wait{background:var(--amber-soft);color:var(--amber)}
.vr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--rule)}
.vr .pk{grid-column:2;grid-row:1}
.vr .bt{font-weight:700;font-size:1.15em}
.cands{display:grid;gap:6px;margin:8px 0}
.ci{display:flex;gap:10px;align-items:center;min-height:40px;cursor:pointer} .ci input{width:20px;height:20px}
.own{flex:1;display:flex;gap:8px;align-items:center;min-width:280px} .own input{flex:1;padding:8px 12px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
.gcard{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:12px 14px}
.gcard h4{display:flex;align-items:center;gap:8px} .gcard h4 .btn{margin-left:auto}
.gcard ol{margin:0;padding-left:1.4em} .gcard li{padding:3px 0} .gcard li span{font-family:var(--mono);font-weight:600}
.gcard li em{font-style:normal;font-size:.8em;color:var(--seal);margin-left:6px} .gcard li select{margin-left:8px;border:1px solid var(--rule);border-radius:6px;background:var(--paper)}
.gcard li.ok span{color:var(--leaf)} .gcard.none{border-style:dashed}
.talkstart .flow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0}
.talkstart .flow span{background:var(--sunken);border-radius:8px;padding:2px 10px;font-size:.88em} .talkstart .flow span.w{background:var(--amber-soft)}
.bigtimer{text-align:center;background:var(--surface);border:1px solid var(--rule);border-radius:24px;padding:24px 20px;box-shadow:var(--shadow)}
.bigtimer .tlab{font-size:2.2em;font-family:var(--serif)}
.bigtimer .tlab .pz{display:inline-block;margin-left:14px;font-size:.5em;background:var(--amber-soft);color:var(--amber);border-radius:8px;padding:2px 12px;vertical-align:middle}
.bigtimer .tnum{font-size:min(22vw,11rem)}
.bigtimer.ask .tlab{color:var(--sky)} .bigtimer.wrap .tlab{color:var(--leaf)}
.bigtimer .tb{height:14px;max-width:900px} .bigtimer.ask .tb i{background:var(--sky)} .bigtimer.wrap .tb i{background:var(--leaf)}
.strip{display:flex;gap:4px;justify-content:center;margin:18px 0 6px;flex-wrap:wrap}
.strip span{min-width:34px;height:30px;display:grid;place-items:center;border-radius:7px;background:var(--sunken);font-family:var(--mono);font-size:.8em;color:var(--faint)}
.strip span.ask{min-width:22px} .strip span.wrap{padding:0 10px}
.strip span.past{background:var(--leaf-soft);color:var(--leaf)} .strip span.now{background:var(--seal);color:#fff;font-weight:700}
.bigtimer .hint{font-size:1.2em;color:var(--muted)}
.tctl{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap} .tctl .btn{min-height:56px;font-size:1.1em;padding:0 24px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:14px}
.dcard h4{display:flex;align-items:center;justify-content:space-between} .dcard.done{border-top:5px solid var(--leaf)}
.overlay{position:fixed;inset:0;background:rgba(20,18,16,.55);z-index:50;display:grid;place-items:center;padding:20px}
.ov{background:var(--surface);border-radius:20px;padding:28px;max-width:min(980px,100%);max-height:92vh;overflow:auto;box-shadow:var(--shadow);display:grid;gap:14px}
.ovx{justify-self:end}
.qrbig{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center}
.qrbig .qr{width:min(56vh,480px)} .qrbig .qr svg{width:100%;height:auto;display:block}
.qrbig .code{font-size:5em}
.sets{display:grid;grid-template-columns:1fr 1fr;gap:12px} .sets label{display:grid;gap:4px;font-weight:600}
/* 교실 화면 — 글자를 키우고 관리 단추는 숨긴다 */
body.big{font-size:1.45rem}
body.big .admin{display:none !important}
body.big .main.wide{max-width:1600px}
body.big .pnote{font-size:1.1em}
body.big .tsteps .pb{font-size:.7em}

/* ================= 인쇄물 ================= */
#printroot{display:none}
body.printing #printroot{display:block;position:fixed;left:-20000px;top:0;visibility:visible}
@media print{
  body{background:#fff}
  body > *:not(#printroot){display:none !important}
  body #printroot,body.printing #printroot{display:block;position:static;left:auto}
}
#printroot{color:#2B2523;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-family:"Gowun Dodum","Malgun Gothic",sans-serif;line-height:1.5}
#printroot .ps{position:relative;background:#FFFDF7;break-after:page;page-break-after:always;overflow:hidden}
#printroot .ps:last-child{break-after:auto;page-break-after:auto}
#printroot h1,#printroot h2,#printroot h3{font-family:"Jua","Gowun Dodum",sans-serif;font-weight:400;margin:0}
#printroot .prib{font-family:"Jua",sans-serif;font-weight:400;background:#D8634A;color:#fff;border-radius:6px;padding:1mm 4mm;font-size:12pt;display:inline-block}
#printroot .prib.big{font-size:18pt;padding:1.5mm 6mm}
#printroot .pdate{position:absolute;right:6mm;top:6mm;font-size:9pt;color:#8A7E72}
#printroot .tape{position:absolute;width:32mm;height:9mm;top:-1mm;left:12mm;transform:rotate(-4deg)}
#printroot .tape.t2{left:auto;right:16mm;transform:rotate(5deg)}
#printroot .pstar{width:5mm;height:5mm;vertical-align:-0.6mm}
#printroot .phead{position:relative;padding:7mm 6mm 3mm}
#printroot .phead h1{font-size:20pt;margin-top:2mm;color:#2B2523}
/* A. 보드 */
#printroot .pboard{width:277mm;padding:0 0 4mm}
#printroot .pbh{font-size:14pt;margin:4mm 6mm 2.5mm;display:flex;align-items:center;gap:2mm}
#printroot .pbh.cause{color:#9A6A12} #printroot .pbh.effect{color:#2F6390}
#printroot .pnotes{display:flex;flex-wrap:wrap;gap:3mm;padding:0 6mm}
#printroot .pn{width:calc((100% - 12mm) / 5);min-height:20mm;background:#FFF2BF;border:0.3mm solid #E6D28A;border-radius:1mm;padding:2.5mm 3mm;font-size:10.5pt;line-height:1.45;transform:rotate(var(--r));break-inside:avoid;page-break-inside:avoid}
#printroot .pn.effect{background:#DDEBF6;border-color:#A9C5DE}
#printroot .pempty{color:#9A8F84;padding:0 6mm}
/* B. 의견판 */
#printroot .tent{width:276mm;height:189mm;display:grid;grid-template-rows:1fr 0 1fr;background:#FFFDF7}
#printroot .half{position:relative;padding:8mm 12mm;overflow:hidden}
#printroot .half.back{transform:rotate(180deg)}
#printroot .bin{height:100%;display:grid;grid-template-rows:auto 1fr 0.8fr auto auto;gap:2mm}
#printroot .bh{display:flex;justify-content:space-between;gap:6mm;font-size:9pt;color:#8A7E72}
#printroot .bh .side{font-family:"Jua",sans-serif;color:#2F6390;font-size:11pt}
#printroot .kv{display:grid;grid-template-columns:24mm 1fr;gap:3mm;align-items:start;min-height:0}
#printroot .kv b{font-family:"Jua",sans-serif;font-weight:400;font-size:11pt;color:#9A6A12}
#printroot .kv p{margin:0;font-size:13pt;line-height:1.45;height:100%;overflow:hidden}
#printroot .kv .blank{display:block;border-bottom:0.3mm dashed #C9BBA8;height:7mm}
#printroot .memo{display:grid;grid-template-columns:24mm 1fr;gap:1mm 3mm}
#printroot .memo b{grid-row:span 3;font-family:"Jua",sans-serif;font-weight:400;font-size:11pt;color:#9A6A12}
#printroot .memo i{display:block;border-bottom:0.3mm solid #D9CDBE;height:6mm}
#printroot .nm{display:flex;gap:4mm;align-items:baseline;font-size:10pt;color:#6F655B}
#printroot .nm .nl{display:inline-block;min-width:40mm;border-bottom:0.3mm solid #B9AC9C;font-size:12pt;color:#2B2523;padding:0 2mm}
#printroot .nm .nn{margin-left:auto}
#printroot .fold{position:relative;border-top:0.4mm dashed #B9AC9C}
#printroot .fold span{position:absolute;left:50%;top:-2.6mm;transform:translateX(-50%);background:#FFFDF7;padding:0 3mm;font-size:8pt;color:#9A8F84;white-space:nowrap}
#printroot .front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4mm;text-align:center;padding:10mm 18mm 8mm}
#printroot .front .prib{font-size:14pt}
#printroot .front .big{font-family:"Jua",sans-serif;font-size:34pt;line-height:1.3;margin:0;width:100%;max-height:52mm;overflow:hidden;display:flex;align-items:center;justify-content:center}
#printroot .front .where{font-size:11pt;color:#6F655B}
#printroot .front .pencil{position:absolute;right:14mm;bottom:6mm;width:34mm;height:7mm}
#printroot .front .pstar{position:absolute;left:14mm;bottom:8mm;width:8mm;height:8mm}
/* C. 결정 카드 */
#printroot .dcardp{width:190mm;height:276mm;display:grid;grid-template-rows:auto 1fr 1.15fr 1.15fr auto;gap:4mm;padding:0 0 6mm}
#printroot .dcardp .phead{text-align:center;padding-top:9mm}
#printroot .ptopic{font-size:12pt;margin:3mm 8mm 0;color:#4A4038}
#printroot .box{margin:0 10mm;border:0.5mm solid #E3D6C3;border-radius:4mm;padding:4mm 6mm;display:grid;grid-template-rows:auto 1fr;min-height:0;background:#fff}
#printroot .box h3{font-size:14pt;display:flex;align-items:center;gap:2mm;color:#9A6A12;margin-bottom:2mm}
#printroot .box.b2 h3{color:#2F6390} #printroot .box.b3 h3{color:#4F7A4A}
#printroot .box p{margin:0;font-size:18pt;line-height:1.5;overflow:hidden}
#printroot .box.b1 p{font-family:"Jua",sans-serif;font-size:24pt}
#printroot .pfoot{position:relative;margin:0 10mm;display:grid;gap:3mm;font-size:10pt}
#printroot .pfoot b{font-family:"Jua",sans-serif;font-weight:400;font-size:11pt;margin-right:3mm}
#printroot .mem .c{display:inline-grid;place-items:center;width:8mm;height:8mm;border-radius:50%;border:0.4mm solid #B9AC9C;margin-right:2mm;font-size:10pt}
#printroot .done{display:flex;align-items:center;gap:2mm}
#printroot .done .s{display:inline-flex;flex-direction:column;align-items:center;font-size:8pt;color:#8A7E72;margin-right:2mm}
#printroot .done .s i{display:block;width:12mm;height:12mm;border-radius:50%;border:0.4mm dashed #C2452D;margin-bottom:1mm}
#printroot .leaf{position:absolute;right:0;bottom:0;width:18mm;height:12mm}
/* 학급 한눈에 보기 */
#printroot .psum{width:190mm;height:276mm;display:grid;grid-template-rows:auto 1fr;padding-bottom:6mm}
#printroot .sgrid{display:grid;grid-template-columns:1fr 1fr;gap:4mm;margin:2mm 8mm 0;min-height:0;grid-auto-rows:1fr}
#printroot .sc{border:0.4mm solid #E3D6C3;border-radius:3mm;padding:3mm 4mm;display:grid;grid-template-rows:auto 1.1fr 1fr;gap:1.5mm;min-height:0;background:#fff}
#printroot .sc h3{font-size:13pt;color:#D8634A}
#printroot .sk{display:grid;grid-template-rows:auto 1fr;min-height:0}
#printroot .sk b{font-size:8.5pt;color:#8A7E72;font-weight:400}
#printroot .sk p{margin:0;font-size:12pt;line-height:1.4;overflow:hidden}

@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }

/* ================= 첫 화면(랜딩) ================= */
body.landingpage{background:radial-gradient(1100px 620px at 78% -12%,#FFF1D9 0%,rgba(255,241,217,0) 62%),radial-gradient(900px 520px at -8% 108%,#E6F0E2 0%,rgba(230,240,226,0) 60%),var(--paper)}
.landing{position:relative;max-width:1280px;margin:0 auto;padding:20px 24px 40px;overflow:hidden}
.lbg{position:absolute;inset:0;pointer-events:none;z-index:0}
.lbg .fl{position:absolute;display:block;opacity:.55;animation:drift 16s ease-in-out infinite alternate}
.lbg .n1,.lbg .n2,.lbg .n3{width:54px;height:46px;border-radius:3px;background:#FFF0B8 linear-gradient(#0000 0 18px,#C9B47044 18px 21px,#0000 21px 28px,#C9B47044 28px 31px,#0000 31px) ;box-shadow:0 3px 8px -3px rgba(0,0,0,.18)}
.lbg .n1::before,.lbg .n2::before,.lbg .n3::before{content:"";position:absolute;left:15px;top:-6px;width:24px;height:10px;background:#E9D9B866;transform:rotate(-4deg)}

.lbg .s1,.lbg .s2,.lbg .s3{width:26px;height:26px;background:#F2C95E;clip-path:polygon(50% 0,61% 34%,98% 35%,68% 57%,79% 92%,50% 71%,21% 92%,32% 57%,2% 35%,39% 34%)}
.lbg .n1{left:-14px;bottom:30%}.lbg .n2{right:-16px;top:40%;animation-duration:19s;background-color:#DCEAF6}.lbg .n3{right:9%;bottom:-10px;animation-duration:22s;background-color:#F7E6E1}
.lbg .s1{left:37%;top:3%}.lbg .s2{right:1%;bottom:22%;animation-duration:13s}.lbg .s3{left:1%;bottom:6%;animation-duration:18s}
@keyframes drift{0%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(14px,-18px) rotate(4deg)}100%{transform:translate(-10px,10px) rotate(-2deg)}}
.landing>*:not(.lbg){position:relative;z-index:1}
.lhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lunit{font-family:var(--mono);font-size:.85em;color:var(--muted);background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:3px 12px}
.landing .resume{margin:16px 0 0}
.lhero{display:grid;grid-template-columns:minmax(330px,420px) 1fr;gap:40px;align-items:center;margin-top:26px}
.ltitle{font-family:var(--serif);font-weight:700;font-size:clamp(46px,6.2vw,80px);line-height:1.04;letter-spacing:-.025em;margin:0 0 14px;white-space:nowrap}
.ltitle span{display:inline-block;animation:rise .75s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 75ms)}
.ltitle span:nth-child(6),.ltitle span:nth-child(7){color:var(--seal)}
@keyframes rise{from{opacity:0;transform:translateY(28px) rotate(5deg) scale(.9)}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}}
.ltag{font-size:1.15em;line-height:1.65;color:#4A4038;margin:0 0 22px;animation:fadeup .8s .45s both}
.ltag b{color:var(--seal)}
.lcta{display:grid;gap:14px}
.lcard{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:20px;padding:18px 18px 10px 88px;box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;animation:fadeup .7s both}
.lcard.kid{animation-delay:.62s}.lcard.tea{animation-delay:.76s}
.lcard:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(35,32,34,.06),0 18px 36px -16px rgba(35,32,34,.3)}
.lcard h2{font-size:1.35em;margin:0 0 2px}.lcard p{margin:0 0 12px;color:var(--muted)}.lcard p b{color:var(--ink)}
.lcard .btn.wide{margin-bottom:6px}
.lic{position:absolute;left:16px;top:18px;width:56px;height:56px;border-radius:16px;display:grid;place-items:center}
.kid .lic{background:var(--sky-soft)}.tea .lic{background:var(--seal-soft)}
.lic svg{width:40px;height:40px}
.landing .codeform input{font-size:1.35em;flex:1;min-width:0;letter-spacing:.12em}
.landing .codeform .btn{white-space:nowrap;flex:none}
.lstage{animation:fadeup .9s .25s both;min-width:0}
.stagebox{background:linear-gradient(180deg,#FFFDF7,#FAF3E6);border:1px solid #EAE1D2;border-radius:30px;box-shadow:0 1px 2px rgba(35,32,34,.05),0 30px 60px -30px rgba(80,55,30,.35);overflow:hidden}
.stagebox svg{display:block;width:100%;height:auto}
.lstage{perspective:1400px}.stagebox{transition:transform .5s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d;will-change:transform}
.lsteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0;margin:14px 0 0}
.lsteps li{position:relative;border-radius:12px;overflow:hidden;color:#8A8077}
.lsteps button{width:100%;min-height:46px;border:0;background:transparent;padding:8px 6px 11px;font:inherit;font-weight:700;color:inherit;cursor:pointer;display:flex;gap:7px;align-items:center;justify-content:center;font-size:.92em;white-space:nowrap}
.lsteps button b{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--surface);border:1.5px solid currentColor;font-family:var(--mono);font-size:.82em}
.lsteps i{position:absolute;left:10%;right:10%;bottom:3px;height:3px;border-radius:2px;background:var(--seal);transform-origin:left;transform:scaleX(0)}
.lcap{position:relative;min-height:3.2em;margin-top:6px}
.lcap p{position:absolute;inset:0;margin:0;text-align:center;color:#4A4038;font-size:1.02em;opacity:0}
.lprints{margin-top:34px;animation:fadeup .8s .9s both}
.lprints h3{font-size:1.15em;margin:0 0 12px;text-align:center;color:#4A4038}
.lpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:880px;margin:0 auto}
.lpgrid figure{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);transition:transform .25s}
.lpgrid figure:hover{transform:translateY(-3px) rotate(-.6deg)}
.lpgrid svg{width:84px;height:auto;flex:none}
.lpgrid figcaption b{display:block;font-family:var(--cute);font-weight:400;font-size:1.1em}.lpgrid figcaption span{color:var(--muted);font-size:.88em}
.lfoot{text-align:center;color:var(--muted);font-size:.88em;margin:26px 0 0}
@media (max-width:1050px){ .lhero{grid-template-columns:1fr;gap:26px} .lcta{grid-template-columns:1fr 1fr} .lcopy{text-align:left} }
@media (max-width:700px){ .landing{padding:16px 16px 32px} .lcta{grid-template-columns:1fr} .lsteps{grid-template-columns:1fr 1fr} .lpgrid{grid-template-columns:1fr} .ltitle{white-space:normal} .lcard{padding-left:80px} }
@media (prefers-color-scheme:dark){ body.landingpage{background:var(--paper)} .ltag,.lcap p,.lprints h3{color:var(--muted)} }

/* 선생님 「그림 함께 풀기」 */
.tgal{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tgal .scard{font:inherit}
.pct{position:absolute;top:8px;right:8px;background:var(--leaf);color:#fff;font-family:var(--mono);font-weight:600;font-size:.8em;border-radius:999px;padding:1px 8px}
.pct.low{background:var(--seal)}
.sceneov .ov{width:min(1000px,100%)}
.tscene .sfig img{max-height:42vh;object-fit:contain;background:#FBF6EC}
.tscene .opt{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:1.1em}
.tscene .opt .ob{grid-column:2;display:none;align-items:center;gap:8px}
.tscene .opt.withbar .ob{display:flex}
.tscene .opt .ob i{display:block;height:12px;border-radius:6px;background:var(--amber);min-width:3px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.tscene .opt .ob em{font-style:normal;font-family:var(--mono);font-size:.85em;color:var(--muted)}
.tscene .row{margin-top:16px}
body.big .tscene .opt{font-size:1.3em}