:root{--green:#03a85f;--green-dark:#00884c;--mint:#edf9f2;--ink:#202824;--muted:#78817b;--line:#e6eae7;--bg:#f6f8f7;--white:#fff;--radius:18px;font-family:Arial,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0;font-size:14px;line-height:1.6}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #50c98b;outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-size:34px;letter-spacing:-1.5px;line-height:1.35;margin-bottom:12px}h2{font-size:21px;letter-spacing:-.65px;margin-bottom:14px}h3{font-size:16px;margin-bottom:12px}p{line-height:1.8}small{font-size:12px}/* 페이지의 머리·바닥에만 걸리게 좁혀 둡니다. 쪽지 같은 카드 안에도 header·footer 를 씁니다. */
#app>header{height:92px;background:#fff;border-bottom:1px solid var(--line)}.header-inner{max-width:1500px;margin:auto;height:100%;display:flex;align-items:center;gap:60px;padding:0 30px}.brand{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:900;letter-spacing:-1.5px;white-space:nowrap}.brand img{width:36px;height:36px}.brand>span{font-size:18px;font-weight:400;letter-spacing:-.8px;color:#414b44;margin-left:-4px}.top-nav{display:flex;align-items:center;gap:30px;font-weight:700;font-size:14px;flex:1;color:#8c938e}.top-nav button{border:0;background:none;padding:12px 0;color:#78817b}.top-nav .nav-current{color:var(--green);position:relative}.account{display:flex;align-items:center;gap:10px;font-size:12px;white-space:nowrap}.account small{display:block;color:var(--muted);font-size:10px}.avatar{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;background:#edf4ef;color:#62806b;font-weight:bold;flex-shrink:0}.account a{color:#68736c}.text-button{border:0;background:none;color:#68736c;font-weight:600;padding:10px 8px;min-height:40px}.text-button:hover{color:var(--green)}main{max-width:1500px;padding:42px 30px 70px;margin:auto;min-height:calc(100vh - 176px)}#app>footer{max-width:1440px;margin:auto;display:flex;gap:24px;align-items:center;border-top:1px solid var(--line);padding:25px 0;color:#99a19b;font-size:11px}#app>footer strong{color:#59665e;font-size:15px;letter-spacing:-.5px}#app>footer span:last-child{margin-left:auto}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:8px 0 32px}.page-heading p{color:var(--muted);margin:0;font-size:14px}.eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1px;color:var(--green);margin-bottom:14px}.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:5px 10px;border-radius:6px;background:var(--green);color:white;letter-spacing:.2px}.tag.soft{background:var(--mint);color:var(--green-dark)}.tag.neutral{background:#f0f3f1;color:#77827a}.button{border:1px solid transparent;border-radius:9px;padding:12px 20px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:700;font-size:13px;white-space:nowrap}.button.primary{background:var(--green);color:#fff}.button.primary:hover{background:var(--green-dark)}.button.secondary{background:#fff;border-color:#dfe6e1;color:#526159}.button.secondary:hover{background:#f5f8f6}.button.small{min-height:36px;padding:7px 13px;font-size:12px}.wide{width:100%;justify-content:space-between}.muted{color:var(--muted)}.subtle{font-size:12px;color:#8b958e;line-height:1.7}.green,.success-text{color:var(--green-dark)}.success-text{font-size:13px}.danger{color:#bc5c5c}.empty{padding:42px 24px;text-align:center;color:#89938c;font-size:13px}label{display:block;font-size:12px;font-weight:700;color:#5b665f;margin:16px 0}input,select,textarea{display:block;width:100%;margin-top:7px;border:1px solid #dfe6e1;background:#fff;border-radius:8px;padding:12px 13px;min-height:46px;color:#29382f}input::placeholder,textarea::placeholder{color:#a8b1aa}textarea{min-height:88px;resize:vertical}.form-error{color:#bd4444;font-size:12px;margin:10px 0 0}.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}.section-title h2,.section-title h3{margin:0}.section-title h2 span{color:var(--green);margin-left:6px}.section-title>.muted{font-size:11px}.welcome-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;max-width:1040px;margin:20px auto 0;align-items:center}.welcome-copy{position:relative;min-height:670px}.welcome-copy h1{font-size:45px;letter-spacing:-2.4px;line-height:1.38;margin-top:22px}.welcome-copy em{color:var(--green);font-style:normal}.welcome-copy>p{color:#7b867e;font-size:14px;margin:22px 0}.welcome-pills{display:flex;gap:12px;color:#62846d;font-size:12px}.welcome-pills span{background:#ebf3ed;border-radius:20px;padding:7px 12px}.paper-stack{position:relative;width:330px;margin:45px 0 0 30px}.paper-stack:before{content:'';position:absolute;inset:8px -12px -8px 12px;border-radius:12px;background:#d9eadf;transform:rotate(7deg)}.paper{background:#fff;position:relative;border:1px solid #e0e8e2;border-radius:12px;padding:27px 35px;box-shadow:0 10px 30px #304b3710;transform:rotate(-3deg)}.paper p{font-family:Georgia,serif;font-size:30px;line-height:1.45;margin-bottom:16px;color:#526458}.paper strong{color:var(--green)}.paper small{color:#a1aaa4;font-size:11px}.paper-line{display:block;width:40px;height:3px;background:#d4ebdd;margin-bottom:16px}.floating-note{position:absolute;background:#fff;padding:12px 20px;right:-65px;bottom:30px;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 25px #29483210;color:var(--green);font-weight:700;font-size:12px;transform:rotate(3deg)}.login-card{padding:38px;box-shadow:0 8px 35px #204b3010;margin-top:-70px}.login-card h2{font-size:27px;margin:20px 0 8px}.login-card>.muted{font-size:12px;margin-bottom:25px}.login-card form>.button{margin-top:12px}.login-foot{border-top:1px solid var(--line);padding-top:22px;margin-top:25px;text-align:center;color:#86948b;font-size:12px}.center-card{max-width:520px;text-align:center;margin:65px auto;padding:48px}.center-card h1{font-size:26px}.center-card form{text-align:left}.large-icon{font-size:55px;color:var(--green);margin-bottom:10px}.waiting-dots{display:flex;justify-content:center;gap:7px;margin-top:30px}.waiting-dots i{width:7px;height:7px;background:#79cca1;border-radius:50%;animation:pulse 1.5s infinite}.waiting-dots i:nth-child(2){animation-delay:.2s}.waiting-dots i:nth-child(3){animation-delay:.4s}@keyframes pulse{50%{opacity:.2}}.student-home-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:26px}.lesson-card{display:flex;gap:30px;margin-bottom:20px;padding:28px}.lesson-card.featured{border-color:#bcdcc8;background:linear-gradient(120deg,#fff 50%,#f6fcf8)}.book-cover{width:160px;min-height:210px;background:#dcece1;border-radius:4px 10px 10px 4px;border-left:7px solid #c2d8c9;padding:21px 17px;display:flex;flex-direction:column;flex-shrink:0;color:#315640;box-shadow:4px 5px 0 #e5eae6}.book-cover small{font-size:8px;letter-spacing:2px;line-height:1.7}.book-cover strong{font-family:Georgia,serif;font-size:25px;line-height:1.2;margin:auto 0;overflow-wrap:anywhere}.book-cover>span{font-size:7px;letter-spacing:1.4px}.lesson-info{flex:1;padding:8px 0}.lesson-info h2{font-size:24px;margin:12px 0 6px}.lesson-info p{font-size:12px;color:#88928b}.progress-row{display:flex;gap:12px;align-items:center;font-size:11px;color:#7b877f}.progress-track{height:6px;background:#eef2ef;border-radius:10px;flex:1;min-width:60px;overflow:hidden}.progress-track i{display:block;height:100%;background:#35bd7e;border-radius:10px}.lesson-info>.progress-row{margin:22px 0}.lesson-info .button{font-size:12px}.guide{padding:24px}.routine{display:flex;gap:14px;border-top:1px solid var(--line);padding:20px 0}.routine:last-child{padding-bottom:0}.routine b{color:#5bb483;font-size:13px}.routine strong{font-size:12px}.routine p{font-size:11px;color:#939d96;margin:4px 0 0}.quote-card{background:#eaf4ed;margin-top:20px;border-radius:15px;padding:27px;color:#597564;font-size:21px;font-weight:700;line-height:1.6}.quote-card small{display:block;font-size:11px;font-weight:400;margin-top:15px;color:#86a08e}.breadcrumb{display:flex;align-items:center;gap:10px;color:#8b978f;font-size:11px}.breadcrumb .text-button{font-size:11px;padding-left:0}.compact{margin-top:6px;margin-bottom:25px}.compact h1{font-size:30px}/* 단계가 열세 개라 넓은 화면에서도 한 줄에 다 들어가지 않습니다. 줄을 바꿔 쌓습니다.
   옆으로 넘기게 두면 뒤쪽 단계가 화면 밖에 숨어 있는 줄 모릅니다. */
.learning-tabs{display:flex;flex-wrap:wrap;gap:4px 20px;border-bottom:1px solid #dfe6e1;margin-bottom:28px}.learning-tabs button{border:0;border-bottom:3px solid transparent;background:none;padding:14px 2px 16px;color:#8b948e;font-weight:bold;font-size:13px}.learning-tabs button small{font-size:10px;margin-right:8px;opacity:.7}.learning-tabs button.active{color:var(--green);border-bottom-color:var(--green)}.reader-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.reader{padding:28px 34px;min-height:420px}.reader-toolbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--line)}.reader-toolbar>.muted{font-size:11px}.segmented{display:inline-flex;background:#f3f6f4;border-radius:8px;padding:4px;gap:2px}.segmented button{background:none;border:0;padding:8px 14px;border-radius:6px;font-size:12px;color:#8a958d;min-height:36px}.segmented button.selected{background:white;box-shadow:0 1px 4px #16352212;color:var(--green);font-weight:700}.sentence-meta{display:flex;gap:18px;align-items:center;margin:36px 0 22px}.sentence-content{min-height:160px}.english{font-size:29px;line-height:1.85;letter-spacing:-.3px;font-weight:500;overflow-wrap:anywhere}.english.small{font-size:19px}.translation{color:#8c968f;font-size:15px;line-height:1.9;margin-top:18px}.analysis-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.analysis-tags span{background:#f1f7f3;color:#6f7f74;font-size:12px;padding:5px 9px;border-radius:5px}.analysis-tags b{color:#07a15d;margin-right:4px}.grammar-note{padding:16px;background:#f7f9f8;border-radius:8px;color:#6a7b70;font-size:13px;margin-top:20px}.sentence-navigation{display:flex;justify-content:space-between;gap:10px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}.sentence-navigation .button{padding:10px 14px;font-size:12px}.reading-guide{padding:24px}.reading-guide h2{font-size:19px}.reading-guide>p{color:#8c968f;font-size:12px}.reading-guide label{font-size:11px}.reading-guide select{font-size:12px;min-height:40px;padding:8px 10px}.tip-box{background:var(--mint);padding:18px;border-radius:10px;font-size:12px;color:#688171}.tip-box b,.tip-box strong{color:var(--green);font-size:11px}.tip-box p{margin:8px 0 0}.sentence-words{margin-top:18px;padding:22px}.word-chip{border:1px solid #dce9e0;border-radius:6px;background:#f9fcfa;padding:8px 12px;margin:0 5px 6px 0;color:#548366;font-size:12px}.record-dock{position:sticky;bottom:16px;display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #c8e2d2;border-radius:14px;margin:24px 0 0;padding:20px 24px;box-shadow:0 5px 30px #1c55331a;z-index:3}.mic-icon{width:45px;height:45px;background:var(--mint);color:var(--green);border-radius:50%;display:grid;place-items:center;font-size:27px}.record-status{flex:1;min-width:0}.record-status strong{display:block;font-size:14px}.record-status>span{display:block;font-size:11px;color:#8a968e;margin-top:3px}.sound-meter{height:3px;width:100px;background:#edf4ef;margin-top:8px;border-radius:3px}.sound-meter i{display:block;height:100%;width:0;background:var(--green);transition:width .08s}.saved-recording{margin-top:25px;padding:20px;background:#f5faf7;border-radius:10px;color:#63816e;font-size:12px}audio{display:block;max-width:100%;height:36px;width:100%;margin-top:12px}.word-meaning{font-size:17px;font-weight:700;color:#5b7464;margin:13px 0}.word-definition{font-size:13px;color:#6f8f7c;line-height:1.7;margin:0 0 10px}/* 단어 카드 격자. 가로 다섯 칸 고정이고, 카드가 열 개를 넘으면 열 개씩 구간으로 접습니다. */.card-guide{margin:-8px 0 14px}.wc-sections{margin-bottom:10px}.wc-section{border:1px solid var(--line);border-radius:13px;background:#fff;margin-bottom:10px;overflow:hidden}.wc-section.open{border-color:#c8e2d2}.wc-head{display:flex;align-items:center;gap:10px;width:100%;border:0;background:#fbfcfb;padding:14px 18px;min-height:52px;text-align:left}.wc-head:hover{background:#f4f9f6}.wc-section.open .wc-head{background:var(--mint);border-bottom:1px solid #d8ece1}.wc-arrow{color:var(--green);font-size:12px;width:12px}.wc-head strong{flex:1;font-size:14px}.wc-head small{color:#8b958e;font-size:11px}.word-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}.wc-sections .word-cards{margin:0;padding:15px 16px 19px}.wc{position:relative;perspective:900px;height:215px}.wc-inner{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}.wc.flipped .wc-inner{transform:rotateY(180deg)}.wc-face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 12px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;overflow:hidden}.wc-pos{font-size:9px;font-weight:800;letter-spacing:1.2px;color:var(--green)}.wc-front b{font-size:19px;font-weight:700;letter-spacing:-.4px;line-height:1.3;overflow-wrap:anywhere}.wc-front small{color:#a0a9a3;font-size:10px;overflow-wrap:anywhere}.wc-back{transform:rotateY(180deg);background:#f6fbf8;border-color:#cfe6d9;display:block;padding:0 4px 12px 13px;overflow-y:auto;overscroll-behavior:contain;text-align:left}.wc-back-top{position:sticky;top:0;z-index:1;display:block;background:#f6fbf8;padding:13px 26px 8px 0;border-bottom:1px solid #dcece3;margin-bottom:9px}.wc-back-top strong{display:block;font-size:15px;font-weight:700;color:#2f5a42;line-height:1.35;overflow-wrap:anywhere}.wc-back-top small{display:block;color:#8fa697;font-size:10px;margin-top:3px}.wc-back-body{display:block;padding-right:9px}.wc-back::-webkit-scrollbar{width:4px}.wc-back::-webkit-scrollbar-thumb{background:#c6ded0;border-radius:4px}.card-example{display:block;font-size:10px;color:#7f8d85;line-height:1.55}.card-translation{display:block;font-size:10px;color:#a3aea7;line-height:1.55;margin-top:4px}.wc.checked .wc-face{border-color:#8ed0ac}.wc-star{color:#ccd6d0}.wc-star.on{color:#17ac68}.wc-tools{position:absolute;top:4px;right:4px;display:flex;z-index:2}.wc-star,.wc-more{border:0;background:none;padding:4px 5px;min-height:auto;line-height:1;color:#17ac68;font-size:15px}.wc-more{color:#a8b5ad;font-size:13px}/* 맨 마지막에 누른 단어만 냅니다. 보기는 수업 전체 단어에서 끌어옵니다. */.wc-quiz{margin:8px 0 28px}.empty-quiz{text-align:center;color:#89938c}.wc-picked{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px;max-height:118px;overflow-y:auto}.wc-kinds{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 16px}.wc-kind{display:inline-flex;align-items:center;gap:7px;border:1px solid #dfe6e1;background:#fff;border-radius:8px;padding:8px 14px;min-height:42px;font-size:12px;font-weight:700;color:#6b7a71}.wc-kind em{font-style:normal;font-size:10px;font-weight:800;padding:1px 6px;border-radius:99px;background:#eef3f0;color:#7d8b83}.wc-kind.on{background:var(--green);border-color:var(--green);color:#fff}.wc-kind.on em{background:rgba(255,255,255,.26);color:#fff}.wc-bar{height:4px;border-radius:99px;background:#eaf0ec;margin:0 0 20px;overflow:hidden}.wc-bar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .3s}.wc-quit{margin-top:18px;padding-top:4px;text-align:center}.wc-quit .text-button{font-size:11px}.wc-score{display:flex;align-items:baseline;gap:12px;margin:4px 0 12px}.wc-score b{font-size:30px;color:var(--green-dark)}.wc-score span{font-size:20px;font-weight:700;color:#b2483f}.wc-score small{color:var(--muted);font-size:11px}.wc-prompt{font-size:20px;line-height:1.7;margin:0 0 4px;overflow-wrap:anywhere}.wc-hint{font-size:12px;color:#95a09a;margin:0 0 14px}.wc-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.wc-choice{border:1px solid var(--line);background:#fff;border-radius:9px;padding:13px 15px;min-height:50px;font-size:14px;text-align:left;overflow-wrap:anywhere}.wc-choice:hover:not(:disabled){border-color:#bcd7c7;background:#fbfdfb}.wc-choice:disabled{opacity:.62}.wc-choice.right{border-color:#44bf81;background:var(--mint);color:var(--green-dark);font-weight:700;opacity:1}.wc-choice.wrong{border-color:#e2a9a3;background:#fdf2f1;color:#b2483f;opacity:1}.wc-verdict{margin:16px 0 0;font-size:14px;font-weight:700}.wc-verdict.right{color:var(--green-dark)}.wc-verdict.wrong{color:#b2483f}.wc-again{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}/* 학원 전체 학생 명부. 반을 열지 않고 여기서 찾아 퇴원까지 합니다. */
.roll-card{padding:24px 26px}
.inline-form.roll-search{margin-bottom:20px;align-items:flex-end}
.roll-search label{flex:1;min-width:180px;margin:0;font-size:12px;color:var(--muted)}
.roll-search label:has(select){flex:0 0 200px}
.roll-search>.button{min-height:44px}
.roll-search label input,.roll-search label select{margin-top:6px;width:100%}
.roll-search .form-error{flex-basis:100%;margin:0}
.roll-table{padding:0;margin:0}
.roll-table td{vertical-align:middle}
.roll-table .tag{margin:2px 4px 2px 0}
.roll-table td:last-child{text-align:right;white-space:nowrap}
.text-button.tiny{min-height:34px;padding:6px 9px;font-size:11px}
.expel-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px;margin-bottom:6px}.expel-row{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:11px 13px}.expel-row strong{font-size:13px}.expel-row small{display:block;color:#94a198;font-size:10px;margin-top:2px}.expel-row .text-button{margin-left:auto;font-size:11px}.quiz h3{font-size:20px;line-height:1.7;margin:25px 0;overflow-wrap:anywhere}.choice{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:14px}.choice:has(input:checked){border-color:#44bf81;background:var(--mint);color:var(--green-dark)}.choice input{width:16px;min-height:16px;margin:0;accent-color:var(--green)}.choice-number{color:#a6afa9;font-size:11px}.quiz-nav{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:24px;padding-top:12px}.answer-feedback{padding:20px;border-radius:10px;margin-top:20px;font-size:13px}.answer-feedback p{margin:8px 0 0}.correct{background:#ebf8ef;color:#30845b}.incorrect{background:#fff7e9;color:#9c7b3c}.result-banner{margin-bottom:30px;background:linear-gradient(100deg,#fff,#f0faf4)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.stats>div{padding:12px 0}.stats strong{display:block;font-size:36px;line-height:1.4;letter-spacing:-1px}.stats strong small{font-size:13px;font-weight:400;color:#97a29a;letter-spacing:0;margin-left:5px}.stats span{font-size:12px;color:#87958c}.wrong-card{margin-bottom:16px}.wrong-card h3{margin:12px 0}.wrong-card p{font-size:13px}/* 선생님 화면. 왼쪽 줄메뉴가 오른쪽 내용을 고릅니다. */
.teacher-shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:26px;align-items:start}.side-menu{position:sticky;top:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 10px;max-height:calc(100vh - 36px);overflow:auto}.side-group+.side-group{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.side-head{display:flex;align-items:center;gap:6px;padding:0 6px 8px}.side-title{flex:1;border:0;background:none;padding:6px;text-align:left;font-size:12px;font-weight:700;letter-spacing:-.3px;color:#77887c;border-radius:8px}.side-title.on{color:var(--green-dark)}.side-title span{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:99px;background:#f1f5f2;color:#8b958e;font-size:10px;font-weight:700}.side-title.on span{background:var(--mint);color:var(--green-dark)}.side-add{border:1px dashed #cfded5;background:none;border-radius:8px;padding:5px 8px;font-size:10px;font-weight:700;color:#6f9a83;white-space:nowrap}.side-add:hover{border-style:solid;background:var(--mint);color:var(--green-dark)}.side-list{display:flex;flex-direction:column;gap:2px}.side-item{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;border-radius:10px;padding:11px 10px;text-align:left;color:#7f8c83;font-size:12px}
/* 한 줄에 여는 단추와 지우기 단추를 나란히 둡니다. 단추 안에 단추를 넣을 수 없어 줄을 따로 감쌌습니다.
   지우기는 늘 보입니다. 마우스를 올렸을 때만 보이게 하면 휴대전화에서는 띄울 길이 없습니다. */
.side-row{display:flex;align-items:center;gap:2px}
.side-row .side-item{flex:1;min-width:0;width:auto}
.side-del{flex:none;width:28px;min-height:28px;display:grid;place-items:center;border:0;background:none;border-radius:8px;color:#c9d2cc;font-size:11px;line-height:1}
.side-del:hover{background:#fbe9e9;color:#c05f5f}.side-item:hover{background:#f5f8f6}.side-item.on{background:#eaf8ef;color:#159156;font-weight:700}.side-icon{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:#f1f5f2;color:#8fa697;font-size:11px}.side-item.on .side-icon{background:#fff;color:var(--green)}.side-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side-label small{display:block;margin-top:2px;color:#9aa8a0;font-size:10px;font-weight:400;overflow:hidden;text-overflow:ellipsis}.side-badge,.tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--green);color:#fff;font-size:10px;font-style:normal;font-weight:700}.side-empty{margin:0;padding:10px;color:#9aa8a0;font-size:11px}.side-note{margin:22px 8px 0;border-top:1px solid var(--line);padding-top:18px;color:#9ba69e;font-size:10px;line-height:1.9}
/* 반 화면의 제목과 오른쪽 탭 */
.class-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 18px}.class-title h1{margin:0 0 4px;font-size:28px}.class-title p{margin:0;color:var(--muted);font-size:12px}.class-code{display:flex;gap:12px;align-items:center}.class-code small{color:#98a29b;font-size:10px}.class-code strong{font-size:22px;letter-spacing:3px;color:var(--green)}.class-code .text-button{font-size:10px}.class-tabs{display:flex;gap:4px;margin:0 0 18px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:13px;overflow-x:auto}.class-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-width:76px;min-height:42px;border:0;background:none;border-radius:9px;font-size:13px;font-weight:700;color:#8b958e;white-space:nowrap}.class-tab:hover{background:#f5f8f6}.class-tab.on{background:var(--green);color:#fff}.class-tab.on .tab-badge{background:#fff;color:var(--green-dark)}.class-pane>.card:last-child,.class-pane>.assigned-material{margin-bottom:0}
/* 자료 탭 */
.assigned-material{padding:24px 26px}.assigned-material h2{margin:4px 0 6px}.stage-chips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 12px}.stage-chip{padding:6px 11px;border-radius:99px;background:#f3f6f4;color:#a3aea7;font-size:12px}.stage-chip b{font-weight:700}.stage-chip.on{background:var(--mint);color:var(--green-dark)}
/* 학생 탭 */
.student-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}.student-tools small{margin-left:auto;font-size:11px}.login-id{font-style:normal;font-weight:400;color:#8fa697;font-size:11px;margin-left:3px}.login-id.none{color:#c2a25f}.name-actions{display:flex;gap:2px;margin:2px 0 1px 13px}.text-button.tiny{padding:3px 5px;min-height:auto;font-size:10px}.button.danger{color:#b2483f;border-color:#eccbc7}.button.danger:hover:not(:disabled){background:#fdf2f1;border-color:#e2a9a3}.danger-text{color:#b2483f}.pick-col{width:34px}.student-pick{width:17px;min-height:17px;margin:0;accent-color:var(--green)}tr.picked{background:#f3faf6}.also-in{display:block;font-style:normal;margin-top:2px;color:#6f8f7c;font-size:10px}
/* 검색 등록 창. 검색을 되풀이하며 담아 두는 곳이라 결과와 담아 둔 목록을 따로 보입니다. */
.enroll-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}.enroll-search label{flex:1;min-width:0;margin:0}.enroll-search label input{margin-top:6px}.enroll-search .button{white-space:nowrap}.enroll-search .form-error{order:3;flex-basis:100%;margin:0}
.enroll-results{margin:16px 0;max-height:min(46vh,420px);overflow-y:auto}.enroll-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;position:sticky;top:0;background:#fff;padding-bottom:6px;z-index:1}.enroll-head h3{margin:0}.enroll-head>div{display:flex;gap:4px;flex:none}.enroll-head .text-button{min-height:30px;padding:4px 8px;font-size:11px}.enroll-results h3,.enroll-picked h3{margin:0 0 8px;font-size:12px;color:#5d6f64}
.enroll-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;margin-bottom:6px;cursor:pointer;background:#fff}
.enroll-row:hover{border-color:#bcd7c7;background:#fbfdfb}.enroll-row:has(input:checked){border-color:var(--green);background:#f3faf6}
.enroll-row input{width:18px;min-height:18px;margin:0;accent-color:var(--green);flex:none}.enroll-who{flex:1;font-size:13px}.enroll-row small{color:#8fa697;font-size:11px;text-align:right}
.enroll-picked{margin:0 0 18px;padding:14px;border-radius:12px;background:#f7faf8;border:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:3px;padding:5px 5px 5px 10px;border-radius:999px;background:#fff;border:1px solid #cfe3d7;font-size:12px}
.chip-x{border:0;background:none;padding:0 4px;color:#8fa697;font-size:14px;line-height:1;cursor:pointer;min-height:auto}.chip-x:hover{color:#b2483f}
.enroll-mode{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 10px}.enroll-mode legend{padding:0 6px;font-size:11px;color:#5d6f64}
.enroll-mode .radio{display:flex;align-items:flex-start;gap:9px;margin:0;padding:7px 0;cursor:pointer}.enroll-mode .radio+.radio{border-top:1px dashed var(--line)}
.enroll-mode .radio input{width:17px;min-height:17px;margin:2px 0 0;accent-color:var(--green);flex:none}.enroll-mode .radio span{font-size:11px;color:#6f8073}.enroll-mode .radio strong{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
.card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.class-tag{font-weight:600}
/* 리포트 탭 */
.rate{font-weight:700}.rate.good{color:var(--green-dark)}.rate.soso{color:#c08a1e}.rate.bad{color:#b2483f}.stage-report{display:flex;flex-direction:column;gap:14px}.stage-bar{display:grid;grid-template-columns:165px minmax(0,1fr) 58px;align-items:center;gap:12px}.stage-bar strong{font-size:13px}.stage-bar>span{font-size:12px;font-weight:700;text-align:right;color:#5c6b62}.stage-bar small{grid-column:1/-1;color:#9aa8a0;font-size:10px;margin-top:-8px}.item-report{display:flex;flex-direction:column}.item-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.item-row:first-child{border:0;padding-top:0}.item-row .tag{flex:none}.item-row p{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.7;overflow-wrap:anywhere}.item-rate{flex:none;text-align:right}.item-rate small{display:block;color:#9aa8a0;font-size:10px}
/* 쪽지 탭 */
.note-form textarea{min-height:76px}.note-list{display:flex;flex-direction:column;gap:10px}.note{border:1px solid var(--line);border-radius:13px;padding:14px 16px;background:#fbfcfb}.note.mine{background:var(--mint);border-color:#d5ecdf}.note.unread{border-color:var(--green);box-shadow:0 0 0 2px #e4f6eb}.note header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:7px}.note header strong{font-size:13px}.note header span{font-size:11px;color:#6f9a83;font-weight:700}.note header small{margin-left:auto;color:#9aa8a0;font-size:10px}.note p{margin:0;font-size:13px;line-height:1.8;overflow-wrap:anywhere}.note footer{margin-top:8px;color:#9aa8a0;font-size:10px}
/* 관리 탭의 반 설정 */
.class-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.class-settings>div{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:13px 15px}.class-settings>div>span{font-size:11px;color:#8b958e}.class-settings strong{font-size:15px}.class-settings .text-button{margin-left:auto;font-size:11px}
/* 학생 입장 화면. 로그인 칸과 처음 오는 학생의 신청 칸을 함께 둡니다. */
.entry-divider{display:flex;align-items:center;gap:10px;margin:24px 0 4px;color:#9aa8a0;font-size:11px}.entry-divider::before,.entry-divider::after{content:'';flex:1;height:1px;background:var(--line)}.join-form{margin-top:14px;padding:4px 16px 16px;border:1px dashed #d8e4dd;border-radius:14px;background:#fbfcfb}.join-form>.button{margin-top:16px}.home-side{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.home-side .button{font-size:11px}
.admission{margin-bottom:20px;padding:22px 26px}.green-dot,.status-dot{display:inline-block;width:7px;height:7px;background:#cbd4ce;border-radius:50%;margin-right:6px}.green-dot,.status-dot.online{background:#29bd77}.admission>.muted{font-size:12px;margin-bottom:0;padding:8px 0}.request-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}.request-row strong{font-size:13px}.request-row small{display:block;color:#94a198;font-size:10px}.request-actions{margin-left:auto;display:flex;gap:7px}.student-table{padding:24px 26px;margin-bottom:20px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}th{font-size:10px;font-weight:400;color:#9ca59f;background:#f7f9f8;padding:11px 12px}td{padding:16px 12px;border-bottom:1px solid #f0f3f1}tr:last-child td{border-bottom:0}td small{color:#9ba59e;font-size:10px;padding-left:14px}.student-name{display:flex;align-items:center}.student-table .progress-track{min-width:45px;max-width:90px}.student-table .text-button{font-size:11px;padding:6px;min-height:36px}.assignment-card{padding:23px 26px}.inline-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.inline-form select{margin:0;flex:1;min-width:180px;width:auto}.inline-form label{flex:1}.inline-form label select{margin-top:6px;width:100%}.inline-form>.form-error{width:100%}.assignment-card .subtle{margin:12px 0 0}.library-note{display:flex;gap:22px;align-items:center;background:#eaf5ee;border:1px solid #dcebe1;border-radius:14px;padding:22px 28px;margin-bottom:32px;color:#4c785c}.library-note>span{font-size:30px}.library-note p{margin:5px 0 0;font-size:12px;color:#7e9787}.material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:36px}.material h3{margin:18px 0 8px;overflow-wrap:anywhere}.material p{font-size:12px;color:#909d94}.material .button{margin-top:10px;font-size:12px}dialog{border:1px solid var(--line);border-radius:18px;padding:28px;max-width:740px;width:calc(100% - 32px);max-height:88vh;color:var(--ink);box-shadow:0 30px 100px #16302130}dialog::backdrop{background:#16332255;backdrop-filter:blur(3px)}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.modal-heading h2{margin:0}.close-button{border:0;background:#f3f6f4;width:36px;height:36px;border-radius:50%;font-size:23px;color:#87968c;flex-shrink:0}fieldset{border:1px solid var(--line);border-radius:10px;margin:20px 0;padding:12px 18px}legend{font-size:11px;color:var(--green);font-weight:bold;padding:0 7px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.editor-add{display:flex;gap:10px;flex-wrap:wrap}.sticky-actions{position:sticky;bottom:-28px;background:#fff;padding:18px 0 10px;border-top:1px solid var(--line);margin-top:25px}.upload-zone{border:2px dashed #c6dfcf;background:#f5fbf7;border-radius:12px;padding:24px;text-align:center;font-size:32px;color:#35a86c}.upload-zone strong{display:block;font-size:14px}.upload-zone input{font-size:12px;background:white}.import-warning{font-size:12px;background:#fff9eb;color:#9d854b;padding:12px;border-radius:8px}blockquote{border-left:3px solid #b1d8bf;padding:10px 18px;margin:20px 0;color:#778b7e;background:#f5faf7;overflow-wrap:anywhere}.recording-review,.answer-summary{border:1px solid var(--line);border-radius:10px;padding:18px;margin:12px 0;font-size:12px}.recording-review>small{color:#94a199}.answer-summary p{margin:8px 0 0}.detail-record{margin-bottom:24px}.detail-record>h3{color:var(--green)}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:#254631;color:#fff;max-width:90vw;padding:14px 24px;border-radius:10px;box-shadow:0 5px 20px #0002;opacity:0;pointer-events:none;transition:.2s;z-index:20;font-size:13px}#toast.show{opacity:1;transform:translate(-50%,0)}.skip{position:fixed;left:15px;top:-100px;background:white;z-index:100;padding:10px}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.loading{text-align:center;padding:120px;color:#87a18f}[hidden]{display:none!important}
@media(min-width:1500px){main{padding-top:55px}.welcome-grid{margin-top:35px}}
@media(max-width:1050px){.header-inner{gap:30px}.top-nav{gap:18px}.account .text-button{font-size:10px}.welcome-grid{gap:40px}.welcome-copy h1{font-size:38px}.welcome-copy{min-height:650px}.student-home-grid{grid-template-columns:minmax(0,1fr) 245px}.book-cover{width:130px}.lesson-card{gap:22px;padding:23px}.reader-layout{grid-template-columns:minmax(0,1fr) 240px}.reader{padding:24px}.teacher-shell{grid-template-columns:200px minmax(0,1fr);gap:18px}.material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-bar{grid-template-columns:130px minmax(0,1fr) 50px}.sentence-navigation .button{padding:9px;font-size:11px}.english{font-size:25px}}
@media(max-width:760px){#app>header{height:auto;min-height:74px}.header-inner{padding:18px 20px;gap:14px;flex-wrap:wrap}.brand{font-size:25px}.brand img{width:30px;height:30px}.brand>span{font-size:15px}.top-nav{order:3;width:100%;flex-basis:100%;font-size:12px;gap:25px;border-top:1px solid #f1f4f2;padding-top:6px}.top-nav:has(>span):not(:has(.nav-home)){display:none}.top-nav .nav-home~span{display:none}.top-nav button{padding:8px 0}.account{margin-left:auto;gap:6px}.account .avatar{display:none}.account>span:not(.avatar){font-size:10px}.account .text-button{padding:6px 4px;font-size:10px}main{padding:26px 18px 40px}.page-heading{align-items:flex-start;margin-bottom:24px;gap:12px}.page-heading h1{font-size:27px;letter-spacing:-1.3px}.page-heading p{font-size:12px}.page-heading>.button{font-size:11px;padding:10px;min-height:40px}.eyebrow{font-size:9px;letter-spacing:.5px}.page-heading>.tag{font-size:9px;max-width:110px;text-align:center}#app>footer{margin:0 18px;padding:22px 0;gap:12px;flex-wrap:wrap}#app>footer span:last-child{display:none}#app>footer strong{font-size:12px}#app>footer span{font-size:10px}.welcome-grid{display:flex;flex-direction:column;gap:25px;margin:10px auto;max-width:480px}.welcome-copy{min-height:0;width:100%}.welcome-copy h1{font-size:35px;line-height:1.35;margin:15px 0}.welcome-copy>p{font-size:12px;margin:15px 0}.welcome-pills{gap:7px;font-size:10px}.welcome-pills span{padding:6px 9px}.paper-stack{display:none}.login-card{margin:0;padding:28px;width:100%}.login-card h2{font-size:24px}.student-home-grid{grid-template-columns:1fr}.student-home-grid>aside{display:none}.lesson-card{gap:18px;padding:20px}.book-cover{width:105px;min-height:180px;padding:15px 10px}.book-cover strong{font-size:22px}.book-cover small{font-size:7px}.book-cover>span{font-size:5px}.lesson-info h2{font-size:20px}.lesson-info p{font-size:10px;line-height:1.7}.lesson-info>.progress-row{margin:15px 0}.lesson-info .button{padding:10px 12px;font-size:11px;min-height:40px}.section-title h2{font-size:18px}.section-title>.muted{display:none}.card{border-radius:13px}.learning-tabs{gap:0;justify-content:space-between;margin-bottom:18px;position:sticky;top:0;background:var(--bg);z-index:4}.learning-tabs button{font-size:11px;padding:12px 3px;min-height:48px}.learning-tabs small{display:none}.compact h1{font-size:26px}.reader-layout{grid-template-columns:1fr;gap:16px}.reader{padding:20px;min-height:360px}.reader-layout>aside{display:grid;grid-template-columns:1fr;gap:16px}.sentence-words{margin-top:0}.reader-toolbar{padding-bottom:18px}.segmented button{font-size:11px;padding:7px 10px}.sentence-meta{margin:24px 0 18px}.english{font-size:24px;line-height:1.8}.translation{font-size:13px}.sentence-content{min-height:130px}.sentence-navigation{gap:7px;margin-top:20px;padding-top:18px}.sentence-navigation .button{font-size:10px;padding:9px;min-height:43px}.reading-guide{padding:20px}.reading-guide label{display:inline-block;width:calc(33.33% - 9px);vertical-align:top;margin-right:8px;font-size:10px}.reading-guide label:last-of-type{margin-right:0}.reading-guide select{font-size:10px;padding:7px 4px}.record-dock{bottom:8px;padding:14px;gap:10px;flex-wrap:wrap;margin-top:16px}.record-dock .mic-icon{width:32px;height:32px;font-size:22px}.record-status{flex-basis:calc(100% - 45px)}.record-status strong{font-size:13px}.record-status>span{font-size:10px}.record-dock>.button{flex:1;min-height:43px;font-size:12px}.word-meaning{font-size:15px}.word-cards{grid-template-columns:1fr 1fr;gap:10px}.wc-sections .word-cards{padding:11px 12px 15px}.wc{height:186px}.wc-front b{font-size:17px}.wc-back{padding:0 3px 10px 11px}.wc-back-top{padding:11px 24px 7px 0;margin-bottom:8px}.wc-back-top strong{font-size:14px}.card-guide{font-size:11px}.wc-head{padding:12px 14px;min-height:48px}.wc-head strong{font-size:13px}.wc-head small{font-size:10px}.wc-quiz{margin-bottom:20px}.wc-kind{font-size:11px;padding:7px 11px;min-height:40px}.wc-picked{max-height:96px}.wc-again .button{width:100%}.wc-prompt{font-size:17px}.wc-choices{grid-template-columns:1fr}.wc-choice{font-size:13px;padding:12px 13px;min-height:46px}.expel-list{grid-template-columns:1fr}.roll-card{padding:20px}.roll-search{margin-bottom:14px}.roll-search label,.roll-search label:has(select){flex-basis:100%}.roll-search .button{width:100%}.roll-table td:last-child{justify-content:flex-end}.expel-row{padding:10px 12px}.quiz{padding:22px}.quiz h3{font-size:18px}.result-banner{padding:24px}.result-banner h2{font-size:20px}.stats{gap:12px}.stats strong{font-size:28px}.stats strong small{font-size:10px}.stats span{font-size:10px}/* 휴대전화에서는 줄메뉴를 위로 눕혀 옆으로 넘겨 봅니다. */
.teacher-shell{grid-template-columns:1fr;gap:16px}
/* 격자 칸은 기본 너비가 min-content 라, 안에 안 줄어드는 것이 있으면 칸이 화면보다 넓어집니다.
   탭이 여섯 개가 되자 탭 줄이 화면을 밀어냈습니다. 칸은 줄게 두고 탭 줄만 옆으로 넘겨 봅니다. */
.teacher-shell>*{min-width:0}.class-tabs{min-width:0}
.side-menu{position:static;max-height:none;padding:10px;border-radius:12px}.side-group+.side-group{margin-top:10px;padding-top:10px}.side-head{padding:0 2px 6px}.side-list{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:2px}/* 좁은 화면에서는 줄메뉴가 옆으로 넘기는 띠가 됩니다. 폭은 줄이 들고, 단추는 그 안을 채웁니다. */
.side-row{flex:none;min-width:190px}
.side-item{min-width:0;width:auto;padding:9px 10px;font-size:11px}.side-note{display:none}.class-title{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px}.class-title h1{font-size:23px}.class-title p{font-size:11px}.class-code{gap:8px;flex-wrap:wrap}.class-code strong{font-size:20px;letter-spacing:2px}.class-code small{font-size:9px}.class-tabs{gap:2px;padding:4px;margin-bottom:14px}.class-tab{min-width:64px;min-height:44px;font-size:12px;padding:0 6px}.assigned-material{padding:20px;margin-bottom:16px}.assigned-material h2{font-size:19px}.stage-chip{font-size:11px;padding:5px 9px}.student-tools{gap:6px}.student-tools .button{font-size:11px;padding:7px 10px}.student-tools small{flex-basis:100%;margin:0}.stage-bar{grid-template-columns:1fr auto;gap:8px}.stage-bar .progress-track{grid-column:1/-1;order:3}.stage-bar small{margin:0;order:4}.item-row{flex-wrap:wrap;gap:8px}.item-row p{flex-basis:100%;font-size:12px}.item-rate{margin-left:auto;display:flex;align-items:baseline;gap:6px}.note{padding:12px 14px}.note p{font-size:12px}.class-settings{grid-template-columns:1fr}.entry-divider{margin:20px 0 2px}.join-form{padding:2px 13px 13px}.admission,.student-table,.assignment-card{padding:20px;margin-bottom:16px}.request-row{gap:8px}.request-actions{gap:5px}.request-actions .button{padding:6px 10px;font-size:11px}.table-wrap{overflow:visible}table,tbody,tr,td{display:block;width:100%}thead{display:none}tbody tr{padding:13px 0;border-top:1px solid var(--line)}td{border:0;padding:6px 0;display:flex;align-items:center;justify-content:space-between;gap:15px}td:before{content:attr(data-label);color:#9ba69e;font-size:11px;margin-right:auto}td:first-child{flex-wrap:wrap}td:first-child:before{display:none}td:first-child small{padding:0}.student-table td.pick-col{justify-content:flex-start;gap:9px}.student-table td.pick-col:before{display:block;margin:0}
/* 학생 칸에는 이름·아이디와 이름변경·비번설정 단추가 함께 들어가 좁은 화면에서는 위아래로 쌓습니다. */
.student-table td[data-label="학생"]{flex-direction:column;align-items:flex-start;gap:5px}.student-table td[data-label="학생"]:before{display:none}.student-table td[data-label="학생"] small{padding:0}.name-actions{gap:6px;margin-left:0}.text-button.tiny{min-height:32px;padding:5px 8px;font-size:11px}td .progress-row{width:130px}td.empty{display:block}.student-table .text-button{min-height:40px}.assignment-card .inline-form select{min-width:120px}.assignment-card .button{font-size:11px;padding:10px 13px}.material-grid{grid-template-columns:1fr;gap:14px}.library-note{padding:20px;gap:15px}.library-note p{font-size:11px}.library-note strong{font-size:13px}dialog{padding:22px;width:calc(100% - 24px);max-height:90vh}.modal-heading h2{font-size:19px}.two-fields{gap:10px}.enroll-search{flex-direction:column;align-items:stretch;gap:4px}.enroll-search .button{min-height:42px}.enroll-results{max-height:200px}.enroll-row{padding:10px}.enroll-row small{font-size:10px;max-width:90px}.enroll-picked{padding:12px}.enroll-mode .radio strong{font-size:12px}.card-tags .tag{font-size:9px}.center-card{padding:32px 24px;margin:40px auto}.center-card h1{font-size:22px}.sticky-actions{bottom:-22px}.editor-add .button{font-size:11px;padding:9px}.sound-meter{width:80px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.preview-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;background:#eaf7ef;border:1px solid #c3e6d1;border-radius:12px;margin-bottom:22px;color:#227d4b}.preview-banner strong{display:block;font-size:14px}.preview-banner span{display:block;font-size:12px;margin-top:4px;color:#688774}.course-pages{margin-bottom:12px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px 22px}.page-buttons{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}.page-button{min-width:160px;max-width:260px;flex-shrink:0;background:#f8faf9;border:1px solid #e4ece7;border-radius:8px;padding:12px 14px;text-align:left;color:#718278;min-height:66px}.page-button span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700}.page-button small{display:block;font-size:10px;margin-top:5px}.page-button.active{background:#eaf8ef;border-color:#5bbf85;color:#07894e}.page-caption{font-size:11px;color:#7b9183;margin:10px 0 0}.page-picker{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px;margin-bottom:25px;padding:8px}.page-pick{display:flex;align-items:center;gap:12px;padding:10px;margin:0;border-bottom:1px solid #f0f4f1;font-weight:400;cursor:pointer}.page-pick:has(input:checked){background:#edf9f2}.page-pick input{width:18px;min-height:18px;margin:0;accent-color:var(--green);flex-shrink:0}.page-pick small{display:block;color:#99a59d;margin-top:3px;font-size:10px}.selected-page{padding:16px;border:1px solid var(--line);border-radius:10px;margin:12px 0;background:#fbfdfc}.selected-page-title{display:flex;gap:12px;justify-content:space-between;align-items:center}.selected-page-title strong{font-size:12px}.selected-page-title>div{display:flex;gap:6px;flex-shrink:0}.selected-page .two-fields label{margin:10px 0 0}.lesson-actions{display:flex;gap:8px;flex-wrap:wrap}.assigned-preview{display:flex;gap:15px;align-items:center;justify-content:space-between;padding:18px 0;border-top:1px solid var(--line)}.assigned-preview small{display:block;color:#99a59d;margin-top:6px}.assigned-preview .tag{margin-left:8px;vertical-align:middle}.assigned-buttons{display:flex;gap:8px;align-items:center;flex-shrink:0}.course-pages .section-title{margin-bottom:12px}
@media(max-width:760px){.preview-banner{padding:15px;align-items:flex-start;flex-direction:column;gap:10px}.preview-banner span{font-size:11px}.course-pages{padding:15px}.page-button{min-width:145px;max-width:200px;padding:10px}.page-caption{overflow-wrap:anywhere}.page-picker{max-height:230px}.selected-page-title{align-items:flex-start}.selected-page-title .button{min-height:42px}.page-pick{padding:12px 8px}.assigned-preview{flex-wrap:wrap}.assigned-buttons{width:100%}.assigned-buttons .button{flex:1}.lesson-actions .button{flex:1}}

/* 분석본 · 토큰마다 성분 태그(위) / 영어(가운데) / 직독직해(아래) 세 줄로 쌓습니다. */
.reader-sentence{overflow-wrap:anywhere}
.analysis-card{--afs:1}
.analysis-body{display:flex;align-items:flex-start;gap:14px}
/* 문장 번호 뱃지 */
.sentence-num{flex-shrink:0;margin-top:calc(11px * var(--afs));min-width:34px;padding:4px 9px;border-radius:8px;background:#2f6fd0;color:#fff;font-size:13px;font-weight:800;letter-spacing:.5px;text-align:center}
.english-area{position:relative;flex:1;min-width:0}
.english-area[data-arrows]{padding-top:26px}
.english-sentence{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:calc(7px * var(--afs));row-gap:calc(14px * var(--afs))}
/* 긴 덩어리가 통째로 다음 줄로 밀려 앞줄이 비지 않도록, 덩어리 상자는 줄바꿈에 끼지 않습니다. */
.chunk-unit{display:contents}
.chunk-unit .word-text{transition:background .18s,box-shadow .18s}
.chunk-unit.speaking .word-text{background:#eafaf0;box-shadow:0 0 0 3px #eafaf0}
.word-token{position:relative;display:inline-flex;flex-direction:column;align-items:center;line-height:1.25}
/* 화면에는 안 보이지만 글자를 복사하거나 소리로 들을 때 단어를 띄어 주는 공백입니다. */
.tok-space{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:pre}
/* 주절 성분은 빨강, 종속절 성분(S′·V′)은 파랑입니다. */
.tok-tag{font-size:calc(11px * var(--afs));line-height:1.2;min-height:calc(14px * var(--afs));font-weight:700;letter-spacing:.3px;color:#dc2626}
.tok-tag.sub{color:#2563eb}
.word-text{font-size:calc(20px * var(--afs));font-weight:700;color:#1f2937;border-radius:3px;padding:0 2px}
.chunk-text{font-size:calc(11px * var(--afs));line-height:1.2;min-height:calc(14px * var(--afs));color:#6b7280;text-align:center;font-weight:500}
.chunk-divider{display:inline-flex;flex-direction:column;align-items:center;color:#9ca3af;font-size:calc(22px * var(--afs));line-height:1.25;font-weight:400}
.chunk-divider::before{content:'';display:block;height:calc(14px * var(--afs))}
.chunk-divider::after{content:'';display:block;height:calc(14px * var(--afs))}
.hl-grammar{background:#ffe8a0}.hl-vocab{background:#fbcfe8}.hl-blank{background:#bae6fd}.hl-arrow{background:#bbf7d0}
.reader-sentence .word-token.saying .word-text{background:var(--green-dark);color:#fff}
.arrow-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.arrow-line{fill:none;stroke:#16a34a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.arrow-line.cross{stroke:#047857}
.arrow-line.alt{stroke:#dc2626}
.arrow-line.dot{fill:#047857;stroke:none}
.arrow-line.alt.dot{fill:#dc2626}
/* 이디엄·구동사 밑줄. 워크북 분석본 PDF 와 같은 파란 줄이며, 이어지는 낱말은 사이 간격까지 한 줄로 잇습니다. */
.idiom-ul .word-text{position:relative}
.idiom-ul .word-text::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#3b82f6;pointer-events:none}
.idiom-join .word-text::after{right:calc(-7px * var(--afs))}
.view-english .idiom-ul .word-text::after,.view-translation .idiom-ul .word-text::after{display:none}
/* 화살표가 지날 자리를 줄 사이에 둡니다. */
.english-area[data-arrows] .english-sentence{row-gap:calc(22px * var(--afs))}
/* 해석 · 문법 포인트 박스 */
/* 번호 기둥. 번호 아래에 문장 역할(주제문은 빨강)과 문장삽입 예상 표시가 세로로 섭니다. */
.num-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.sentence-num.topic{background:#ef4444}
.sentence-role{font-size:10px;font-weight:700;color:#64748b;text-align:center;white-space:nowrap}
.sentence-role.topic{color:#dc2626}
.insert-mark{font-size:9px;font-weight:800;color:#1d4ed8;text-align:center;line-height:1.3}
.analysis-note{margin:16px 0 0 48px;padding:12px 16px;border-radius:8px;font-size:14px;line-height:1.75;color:#374151}
.analysis-note b{display:block;margin-bottom:5px;font-size:11px;font-weight:800;letter-spacing:.6px}
.analysis-note p{margin:0;word-break:keep-all}
.analysis-note ol{margin:0;padding-left:19px}
.analysis-note li{margin:3px 0;word-break:keep-all}
.as-korean{background:#f4f8fd;border-left:3px solid #2f6fd0}
.as-korean b{color:#2f6fd0}
.as-grammar{background:#fff8e7;border-left:3px solid #d4a843;font-size:13px}
.as-grammar b{color:#a97614}
/* 워크북 대의파악 포인트. 분석본 PDF 와 같은 색 계열입니다. */
.as-point{background:#f3f4f6;border-left:3px solid #9ca3af;font-size:13px}
.as-point b{color:#4b5563}
.as-vocab{background:#fce7f3;border-left:3px solid #ec4899;font-size:13px}
.as-vocab b{color:#9d174d}
.as-blank{background:#e0f2fe;border-left:3px solid #0ea5e9;font-size:13px}
.as-blank b{color:#0c4a6e}
/* 한줄해석·영문만 보기에서는 성분 표시를 감추고 글자를 키웁니다. */
.view-english .tok-tag,.view-english .chunk-text,.view-translation .tok-tag,.view-translation .chunk-text,
.view-english .chunk-divider::before,.view-english .chunk-divider::after,
.view-translation .chunk-divider::before,.view-translation .chunk-divider::after,
.view-english .sentence-num,.view-translation .sentence-num,
.view-english .arrow-overlay,.view-translation .arrow-overlay{display:none}
.view-english .word-text,.view-translation .word-text{font-size:calc(27px * var(--afs));font-weight:500;background:none}
.view-english .english-area[data-arrows],.view-translation .english-area[data-arrows]{padding-top:0}
.view-english .analysis-note,.view-translation .analysis-note{margin-left:0}
.toolbar-tools{display:flex;align-items:center;gap:7px}
.toolbar-tools .muted{font-size:11px}
.icon-button{border:1px solid #dfe6e1;background:#fff;border-radius:7px;width:34px;height:34px;font-size:11px;color:#6b7a71;padding:0}
.icon-button.big{font-size:17px}

/* ── 책읽기(ebook). 지문이 아래로 계속 이어지는 화면 ── */
.book-reader{padding:28px 34px}
.book-reader .reader-toolbar{position:sticky;top:0;background:#fff;z-index:5;padding-top:6px}
.book-guide{margin:14px 0 2px}
.book-title{display:flex;align-items:center;gap:10px;margin:34px 0 6px;padding:10px 14px;background:#4a6fa5;color:#fff;border-radius:9px;font-size:14px;font-weight:800}
.book-title span{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;background:#ffffff2b;border-radius:7px;font-size:12px}
.book-section:first-child .book-title{margin-top:18px}
/* [배경지식]. 분석본 PDF 의 초록 상자와 같습니다. */
.book-intro{margin:10px 0 6px;padding:13px 16px;background:#e8f5e9;border:2px solid #81c784;border-radius:12px;font-size:13px;line-height:1.8;color:#1b5e20}
.book-intro b{display:block;margin-bottom:4px;font-size:12px;color:#2e7d32}
.book-intro p{margin:0;word-break:keep-all}
.book-sent{padding:16px 0 14px;border-bottom:1px solid #eef2ee}
/* 번호가 누르는 자리입니다. 한줄해석·영문만 보기에서도 번호는 남겨 둡니다. */
.book-sent .sentence-num{cursor:pointer;user-select:none;transition:filter .12s,box-shadow .12s}
.book-sent .sentence-num:hover{filter:brightness(1.12);box-shadow:0 0 0 3px #2f6fd033}
.book-sent.view-translation .sentence-num,.book-sent.view-english .sentence-num{display:block}
.book-sent .sentence-num.thinking{animation:book-think 1s ease-in-out infinite}
@keyframes book-think{50%{opacity:.45}}
.book-sent .word-token{cursor:pointer}
.book-sent .word-token:hover .word-text{outline:1px dashed #b7c4bc;outline-offset:2px;border-radius:4px}
.book-sent.saying-sent{background:#f8fcf9}
.analysis-note.as-ai{background:#f4f1fc;border-left:3px solid #7c5cd6}
.analysis-note.as-ai b{color:#5b3fb8}
.book-ai-on{background:#f4f1fc;border-radius:8px;color:#5b3fb8;font-weight:800}
.book-edge{display:flex;justify-content:center;padding:12px 0}
.book-edge.bottom{min-height:56px;align-items:center}
/* 한줄해석(책읽기). 워크북 PDF 처럼 번호·영문·해석 3열 표 모양으로, 행마다 점선으로 나눕니다.
   영문은 줄 사이를 넉넉히 벌려 펜으로 끼워 쓸 자리를 두고, 문장 아래에 그 문장의 단어가 작게 붙습니다. */
.m1-row{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,30%);gap:4px 10px;align-items:start;padding:10px 0 14px;border-bottom:1px dotted #cfd5de}
.m1-num{display:flex;justify-content:center;padding-top:2px}
.m1-text{line-height:2.6}
.m1-kor{color:#333;font-size:.82em;line-height:1.75;word-break:keep-all}
/* 문장별 단어: 파란 영단어 + 검정 뜻의 작은 가로 목록(워크북 PDF 의 m1-words). */
.m1-words{margin-top:6px;font-size:.74em;line-height:1.7;color:#111827}
.m1-words .m1-word{margin-right:12px;white-space:nowrap;display:inline-block}
.m1-words .m1-word b{color:#1e3a8a;font-weight:600}
.m1-row .analysis-note.as-ai{grid-column:1/-1}
@media(max-width:640px){.m1-row{grid-template-columns:40px minmax(0,1fr)}.m1-kor{grid-column:2;padding-top:2px;border-top:1px dashed #e3e7ee}.m1-text{line-height:2.3}}
/* 따라쓰기. 점선 윤곽 글자를 펜으로 덧쓰는 보기입니다. */
.trace-sent{padding:14px 0 10px}
.trace-sent .sentence-num{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:7px;background:#eef2ee;font-size:12px;font-weight:700;color:#4b5563;margin-bottom:4px}
.trace-en{min-height:30px}
.trace-svg{display:block;max-width:100%}
.trace-svg text{fill:none;stroke:#8d9aad;stroke-width:.9;stroke-dasharray:2.4 1.9;stroke-linejoin:round}
.trace-svg .trace-base{stroke:#dbe2ec;stroke-width:1;stroke-dasharray:4 4}
.trace-kr{margin:4px 0 0;font-size:12.5px;color:#6b7280;word-break:keep-all}
.trace-voice{font-weight:700}
/* 지문 끝의 문제 단추와, 문제 화면 위의 돌아가기 줄. */
.book-quiz-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px;padding:10px 12px;background:#f6f9f6;border:1px dashed #c9d7cc;border-radius:12px}
.book-quiz-row .muted{font-size:12.5px}
.book-quiz-row .button small{font-weight:400;color:#6b7280;margin-left:4px}
.book-return-row{display:flex;align-items:center;gap:10px;margin:0 0 12px}
/* 선생님이 보는 따라쓰기(학생 획). 문장마다 영문·해석 아래에 쓴 글씨를 그대로 그립니다. */
.trace-check{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.trace-check .tc-en{margin:2px 0;font-weight:600}
.trace-check .tc-kr{margin:0 0 6px;font-size:12.5px;color:#6b7280}
.trace-check .tc-none{font-size:12px;margin:4px 0}
.tc-svg{display:block;background:#fbfcfd;border:1px dashed #e2e8f0;border-radius:8px}
.tc-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tc-svg .ps-hand-hl{opacity:.38;mix-blend-mode:multiply}
.dict-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.dict-actions .button{flex:1;min-width:130px;text-align:center;text-decoration:none;display:inline-grid;place-items:center}
@media(max-width:760px){.book-reader{padding:18px 14px}.book-reader .reader-toolbar{flex-wrap:wrap;gap:8px}.book-title{font-size:12px;margin:26px 0 4px}}

/* 읽어 주기 조작 막대 */
.play-dock{position:sticky;bottom:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid #c8e2d2;border-radius:14px;margin:24px 0 0;padding:16px 20px;box-shadow:0 5px 30px #1c55331a;z-index:3}
.play-transport{display:flex;gap:8px;flex-shrink:0}
.round-button{width:46px;height:46px;border-radius:50%;border:1px solid #dfe6e1;background:#fff;font-size:15px;display:inline-grid;place-items:center;color:#4e6157;padding:0}
.round-button.primary{width:54px;height:54px;background:var(--green);border-color:var(--green);color:#fff;font-size:19px}
.round-button.on{background:var(--mint);border-color:#8fd3ae}
.play-dock .record-status{flex:1;min-width:150px}
.dock-toggle{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;white-space:nowrap}
.dock-toggle input{width:18px;min-height:18px;margin:0;accent-color:var(--green)}

/* 단어 게임 */
.game-menu{margin-bottom:26px}
/* 단어 숙제 차례표. 낸 놀이를 위에서 아래로 차례대로 늘어놓습니다. */
.hw-head{margin:28px 0 10px}
.hw-bar{height:8px;border-radius:99px;background:#e7efe9;overflow:hidden;margin-bottom:14px}
.hw-bar i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .3s}
.hw-games{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hw-game{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 16px}
.hw-game.next{border-color:#8fd3ae;background:#f4fbf7;box-shadow:0 1px 3px rgba(26,122,70,.08)}
.hw-game.done{background:#fafcfb}
.hw-game.locked{opacity:.55}
.hw-no{font-size:12px;font-weight:800;color:#b3bdb6;letter-spacing:.04em}
.hw-game .tile-icon{font-size:22px;line-height:1}
.hw-label{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.hw-label strong{font-size:14px}
.hw-label small{color:#8b958e;font-size:11px;line-height:1.5}
.hw-game em{font-style:normal;font-size:11px;font-weight:700;white-space:nowrap}
.hw-ok{color:var(--green-dark)}
.hw-todo{color:#a8b2ab}
.hw-lack{color:#bfa23c}
.hw-lack-why{font-size:11px;color:#a8b2ab;white-space:nowrap}
.hw-game .button{padding:7px 14px;font-size:12px;white-space:nowrap}
.hw-done{margin-top:12px}
.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.game-tile{display:flex;flex-direction:column;gap:4px;min-height:122px;border:1px solid var(--line);border-radius:12px;background:#fbfdfc;padding:16px 14px;text-align:left;color:var(--ink)}
.game-tile:hover:not(:disabled){border-color:#8fd3ae;background:#f4fbf7}
.game-tile.locked{opacity:.5}
.tile-icon{font-size:24px}
.game-tile strong{font-size:14px}
.game-tile small{flex:1;color:#8b958e;font-size:11px;line-height:1.55}
.game-tile em{font-style:normal;font-size:10px;font-weight:700;color:var(--green-dark)}
.game{padding:24px}
.game-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.game-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.game-icon{font-size:25px}
.game-title strong{display:block;font-size:15px}
.game-title small{color:#8b958e;font-size:11px}
.game-score{text-align:right;flex-shrink:0}
.game-score strong{font-size:22px;color:var(--green-dark)}
.game-score strong small{font-size:11px;font-weight:400;margin-left:2px;color:#95a09a}
.combo{display:block;min-height:14px;font-size:10px;font-weight:700;color:#c98a2f}
.game-progress{margin-bottom:22px}
.flash-card{width:100%;max-width:460px;margin:0 auto;aspect-ratio:3/2;perspective:1200px;cursor:pointer}
.flash-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s}
.flash-card.flipped .flash-inner{transform:rotateY(180deg)}
.flash-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;overflow:auto;backface-visibility:hidden;border:1px solid #cfe6da;border-radius:16px;padding:22px;text-align:center}
.flash-face.front{background:linear-gradient(150deg,#fff,#f1fbf6)}
.flash-face.front h2{margin:0;font-size:36px;letter-spacing:-1px;overflow-wrap:anywhere}
.flash-face.front small{color:#9aa69f}
.flash-face.back{transform:rotateY(180deg);background:#fff}
.flash-face.back h3{margin:0;font-size:24px;color:var(--green-dark)}
.flash-example{margin:0;font-size:13px;color:#6f7d75}
.flash-tip{margin:0;background:var(--mint);color:#5d7f68;padding:8px 12px;border-radius:8px;font-size:11px}
.game-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.game-actions .button{min-width:132px}
.game-prompt{text-align:center;margin:10px 0 22px}
.game-question{margin:0;font-size:20px;font-weight:600;line-height:1.7;overflow-wrap:anywhere}
.game-question.big-en{font-size:38px;font-weight:500;letter-spacing:-1px}
.game-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game-choice{display:flex;align-items:center;gap:10px;min-height:56px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:13px 16px;text-align:left;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.game-choice:hover:not(:disabled){border-color:#8fd3ae;background:#f7fcf9}
.game-choice:disabled{opacity:1;cursor:default}
.game-choice:disabled:not(.correct):not(.wrong){opacity:.4}
.game-choice.correct{border-color:#42bd83;background:#eafaf0;color:#1c8354;font-weight:700}
.game-choice.wrong{border-color:#e0a0a0;background:#fdf1f1;color:#ac4a4a}
.spell-hint{margin:12px 0 0;font-family:ui-monospace,Consolas,monospace;font-size:21px;letter-spacing:3px;color:#8fa396}
.spell-form{display:flex;gap:10px;max-width:420px;margin:0 auto;align-items:center}
.spell-form input{margin:0;text-align:center;font-size:20px;letter-spacing:1px}
.game-result{text-align:center}
.rank-badge{width:80px;height:80px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:37px;font-weight:900;background:var(--mint);color:var(--green-dark)}
.rank-S{background:linear-gradient(140deg,#ffe9a8,#ffd166);color:#8a6212}
.rank-A{background:#dff3e6;color:#1c8354}
.rank-B{background:#e6eff9;color:#3c6fa6}
.rank-C{background:#f1f3f2;color:#7b857e}
.game-result .stats{margin:22px 0 6px}

@media(max-width:1050px){.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.word-text{font-size:calc(21px * var(--afs))}}
@media(max-width:760px){
.analysis-body{gap:9px}
.sentence-num{min-width:28px;padding:3px 7px;font-size:11px;margin-top:calc(10px * var(--afs))}
.english-sentence{column-gap:calc(7px * var(--afs));row-gap:calc(13px * var(--afs))}
.word-text{font-size:calc(19px * var(--afs))}
.view-english .word-text,.view-translation .word-text{font-size:calc(23px * var(--afs))}
.chunk-text{font-size:calc(10px * var(--afs));min-height:calc(13px * var(--afs))}
.chunk-divider{font-size:calc(19px * var(--afs))}
.chunk-divider::before{height:calc(13px * var(--afs))}
.chunk-divider::after{height:calc(13px * var(--afs))}
.english-area[data-arrows]{padding-top:22px}
.analysis-note{margin:13px 0 0 0;padding:11px 13px;font-size:13px;line-height:1.7}
.as-grammar{font-size:12px}
.analysis-note ol{padding-left:17px}
.toolbar-tools{gap:5px}.icon-button{width:32px;height:32px}
.reader-toolbar{gap:10px;flex-wrap:wrap}
.play-dock{bottom:8px;padding:13px;gap:10px;margin-top:16px}
.play-transport{width:100%;justify-content:space-between;gap:6px}
.round-button{width:44px;height:44px}
.round-button.primary{width:50px;height:50px;font-size:18px}
.play-dock .record-status{flex-basis:100%;min-width:0}
.play-dock .record-status strong{font-size:13px}
.play-dock .record-status>span{font-size:10px}
.dock-toggle{margin-left:auto}
.game-grid{grid-template-columns:1fr 1fr;gap:10px}
.game-tile{min-height:106px;padding:13px 11px}
.game-tile strong{font-size:13px}.game-tile small{font-size:10px}.tile-icon{font-size:21px}
/* 좁은 화면에서는 숙제 한 줄을 두 줄로 접습니다. 제목·상태·단추를 한 줄에 두면 넘칩니다. */
.hw-game{flex-wrap:wrap;gap:8px 10px;padding:12px 13px}
.hw-label{flex-basis:calc(100% - 70px)}
.hw-game em,.hw-lack-why{order:3}
.hw-game .button{order:4;margin-left:auto}
.game{padding:18px}
.game-top{gap:10px}.game-icon{font-size:21px}.game-score strong{font-size:19px}
.game-question{font-size:17px}
.game-question.big-en{font-size:28px}
.game-choices{grid-template-columns:1fr}
.game-choice{min-height:52px;font-size:13px;padding:12px 14px}
.flash-card{aspect-ratio:4/3;max-width:none}
.flash-face{padding:18px}
.flash-face.front h2{font-size:29px}
.flash-face.back h3{font-size:20px}
.flash-example{font-size:12px}
.game-actions{gap:8px}
.game-actions .button{flex:1;min-width:0;font-size:12px;padding:11px 10px}
.spell-form input{font-size:17px}
.spell-hint{font-size:18px;letter-spacing:2px}
.rank-badge{width:66px;height:66px;font-size:29px}
}


/* ==== 문제 유형 ==== */
.quiz .section-title{align-items:flex-start}
.quiz-progress{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin:0 0 12px}
.quiz-progress i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .3s}
.quiz-list{display:grid;gap:18px}
.quiz-item{display:flex;gap:12px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff}
.quiz-item.is-right{border-color:#8fd9b2;background:#fbfffd}
.quiz-item.is-wrong{border-color:#f0cf9c;background:#fffdf8}
.quiz-number{flex:0 0 26px;height:26px;border-radius:99px;background:var(--mint);color:var(--green-dark);
  display:grid;place-items:center;font-size:12px;font-weight:700}
.quiz-body{flex:1;min-width:0}
.quiz-ask{font-size:15px;font-weight:600;line-height:1.75;margin:0 0 12px;overflow-wrap:anywhere}
.quiz-sentence{font-size:16px;line-height:2.1;margin:0 0 12px;overflow-wrap:anywhere}
.quiz-passage{font-size:14px;line-height:2;padding:14px;border-radius:10px;background:var(--bg);
  margin:0 0 14px;overflow-wrap:anywhere}
.given-box{padding:12px 14px;border-radius:10px;border:1px dashed #bcd9c9;background:var(--mint);margin:0 0 12px}
.given-box p{margin:4px 0 0;font-size:14px;line-height:1.8}

/* 양자택일 */
.pair-slot{display:inline-flex;align-items:center;gap:2px;margin:0 4px;padding:2px 4px;
  vertical-align:middle;border-radius:9px;background:#f2f7f4}
.pair-bracket{font-style:normal;font-size:19px;font-weight:700;color:#7fb79a;line-height:1}
.pair-or{font-style:normal;font-size:13px;color:#a3b0a8;padding:0 1px}
.pair-slot:has(.pair-option[aria-pressed=true]){background:var(--mint)}
.pair-slot:has(.pair-option[aria-pressed=true]) .pair-bracket{color:var(--green)}
.pair-option{padding:5px 11px;border:1px solid #d7e0da;border-radius:8px;background:#fff;
  font-size:14px;min-height:36px;color:#4a564e}
.pair-option[aria-pressed=true]{border-color:var(--green);background:var(--mint);color:var(--green-dark);font-weight:700}
.pair-option.right{border-color:var(--green);background:#dff5e8;color:var(--green-dark);font-weight:700}
.pair-option.wrong{border-color:#e2a0a0;background:#fdeeee;color:#a75252;text-decoration:line-through}

/* 보기 고르기 · 밑줄 어법 */
.pick-row{display:flex;flex-wrap:wrap;gap:8px}
.pick-row.stack{flex-direction:column}
.pick-chip{display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid #d7e0da;
  border-radius:9px;background:#fff;font-size:14px;min-height:42px;text-align:left;line-height:1.6;color:#3f4a44}
.pick-row.tight .pick-chip{min-width:52px;justify-content:center;font-size:17px}
.pick-chip b{color:#9aa49d;font-size:13px;flex:0 0 auto}
.pick-chip[aria-pressed=true]{border-color:var(--green);background:var(--mint);color:var(--green-dark);font-weight:600}
.pick-chip[aria-pressed=true] b{color:var(--green-dark)}
.pick-chip.right{border-color:var(--green);background:#dff5e8;color:var(--green-dark)}
.pick-chip.wrong{border-color:#e2a0a0;background:#fdeeee;color:#a75252}
.ul-point{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;padding:0 1px}
.ul-point b{color:var(--green-dark);font-size:13px}
.ul-point.on{background:#d8f0e3;border-radius:4px}

/* 문단 배열 */
.arrange-picked{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;padding:12px;margin:0 0 12px;
  border:1px dashed #cfdad3;border-radius:10px;min-height:52px;background:var(--bg)}
.arrange-picked:not(.filled)::before{content:attr(data-empty);color:var(--muted);font-size:13px}
.arrange-picked li{display:grid;place-items:center;min-width:44px;min-height:32px;padding:0 10px;
  background:var(--green);color:#fff;border-radius:8px;font-weight:700;font-size:14px}
.arrange-picked li+li::before{content:'';position:absolute}
.arrange-parts{display:grid;gap:8px}
.arrange-part{display:flex;gap:10px;padding:12px 14px;border:1px solid #d7e0da;border-radius:10px;
  background:#fff;text-align:left;line-height:1.8;font-size:14px;color:#3f4a44}
.arrange-part b{flex:0 0 32px;color:var(--green-dark);font-weight:700}
.arrange-part span{min-width:0;overflow-wrap:anywhere}
.arrange-part[aria-pressed=true]{border-color:var(--green);background:var(--mint)}
.arrange-part.right{border-color:var(--green)}
.arrange-part.wrong{border-color:#e2a0a0}

/* 어휘 선택 · 낱말마다 O 와 X 가운데 하나를 누릅니다.
   O 를 초록, X 를 붉은 쪽으로 두어 눌린 것이 한눈에 보이게 합니다. */
.ox-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ox-row{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border:1px solid #d7e0da;border-radius:10px;background:#fff}
.ox-word{flex:1;min-width:0;font-size:15px;font-weight:600;color:#36413b;overflow-wrap:anywhere}
.ox-picks{display:flex;gap:6px;flex-shrink:0}
.ox-pick{width:46px;min-height:44px;border:1px solid #d7e0da;border-radius:9px;background:#fff;
  font-size:17px;font-weight:800;color:#9aa49d}
.ox-o[aria-pressed=true]{border-color:var(--green);background:var(--green);color:#fff}
.ox-x[aria-pressed=true]{border-color:#d98b8b;background:#d98b8b;color:#fff}
.ox-pick.right{box-shadow:inset 0 0 0 2px var(--green)}
.ox-pick.wrong{box-shadow:inset 0 0 0 2px #d06a6a}
.quiz-item.locked .ox-pick:not([aria-pressed=true]):not(.right){opacity:.45}

/* 영어 순서 배열 · 조각을 차례대로 눌러 문장을 세웁니다. */
.chunk-listen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chunk-hear{border:1px solid #c7ddd0;border-radius:99px;background:#f2faf5;color:var(--green-dark);
  padding:8px 14px;font-size:12px;font-weight:700;min-height:40px}
.chunk-hear.stop{border-color:#e0e6e2;background:#fff;color:#8b958e}
.chunk-hear.playing{background:var(--green);border-color:var(--green);color:#fff}
.chunk-hear:disabled{opacity:.55}
.chunk-built{margin:0 0 12px;padding:14px;min-height:58px;border:1px dashed #cfdad3;border-radius:10px;
  background:var(--bg);font-size:16px;line-height:1.8;color:#2f3a34;overflow-wrap:anywhere}
.chunk-built:not(.filled)::before{content:attr(data-empty);color:var(--muted);font-size:13px}
.chunk-parts{display:flex;flex-wrap:wrap;gap:8px}
.chunk-part{border:1px solid #d7e0da;border-radius:9px;background:#fff;padding:10px 13px;
  font-size:15px;line-height:1.5;color:#3f4a44;min-height:44px;overflow-wrap:anywhere;max-width:100%}
/* 고른 조각은 위 문장으로 옮겨 갑니다. 아래에 그대로 두면 어디까지 썼는지 알 수 없습니다. */
.chunk-part[aria-pressed=true]{border-style:dashed;background:#f4f7f5;color:#b3bdb6}
.quiz-item.locked .chunk-part{opacity:.6}

/* 빈칸 */
.blank-row{display:flex;flex-wrap:wrap;gap:8px}
.blank-input{flex:1 1 160px;min-width:120px;min-height:44px;padding:10px 12px;border:1px solid #d7e0da;border-radius:9px}

/* 채점 결과 */
.quiz-mark{margin-top:14px;padding:13px 15px;border-radius:10px;font-size:13px;line-height:1.8}
.quiz-mark p{margin:6px 0 0;font-size:13px}
.quiz-mark span{display:block;margin-top:4px;font-weight:700}
.quiz-mark.right{background:#ebf8ef;color:#30845b}
.quiz-mark.wrong{background:#fff7e9;color:#9c7b3c}
.exam-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.exam-result{margin-top:20px;padding:18px;border-radius:12px;text-align:center}
.exam-result strong{display:block;font-size:20px;margin-bottom:6px}
.exam-result p{margin:0 0 12px;font-size:13px}
.exam-result.all-right{background:#ebf8ef;color:#2c7a53}
.exam-result.has-wrong{background:#fff7e9;color:#8f7136}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
.stage-intro{margin-bottom:18px}
.stage-intro .eyebrow{color:var(--green)}
.stage-intro h2{margin-bottom:6px}
.stage-intro p{margin:0;color:var(--muted)}

/* 단어의 유의어·반의어 */
.word-relations{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;margin:8px 0 10px;font-size:12px}
.word-relations dt{font-weight:700;color:var(--muted);white-space:nowrap}
.word-relations dt.rel-ant{color:#a4755c}
.word-relations dd{margin:0;display:flex;flex-wrap:wrap;gap:4px}
.word-relations dd span{padding:2px 7px;border-radius:99px;background:var(--mint);color:var(--green-dark)}
.word-relations dt.rel-ant+dd span{background:#fdf2ec;color:#a4755c}

/* 선생님이 고르는 시험 항목 */
/* 낼 항목은 열 개라 한 줄씩 쌓으면 너무 길어집니다. 자리를 보아 두세 열로 늘어놓습니다.
   .inline-form 안의 칸이라 width 를 줘야 제 줄을 다 씁니다. */
.stage-picks{width:100%;border:1px solid var(--line);border-radius:12px;padding:14px;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2px 18px}
.stage-picks legend,.stage-picks>.subtle,.stage-picks>.echo-pass{grid-column:1/-1}
.stage-picks legend{padding:0 6px;font-size:12px;font-weight:700;color:var(--muted)}
.stage-pick{display:flex;align-items:center;gap:9px;padding:7px 4px;min-height:40px;font-size:13px;cursor:pointer}
.stage-pick input{width:17px;min-height:17px;margin:0;accent-color:var(--green)}
.stage-pick b{color:var(--muted);font-weight:700;margin-right:3px}
/* 숙제 세부 선택. 단계를 켠 뒤 그 안에서 무엇을 낼지 한 번 더 고릅니다.
   네 갈래가 한 줄에 펼쳐지면 배정 화면이 너무 길어져 접어 두고 필요할 때만 엽니다. */
/* align-items:start 가 없으면 한 묶음을 펼칠 때 옆 묶음이 같은 높이로 늘어나 빈 상자가 됩니다. */
.detail-picks{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin-top:12px;align-items:start}
.detail-group{border:1px solid var(--line);border-radius:10px;background:#fbfdfc;overflow:hidden}
.detail-group>summary{cursor:pointer;padding:10px 12px;font-size:12px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;min-height:42px;list-style:none}
.detail-group>summary::-webkit-details-marker{display:none}
.detail-group>summary::after{content:'▾';margin-left:auto;color:#9bb0a4;font-size:11px;transition:transform .15s}
.detail-group[open]>summary::after{transform:rotate(180deg)}
.detail-group>summary b{color:var(--muted);font-weight:700}
.detail-group>summary em{font-style:normal;font-size:11px;color:var(--green-dark);background:var(--mint);border-radius:99px;padding:2px 8px}
.detail-group>summary i{font-style:normal;font-size:10px;color:#b08a3f}
.detail-group:not(.off)>summary i{display:none}
/* 단계를 끈 갈래는 흐리게 둡니다. 숨기면 왜 사라졌는지 알 수 없습니다. */
.detail-group.off{opacity:.5}
.detail-list{padding:0 12px 4px;display:grid;gap:2px}
.detail-pick{display:flex;align-items:flex-start;gap:9px;padding:7px 2px;min-height:40px;cursor:pointer}
.detail-pick input{width:17px;min-height:17px;margin:2px 0 0;accent-color:var(--green);flex:none}
.detail-pick strong{display:block;font-size:12px;font-weight:600}
.detail-pick small{display:block;font-size:10.5px;color:#8b958e;margin-top:1px}
.detail-tools{display:flex;gap:4px;padding:0 10px 10px}
.detail-tools .text-button{min-height:30px;padding:4px 8px;font-size:11px}
/* 지문 고르기. 원서 한 권은 지문이 455개여서 단추를 밀어 찾을 수 없습니다. */
.page-jump{display:flex;align-items:center;gap:8px;margin:12px 0 10px}
.page-jump select{flex:1;min-width:0}
.page-jump .button{flex:none;white-space:nowrap}
@media(max-width:760px){
  .page-jump{flex-wrap:wrap}
  .page-jump select{order:-1;flex-basis:100%}
  .page-jump .button{flex:1}
}
/* 반에 낸 숙제 방식. 단계 칩 아래에 어떤 방식을 냈는지 적어 둡니다. */
.detail-chips{display:grid;gap:6px;margin:10px 0 2px}
.detail-chips p{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0;font-size:11px}
.detail-chips strong{font-size:11px;color:var(--muted);min-width:88px}
.detail-chips span{padding:2px 8px;border-radius:99px;background:var(--mint);color:var(--green-dark)}
/* 자료 상세의 지문 목록. 원서는 지문이 400개를 넘어 한 화면에 다 둘 수 없습니다. */
.unit-list{max-height:min(52vh,540px);overflow-y:auto;display:grid;gap:5px;margin:14px 0 4px}
.unit-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer}
.unit-row:hover{border-color:#8fcfab;background:#f7fcf9}
.unit-no{flex:none;width:30px;height:30px;border-radius:9px;background:var(--mint);color:var(--green-dark);font-size:11px;font-weight:700;display:grid;place-items:center}
.unit-label{flex:1;min-width:0}
.unit-label strong{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit-label small{display:block;font-size:10.5px;color:#8b958e;margin-top:2px}
.unit-go{flex:none;font-size:11px;color:var(--green-dark);font-weight:600}
/* 반 안에서 자료를 찾아 바로 내는 목록 */
.mat-list{display:grid;gap:6px;margin:14px 0 4px}
.mat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#fff}
.mat-row strong{display:block;font-size:13px}
.mat-row small{display:block;font-size:11px;color:#8b958e;margin-top:2px}
.mat-row-actions{display:flex;align-items:center;gap:6px;flex:none}
/* 접어 두는 묶음. 지문이 수백 개까지 가므로 눌러서 펼칩니다. */
.card.fold{padding:0}
.card.fold>summary{display:flex;align-items:center;gap:10px;padding:22px 26px;cursor:pointer;list-style:none}
.card.fold>summary::-webkit-details-marker{display:none}
.card.fold>summary:hover{background:#fafcfb;border-radius:var(--radius)}
.card.fold>summary strong{font-size:16px;flex:none}
.card.fold>summary small{flex:1;color:#8b958e;font-size:11px}
.card.fold>summary i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--mint);
  color:var(--green-dark);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}
.card.fold>summary i::before{content:'▼'}
.card.fold[open]>summary{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.card.fold[open]>summary i::before{content:'▲'}
.card.fold>.fold-body{padding:18px 26px}
.card.fold>.fold-body>.unit-list,.card.fold>.fold-body>.mat-list{margin:0 0 12px}
.card.fold>.fold-body>.subtle,.card.fold>.fold-body>.muted{margin:0}
.card.fold>.fold-body>.inline-form{margin-bottom:14px}
/* 학생 머리글의 「나의 교실」. 글자뿐이면 눌리는 줄 모릅니다. 초록 알약으로 둡니다. */
.top-nav button.nav-home{border:0;background:var(--green);color:#fff;font-weight:800;font-size:14px;
  padding:9px 18px;border-radius:99px;min-height:40px;display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 2px 8px rgba(3,168,95,.28)}
.top-nav button.nav-home::before{content:'⌂';font-size:16px}
.top-nav button.nav-home:hover{background:var(--green-dark);color:#fff}
/* 수업 안에서 교실로 돌아가는 길. 작은 글씨로는 눈에 띄지 않아 단추로 키웁니다. */
.breadcrumb .back-home{font-size:13px;padding:11px 18px;min-height:44px;font-weight:800}
.breadcrumb:has(.back-home){gap:14px;margin-bottom:4px}
.breadcrumb:has(.back-home)>span{font-size:13px;font-weight:700;color:#5d6a62;overflow-wrap:anywhere}
@media(max-width:760px){
  .detail-picks{grid-template-columns:1fr}
  .unit-row{gap:9px;padding:10px}
  .unit-go{display:none}
  .mat-row{flex-direction:column;align-items:stretch;gap:8px}
  .mat-row-actions{justify-content:flex-end}
  .card.fold>summary{padding:17px 18px;gap:8px;flex-wrap:wrap}
  .card.fold>summary strong{font-size:14px}
  .card.fold>summary small{flex-basis:100%;order:3}
  .card.fold>.fold-body{padding:14px 18px}
  /* 좁은 화면에서는 머리글 줄이 숨습니다(.top-nav:has(>span)). 단추는 남겨 둡니다. */
  .top-nav button.nav-home{font-size:12px;padding:7px 14px;min-height:36px}
  .breadcrumb .back-home{font-size:12px;padding:10px 14px;min-height:42px}
  .breadcrumb:has(.back-home){flex-wrap:wrap;gap:9px}
  .breadcrumb:has(.back-home)>span{font-size:12px;flex-basis:100%}
}
/* 교직원 표. 학생 표를 그대로 쓰고 권한·맡은 반 칸만 손봅니다. */
.staff-table td[data-label="권한"]{white-space:nowrap}
.staff-table td[data-label="맡은 반"]{max-width:320px}
.staff-table td[data-label="맡은 반"] .tag{margin:2px 2px 2px 0}
.staff-table .name-actions{margin-top:5px}
@media(max-width:760px){
  /* 좁은 화면에서는 학생 표처럼 칸마다 이름을 붙여 위아래로 쌓습니다. */
  .staff-table td[data-label="선생님"]{flex-direction:column;align-items:flex-start;gap:6px}
  .staff-table td[data-label="선생님"]:before{display:none}
  .staff-table td[data-label="맡은 반"]{max-width:none}
  .staff-table .name-actions{margin-top:0}
}
/* 낸 수업 목록. 수업이 여러 칸 서므로 머리글과 칸 사이를 띄웁니다. */
.assign-head{margin:26px 0 14px}
/* 리포트와 학생 탭에서 볼 수업을 고르는 칸. 표 위에 한 줄로 앉힙니다. */
.card.assign-pick{display:flex;align-items:center;gap:16px;padding:16px 26px;margin-bottom:16px}
.card.assign-pick label{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;color:var(--muted);flex:1}
.card.assign-pick select{flex:1;max-width:420px}
.assign-pick.one{margin:0 0 16px;padding:0 2px;font-size:12px}
/* 숙제 고치기는 수업 칸 안에 접혀 있습니다. 바깥 칸과 겹쳐 보이지 않게 테를 지웁니다. */
.assigned-material .card.fold{margin:4px 0 18px;border-radius:12px;background:#f7f9f8;box-shadow:none}
.assigned-material .card.fold>summary{padding:14px 18px}
.assigned-material .card.fold>summary strong{font-size:13px}
.assigned-material .card.fold>.fold-body{padding:4px 18px 18px}
.assigned-material .card.fold .stage-picks{margin-top:0}
.assigned-material .card.fold .lesson-actions{margin-top:16px}
@media(max-width:760px){
  .assign-head{margin:18px 0 12px}
  .card.assign-pick{flex-direction:column;align-items:stretch;gap:8px;padding:16px 20px}
  .card.assign-pick label{flex-direction:column;align-items:stretch;gap:6px}
  .card.assign-pick select{max-width:none}
  .assigned-material .card.fold>summary{padding:12px 14px}
  .assigned-material .card.fold>.fold-body{padding:4px 14px 14px}
}
.lesson-kinds{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0}
.lesson-kinds span{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--mint);color:var(--green-dark)}

@media (max-width:760px){
  .quiz-item{padding:14px 12px;gap:9px}
  .quiz-number{flex-basis:23px;height:23px;font-size:11px}
  .quiz-ask{font-size:14px}
  .quiz-sentence{font-size:15px;line-height:2.2}
  .quiz-passage{font-size:13px;line-height:1.95;padding:12px}
  .pair-option{padding:5px 9px;font-size:13px}
  .pick-row.tight .pick-chip{min-width:46px;font-size:16px}
  .arrange-part{padding:11px 12px;font-size:13px}
  .arrange-part b{flex-basis:28px}
  /* 어휘 선택은 좁아도 한 줄을 지킵니다. O·X 단추가 낱말 아래로 내려가면
     어느 낱말의 답인지 알 수 없습니다. 낱말만 줄여 둡니다. */
  .ox-row{padding:9px 11px;gap:9px}
  .ox-word{font-size:14px}
  .ox-pick{width:42px}
  .chunk-built{font-size:15px;padding:12px}
  .chunk-part{padding:9px 11px;font-size:14px}
  .chunk-hear{padding:7px 12px;font-size:11px;min-height:38px}
  .exam-actions,.quiz-nav{flex-direction:column;align-items:stretch}
  .exam-actions .button{width:100%}
  .stage-picks{padding:12px 10px;grid-template-columns:1fr 1fr;gap:0 10px}
  .stage-pick{font-size:12px;gap:7px}
}

@media (max-width:760px){
  /* 단계가 여덟 개라 390px 한 줄에 다 들어가지 않습니다. 옆으로 밀어 보게 하고 번호는 살립니다. */
  .learning-tabs{gap:15px;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .learning-tabs::-webkit-scrollbar{display:none}
  .learning-tabs button{flex:0 0 auto;white-space:nowrap;padding:12px 1px}
  .learning-tabs small{display:inline;margin-right:5px}
}

/* 빈칸 문제와 단어 게임에 함께 보여 주는 한글 해석. 본문보다 눈에 덜 띄게 둡니다. */
.quiz-hint{margin:0 0 12px;font-size:14px;line-height:1.75;color:#5d7a67;background:#f1f8f4;border-left:3px solid #9ed3b4;border-radius:0 8px 8px 0;padding:8px 12px;overflow-wrap:anywhere}
.game-korean{margin:8px 0 0;font-size:15px;line-height:1.7;color:#5d7a67;overflow-wrap:anywhere}
.auto-next{text-align:center;margin:10px 0 0}
@media(max-width:760px){.quiz-hint{font-size:13px;padding:7px 10px}.game-korean{font-size:14px}}

/* 모두 고르기: 채점 전에 고른 보기를 눈에 보이게 해 둡니다. */
.game-choice.picked{border-color:var(--green);background:var(--mint);color:var(--green-dark);font-weight:600}
.game-choice.picked .choice-number{background:var(--green);color:#fff}
.pick-count{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--green-dark)}

/* ── 03 쉐도잉 ── */
.echo-intro h2{margin:6px 0 8px;font-size:20px}
.echo-intro p{margin:0 0 6px;font-size:14px;line-height:1.7;color:#5d6b62}
.echo-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.echo-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
/* 천천히 방식은 그림글자가 두 개라 줄이 바뀌지 않게 붙여 둡니다. */
.echo-icon{font-size:26px;line-height:1;white-space:nowrap}
/* 줄이 바뀌어도 「말하기」가 쪼개지지 않게 우리말 낱말 단위로 끊습니다. */
.echo-title strong{display:block;font-size:15px;word-break:keep-all}
.echo-title small{color:#8b958e;font-size:11px}
.echo-score{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.echo-score strong{font-size:20px;color:var(--green-dark)}
.echo-score strong small{font-size:11px;font-weight:600;margin-left:2px}
.echo-progress{margin:12px 0 4px}
.echo-stage{text-align:center;padding:18px 4px 6px}
.echo-phase{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--green-dark)}
.echo-stage.listening .echo-phase{animation:echo-pulse 1.1s ease-in-out infinite}
@keyframes echo-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.echo-sentence{margin:0;font-size:22px;line-height:1.9;font-weight:600;overflow-wrap:anywhere}
.echo-word{display:inline-block;margin:0 1px}
.echo-word.ok{color:#1c8354}
.echo-word.miss{color:#ac4a4a;text-decoration:underline wavy #e0a0a0 2px;text-underline-offset:5px}
/* 듣고 말하기: 첫 글자만 보여 주고 남은 글자는 빈칸으로 둡니다. */
.echo-sentence.masked{letter-spacing:1px}
.echo-blank{display:inline-block;min-width:11px;border-bottom:2px solid #c6dfcf;font-style:normal;color:transparent}
.echo-blank.lead{color:var(--ink)}
.echo-punct{font-style:normal;color:#b6c4bc}
.echo-korean{margin:14px 0 0;font-size:15px;line-height:1.8;color:#5d7a67;overflow-wrap:anywhere}
.echo-korean.muted{color:#a3b0a8;font-size:13px}
.echo-interim{min-height:22px;margin:12px 0 0;font-size:14px;color:#8b958e;font-style:italic;overflow-wrap:anywhere}
.echo-mark{margin:16px 0 0;border-radius:12px;padding:13px 15px;text-align:left}
.echo-mark.right{border:1px solid #42bd83;background:#eafaf0;color:#1c8354}
.echo-mark.wrong{border:1px solid #e0cfa0;background:#fdfaf1;color:#8a6d2a}
.echo-mark strong{display:block;font-size:15px}
.echo-mark span{display:block;margin-top:3px;font-size:12px}
.echo-mark p{margin:6px 0 0;font-size:13px;overflow-wrap:anywhere}
.echo-notice{margin:14px 0 0;border-left:3px solid #e0cfa0;background:#fdfaf1;border-radius:0 8px 8px 0;padding:9px 12px;font-size:13px;line-height:1.7;color:#8a6d2a;text-align:left}
.echo-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.echo-result{text-align:center}
.echo-rate{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:12px;color:#8b958e;white-space:nowrap}
/* 전역 select 는 한 줄을 다 차지합니다. 듣기 속도 고르개는 글 옆에 붙여 둡니다. */
.echo-rate select,.dict-rate select{display:inline-block;width:auto;margin:0;min-height:0}
.echo-rate select{font-size:12px;padding:5px 8px}
/* 선생님 배정 화면의 통과 기준 */
.echo-pass{display:block;margin-top:12px;font-size:12px;font-weight:600;color:var(--ink)}
.echo-pass small{display:block;margin-top:4px;font-weight:400;color:#8b958e;font-size:11px}
@media(max-width:760px){
  .echo-sentence{font-size:18px;line-height:1.95}
  .echo-korean{font-size:14px}
  .echo-stage{padding:14px 2px 4px}
  .echo-actions .button{flex:1 1 44%}
  .echo-icon{font-size:19px}
  .echo-title strong{font-size:13px}
  .echo-score strong{font-size:18px}
  .echo-rate{font-size:11px}
}

/* ── 04 받아쓰기 ── */
.dict-intro h2{margin:6px 0 8px;font-size:20px}
.dict-intro p{margin:0 0 6px;font-size:14px;line-height:1.7;color:#5d6b62}
.dict-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dict-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.dict-icon{font-size:26px;line-height:1;white-space:nowrap}
.dict-title strong{display:block;font-size:15px;word-break:keep-all}
.dict-title small{color:#8b958e;font-size:11px}
.dict-score{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.dict-score strong{font-size:20px;color:var(--green-dark)}
.dict-score strong small{font-size:11px;font-weight:600;margin-left:2px}
.dict-progress{margin:12px 0 4px}
.dict-stage{padding:16px 4px 6px;text-align:center}
.dict-source{margin:0 0 14px;font-size:17px;line-height:1.8;font-weight:600;color:#3f5346;overflow-wrap:anywhere}
/* 글자 칸. 낱말 단위로 묶어 줄이 바뀌어도 낱말이 쪼개지지 않습니다. */
.dict-typing{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;cursor:text}
.dict-word{display:inline-flex;padding:2px 3px;border-radius:6px}
.dict-word.cur{background:#eafaf0}
/* 지금 쓰는 낱말은 밑줄을 진하게 해 어디를 쓰는 중인지 한눈에 보이게 합니다. */
.dict-word.cur .dict-letter.hole,.dict-word.cur .dict-letter.ghost{border-bottom-color:#6dcb9c}
.dict-letter{display:inline-block;min-width:15px;font-style:normal;font-size:21px;font-weight:600;line-height:1.7;text-align:center}
.dict-letter.hole,.dict-letter.ghost{border-bottom:2px solid #c6dfcf}
.dict-letter.ghost{color:#b6c4bc}
.dict-letter.good{color:#1c8354;border-bottom:2px solid #42bd83}
.dict-letter.bad{color:#ac4a4a;border-bottom:2px solid #d98b8b}
.dict-letter.shown{color:#8a6d2a;border-bottom:2px solid #e0cfa0}
.dict-letter.punct{min-width:0;color:#8b958e}
/* 자판을 받는 칸. 눈에는 보이지 않지만 초점을 받아야 기기 자판이 올라옵니다. */
.dict-catcher{position:absolute;left:0;bottom:0;width:1px;height:1px;padding:0;border:0;opacity:0;font-size:16px}
.dict-korean{margin:16px 0 0;font-size:15px;line-height:1.8;color:#5d7a67;overflow-wrap:anywhere}
.dict-korean.muted{color:#a3b0a8;font-size:13px}
/* 스크램블 */
.dict-assemble{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:52px;align-items:center;border:1px dashed #c6dfcf;border-radius:12px;padding:10px}
.dict-assemble-hint{font-size:13px;color:#a3b0a8}
.dict-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.dict-chip{border:1px solid #cfe3d6;border-radius:999px;background:#fff;padding:9px 15px;font-size:14px;font-weight:600;color:#3f5346;cursor:pointer}
.dict-chip:hover{border-color:#42bd83}
.dict-chip.placed{background:#eafaf0;border-color:#42bd83;color:#1c8354;cursor:default}
.dict-chip.shake{border-color:#d98b8b;background:#fdf2f2;color:#ac4a4a;animation:dict-shake .42s}
@keyframes dict-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.dict-mark{margin:16px 0 0;border-radius:12px;padding:13px 15px;text-align:left}
.dict-mark.right{border:1px solid #42bd83;background:#eafaf0;color:#1c8354}
.dict-mark.wrong{border:1px solid #e0cfa0;background:#fdfaf1;color:#8a6d2a}
.dict-mark strong{display:block;font-size:15px}
.dict-answer{margin:6px 0 0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.dict-notice{margin:14px 0 0;border-left:3px solid #e0cfa0;background:#fdfaf1;border-radius:0 8px 8px 0;padding:9px 12px;font-size:13px;line-height:1.7;color:#8a6d2a;text-align:left}
.dict-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.dict-actions .button.on{border-color:#42bd83;background:#eafaf0;color:#1c8354}
.dict-help{margin:12px 0 0;text-align:center;font-size:11px;color:#a3b0a8}
.dict-rate{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;font-size:12px;color:#8b958e;white-space:nowrap}
.dict-rate select{font-size:12px;padding:5px 8px}
.dict-result{text-align:center}
@media(max-width:760px){
  .dict-source{font-size:15px}
  .dict-letter{font-size:18px;min-width:13px}
  .dict-korean{font-size:14px}
  .dict-stage{padding:14px 2px 4px}
  .dict-icon{font-size:19px}
  .dict-title strong{font-size:13px}
  .dict-score strong{font-size:18px}
  .dict-actions .button{flex:1 1 44%}
  .dict-rate{font-size:11px}
}

/* ── 한 지문에 문제가 여럿일 때 (내용 이해) ── */
/* 넓은 화면에서는 지문을 옆에 붙여 두고 따라 내려갑니다. 좁은 화면에서는 위에 접어 둡니다. */
.exam-with-passage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.passage-panel{position:sticky;top:18px;max-height:calc(100vh - 36px);display:flex;flex-direction:column;padding:22px}
.passage-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding-bottom:13px;border-bottom:1px solid var(--line)}
.passage-head h3{margin:0;font-size:17px}
.passage-head small{margin-left:auto;color:#a3b0a8;font-size:11px;white-space:nowrap}
.passage-body{overflow:auto;padding-top:15px;margin-right:-6px;padding-right:6px}
.passage-body p{margin:0 0 13px;font-size:15px;line-height:2;color:#33413a;overflow-wrap:anywhere}
.passage-body p:last-child{margin-bottom:0}
@media(max-width:999px){
  .exam-with-passage{grid-template-columns:1fr;gap:16px}
  /* 지문이 길면 문제가 한참 밑으로 밀립니다. 높이를 묶고 안에서 굴립니다. */
  .passage-panel{position:static;max-height:none;padding:18px}
  .passage-body{max-height:44vh}
  .passage-body p{font-size:14px;line-height:1.95}
  .passage-head h3{font-size:15px}
}

/* ── 시험지 인쇄 고르기 창 ── */
.print-group{border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin:0 0 12px}
.print-group legend{font-size:12px;font-weight:700;color:#5d7a67;padding:0 4px}
.pick{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:13px;cursor:pointer}
.pick input{width:16px;height:16px;margin:0;accent-color:var(--green);flex:none}
.pick.all{border-bottom:1px dashed var(--line);margin-bottom:4px}
/* 원서는 지문이 수백 개입니다. 목록을 창 안에서 굴립니다. */
.print-pages{max-height:200px;overflow:auto;padding-right:4px}
.print-merge{border-top:1px dashed var(--line);margin-top:4px;padding-top:2px}
@media(max-width:760px){.pick{font-size:12px;min-height:34px}.print-pages{max-height:150px}}

/* 변형 시험지(QR) 관리 창과 결과표 */
.exam-list{display:flex;flex-direction:column;gap:8px;margin:10px 0 16px}
.exam-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line,#dcd7ce);border-radius:12px;padding:10px 14px;flex-wrap:wrap}
.exam-name{display:flex;flex-direction:column;gap:2px}
.exam-actions{display:flex;gap:4px;flex-wrap:wrap}
.exam-result-wrap{overflow-x:auto;max-width:100%}
.exam-result{border-collapse:collapse;font-size:.9rem;min-width:100%}
.exam-result th,.exam-result td{border:1px solid var(--line,#dcd7ce);padding:5px 8px;text-align:center;white-space:nowrap}
.exam-result th.sticky{position:sticky;left:0;background:#fff;z-index:1;text-align:left}
.exam-result td.score{font-weight:700}
.exam-result .mk-o{color:#15803d;font-weight:700}
.exam-result .mk-x{color:#b91c1c;font-weight:700}
.exam-result .mk-p{color:#b45309}
.exam-result .mk-none{color:#c2bdb4}
.exam-result .mk-part{display:block;font-size:10px;font-weight:400;color:#8b958e}

/* 낼 항목 한꺼번에 켜고 끄기 · 문제 단계 끝의 지문 이동 단추 */
.stage-tools{display:flex;gap:12px;margin:0 0 6px}
.page-advance{display:flex;justify-content:space-between;gap:8px;margin-top:18px}
.page-advance .button{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 변형문제 ── */
/* 골라 풀기 고르는 판 */
.variant-pick-group{border:1px solid var(--line,#dcd7ce);border-radius:12px;padding:10px 14px 14px;margin:12px 0}
.variant-pick-group legend{font-weight:700;padding:0 6px}
.pick-grid{display:flex;flex-wrap:wrap;gap:8px}
.pick-item{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line,#dcd7ce);border-radius:999px;padding:6px 12px;cursor:pointer}
.pick-item:has(input:checked){background:var(--ink,#1f2328);color:#fff;border-color:var(--ink,#1f2328)}
.pick-item input{accent-color:#fff}
.pick-item small{opacity:.7;margin-left:4px}
.pick-mode{display:flex;gap:18px;margin:14px 2px;flex-wrap:wrap}
.pick-mode label{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.pick-sort label span small{display:block;font-weight:400;color:#777;font-size:.8rem}
.pick-mode .wexam-count{width:90px;padding:6px 10px}
.pick-mode .wexam-count:disabled{opacity:.45}
@media (max-width:480px){.pick-grid{gap:6px}.pick-item{padding:5px 10px;font-size:.92rem}}
.variant-card{position:relative;padding:22px}
.variant-head{display:flex;align-items:center;gap:10px}
.variant-head .muted{font-size:12px}
.variant-head [data-act="exit"],.variant-head [data-act="omr-exit"]{margin-left:auto}
.variant-question{margin:14px 0 10px;font-size:16px;line-height:1.7;color:#243730}
.variant-body{border:1px solid var(--line);border-radius:12px;background:#fbfdfb;padding:15px 17px;font-size:14px;line-height:1.95;color:#33413a;overflow-wrap:anywhere;margin:0 0 14px}
.variant-body table,.variant-explain table{border-collapse:collapse;margin:8px 0;width:100%}
.variant-body td,.variant-body th,.variant-explain td,.variant-explain th{border:1px solid #c6dfcf;padding:6px 9px;font-size:13px;line-height:1.7;text-align:left}
.variant-body u{text-decoration-thickness:2px;text-underline-offset:3px}
/* 보기 단추. 글이 붙은 보기는 세로로, 번호만인 보기는 가로로 늘어섭니다. */
.variant-choices{display:flex;gap:8px;margin:0 0 6px}
.variant-choices.texted{flex-direction:column}
.variant-choices.bare{flex-wrap:wrap}
.variant-choice{display:flex;align-items:baseline;gap:9px;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px 14px;font-size:14px;line-height:1.7;color:#33413a;cursor:pointer}
.variant-choices.bare .variant-choice{min-width:52px;justify-content:center;font-size:16px}
.variant-choice:hover:not(:disabled){border-color:#42bd83}
.variant-choice b{flex:none;font-size:15px;color:#1c8354}
.variant-choice.on{border-color:#42bd83;background:#eafaf0}
.variant-choice.mine{border-color:#8a6d2a;background:#fdfaf1}
.variant-choice.answer{border-color:#42bd83;background:#eafaf0;box-shadow:0 0 0 1px #42bd83 inset}
.variant-choice:disabled{cursor:default;opacity:.85}
.variant-input{display:flex;flex-direction:column;gap:9px}
.variant-text{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.7;resize:vertical}
.variant-state{border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600;margin:10px 0}
.variant-state.ok{background:#eafaf0;color:#1c8354}
.variant-state.bad{background:#fdf2f2;color:#ac4a4a}
.variant-state.pending{background:#fdfaf1;color:#8a6d2a}
.variant-ox{display:flex;gap:8px;margin:0 0 10px}
.variant-answer{border-left:3px solid #42bd83;background:#f3fbf6;border-radius:0 10px 10px 0;padding:10px 13px;font-size:14px;line-height:1.8;margin:10px 0;overflow-wrap:anywhere}
.variant-explain{border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-size:13px;line-height:1.9;color:#4a5a50;margin:10px 0;overflow-wrap:anywhere}
.variant-explain b{display:block;margin-bottom:4px;color:#2d3f35}
.variant-ai{margin:12px 0 0}
.variant-ai-text{font-size:13px;line-height:1.9;color:#4a5a50;margin-top:9px;white-space:normal;overflow-wrap:anywhere}
.variant-nav{display:flex;gap:8px;justify-content:space-between;margin-top:16px}
.variant-toast{position:sticky;bottom:10px;margin:8px auto 0;width:fit-content;max-width:100%;background:#2d3f35;color:#fff;font-size:13px;border-radius:999px;padding:0 16px;opacity:0;transition:opacity .2s;pointer-events:none}
.variant-toast.show{opacity:1;padding:9px 16px}
/* 프린트로 풀기. 시험지 인쇄(examprint.mjs)와 같은 수능지 모양을 화면에 펼칩니다.
   넓은 화면은 A4 폭(794px)으로 짜서 줄여 보이고(.ps-a4), 좁은 화면은 한 단으로 흘립니다. */
.ps-wrap{position:relative}
.ps-bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:10px}
.ps-score{font-size:13px;color:#e11d48}
.ps-viewport{position:relative}
.ps-viewport.ps-a4{overflow:hidden}
.ps-viewport.ps-a4 .ps-page{position:absolute;left:0;top:0;width:794px;transform-origin:0 0;box-shadow:0 2px 14px #0002}
.ps-page{background:#fff;padding:13mm 11mm;font-family:'Batang','BatangChe','AppleMyungjo','Noto Serif KR',serif;font-size:10.5pt;line-height:1.6;color:#111;overflow-wrap:break-word}
.ps-viewport:not(.ps-a4) .ps-page{padding:16px 12px;font-size:15px;border:1px solid #d1d5db}
.ps-defs{position:absolute;width:0;height:0}
.ps-page .x-header{border:2px solid #111;padding:5mm 6mm 4mm;margin-bottom:6mm}
.ps-page .x-eyebrow{font-size:9pt;letter-spacing:.3em}
.ps-page .x-header h1{font-size:19pt;letter-spacing:.04em;margin:1mm 0 2mm;font-weight:800}
.ps-page .x-header p{font-size:9.5pt;color:#333;margin:0}
.ps-page .x-notice{border-top:1px solid #111;margin-top:3mm;padding-top:2mm;font-size:8.5pt}
.ps-page .x-cols{column-count:2;column-gap:8mm;column-rule:1px solid #111}
.ps-viewport:not(.ps-a4) .x-cols{column-count:1}
.ps-page .x-q{position:relative;break-inside:avoid;margin:0 0 7mm}
.ps-page .x-stem{font-weight:700;margin:0 0 2mm}
.ps-page .x-qnum{font-weight:800;margin-right:1.5mm}
.ps-page .x-tag{font-weight:400;font-size:8pt;color:#666;margin-left:2mm;font-family:'Malgun Gothic',sans-serif}
.ps-page .x-body{border:1px solid #111;padding:2.5mm 3mm;margin-bottom:2mm;font-size:10pt;line-height:1.65;overflow-x:auto}
.ps-viewport:not(.ps-a4) .x-body{font-size:14px}
.ps-page .x-body table{border-collapse:collapse;width:100%;margin:1.5mm 0;font-size:9.5pt}
.ps-page .x-body th,.ps-page .x-body td{border:1px solid #111;padding:1mm 2mm;text-align:left}
.ps-page .x-choices{margin-top:1.5mm}
.ps-page .x-choices.bare{display:flex;flex-wrap:wrap;gap:2mm 6mm}
.ps-page .x-choices.cols5{display:grid;grid-template-columns:repeat(5,1fr);gap:.5mm 2mm}
.ps-page .x-choices.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5mm 2mm}
.ps-page .x-choices.cols2{display:grid;grid-template-columns:1fr 1fr;gap:.5mm 2mm}
.ps-page .x-choices.rows{display:grid;grid-template-columns:1fr;gap:.5mm}
.ps-viewport:not(.ps-a4) .x-choices.cols5,.ps-viewport:not(.ps-a4) .x-choices.cols3{grid-template-columns:1fr 1fr}
.ps-viewport:not(.ps-a4) .x-choices.cols2{grid-template-columns:1fr}
.ps-choice{background:none;border:0;margin:0;padding:.6mm 1.2mm;font:inherit;color:inherit;text-align:left;border-radius:4px;cursor:pointer;min-height:0;line-height:1.5}
.ps-choice:hover:not(:disabled){background:#f1f5f9}
.ps-choice:disabled{cursor:default;color:inherit;opacity:1}
.ps-choice.on{background:#dbeafe}
.ps-choice.on .ps-key{color:#1d4ed8;font-weight:800}
.ps-viewport:not(.ps-a4) .ps-choice{padding:6px 6px;min-height:40px}
.ps-write{border:1px solid #111;margin-top:2mm;padding:1mm 2mm;display:flex;gap:2mm;align-items:flex-end}
.ps-write textarea{flex:1;min-width:0;border:0;background:transparent;resize:vertical;font:inherit;font-size:10pt;outline:none;padding:1mm 0}
.ps-grade,.ps-ox{font-family:'Malgun Gothic',sans-serif;font-size:9pt;border:1px solid #111;background:#fff;border-radius:4px;padding:1mm 3mm;cursor:pointer;color:#111}
.ps-grade:disabled{opacity:.4;cursor:default}
.ps-ox{margin-left:1.5mm}
.ps-tiles{display:flex;flex-wrap:wrap;gap:1.5mm;margin:2mm 0 0}
.ps-tile{font:inherit;font-size:9.5pt;border:1px solid #94a3b8;background:#f8fafc;border-radius:5px;padding:.6mm 2.2mm;cursor:pointer;color:#111}
.ps-tile.used{opacity:.3}
.ps-tool{font-family:'Malgun Gothic',sans-serif;font-size:8.5pt;border:0;background:none;color:#2563eb;cursor:pointer;padding:.5mm 1mm}
.ps-tool:disabled{opacity:.4}
.ps-hint{font-size:8.5pt;color:#555;margin:1mm 0 0;font-family:'Malgun Gothic',sans-serif}
.ps-after .ps-answer{color:#e11d48;font-weight:700;font-size:10pt;margin:1.5mm 0 0}
.ps-pending{font-size:9pt;color:#b45309;margin:1.5mm 0 0;font-family:'Malgun Gothic',sans-serif}
.ps-ai{font-size:8.5pt;color:#7c5cd6;margin:1mm 0 0;font-family:'Malgun Gothic',sans-serif}
.ps-expl{display:none;border-left:2px solid #e11d48;background:#fff5f6;padding:1.5mm 3mm;margin-top:1mm;font-size:9.5pt;color:#333}
.ps-expl.open{display:block}
.ps-q.grading{opacity:.55}
/* 색연필 채점. 손으로 그은 듯 흔들린 획에 연필 결(필터)을 입히고, 긋는 움직임을 보여 줍니다. */
.ps-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:3}
.ps-stroke{fill:none;stroke:#e11d48;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85;filter:url(#ps-pencil);stroke-dasharray:1;stroke-dashoffset:1;animation:ps-draw .45s ease-out forwards}
.ps-stroke.answer{stroke-width:1.9;opacity:.7}
.ps-stroke.soft{stroke:#f59e0b}
@keyframes ps-draw{to{stroke-dashoffset:0}}
.ps-stroke.still{animation:none;stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.ps-stroke{animation:none;stroke-dashoffset:0}}
/* 손필기. 쪽 전체에 얹은 한 장의 그림판입니다. 형광펜은 글자 위에 겹쳐도 글자가 비칩니다. */
.ps-bar{flex-wrap:wrap}
.ps-pens{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ps-pen{width:34px;height:34px;min-height:0;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:#374151;cursor:pointer}
.ps-pen.on{border-color:#111;box-shadow:0 0 0 2px #11182722}
.ps-dot{display:block;width:14px;height:14px;border-radius:50%}
.ps-dot.hl{width:18px;height:9px;border-radius:2px;opacity:.75}
.ps-page{position:relative}
.ps-hand{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:4}
.ps-hand path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ps-hand .ps-hand-hl{opacity:.38;mix-blend-mode:multiply}
.ps-drawing .ps-page{-webkit-user-select:none;user-select:none}
.ps-page{-webkit-touch-callout:none}
.ps-ico{width:17px;height:17px;display:block}
.ps-esize{width:28px;font-size:12px;font-weight:700;color:#4b5563}
/* 펜 굵기 미끄럼대. 펜 모양을 한 번 더 누르면 열리고, 좌우로 끌어 0.1㎜ 단위로 고릅니다. */
.ps-wbox{display:inline-flex;align-items:center;gap:5px;padding:0 6px;border:1px solid var(--line);border-radius:8px;height:34px;background:#fff}
.ps-wrange{width:110px;accent-color:#111827}
.ps-wval{font-size:11px;color:#374151;min-width:38px;text-align:center}
/* 지우개가 지울 영역. 점선 동그라미가 펜 끝을 따라다닙니다. */
.ink-eraser-ring{position:absolute;border:1.5px dashed #475569;border-radius:50%;background:#64748b14;pointer-events:none;z-index:7}
@media(max-width:600px){.ps-wrange{width:80px}}
/* 핀치로 화면을 키우면 막대를 눈앞 왼쪽 위에 붙잡아 둡니다(크기 고정). 자리는 inkpad.js 바고정이 잡습니다. */
.bar-pinned{z-index:60;border-radius:0;border-left:0;border-right:0;border-top:0;box-shadow:0 2px 10px #0002;margin:0}
/* 읽기 필기. 문장 카드 위에 얹은 그림판입니다. 긋는 동안 글자가 끌려 선택되지 않게 합니다. */
.ink-page{position:relative;-webkit-touch-callout:none}
.ink-page.ps-drawing,.ink-page.ps-drawing *{-webkit-user-select:none;user-select:none}
.ink-bar{margin:0 0 10px}
.ink-bar .ps-score{font-size:12px;color:#78817b;font-weight:400}
@media(max-width:600px){.ps-pen{width:30px;height:30px}.ps-esize{width:24px}}
dialog.ink-dialog{width:min(1000px,calc(100% - 24px));max-width:none}
/* OMR 답안지 */
.omr-sheet{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.omr-row{border:1px solid var(--line);border-radius:12px;padding:8px 11px}
.omr-row.ok{border-color:#42bd83;background:#f3fbf6}
.omr-row.bad{border-color:#d98b8b;background:#fdf7f7}
.omr-row.pending{border-color:#e0cfa0;background:#fdfaf1}
.omr-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.omr-no{flex:none;width:26px;font-weight:700;font-size:13px;color:#5d7a67;text-align:center}
.omr-tag{flex:none;font-size:11px;color:#8b958e;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.omr-bubbles{display:flex;gap:5px;flex-wrap:wrap}
.omr-bubble{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:14px;color:#5d7a67;cursor:pointer;padding:0}
.omr-bubble:hover:not(:disabled){border-color:#42bd83}
.omr-bubble.on{background:#2d3f35;border-color:#2d3f35;color:#fff}
.omr-text{flex:1 1 150px;border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13px;min-width:0}
.omr-mark{flex:none;margin-left:auto;font-weight:800;font-size:15px}
.omr-mark.ok{color:#1c8354}
.omr-mark.bad{color:#ac4a4a}
.omr-mark.pending{color:#8a6d2a;font-size:12px}
/* 종합: 지문 한 장. 종이처럼 보이되 핸드폰에서는 한 단으로 흐릅니다. */
.sm-wrap{position:relative}
.sm-sheet{position:relative;background:#fff;border:1px solid #d1d5db;box-shadow:0 2px 14px #0001;padding:22px 26px;font-family:'Batang','BatangChe','AppleMyungjo','Noto Serif KR',serif;font-size:15.5px;line-height:1.95;color:#111;overflow-wrap:break-word;max-width:860px}
.sm-head{border:2px solid #111;padding:10px 14px 8px;margin-bottom:12px}
.sm-head .x-eyebrow{font-size:11px;letter-spacing:.3em;margin:0}
.sm-head h2{margin:2px 0 0;font-size:22px;font-weight:800;letter-spacing:.03em}
.sm-directive{border:1.2px solid #444;border-radius:3px;background:#f7f7f7;padding:6px 10px;font-weight:700;font-size:13px;line-height:1.6;margin:0 0 12px;font-family:'Malgun Gothic',sans-serif}
.sm-passage{text-align:justify;word-break:keep-all}
.sm-para{margin:0 0 4px}
.sm-sheet sup{color:#555;font-size:10px;margin-left:1px}
.sm-pron b{font-size:15px;margin-right:2px}
.sm-pron u{font-weight:700}
.sm-pick{white-space:normal;font-weight:700}
.sm-opt{font:inherit;font-weight:700;background:none;border:0;border-bottom:1px dashed #94a3b8;border-radius:3px;padding:0 3px;margin:0;min-height:0;line-height:1.4;color:#111;cursor:pointer}
.sm-opt:hover:not(:disabled){background:#eef2ff}
.sm-opt:disabled{cursor:default;border-bottom-color:transparent;opacity:1;color:#111}
.sm-opt:disabled:not(.mine):not(.answer){color:#9ca3af}
.sm-blank{white-space:nowrap}
.sm-lead{font-weight:800;letter-spacing:.5px}
.sm-in{font:inherit;font-weight:700;border:0;border-bottom:1.5px solid #111;background:#fffbea;padding:0 3px;min-width:0;width:auto;line-height:1.4;color:#111;border-radius:0;outline:none}
.sm-in:focus{background:#fef3c7}
.sm-in:disabled{background:transparent;color:#111;opacity:1}
.sm-sheet .sm-in{display:inline-block;width:8.5em;max-width:60vw;min-height:0;height:auto;margin:0 1px;padding:0 3px;box-shadow:none;vertical-align:baseline}
.sm-sheet .sm-in.wide{display:block;flex:1;width:100%;max-width:none;font-weight:400;font-size:15px}
.sm-fix{color:#e11d48;font-weight:800;margin-left:3px;font-size:.92em}
.sm-arr{margin:6px 0;padding:6px 10px;border-left:3px solid #3b5998;background:#f4f6fa}
.sm-arr-head{line-height:1.6}
.sm-badge{font-weight:800;color:#26385f;margin-right:3px;display:inline-block}
.sm-kr{color:#333;font-size:13.5px;font-family:'Malgun Gothic',sans-serif}
.sm-note{color:#7c2d3a;font-size:12.5px;font-weight:600;margin:2px 0;font-family:'Malgun Gothic',sans-serif;line-height:1.5}
.sm-line{margin:4px 0 2px;line-height:2.15}
.sm-line.done{font-weight:700}
.sm-fixed{font-weight:700}
.sm-group{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:center;vertical-align:middle;border:1.5px dashed #94a3b8;border-radius:6px;padding:2px 4px;margin:1px 0;max-width:100%;background:#fff}
.sm-group.full{border-style:solid;border-color:#3b5998}
.sm-tile{font:inherit;font-size:14px;line-height:1.35;min-height:30px;border:1px solid #cbd5e1;background:#f8fafc;color:#64748b;border-radius:5px;padding:1px 7px;cursor:pointer}
.sm-tile.on{background:#1e3a8a;border-color:#1e3a8a;color:#fff;font-weight:700}
.sm-tools{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:4px}
/* 배열 🔊 힌트. 조그만 단추로 정답 문장을 소리로만 들려줍니다. */
.sm-hint{font-size:8pt;color:#64748b;border:1px dashed #cbd5e1;border-radius:6px;padding:1px 6px;margin-right:auto}
.sm-hint:hover{color:#2563eb;border-color:#93c5fd}
.sm-hint:disabled{opacity:.5;cursor:wait}
.sm-answer{color:#e11d48;font-weight:700;font-size:14px;margin:3px 0 0;line-height:1.6}
.sm-bank{border:1px solid #999;border-radius:3px;background:#fafafa;padding:2px 8px;margin:4px 0;font-size:14px}
.sm-writeline{display:flex;gap:8px;align-items:flex-end;margin:3px 0}
.sm-sec{margin-top:16px;border-top:1.4px solid #444;padding-top:6px}
.sm-sec-title{font-weight:800;font-size:14.5px;margin:0 0 6px;font-family:'Malgun Gothic',sans-serif}
.sm-write{margin:0 0 10px}
.sm-wq{margin:0}
.sm-wq u{font-weight:700}
.sm-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0}
.sm-box{font:inherit;text-align:left;border:1px solid #999;border-radius:4px;background:#fff;padding:5px 8px;font-size:13px;line-height:1.55;cursor:pointer;color:#111;min-height:0}
.sm-box b{display:block;margin-bottom:2px;font-size:13.5px}
.sm-box:hover:not(:disabled){border-color:#3b5998;background:#f4f6fa}
.sm-box.used{opacity:.45}
.sm-box:disabled{cursor:default;opacity:1}
.sm-hash{color:#3b5998;font-size:12.5px;margin:2px 0 6px;word-break:keep-all}
.sm-flow{display:flex;align-items:center;gap:6px}
.sm-arrow{flex:none;color:#555}
.sm-cell{flex:1;font:inherit;border:1px solid #777;border-radius:4px;background:#fff;min-height:54px;padding:3px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#111;cursor:pointer}
.sm-cell small{font-size:11.5px;color:#555;font-family:'Malgun Gothic',sans-serif}
.sm-cell b{font-size:18px;min-height:24px}
.sm-cell em{font-style:normal;color:#e11d48;font-weight:800;font-size:13px}
.sm-cell:disabled{cursor:default;opacity:1;color:#111}
.sm-summary .sm-sumtext{border:1px dashed #888;border-radius:3px;padding:4px 8px;margin:4px 0;line-height:2.1}
.sm-sheet .grading{opacity:.55}
.sm-ink{z-index:3}
/* 종합 메뉴 막대. 단추들은 제목 옆에, 점수는 오른쪽 끝에. */
.sm-bar{justify-content:flex-start}
.sm-bar .sm-score{margin-left:auto;text-align:right}
.sm-bar .text-button[hidden]{display:none}
.sum-analysis .section-title{align-items:center}
.sum-analysis .reader-sentence{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
/* QR 종합 시험지의 제출 막대와 결과표의 △ 판정 단추 */
.sumexam-bar .button{min-height:34px;padding:6px 16px;font-size:13px}
.sumexam-bar .button[hidden]{display:none}
.mark-btn{border:1px dashed #b45309;background:#fff7ed;color:#b45309;border-radius:6px;padding:2px 7px;font-weight:700;cursor:pointer}
.mark-btn:hover{background:#ffedd5}
/* 해석시험 오답 ✗. 누르면 학생 답과 틀린 까닭이 열립니다. */
.mk-x .mark-btn{border-color:#b91c1c;background:#fef2f2;color:#b91c1c}
.mk-x .mark-btn:hover{background:#fee2e2}
@media(max-width:760px){
  .sm-sheet{padding:14px 12px;font-size:15px;line-height:1.9;box-shadow:none}
  .sm-head h2{font-size:18px}
  .sm-directive{font-size:12px}
  .sm-boxes{grid-template-columns:1fr}
  .sm-flow{gap:3px}
  .sm-cell{padding:3px 2px}
  .sm-cell small{font-size:10.5px}
  .sm-tile{font-size:13.5px;min-height:32px}
}
/* 어법선택: 지문 속 [a / b] 자리와 OMR 낱말 칸 */
.sel-slot{white-space:normal}
.sel-key{font-weight:700;color:#1c8354;margin-right:2px}
.sel-bar{color:#9aa69f;margin:0 2px}
.sel-opt{font:inherit;line-height:1.35;border:1px solid #cfe3d6;border-radius:7px;background:#fff;color:#22352b;padding:1px 7px;margin:1px 0;cursor:pointer;min-height:30px}
.sel-opt:hover:not(:disabled){border-color:#42bd83;background:#f3fbf6}
.sel-opt:disabled{cursor:default}
.sel-opt.mine.ok{border-color:#42bd83;background:#eafaf0;color:#1c6e48;font-weight:700}
.sel-opt.mine.bad{border-color:#d98b8b;background:#fdf1f1;color:#ac4a4a;text-decoration:line-through}
.sel-opt.answer{border-color:#42bd83;box-shadow:0 0 0 1px #42bd83 inset;color:#1c6e48;font-weight:700}
.ps-page .sel-opt{background:transparent;border-color:transparent;border-bottom:1px dashed #b9c8bf;border-radius:3px;min-height:0;padding:0 3px}
.ps-page .sel-opt.mine.ok,.ps-page .sel-opt.mine.bad,.ps-page .sel-opt.answer{background:transparent;box-shadow:none;border-color:transparent;text-decoration:none}
.omr-sels{display:flex;gap:6px 10px;flex-wrap:wrap;flex:1 1 200px;min-width:0}
.omr-sel{display:inline-flex;align-items:center;gap:3px}
.omr-sel>b{font-size:12px;color:#5d7a67}
.omr-bubble.omr-word{width:auto;min-width:34px;height:auto;min-height:34px;border-radius:17px;padding:3px 10px;font-size:12.5px}
.omr-detail{display:none;border-top:1px dashed var(--line);margin-top:8px;padding-top:4px}
.omr-row.open .omr-detail{display:block}
/* 계정 창의 AI 키 칸 */
.ai-key-box{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
.ai-key-box h3{margin:0 0 6px}
.ai-key-state{font-size:13px;font-weight:600;color:#1c8354;background:#eafaf0;border-radius:10px;padding:9px 13px}
@media(max-width:760px){
  .variant-card{padding:16px 13px}
  .variant-question{font-size:15px}
  .variant-body{font-size:13px;padding:12px 13px}
  .variant-choice{font-size:13px;padding:10px 11px}
  .variant-choices.bare .variant-choice{min-width:46px;font-size:15px}
  .omr-tag{display:none}
  .omr-bubble{width:38px;height:38px}
  .variant-nav{flex-wrap:wrap}
  .variant-nav .button{flex:1 1 44%}
}