:root{--paper:#f7f5ee;--ink:#233d36;--muted:#66736d;--line:#dedfd4;--green:#2c4b43;--white:#fffefa;--yellow:#f3df92;--shadow:0 5px 0 #263e3510; color-scheme:light; font-family:Pretendard, 'Noto Sans KR','Malgun Gothic',sans-serif;font-size:16px;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #2e6dca;outline-offset:4px}button{touch-action:manipulation}a{color:inherit}h1,h2,h3,p{margin:0}button{border:0}svg{display:block}header{max-width:1180px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:25px 30px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-weight:850;font-size:21px;background:none;padding:0}.brand-mark{display:grid;place-items:center;width:36px;height:38px;border-radius:9px;background:var(--green);color:var(--paper)}.quiet{font-size:13px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:7px}.header-right{display:flex;gap:22px;align-items:center}.text-button{background:none;font-weight:650;padding:10px 0;font-size:14px;text-decoration:underline;text-underline-offset:5px}.wrap{max-width:1120px;margin:auto;padding:0 30px}.intro{display:flex;justify-content:space-between;align-items:end;padding:38px 0 27px;gap:30px}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}.intro h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.05em;line-height:1.22;font-weight:850}.intro h1 span{position:relative;z-index:0;white-space:nowrap}.intro h1 span:after{content:'';position:absolute;bottom:3px;left:0;right:0;height:13px;background:var(--yellow);z-index:-1;transform:rotate(-1deg)}.intro p{margin-top:13px;color:var(--muted);font-size:16px;line-height:1.65}.time-label{font-size:14px;font-weight:700;display:block;margin-bottom:10px}.segmented{display:inline-flex;padding:5px;border:1px solid var(--line);border-radius:12px;background:#eeeee6;gap:3px;white-space:nowrap}.segmented button{padding:10px 17px;border-radius:8px;background:transparent;font-size:15px;font-weight:700}.segmented .active{background:var(--white);box-shadow:0 2px 4px #233d3615}.shelf-heading{display:flex;justify-content:space-between;align-items:center;margin:8px 0 16px;gap:12px}.shelf-heading h2{font-size:19px;letter-spacing:-.03em}.shelf-heading h2 small{margin-left:9px;font-size:13px;font-weight:500;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:var(--white);border:1px solid var(--line);border-radius:15px;overflow:hidden;text-align:left;padding:0;box-shadow:var(--shadow);position:relative;transition:transform .15s,box-shadow .15s}.card:hover{transform:translateY(-4px);box-shadow:0 9px 18px #263e3510}.card-top{height:135px;position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #233d3610}.card-num{position:absolute;left:18px;top:14px;font-size:12px;letter-spacing:.08em;font-weight:800;opacity:.65}.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;padding:5px 9px;border:1px solid #233d3620;background:#ffffff55;border-radius:6px}.card-top .tag{position:absolute;right:14px;top:12px}.card-content{padding:20px 21px 17px}.card h3{font-size:23px;font-weight:800;letter-spacing:-.04em;margin-bottom:7px}.card p{font-size:15px;line-height:1.6;color:var(--muted)}.card-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eaebe2;margin-top:18px;padding-top:12px;font-size:13px;font-weight:600;color:var(--muted)}.handle{height:7px;width:35px;border:1px solid #a2aa9c;border-radius:6px;background:#f3f3eb;display:block}.mustard{--accent:#856525;--tint:#f5e8b8}.orange{--accent:#a14e23;--tint:#f8dfc4}.blue{--accent:#3c6386;--tint:#dce8f5}.pink{--accent:#954f59;--tint:#f2dfe0}.green{--accent:#366258;--tint:#d7e9dd}.lavender{--accent:#6b5589;--tint:#e5ddf0}.card-top{background:var(--tint)}.card-art{width:164px;height:91px;color:var(--accent)}.bottom-note{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:22px 0;margin-top:34px;font-size:13px;color:var(--muted);line-height:1.8}.bottom-note b{font-weight:650;color:var(--ink)}.pill{font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:5px;padding:3px 7px}.primary{border:1px solid var(--green);background:var(--green);color:#fffefa;border-radius:11px;padding:14px 24px;font-weight:750;min-height:49px}.secondary{border:1px solid var(--line);background:var(--white);border-radius:11px;padding:13px 20px;font-weight:700;min-height:49px}.home-more{margin-top:24px}.hidden{display:none!important}.activity-head{display:flex;align-items:center;justify-content:space-between;padding:21px 0 17px;gap:15px}.activity-title{display:flex;gap:12px;align-items:center}.activity-title h1{font-size:23px;letter-spacing:-.04em}.small{font-size:13px;color:var(--muted)}.activity-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}.puzzle-panel{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:27px}.step-label{color:var(--accent);font-size:13px;letter-spacing:.04em;font-weight:800;margin-bottom:10px}.task-title{font-size:24px;letter-spacing:-.04em;line-height:1.4;word-break:keep-all}.task-desc{font-size:17px;line-height:1.7;margin-top:9px;color:#52635a;word-break:keep-all}.task-area{margin:26px 0 14px}.aside-box{border:1px solid var(--line);border-radius:14px;background:#eeeee4;padding:21px;margin-bottom:15px}.aside-box h2{font-size:16px;margin-bottom:12px}.aside-box p{font-size:14px;line-height:1.75;color:#56675d}.conditions{list-style:none;padding:0;margin:0;display:grid;gap:12px}.conditions li{font-size:16px;line-height:1.65;display:flex;gap:9px}.condition-num{display:grid;place-items:center;flex-shrink:0;width:22px;height:22px;background:var(--white);border-radius:50%;font-size:12px;font-weight:800;margin-top:3px}.actionbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:22px;margin-top:15px;border-top:1px solid var(--line)}.feedback{margin-top:18px;background:#fff3cb;color:#66501d;padding:13px 16px;border-radius:10px;font-size:16px;line-height:1.6}.feedback.good{background:#e3eee2;color:#2c5740}.hint-body{font-size:16px;line-height:1.75;padding:16px;background:#fff9dc;border:1px solid #e9dba0;border-radius:10px;margin-top:14px}.safeslots{display:flex;justify-content:center;gap:14px}.slot{width:91px;height:107px;border:2px dashed #b8baa7;border-radius:14px;background:#f9f7ec;font-size:50px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot.filled{border-style:solid;border-color:#9d8039;background:#f4e9bf}.slot small{font-size:12px;font-weight:600;line-height:1.4;color:#798275}.number-cards{display:flex;justify-content:center;gap:14px;margin:25px 0}.number-card{font-size:33px;font-weight:800;width:68px;height:79px;border:1.5px solid #b39c63;border-radius:11px;background:#fcf2d3;box-shadow:0 4px 0 #d7ccae}.choices{display:grid;gap:10px;margin-top:20px}.choice{border:1px solid #cfd5ca;background:#fbfcf6;text-align:left;padding:15px 18px;border-radius:10px;font-weight:650;line-height:1.6;font-size:17px}.choice.selected{border:2px solid var(--green);background:#e7eee5;padding:14px 17px}.center{text-align:center}.grid-board{display:grid;gap:6px;padding:10px;border:2px solid #829589;border-radius:14px;background:#e9eee7;max-width:380px;margin:auto}.lunch-grid{grid-template-columns:repeat(5,1fr)}.lunch-cell{aspect-ratio:1;border-radius:8px;border:1px solid #b3bbab;background:#fffef8;display:grid;place-items:center;font-size:27px;font-weight:700}.lunch-cell.selected{background:#e1be72;border-color:#99713a;color:#543c18}.grid-caption{font-size:14px;line-height:1.6;color:var(--muted);text-align:center;margin-top:12px}.math-large{font-size:34px;font-weight:800;display:flex;justify-content:center;gap:18px;align-items:center}.fraction{display:inline-flex;flex-direction:column;line-height:1.05;text-align:center;vertical-align:middle;font-variant-numeric:tabular-nums}.fraction span:first-child{border-bottom:2px solid currentColor;padding:0 6px 4px}.fraction span:last-child{padding-top:4px}.notice-paper{padding:22px;border:1px solid #cbd7dd;background:#f0f5f8;border-radius:12px;line-height:1.7}.notice-paper h3{text-align:center;margin-bottom:17px;font-size:21px}.notice-line{width:100%;text-align:left;background:#fff9;border:1px solid #d4dfe4;border-radius:8px;padding:12px;font-size:16px;margin-top:8px}.notice-line.selected{background:#d1e4fa;border:2px solid #416a93;padding:11px}.evidence-note{font-size:13px;color:#617a8d;margin-top:13px}.done-panel{max-width:650px;text-align:center;padding:50px 40px;margin:48px auto;background:var(--white);border:1px solid var(--line);border-radius:20px}.done-icon{width:76px;height:76px;border-radius:50%;background:#e4eddc;border:1px solid #b6c8a7;display:grid;place-items:center;font-size:35px;margin:0 auto 20px}.done-panel h1{font-size:31px;letter-spacing:-.04em;margin-bottom:14px}.done-panel p{line-height:1.8;font-size:17px;word-break:keep-all}.reflection{margin:24px 0;padding:20px;background:#f0f2e9;border-radius:12px;text-align:left}.reflection .eyebrow{margin-bottom:8px}.done-panel .primary{margin-top:8px;min-width:160px}.rest{max-width:530px;text-align:center;margin:95px auto}.rest h1{font-size:30px;margin-bottom:18px}.rest p{line-height:1.9;color:var(--muted)}.rest .text-button{margin-top:35px}.modal-shade{position:fixed;inset:0;background:#173c2a66;display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}.modal{max-width:520px;width:100%;max-height:85dvh;overflow:auto;padding:29px;background:var(--white);border-radius:18px;box-shadow:0 25px 80px #14282040}.modal h2{font-size:23px;margin-bottom:15px}.modal p{line-height:1.8;margin:12px 0;font-size:16px}.modal .modal-actions{display:flex;gap:10px;margin-top:24px;justify-content:flex-end}.modal ul{padding-left:20px;line-height:1.9;font-size:16px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--green);color:white;border-radius:10px;padding:12px 20px;z-index:150;pointer-events:none;opacity:0;transition:opacity .15s}#toast.show{opacity:1}.shelf-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.shelf-tabs button{border:1px solid var(--line);background:#fffefa;border-radius:99px;padding:8px 15px;font-size:14px;font-weight:650}.shelf-tabs .active{background:var(--green);color:white;border-color:var(--green)}
@media(max-width:800px){.activity-layout{grid-template-columns:1fr}.side{display:flex;flex-wrap:wrap;gap:10px}.aside-box{flex:1;min-width:220px;margin:0}.intro{align-items:start;flex-direction:column;gap:22px}.time-block{display:flex;align-items:center;gap:16px}.time-label{margin:0}.card-content{padding:17px}.cards{gap:13px}.card h3{font-size:20px}.card p{font-size:14px}.card-top{height:115px}.card-art{width:139px;height:78px}}
@media(max-width:600px){header{padding:17px 19px}.wrap{padding:0 18px}.brand{font-size:19px}.brand-mark{width:32px;height:34px}.header-right{gap:12px}.quiet{display:none}.intro{padding:27px 0 23px}.intro h1{font-size:32px}.intro p{font-size:14px}.cards{grid-template-columns:1fr}.card{display:grid;grid-template-columns:114px 1fr;min-height:151px}.card-top{height:100%;border-bottom:0;border-right:1px solid #233d3610;min-height:150px}.card-num{left:10px;top:10px}.card-top .tag{left:10px;right:auto;bottom:10px;top:auto;font-size:10px;padding:3px 6px}.card-art{width:102px;height:78px}.card-content{padding:16px}.card h3{font-size:21px;margin-bottom:6px}.card p{font-size:14px;line-height:1.5}.card-meta{margin-top:11px;padding-top:9px;font-size:12px}.bottom-note{align-items:start;margin-top:25px;padding-top:18px}.bottom-note>span:last-child{display:none}.shelf-heading h2 small{display:none}.activity-head{padding:16px 0}.activity-title h1{font-size:20px}.puzzle-panel{padding:20px 17px;border-radius:15px}.task-title{font-size:22px}.task-desc{font-size:16px}.task-area{margin-top:20px}.actionbar{position:sticky;bottom:0;background:var(--white);padding:14px 0 max(14px,env(safe-area-inset-bottom));z-index:5}.actionbar .primary{padding:12px 19px}.aside-box{padding:17px;min-width:100%}.side{margin-bottom:20px}.done-panel{padding:30px 22px;margin:25px auto}.done-panel h1{font-size:27px}.conditions li{font-size:15px}.modal{padding:23px}.segmented button{padding:9px 14px}.grid-board{max-width:340px}.shelf-tabs{margin:14px 0}.notice-paper{padding:17px}.notice-line{font-size:15px}.small{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@font-face{font-family:Pretendard;src:url('assets/Pretendard-Regular.woff2') format('woff2');font-weight:100 600;font-display:swap}@font-face{font-family:Pretendard;src:url('assets/Pretendard-Bold.woff2') format('woff2');font-weight:650 900;font-display:swap}
.resume-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#e8eee1;border:1px solid #d5dfcb;border-radius:10px;padding:11px 16px;margin-bottom:22px;font-size:14px}.fraction-groups{display:flex;justify-content:center;gap:10px;padding:8px 0 32px}.fraction-group{display:flex;flex-direction:column;gap:4px;position:relative;border:2px solid #cbcbb9;background:#f8f7ef;border-radius:9px;padding:6px;flex:1;max-width:60px}.fraction-group span{display:grid;place-items:center;min-height:36px;border:1px solid #dfddd0;border-radius:4px;background:#fffdf8;font-size:15px}.fraction-group.chosen{border-color:#a77c35;background:#f3ddb0}.fraction-group.chosen span{background:#e6c783;border-color:#c4a365;color:#70541f}.fraction-group small{position:absolute;top:calc(100% + 8px);left:0;right:0;text-align:center;font-size:12px;white-space:nowrap;color:var(--muted)}.task-title .fraction{font-size:26px;margin:0 4px;line-height:.9}.task-desc .fraction{font-size:18px;line-height:.9}.shape-work{max-width:430px;margin-left:auto;margin-right:auto}.shape-palette{display:flex;justify-content:center;gap:10px}.piece{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid transparent;border-radius:9px;background:#f0f0e7;padding:8px 10px;font-size:12px;font-weight:700;min-width:65px}.piece.selected{border-color:var(--green);box-shadow:0 0 0 3px #dce6d7}.piece-A{color:#68444b;background:#e8bac1!important}.piece-B{color:#806333;background:#f0da9d!important}.piece-C{color:#3c605c;background:#b7d7c8!important}.piece-D{color:#46617c;background:#bed0e6!important}.piece svg{color:currentColor}.shape-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin:18px 0}.shape-controls .secondary{font-size:14px;padding:10px 13px}.shape-controls .text-button{font-size:13px}.piece-preview{display:flex;align-items:center;gap:6px;padding:5px;border-radius:6px;background:none!important}.shape-board{grid-template-columns:repeat(4,1fr);max-width:350px;gap:5px;padding:8px;background:#f0eee9;border-color:#cbb8af}.shape-cell{aspect-ratio:1;border:1px solid #d5cec4;border-radius:7px;font-size:23px;font-weight:800;background:#fffefa;color:#6b7469}.shape-comparison{display:flex;justify-content:center;gap:26px;color:#986270}.robot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:355px;margin:auto;padding:8px;border:2px solid #afc2ac;border-radius:12px;background:#dfe9db}.robot-cell{position:relative;aspect-ratio:1;background:#fffef7;border:1px solid #d0d9c9;border-radius:7px;display:grid;place-items:center;font-size:26px;color:#698269}.robot-cell.visited{background:#dfebd8}.robot-cell.goal{border:2px solid #b28737;background:#f7e7b1;color:#936d23}.map-label{position:absolute;top:3px;left:0;right:0;text-align:center;font-size:10px;font-weight:800}.robot-token{font-size:24px;color:#254f44;background:#abc9b6;border-radius:50%;width:33px;height:33px;display:grid;place-items:center;box-shadow:0 2px 0 #45665530}.commands{display:flex;justify-content:center;gap:8px;margin:16px 0 10px}.command{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #bfcbbc;border-radius:9px;width:56px;height:63px;background:#f0f3e8;font-size:27px;font-weight:800}.command small{font-size:11px;font-weight:600;color:var(--muted)}.command.selected{outline:2px solid var(--green);outline-offset:2px}.command.changed{background:#e5d2a3;border-color:#a38543}.command.running{background:#bad4b7}.direction-picker{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;margin-top:17px}.direction-picker span{font-size:13px}.direction-picker button{width:42px;height:42px;border:1px solid #b6c5b3;border-radius:7px;background:#e3ebdc;font-size:23px}.observation-picture{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:12px;background:#eee5d1;margin-top:18px;margin-bottom:18px}.input-label{display:block;font-size:15px;font-weight:700;margin:12px 0 8px}textarea{width:100%;border:1px solid #bcc8ba;border-radius:9px;resize:vertical;padding:13px 15px;min-height:90px;font-size:17px;line-height:1.6;color:var(--ink);background:#fffef9}.self-check{background:#f1f1e8;border-radius:10px;padding:15px;margin:12px 0}.self-check p{font-weight:700;font-size:14px;margin-bottom:10px}.self-check label{display:flex;align-items:start;gap:10px;font-size:14px;line-height:1.65;margin:7px 0}.self-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--green);flex-shrink:0}.my-sentence{font-size:16px;line-height:1.8;margin:16px 0 0;padding:12px;background:white;border-radius:8px;overflow-wrap:anywhere}.qr-box{display:flex;align-items:center;gap:16px;padding:16px 0}.qr-box img{width:136px;height:136px;flex-shrink:0;image-rendering:pixelated}.qr-box p.small{font-size:13px;margin:8px 0}.teacher-print{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);margin-top:18px;padding-top:20px}.teacher-print label{width:100%;font-weight:700;font-size:15px}.teacher-print select{border:1px solid var(--line);background:white;padding:10px;border-radius:8px;flex:1;min-width:160px;color:var(--ink);font:inherit}#print-sheet{display:none}.task-title,.task-desc{overflow-wrap:break-word}.step-label{margin-top:0}.activity-layout{padding-bottom:15px}
@media(max-width:600px){.shape-controls{gap:7px}.shape-palette{gap:8px}.piece{min-width:56px;padding:7px}.piece-preview{gap:2px;padding:0}.shape-controls .text-button{font-size:12px}.shape-controls .secondary{padding:9px;font-size:13px}.shape-controls svg{width:35px}.robot-grid{max-width:300px}.robot-cell{aspect-ratio:1.16}.observation-picture{max-height:225px}.qr-box{gap:12px}.qr-box img{width:104px;height:104px}.resume-bar{align-items:start;font-size:13px}.resume-bar .text-button{font-size:12px;white-space:nowrap}.fraction-groups{gap:7px}.fraction-group span{min-height:32px}.direction-picker span{width:100%;text-align:center}.activity-title{gap:7px}.activity-head>.text-button{font-size:12px}.commands{gap:7px}.command{width:49px;height:58px}.self-check label{font-size:14px}.actionbar{box-shadow:0 -8px 8px var(--white)}}
@media print{@page{size:A4;margin:18mm}body{background:white;color:black}#app,#modal-root,#toast{display:none!important}#print-sheet{display:block;font-family:Pretendard,sans-serif;color:black}#print-sheet h1{font-size:25px;margin:18px 0}#print-sheet h2{font-size:18px;margin:24px 0 14px}#print-sheet p{font-size:15px;line-height:1.8}#print-sheet pre{font:20px/2 Pretendard,sans-serif;white-space:pre-wrap;margin-top:30px}#print-sheet .answer-page{break-before:page}#print-sheet .writing-space{height:50mm}}
/* Keep the two next actions visible on classroom tablets and phones. */
@media screen and (max-width:1100px){
  .activity-layout{padding-bottom:100px}
  .actionbar{position:fixed;left:50%;right:auto;bottom:12px;transform:translateX(-50%);width:calc(100% - 32px);max-width:650px;z-index:20;margin:0;padding:12px 16px max(12px,env(safe-area-inset-bottom));border:1px solid var(--line);border-radius:16px;background:var(--white);box-shadow:0 3px 22px #263e3526}
}
@media screen and (min-width:601px) and (max-width:1100px) and (max-height:850px){
  .shape-board{max-width:260px}.shape-controls{margin:12px 0}.task-area{margin-top:18px}.robot-grid{max-width:270px}
}