:root{--demo-accent:#a85239}body{font:15px/1.7 Arial,'Noto Sans KR','Malgun Gothic',sans-serif;color:#302f2b;background:#f7f5f0}*{box-sizing:border-box}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{min-height:44px}p{white-space:pre-line;overflow-wrap:anywhere}.demo-header{padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:18px}.demo-badge{padding:6px 13px;border:1px solid #d9c8b6;border-radius:30px;color:#8e523c;font-size:12px;white-space:nowrap}.demo-shell{max-width:1180px;margin:32px auto 60px;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr);gap:48px;padding:0 28px;align-items:start}.demo-guide{position:sticky;top:24px;padding:20px 0}.demo-guide h1{font-size:30px;line-height:1.45;letter-spacing:-.05em;margin:18px 0}.demo-guide p{font-size:14px;line-height:1.95;color:#75695e}.demo-eyebrow{letter-spacing:2px;font-size:10px!important;color:#a85239!important}.demo-benefit{display:flex;gap:12px;padding:22px;background:#eee7da;border:1px solid #e4d9cb;border-radius:16px;margin:25px 0}.demo-benefit span{color:#a85239}.demo-benefit strong{font-size:15px;line-height:1.9}.demo-rules{font-size:12px!important}.demo-cta{display:block;text-align:center;background:#a85239;color:#fff;padding:13px 18px;border-radius:10px;margin:24px 0 12px}.demo-reset{display:block;background:transparent;border:0;text-decoration:underline;color:#827366;margin:0 auto}.demo-guide>small{display:block;font-size:11px;color:#958575;text-align:center}.student-device{border:1px solid #dfd5c8;border-radius:24px;background:#f7f5f0;overflow:hidden;box-shadow:0 20px 60px #4934210c;min-width:0}.student-top{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:15px 20px;border-bottom:1px solid #e7e1d8;background:#fffefa;font-size:12px}.student-top button{background:none;border:0;color:#9b4c34;font-size:12px;min-height:32px;padding:4px}#demoContent{padding:22px 20px;min-height:570px;max-width:none;margin:0}#demoContent h1{font-size:21px;margin:0 0 18px}#demoContent .card h2{font-size:16px}#demoContent .card{margin:12px 0;padding:19px}#demoContent .kv{grid-template-columns:90px minmax(0,1fr);font-size:14px}#demoContent .row strong{white-space:normal}#demoContent .row{font-size:14px}.demo-tip{font-size:12px;color:#8c7969}.demo-nav-icon{display:block;font-size:19px;line-height:1.4;margin-bottom:3px}#demoNav{position:sticky;bottom:0;padding:0;display:flex;border-top:1px solid #e8e1d7;background:#fffefa;z-index:3;box-shadow:none}#demoNav button{width:20%;font-size:12px;padding:11px 4px;min-height:65px;border-top:3px solid transparent}#demoNav button.active{border-top-color:#a85239}.demo-menu{display:grid;gap:8px}.demo-menu button{display:flex;justify-content:space-between;width:100%;text-align:left;padding:13px 0;background:none;color:#44382f;border:0;border-bottom:1px solid #eee8df}.lessonMenu{display:flex;overflow-x:auto;gap:7px;padding-bottom:10px}.lessonMenu button{font-size:12px;white-space:nowrap;border:1px solid #ddd0c2;color:#765847;background:#fffdf8;border-radius:9px;padding:9px 12px}.lessonMenu button.active{background:#a85239;color:white}.demo-tool{width:100%;display:grid!important;grid-template-columns:36px minmax(0,1fr);gap:10px;text-align:left;background:#fffefa!important;color:#3b3027!important;padding:14px!important;border:1px solid #e8dfd3!important;border-radius:12px!important;margin:9px 0!important}.demo-tool .tool-symbol{font-size:25px;color:#a85239}.demo-tool strong{display:block;font-size:15px}.demo-tool small{display:block;font-size:12px;line-height:1.8;color:#847467}.demo-tool .remaining{color:#a85239;font-weight:600;margin-top:5px}.tool-frame{width:100%;height:72vh;min-height:480px;border:1px solid #e2d8ca;border-radius:12px;background:#fffefa}.tool-clock{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;background:#eee5d8;font-size:12px;border-radius:10px;margin:12px 0}.demo-progress{height:7px;background:#e7dfd3;border-radius:30px;margin:18px 0;overflow:hidden}.demo-progress span{display:block;height:100%;background:#ad735d;width:var(--progress)}.demo-check{padding:12px;border:1px solid #e9e2d8;border-radius:10px;margin:8px 0;color:#827567;font-size:14px;display:flex;gap:12px}.demo-check.done{background:#f6eee8;color:#5c463a}.demo-check b{color:#a85239}.demo-message-form label,.demo-wish-form label{display:block;font-size:12px;color:#7e6d60}.demo-message-form textarea,.demo-wish-form textarea{margin:8px 0;font-size:16px}.demo-status{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);max-width:calc(100vw - 32px);background:#3b3027;color:#fff;padding:10px 18px;border-radius:12px;z-index:20;font-size:13px;box-shadow:0 5px 20px #0002}.demo-status:empty{display:none}.demo-log{display:block;width:100%;text-align:left;background:#fffefa!important;color:#3b3027!important;border:1px solid #e9e2d8!important;padding:18px!important;border-radius:14px!important;margin:10px 0!important}.demo-log small{display:block;color:#8e7668}.demo-log strong{display:block;margin-top:8px}.demo-empty{padding:24px;text-align:center;color:#897569}.demo-score-list{font-size:14px}.demo-unlimited{font-size:12px;color:#946348}.demo-lesson-photo{width:100%;border-radius:12px;display:block}.demo-lesson-photo+small{font-size:11px;color:#8b7c6d}.cms-editing [data-cms]{outline:2px dashed #dc3545;outline-offset:3px;cursor:text}.cms-editing [data-cms]:hover{outline:2px solid #c51c30;background:#f5e5cc}.demo-preview .demo-guide{position:static}.demo-preview .demo-shell{margin-top:16px}[data-cms]{white-space:pre-line}[hidden]{display:none!important}
@media(max-width:950px){.demo-shell{grid-template-columns:1fr;max-width:680px;gap:24px;margin-top:16px}.demo-guide{position:static;padding:0}.demo-guide h1{font-size:25px;margin:10px 0}.demo-benefit{margin:15px 0;padding:16px}.demo-cta{margin-top:16px}.demo-header{padding:15px 22px}.demo-guide>small{margin-top:6px}.student-device{border-radius:18px}#demoContent{min-height:480px}.demo-guide .demo-rules{margin:12px 0}.tool-frame{height:70dvh}}
@media(max-width:600px){.demo-shell{padding:0 12px;margin-bottom:24px}.demo-header{padding:13px 16px}.demo-header b{font-size:15px}.demo-header small{font-size:9px}.demo-guide{padding:10px}.demo-guide h1{font-size:24px}.demo-guide p{font-size:13px}.demo-benefit strong{font-size:14px}.student-top{padding:12px 14px}#demoContent{padding:18px 12px}#demoContent .card{padding:16px}.tool-frame{min-height:440px}.demo-status{bottom:24px}.demo-menu button{font-size:14px}.demo-badge{font-size:11px}#demoNav{position:sticky}#demoNav button{min-height:62px;font-size:11px}.demo-progress{margin:15px 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}