:root{--ink:#1e211f;--paper:#f7f5ef;--yellow:#d9f33e;--orange:#e07143;--line:#d8d5ca;--muted:#76766f;--blue:#477ed5;--green:#168452;--red:#bd4037}*{box-sizing:border-box}html{background:#e9e7e0}body{color:var(--ink);margin:0;font-family:Arial,Apple SD Gothic Neo,Malgun Gothic,sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.loading-screen{text-align:center;background:var(--paper);place-content:center;gap:8px;min-height:100vh;display:grid}.loading-screen b{font-size:20px}.loading-screen span{color:var(--red);font-size:12px}.review-shell{background:var(--paper);max-width:1640px;min-height:100vh;margin:auto;padding:20px 25px 12px}.review-header{border-bottom:3px solid var(--ink);justify-content:space-between;align-items:flex-end;padding:2px 2px 17px;display:flex}.review-header>div:first-child span{color:var(--orange);font-size:12px;font-weight:800}.review-header>div:first-child span b{color:var(--ink)}h1{letter-spacing:-.04em;margin:5px 0 0;font-size:29px}.review-progress{text-align:right;gap:7px;min-width:260px;display:grid}.review-progress p{margin:0;font-size:12px}.review-progress p>b{font-size:22px}.review-progress p>strong{color:var(--orange)}.review-progress i{background:#dddbd2;height:8px;display:block;overflow:hidden}.review-progress em{background:var(--green);height:100%;display:block}.lesson-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:218px;padding:12px 4px 12px 0;display:grid;overflow:auto}.lesson-grid button{border:1px solid var(--line);text-align:left;background:#fff;grid-template-columns:27px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:49px;padding:7px 9px;display:grid;position:relative}.lesson-grid button>span{color:#a6a69f;font-size:9px;font-weight:900}.lesson-grid button>div{flex-direction:column;min-width:0;display:flex}.lesson-grid button>div>b{white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.lesson-grid button>div>small{color:#aaa;margin-top:3px;font-size:8px}.lesson-grid button>em{white-space:nowrap;color:#888;font-size:8px;font-style:normal}.lesson-grid button.status-승인>em{color:var(--green);font-weight:900}.lesson-grid button.status-수정필요>em{color:#a66e00;font-weight:900}.lesson-grid button.active{border-color:var(--ink);box-shadow:inset 5px 0 var(--lesson),0 2px 0 #0002}.lesson-grid button.active>span{color:var(--ink)}.lesson-summary{color:#fff;border-left:7px solid var(--lesson);background:#252b28;justify-content:space-between;align-items:flex-end;gap:20px;padding:15px 18px;display:flex}.lesson-summary>div:first-child>span{color:var(--lesson);font-size:10px;font-weight:900}.lesson-summary h2{margin:4px 0 3px;font-size:24px}.lesson-summary p{color:#c3c8c5;margin:0;font-size:11px}.main-mode{background:#101512;padding:3px;display:flex}.main-mode button{color:#aaa;background:0 0;border:0;padding:9px 14px;font-size:11px;font-weight:900}.main-mode button.active{background:var(--yellow);color:#111}.editor-grid,.preview-grid{grid-template-columns:minmax(0,1fr) 355px;align-items:start;gap:14px;margin-top:14px;display:grid}.canvas-card,.inspector,.piece-panel{border:1px solid var(--line);background:#fff}.canvas-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:0 14px;display:flex}.canvas-toolbar>div:first-child{flex-direction:column;gap:3px;display:flex}.canvas-toolbar b{font-size:11px}.canvas-toolbar span{color:var(--muted);font-size:9px}.legend{color:var(--muted);align-items:center;font-size:9px;flex-direction:row!important;gap:5px!important;display:flex!important}.legend i{border:2px solid;width:10px;height:10px;margin-left:5px}.legend i.word{border-color:var(--blue)}.legend i.picture{border-color:var(--orange)}.legend i.structure{border-color:#8156a8}.image-board,.puzzle-board{touch-action:none;-webkit-user-select:none;user-select:none;background:#f2f0ea;width:min(100%,920px);margin:16px auto;position:relative;box-shadow:0 5px 20px #00000012}.image-board>img,.puzzle-board>img{pointer-events:none;width:100%;height:auto;display:block}.zone-box{border:2px solid var(--blue);cursor:move;touch-action:none;background:#477ed522;min-width:16px;min-height:16px;position:absolute}.zone-box.type-picture{border-color:var(--orange);background:#e0714324}.zone-box.type-structure{background:#8156a822;border-color:#8156a8}.zone-box.required:after{content:"CORE";background:var(--yellow);color:#111;padding:2px 3px;font-size:7px;font-weight:900;position:absolute;top:0;right:0}.zone-box.selected{z-index:5;outline-offset:2px;outline:3px solid #171a18}.zone-box>em{color:#fff;background:#171a18;place-items:center;min-width:20px;height:20px;padding:2px;font-size:9px;font-style:normal;display:grid;position:absolute;top:-22px;left:-2px}.zone-box>span{color:#fff;white-space:nowrap;text-overflow:ellipsis;background:#171a18;max-width:180px;height:20px;padding:4px 6px;font-size:8px;font-weight:900;position:absolute;top:-22px;left:20px;overflow:hidden}.zone-box>button{cursor:nwse-resize;background:#171a18;border:2px solid #fff;width:15px;height:15px;padding:0;position:absolute;bottom:-7px;right:-7px}.inspector,.piece-panel{max-height:calc(100vh - 20px);padding:15px;position:sticky;top:10px;overflow:auto}.inspector-title{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;display:flex}.inspector-title>div{flex-direction:column;display:flex}.inspector-title span{color:var(--muted);font-size:9px}.inspector-title b{margin-top:2px;font-size:18px}.inspector-title button{background:var(--yellow);border:0;padding:8px 10px;font-size:10px;font-weight:900}.inspector>label,.review-meta label{color:var(--muted);gap:5px;margin:10px 0;font-size:9px;font-weight:900;display:grid}.inspector input,.inspector select,.inspector textarea{border:1px solid var(--line);width:100%;color:var(--ink);resize:vertical;background:#faf9f5;border-radius:0;padding:8px}.coordinate-grid{grid-template-columns:1fr 1fr;gap:0 8px;display:grid}.required-row{background:#f3f5e8;align-items:center;padding:8px;color:var(--ink)!important;gap:8px!important;display:flex!important}.required-row input{width:16px!important}.required-row span{flex-direction:column;display:flex}.required-row small{color:var(--muted);margin-top:2px;font-size:8px}.delete-zone{color:#9c3029;background:#fff5f3;border:1px solid #d5aaa5;width:100%;padding:8px;font-size:10px;font-weight:800}.empty-panel{text-align:center;color:var(--muted);padding:30px 8px;font-size:10px}.review-meta{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}.review-meta small{color:var(--muted);font-size:8px}.export-actions{grid-template-columns:1fr 1fr;gap:7px;margin-top:12px;display:grid}.export-actions button{border:1px solid var(--line);background:#efede6;padding:9px 6px;font-size:9px;font-weight:900}.export-actions .export-all{background:var(--ink);color:#fff;border-color:var(--ink);grid-column:1/-1}.puzzle-target{background:#fff;border:2px dashed #252525;margin:0;padding:0;position:absolute;overflow:visible}.puzzle-target.selectable{border-color:var(--yellow);box-shadow:0 0 0 3px #d9f33e66}.puzzle-target.filled{border-style:solid}.puzzle-target.correct{border:3px solid var(--green)}.puzzle-target.wrong{border:3px solid var(--red);background:#fff0ee}.puzzle-target>em{color:#fff;background:#202020;min-width:19px;height:18px;padding:2px;font-size:9px;font-style:normal;line-height:14px;position:absolute;top:-20px;left:-2px}.crop{background-color:#fff;background-repeat:no-repeat;width:100%;height:100%;display:block}.piece-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-bottom:11px;display:flex}.piece-head span{color:var(--orange);letter-spacing:.1em;font-size:8px;font-weight:900}.piece-head h3{margin:2px 0 0;font-size:18px}.piece-head button{border:1px solid var(--line);background:#f4f2eb;padding:7px 9px;font-size:9px;font-weight:900}.preview-mode{background:#e9e7df;grid-template-columns:1fr 1fr;margin-top:10px;padding:3px;display:grid}.preview-mode button{background:0 0;border:0;padding:8px;font-size:9px;font-weight:900}.preview-mode button.active{background:var(--ink);color:#fff}.piece-panel>p{color:var(--muted);font-size:10px;line-height:1.45}.piece-bank{background:#efede6;flex-wrap:wrap;place-content:flex-start center;align-items:center;gap:8px;max-height:430px;padding:10px;display:flex;overflow:auto}.piece{background:#fff;border:2px solid #0000;place-items:center;padding:5px;display:grid;box-shadow:0 2px #c8c4b8}.piece small{white-space:nowrap;text-overflow:ellipsis;max-width:120px;margin-top:4px;font-size:7px;display:block;overflow:hidden}.piece.selected{border-color:var(--yellow);box-shadow:0 0 0 3px #d9f33e66}.piece.used{opacity:.18}.check-answer,.back-review{border:0;width:100%;margin-top:10px;padding:11px;font-size:10px;font-weight:900}.check-answer{background:var(--yellow)}.check-answer:disabled{background:#ccc}.back-review{background:var(--ink);color:#fff}.lesson-controls{justify-content:center;align-items:center;gap:16px;padding:16px;display:flex}.lesson-controls button{border:1px solid var(--line);background:#fff;padding:8px 13px;font-size:10px;font-weight:900}.lesson-controls button:disabled{opacity:.3}.lesson-controls span{color:var(--muted);font-size:9px}.toast{z-index:30;color:#fff;background:#111;padding:11px 17px;font-size:10px;font-weight:800;position:fixed;bottom:25px;left:50%;transform:translate(-50%)}footer{text-align:center;color:#999;padding:3px;font-size:9px}@media (width<=1100px){.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.editor-grid,.preview-grid{grid-template-columns:minmax(0,1fr) 315px}}@media (width<=850px){.review-shell{padding:12px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-grid,.preview-grid{grid-template-columns:1fr}.inspector,.piece-panel{max-height:none;position:static}.lesson-summary{flex-direction:column;align-items:stretch}.main-mode button{flex:1}.image-board,.puzzle-board{margin:8px auto}}@media (width<=560px){.review-header{align-items:flex-start}.review-progress{min-width:120px}.review-progress p{font-size:9px}.review-progress p>b{font-size:17px}h1{font-size:21px}.lesson-grid{grid-template-columns:1fr;max-height:190px}.lesson-summary h2{font-size:20px}.zone-box>span{display:none}.lesson-controls{justify-content:space-between}.legend{display:none!important}}