#studyPanel{margin:28px 0 60px}#studyPanel[hidden]{display:none}.study-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.study-heading h2{font-size:28px;margin:8px 0;color:var(--n-263a61,#263a61)}.study-heading .eyebrow{font-size:13px;color:var(--n-60739b,#60739b);line-height:1.7}.study-heading>button{white-space:nowrap}.study-progress{display:flex;justify-content:space-between;color:var(--n-60718e,#60718e);font-size:14px;margin-bottom:14px}.study-item-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.study-item-nav button{border:1px solid var(--n-d8e1f2,#d8e1f2);color:var(--n-586b8f,#586b8f);background:var(--n-ffffff,#fff);min-width:42px;height:40px;border-radius:10px;font:inherit;font-size:14px;cursor:pointer}.study-item-nav .done{border-color:var(--i-bcdacb,#bcdacb);background:var(--i-f0f9f4,#f0f9f4);color:var(--i-247452,#247452)}.study-item-nav .selected{border-color:var(--n-3457ed,#3457ed);background:var(--n-3457ed,#3457ed);color:var(--n-ffffff,white);box-shadow:0 3px 10px var(--n-3457ed22,#3457ed22)}.study-word-card,.study-quiz-card,.curriculum-day-editor{padding:32px;border-radius:20px;background:var(--n-ffffff,white);border:1px solid var(--n-dce4f1,#dce4f1)}.study-word-card{text-align:center}.study-rounds{display:flex;justify-content:center;gap:12px;margin-bottom:30px}.study-rounds>span{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:30px;background:var(--n-f4f6fc,#f4f6fc);color:var(--n-7c89a1,#7c89a1);font-weight:700;font-size:13px}.study-rounds>span>span{font-size:12px;font-weight:400}.study-rounds>.active{background:var(--n-edf1ff,#edf1ff);color:var(--n-3457ed,#3457ed)}.study-rounds>.done{background:var(--i-e8f6ee,#e8f6ee);color:var(--i-287250,#287250)}.study-word{color:var(--n-243d74,#243d74);margin:15px 0;overflow-wrap:anywhere}.study-meaning{color:var(--n-65728b,#65728b);margin:12px 0}.study-phase{color:var(--n-3457ed,#3457ed);margin:26px 0 20px;min-height:24px}.study-audio-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.study-word-card .study-audio-controls{justify-content:center}.study-audio-controls button{min-height:42px}.study-speed{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--n-617290,#617290);white-space:nowrap}.study-speed input{width:85px;accent-color:var(--n-3457ed,#3457ed)}.study-speed output{min-width:35px;font-variant-numeric:tabular-nums}.study-note{font-size:13px;color:var(--n-71809a,#71809a);line-height:1.8;margin:18px 0 0}.study-next{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:20px}.study-next button{font-size:15px}.study-next button:disabled{opacity:.4;cursor:not-allowed}.study-quiz-instruction{color:var(--n-62718a,#62718a);font-size:15px;margin:0 0 24px;line-height:1.8}.study-blank-sentence{margin:26px 0 20px;font-size:25px;line-height:2.5;color:var(--n-293d65,#293d65);overflow-wrap:anywhere}.study-blank{width:150px;max-width:100%;padding:6px 10px;background:var(--n-f7f9ff,#f7f9ff);border:0;border-bottom:2px solid var(--n-7690f5,#7690f5);border-radius:6px 6px 0 0;font:inherit;font-size:20px;color:var(--n-263b6d,#263b6d);vertical-align:baseline}.study-blank:focus{outline:2px solid var(--n-b5c4ff,#b5c4ff)}.study-blank:disabled{opacity:1;-webkit-text-fill-color:var(--n-36486a,#36486a)}.study-korean{font-size:18px;line-height:1.9;color:var(--n-536481,#536481);margin:18px 0}.study-writing-prompt{font-size:24px;font-weight:650;line-height:1.85;color:var(--n-273e6a,#273e6a);margin:20px 0 30px}.study-answer-label{display:block;font-size:14px;font-weight:600;color:var(--n-536581,#536581)}.study-answer-label textarea,.curriculum-day-editor textarea{width:100%;box-sizing:border-box;display:block;margin-top:9px;padding:16px;background:var(--n-f9faff,#f9faff);border:1px solid var(--n-d7e0f1,#d7e0f1);border-radius:12px;font:inherit;font-size:20px;font-weight:400;line-height:1.7;resize:vertical;color:var(--n-293f66,#293f66)}.study-answer-label textarea:focus,.curriculum-day-editor textarea:focus{outline:2px solid var(--n-b5c4ff,#b5c4ff)}.study-result{margin-top:20px;border-radius:15px;border:1px solid var(--n-cde6da,#cde6da);background:var(--n-f1faf5,#f1faf5);padding:22px;color:var(--n-345d48,#345d48);line-height:1.8}.study-result.retry{background:var(--i-fff9ef,#fff9ef);border-color:var(--i-f0dfbf,#f0dfbf);color:var(--i-7d5b2b,#7d5b2b)}.study-result>strong{display:flex;justify-content:space-between;gap:12px;font-size:18px}.study-result p{margin:10px 0}.study-result ul{padding-left:20px;font-size:14px}.study-result .study-model-label{font-size:12px;color:var(--i-62718c,#62718c);margin-top:18px}.study-result .study-model{font-size:21px;color:var(--i-243b64,#243b64);overflow-wrap:anywhere}.study-error{background:var(--i-fff2ed,#fff2ed);color:var(--i-9a5133,#9a5133);border-radius:10px;padding:14px 18px;margin:20px 0;font-size:14px;line-height:1.8}.study-empty,.study-finish{padding:45px 24px;border:1px solid var(--n-dce4f1,#dce4f1);border-radius:20px;background:var(--n-ffffff,white);text-align:center;color:var(--n-617491,#617491);line-height:1.9}.study-finish>span{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;font-size:35px;background:var(--n-e7f5ec,#e7f5ec);color:var(--n-3b855a,#3b855a);margin-bottom:16px}.study-finish h2{color:var(--n-2d426b,#2d426b)}.study-finish .study-next{justify-content:center}.curriculum-editor-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.curriculum-editor-nav button{padding:12px 18px;border:1px solid var(--n-d8e1f2,#d8e1f2);border-radius:10px;background:var(--n-ffffff,white);color:var(--n-587099,#587099);font:inherit;cursor:pointer}.curriculum-editor-nav button.selected{background:var(--n-3457ed,#3457ed);color:var(--n-ffffff,white);border-color:var(--n-3457ed,#3457ed)}.curriculum-day-editor label{font-size:16px;font-weight:650;color:var(--n-354f7c,#354f7c);display:block;margin:25px 0 8px}.curriculum-day-editor label:first-child{margin-top:0}.curriculum-day-editor textarea{font-size:14px;min-height:110px}.curriculum-day-editor .field-help{font-size:13px;font-weight:400;color:var(--n-748099,#748099);margin:7px 0 0;line-height:1.8}.curriculum-sentence-choices{display:grid;gap:8px;margin-top:12px}.curriculum-sentence-choices label{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;background:var(--n-f7f9fe,#f7f9fe);border-radius:9px;font-size:14px;line-height:1.65;font-weight:400}.curriculum-sentence-choices input{margin-top:5px;accent-color:var(--n-3457ed,#3457ed);width:16px;height:16px;flex-shrink:0}.curriculum-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0}.curriculum-toolbar p{font-size:13px;color:var(--n-6c7c97,#6c7c97);line-height:1.8;flex:1;min-width:200px}.curriculum-toolbar button{font-size:13px}.curriculum-save-status{font-size:14px;line-height:1.8;color:var(--n-47725d,#47725d)}.curriculum-source-note{font-size:13px;background:var(--n-edf2ff,#edf2ff);padding:14px 18px;line-height:1.8;color:var(--n-536e99,#536e99);border-radius:10px;margin-bottom:18px}@media(max-width:650px){#studyPanel{margin-top:20px}.study-heading{align-items:flex-start}.study-heading h2{font-size:23px}.study-heading>button{padding:10px;font-size:12px}.study-word-card,.study-quiz-card,.curriculum-day-editor{padding:24px 18px;border-radius:16px}.study-rounds{gap:5px}.study-rounds>span{font-size:12px;padding:7px 9px}.study-rounds>span>span{font-size:10px}.study-audio-controls{gap:12px}.study-speed input{width:76px}.study-blank-sentence{font-size:21px}.study-blank{font-size:19px;width:115px}.study-writing-prompt{font-size:21px}.study-answer-label textarea{font-size:18px}.study-next{gap:9px}.study-next button{flex:1;font-size:14px;padding:13px 10px}.curriculum-editor-nav button{padding:10px 13px;font-size:13px}.study-result>strong{font-size:16px}.study-result .study-model{font-size:19px}}@media(prefers-reduced-motion:reduce){#studyPanel *{scroll-behavior:auto!important}} .study-letter-group{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px;max-width:100%;vertical-align:baseline;margin:0 3px}#studyPanel .study-letter{box-sizing:border-box;width:36px;min-width:36px;height:44px;padding:3px 1px;text-align:center;border:1px solid var(--n-b6c6ed,#b6c6ed);border-bottom:3px solid var(--n-7390ef,#7390ef);border-radius:7px;background:var(--n-f7f9ff,#f7f9ff);font:inherit;font-size:23px;line-height:1;color:var(--n-263b6d,#263b6d);vertical-align:baseline;caret-color:var(--n-3457ed,#3457ed)}#studyPanel .study-letter:focus{outline:3px solid var(--n-b5c4ff,#b5c4ff);outline-offset:1px;border-color:var(--n-3457ed,#3457ed);background:var(--n-ffffff,#fff)}#studyPanel .study-letter:disabled{opacity:1;color:var(--n-36486a,#36486a);-webkit-text-fill-color:var(--n-36486a,#36486a);background:var(--n-f0f4fb,#f0f4fb)}.study-letter-separator{white-space:pre;min-width:.35em}.study-blank-sentence{line-height:2.6}@media(max-width:650px){.study-letter-group{gap:3px;margin:0 2px}#studyPanel .study-letter{width:30px;min-width:30px;height:40px;font-size:21px}} .study-spelling-letter{border-radius:.12em}.study-spelling-letter.active{color:var(--n-a33d00,#a33d00);background:var(--n-fff0cc,#fff0cc);box-shadow:0 2px 0 var(--n-e69424,#e69424)} /* Compact word quiz: inline answer letters preserve room for longer words. */ .word-builder{box-sizing:border-box;container-type:inline-size;width:min(100%,660px);margin:0 auto;padding:16px;border:1px solid var(--n-e1e4e2,#e1e4e2);border-radius:18px;background:var(--n-ffffff,#fff);color:var(--n-18211d,#18211d);outline-offset:4px} .builder-prompt{text-align:center;background:var(--n-f5f6f5,#f5f6f5);border-radius:12px;padding:14px 10px} .builder-answer{text-align:center;margin:12px 0 10px;min-height:38px;overflow-wrap:anywhere} .word-builder .builder-slot{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:baseline;width:.62em;height:1.5em;min-width:0;padding:0;margin:0;border:0;border-radius:3px;background:transparent;color:var(--n-b4bfb7,#b4bfb7);font:inherit;font-weight:650;line-height:inherit;cursor:pointer;opacity:1;text-transform:none} .word-builder .builder-slot.filled{color:var(--n-243c2c,#243c2c)}.word-builder .builder-slot.correct{color:var(--i-087742,#087742)}.word-builder .builder-slot:disabled{opacity:1;cursor:default}.word-builder .builder-slot.filled:hover:enabled{background:var(--n-eaf5ef,#eaf5ef)} .builder-fixed{white-space:pre-wrap;color:var(--n-59685f,#59685f);font-size:max(14px,.7em)} .builder-bank{display:flex;justify-content:center;flex-wrap:wrap;gap:6px} .word-builder .builder-tile{display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:0;min-height:36px;border:1px solid var(--i-e1e5e2,#e1e5e2);border-radius:18px;padding:4px;background:var(--i-ffffff,white);color:var(--i-344a3e,#344a3e);font:inherit;cursor:pointer;touch-action:manipulation;text-transform:none;transition:background .15s,transform .15s} .builder-tile:hover:enabled{background:var(--n-eaf5ef,#eaf5ef);transform:translateY(-1px)}.word-builder .builder-tile:disabled{color:var(--i-abb2ad,#abb2ad);background:var(--i-fafbfa,#fafbfa);opacity:.5;cursor:default} .builder-hint{margin:10px 0;color:var(--n-7a857e,#7a857e);font-size:12px;text-align:center;line-height:1.6} .builder-feedback{margin:12px 0;text-align:center;line-height:1.6}.builder-feedback strong{display:block;color:var(--n-17603c,#17603c);font-size:17px;font-weight:750;overflow-wrap:anywhere}.builder-feedback strong span{text-transform:none}.builder-feedback.retry strong{color:var(--i-a1632e,#a1632e)}.builder-feedback.retry p{color:var(--i-8b745e,#8b745e);font-size:12px;margin:5px 0}.builder-example{color:var(--n-66766c,#66766c);font-size:14px;margin:6px 0;overflow-wrap:anywhere} .builder-actions{display:flex;gap:6px;margin-top:12px}.builder-actions button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:34px;flex:1;border:1px solid var(--n-e1e5e2,#e1e5e2);border-radius:17px;padding:6px 5px;background:var(--n-ffffff,#fff);color:var(--n-6a776e,#6a776e);font:inherit;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer;white-space:nowrap}.builder-actions svg{width:14px;height:14px;flex-shrink:0}.builder-actions button:disabled{opacity:.4;cursor:default}.builder-actions .builder-reset{background:var(--n-1b221e,#1b221e);color:var(--n-ffffff,#fff);border-color:var(--n-1b221e,#1b221e)} .word-builder .builder-next{box-sizing:border-box;display:block;width:max-content;max-width:100%;min-height:36px;border:0;border-radius:18px;padding:8px 22px;margin:9px auto 0;background:var(--n-087747,#087747);color:var(--n-ffffff,white);font:inherit;font-size:13px;font-weight:650;line-height:1.4;cursor:pointer}.word-builder .builder-next:disabled{opacity:.4;cursor:default} .builder-progress{font-size:11px;line-height:1.6;text-align:center;color:var(--n-7f8d83,#7f8d83);margin:9px 0 0} .word-builder button:focus-visible{outline:3px solid var(--n-74baa0,#74baa0);outline-offset:2px}.word-builder button{touch-action:manipulation}.word-builder:focus{outline:0}.word-builder:focus-visible{outline:2px solid var(--n-a4cebb,#a4cebb)} @media(max-width:480px){.word-builder{padding:12px 10px;border-radius:16px}.builder-prompt{padding:12px 8px}.builder-bank{gap:5px}.word-builder .builder-tile{width:30px;min-height:34px}.builder-actions button{font-size:11px;gap:3px}.builder-feedback strong{font-size:16px}} .word-builder .builder-slot.is-fixed{color:var(--i-247c50,#247c50)} .word-builder .builder-slot.is-given{cursor:default;color:var(--n-243c2c,#243c2c)} .word-builder .builder-slot.is-wrong{color:var(--i-b63036,#b63036);background:var(--i-ffe8e9,#ffe8e9);animation:builder-letter-shake .42s ease-in-out both} @keyframes builder-letter-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}} .sentence-answer,.sentence-bank{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-width:0} .sentence-answer{min-height:54px;margin:12px 0;padding:10px 0;border-bottom:1px solid var(--n-e5ece7,#e5ece7)} .sentence-placeholder{color:var(--n-8a968e,#8a968e);font-size:13px;line-height:1.8} .sentence-bank{justify-content:center;margin:12px 0} .sentence-builder .sentence-chunk{box-sizing:border-box;max-width:100%;min-height:38px;min-width:0;padding:7px 10px;border:1px solid var(--n-d8e2db,#d8e2db);border-radius:11px;background:var(--n-ffffff,#fff);color:var(--n-304939,#304939);font:inherit;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:pointer} .sentence-builder .sentence-chunk:hover:enabled{background:var(--n-edf6f0,#edf6f0);border-color:var(--n-90bca2,#90bca2)} .sentence-builder .sentence-chunk:disabled{opacity:.35;cursor:default} .sentence-answer .sentence-chunk.selected{background:var(--n-f0f5f2,#f0f5f2);border-color:var(--n-cdded2,#cdded2);color:var(--n-294335,#294335)} .sentence-answer .sentence-chunk.selected:disabled{opacity:1} .sentence-answer.is-correct .sentence-chunk.selected{background:var(--i-e4f4eb,#e4f4eb);color:var(--i-087742,#087742);border-color:var(--i-bfdfcc,#bfdfcc)} .sentence-builder .sentence-translation-retry{display:block;margin:8px auto;padding:7px 12px;border:1px solid var(--i-d9e4dc,#d9e4dc);border-radius:16px;background:var(--i-ffffff,#fff);color:var(--i-486651,#486651);font:inherit;font-size:12px;cursor:pointer} @media(max-width:480px){.sentence-answer,.sentence-bank{gap:5px}.sentence-builder .sentence-chunk{padding:6px 8px}} @media(prefers-reduced-motion:reduce){.word-builder .builder-slot.is-wrong{animation:none}} /* A compact, two-column game board inspired by the supplied video. */ .matching-heading{width:min(100%,620px);margin:0 auto 10px;align-items:center} .matching-progress{margin:0;color:var(--n-756e61,#756e61);font-size:12px;font-variant-numeric:tabular-nums} .matching-progress strong{color:var(--n-4a5546,#4a5546);font-size:16px;font-weight:750} .word-matching{box-sizing:border-box;position:relative;width:min(100%,620px);margin:0 auto;padding:12px;border:1px solid var(--matching-activity-border,var(--n-d4e6df,#d4e6df));border-radius:15px;background:var(--matching-activity-bg,var(--n-eef6f4,#eef6f4));color:var(--n-244b40,#244b40)} .matching-hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:2px 2px 12px;font-variant-numeric:tabular-nums} .matching-leaders{min-width:0;max-width:100%;width:max-content;justify-self:center;display:grid;gap:3px;color:var(--n-244b40,#244b40)} .matching-medal-row{display:grid;grid-template-columns:20px minmax(0,4.3em) max-content;align-items:center;gap:8px;min-width:0;font-size:11px;line-height:1.35} .matching-medal{font-size:16px;line-height:1.2}.matching-leader-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.matching-leader-points{font-size:10px;font-weight:750;color:var(--n-506e62,#506e62)} .matching-clock,.matching-score{display:grid;gap:2px}.matching-score{text-align:right} .matching-hud-label{color:var(--n-506e62,#506e62);font-size:10px;line-height:1.3} .matching-hud strong{font-family:var(--font-en),Arial,sans-serif;font-size:32px;line-height:1;font-weight:600;color:var(--n-244b40,#244b40)}.matching-score strong{color:var(--n-176245,#176245)} .matching-clock.is-urgent strong,.matching-score.is-negative strong{color:var(--i-b33449,#b33449)} .matching-playfield{position:relative;isolation:isolate;min-height:calc(4 * clamp(76px,12svh,105px) + 35px)} .matching-labels,.matching-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px} .matching-labels{padding:0 3px 6px;color:var(--n-506e62,#506e62);font-size:10px;font-weight:500} .matching-column{display:grid;grid-template-rows:repeat(4,minmax(76px,auto));gap:6px;min-width:0;align-content:start} .word-matching .matching-card{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;min-height:clamp(76px,12svh,105px);height:100%;margin:0;padding:10px 11px;border:1px solid var(--n-b7cdc4,#b7cdc4);border-radius:5px;background:var(--n-ffffff,#fff);color:var(--n-294e43,#294e43);font:inherit;text-align:center;text-transform:none;white-space:normal;overflow-wrap:anywhere;cursor:pointer;touch-action:manipulation;transition:background-color .12s,border-color .12s,color .12s} .word-matching .matching-card[lang="ko"]{justify-content:flex-start;text-align:left} .matching-card>span:first-child{min-width:0;overflow-wrap:anywhere} .word-matching .matching-card:hover:enabled{background:var(--n-e1f0e9,#e1f0e9);border-color:var(--n-a8cdbc,#a8cdbc)} .word-matching .matching-card:focus-visible{outline:3px solid var(--n-397d61,#397d61);outline-offset:1px;z-index:1} .word-matching .matching-card.is-selected{background:var(--n-d0e8df,#d0e8df);border-color:var(--n-7fae97,#7fae97);color:var(--n-214e3d,#214e3d);box-shadow:inset 0 0 0 1px var(--n-7fae97,#7fae97)} .word-matching .matching-card.is-matched{background:var(--i-d0ebcf,#d0ebcf);border-color:var(--i-84b87e,#84b87e);color:var(--i-246433,#246433);box-shadow:none} .word-matching .matching-card.is-cleared{visibility:hidden;pointer-events:none}.matching-card.is-leaving{animation:matching-card-leave .3s ease-out both} .word-matching .matching-card.is-wrong{background:var(--i-fbe1e6,#fbe1e6);border-color:var(--i-d78193,#d78193);color:var(--i-9c2940,#9c2940);box-shadow:inset 0 0 0 1px var(--i-d78193,#d78193);animation:matching-wrong .32s ease-in-out} .word-matching .matching-card:disabled{opacity:1;cursor:default} .matching-check{position:absolute;top:3px;right:4px;color:var(--i-246433,#246433);font-size:12px;font-weight:800;line-height:1;pointer-events:none} .matching-flash{position:absolute;inset:0;display:grid;place-items:center;background:var(--n-294e432e,#294e432e);z-index:3;pointer-events:none;animation:matching-flash-out .8s ease-in both} .matching-flash>span{display:grid;place-items:center;width:clamp(108px,30vw,154px);aspect-ratio:1;border-radius:50%;background:var(--n-2a8058,#2a8058);color:var(--n-ffffff,#fff);font-family:var(--font-en),Arial,sans-serif;font-size:clamp(38px,10vw,54px);font-weight:750;box-shadow:0 6px 25px #0002;animation:matching-score-pop .3s ease-out both} .matching-flash.is-wrong>span{background:var(--i-b33449,#b33449)} .matching-feedback{margin:0;min-height:18px;color:var(--n-506e62,#506e62);font-size:12px;line-height:1.5;text-align:center;word-break:keep-all} .matching-feedback.is-correct{color:var(--i-176245,#176245);font-weight:600}.matching-feedback.is-wrong{color:var(--i-a32e45,#a32e45)} .word-matching .matching-error{margin:9px 0 0;padding:9px 10px;border-radius:7px;background:var(--i-fff3df,#fff3df);color:var(--i-6a431e,#6a431e);font-size:12px;line-height:1.6} .matching-round-result{display:grid;gap:7px;margin:12px 0 0;padding:15px;border:1px solid var(--n-c5ddd1,#c5ddd1);border-radius:9px;text-align:center;background:var(--n-e3f1e9,#e3f1e9)} .matching-round-result>strong{font-size:18px;color:var(--n-244b40,#244b40)}.matching-round-result>span{font-size:14px;color:var(--n-506e62,#506e62)}.matching-round-result b{color:var(--n-176245,#176245);font-size:22px}.matching-round-result small{color:var(--n-506e62,#506e62);font-size:12px} .matching-footer{display:grid;grid-template-rows:32px 38px;align-items:center;padding-top:10px;gap:4px}.matching-footer .matching-feedback{max-height:32px;overflow:auto}.matching-actions{display:flex;justify-content:center;align-items:center;gap:8px;margin:0;flex-wrap:wrap;min-height:38px} .word-matching .matching-actions button{min-height:38px;padding:8px 14px;border-radius:7px;font-size:13px;line-height:1.4}.word-matching .matching-actions .primary{background:var(--n-2f785d,#2f785d);color:var(--n-ffffff,#ffffff);font-weight:750}.word-matching .matching-actions .secondary{background:var(--n-deeee6,#deeee6);color:var(--n-285442,#285442);border-color:var(--n-acccbb,#acccbb)}.matching-actions button:disabled{opacity:.45;cursor:default} .word-matching .matching-actions .matching-extend{border-color:var(--n-719c86,#719c86);font-weight:750}.word-matching .matching-actions:has(button+button) button{padding-left:9px;padding-right:9px;font-size:12px} @media(max-width:360px){.matching-hud{gap:6px}.matching-hud .matching-clock strong{font-size:25px}.matching-medal-row{grid-template-columns:17px minmax(0,4.3em) max-content;font-size:10px}.matching-medal{font-size:14px}.matching-leader-points{font-size:9px}} @keyframes matching-wrong{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-2px)}50%{transform:translateX(2px)}} @keyframes matching-score-pop{0%{transform:scale(.6);opacity:.4}65%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes matching-flash-out{0%,55%{opacity:1}100%{opacity:0}}@keyframes matching-card-leave{from{visibility:visible;opacity:1}to{visibility:hidden;opacity:0}} @media(max-width:480px){.word-matching{padding:9px;border-radius:12px}.matching-labels,.matching-board{gap:5px}.matching-column{gap:5px;grid-template-rows:repeat(4,minmax(74px,auto))}.word-matching .matching-card{padding:8px 9px;min-height:78px}.matching-hud strong{font-size:29px}.matching-heading>button{padding:7px 10px}.matching-feedback{font-size:11px}} @media(prefers-reduced-motion:reduce){.word-matching .matching-card{transition:none}.word-matching .matching-card.is-wrong,.word-matching .matching-card.is-leaving,.matching-flash>span{animation:none}.matching-flash{animation:matching-flash-out .8s step-end both}} .study-entry-heading{display:flex;justify-content:flex-end;margin-bottom:20px}.study-entry-start{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:100%;min-height:clamp(280px,44vh,380px);padding:28px 18px;border:1px solid var(--n-e4d9bd,#e4d9bd);border-radius:20px;background:var(--n-fff3c4,#fff3c4);color:var(--n-79562d,#79562d);font:inherit;cursor:pointer;box-shadow:inset 0 0 0 4px var(--n-ffffff70,#ffffff70)}.study-entry-start small{color:var(--n-8e806b,#8e806b)}.study-entry-start:disabled{cursor:wait;opacity:.75}.study-entry-start:focus-visible{outline:3px solid var(--n-ba8e42,#ba8e42);outline-offset:4px}@media(max-width:650px){.study-entry-start{min-height:300px;border-radius:16px}} /* Start and class ranking occupy the existing card area, keeping the accordion steady. */ .matching-entry-start{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:16px;border:1px solid var(--n-b8d5c8,#b8d5c8);border-radius:8px;background:var(--n-dceee6,#dceee6);color:var(--n-285442,#285442);font:inherit;cursor:pointer;box-shadow:inset 0 0 0 3px var(--n-ffffff66,#ffffff66)} .matching-entry-start:hover:enabled{background:var(--n-d1e8dd,#d1e8dd)}.matching-entry-start:disabled{opacity:.7;cursor:wait}.matching-entry-start:focus-visible{outline:3px solid var(--n-397d61,#397d61);outline-offset:-5px} .timed-quiz{position:relative;overflow:hidden;box-sizing:border-box;width:min(100%,620px);margin:0 auto;padding:12px;border:1px solid var(--n-ead8cb,#ead8cb);border-radius:15px;background:var(--n-fff4ed,#fff4ed);color:var(--n-244b40,#244b40)} .timed-quiz.is-sentence{background:var(--i-f4f0fc,#f4f0fc);border-color:var(--i-dfd5ed,#dfd5ed)} .timed-quiz .word-builder{margin:0;padding:14px 4px 4px;border:0;background:transparent;box-shadow:none} .quiz-entry .study-entry-start{min-height:310px;border-color:var(--n-e3cbbb,#e3cbbb);background:var(--n-f7e5d9,#f7e5d9);color:var(--n-784b35,#784b35);box-shadow:inset 0 0 0 3px var(--n-ffffff66,#ffffff66)} .is-sentence .quiz-entry .study-entry-start{border-color:var(--i-d7c9e9,#d7c9e9);background:var(--i-eae0f6,#eae0f6);color:var(--i-604a7e,#604a7e)} .quiz-rules{margin:12px 0 0;text-align:center;color:var(--n-665f60,#665f60);font-size:var(--act-note);font-weight:var(--act-w-note);line-height:1.6;text-wrap:balance} .quiz-score-feedback{text-align:center;font-size:16px;font-weight:750;margin:8px 0;color:var(--n-176245,#176245)}.quiz-score-feedback.is-negative{color:var(--i-b33449,#b33449)} .quiz-results-area{position:relative;min-height:350px}.quiz-results-actions{justify-content:center}.quiz-results-actions button{min-height:40px;font-size:13px} @media(max-width:480px){.timed-quiz{padding:9px}.timed-quiz .word-builder{padding-top:10px}} .matching-leaderboard{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:14px 10px;border:1px solid var(--i-c5ddd1,#c5ddd1);border-radius:8px;background:var(--i-f7fbf9,#f7fbf9);color:var(--i-244b40,#244b40);overflow:hidden} .matching-ranking-heading{display:grid;gap:5px;flex-shrink:0;text-align:center}.matching-ranking-heading>strong{font-size:var(--act-title);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);color:var(--i-285442,#285442)}.matching-ranking-heading>span{font-size:var(--act-label);font-weight:var(--act-w-note);line-height:var(--act-lh-ui);color:var(--i-506e62,#506e62)} .matching-ranking-list{list-style:none;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0;padding:0 3px;scrollbar-color:var(--i-83a995,#83a995) transparent;scrollbar-width:thin} .matching-rank-row{display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:48px;padding:9px 8px;border-bottom:1px solid var(--i-d9e6df,#d9e6df);font-size:var(--act-note)} .matching-rank-row.is-me{background:var(--i-dceee3,#dceee3);border-radius:6px;color:var(--i-235b3d,#235b3d);border-bottom-color:transparent}.matching-rank-number{color:var(--n-4d6b5d,#4d6b5d);font-family:var(--font-en),Arial,sans-serif;font-weight:750}.matching-rank-row:nth-child(-n+3) .matching-rank-number{color:var(--i-8a5b18,#8a5b18)} .matching-rank-name{min-width:0;overflow-wrap:anywhere}.matching-rank-name>small{display:inline-block;margin-left:6px;padding:1px 4px;border:1px solid var(--n-7da68c,#7da68c);border-radius:4px;font-size:var(--act-label);vertical-align:middle}.matching-rank-row>strong{font-family:var(--font-en),Arial,sans-serif;font-size:var(--act-number);line-height:var(--act-lh-ui);white-space:nowrap}.matching-rank-row>strong>small{font:inherit;font-size:var(--act-label);font-weight:400;margin-left:3px} .matching-ranking-state{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;margin:0;padding:12px;text-align:center;overflow:auto;font-size:var(--act-note);line-height:1.6;color:var(--i-506e62,#506e62)}.matching-ranking-state>strong{font-size:var(--act-title);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);color:var(--i-285442,#285442)}.matching-ranking-state>p{margin:0}.word-matching .matching-ranking-state button{padding:8px 12px;border-color:var(--i-acccbb,#acccbb);background:var(--i-deeee6,#deeee6);color:var(--i-285442,#285442);font-size:var(--act-button-sm)} .study-practice-result .matching-ranking-state{gap:10px}.study-practice-cheer{font-size:var(--act-display);line-height:1}.study-practice-result .study-practice-line{font-size:var(--act-prompt);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);color:var(--n-285442,#285442);word-break:keep-all}.study-practice-result .study-practice-error{font-size:var(--act-note);color:var(--i-9a3b25,#9a3b25)}.study-practice-result button{padding:8px 12px;border-color:var(--n-acccbb,#acccbb);background:var(--n-deeee6,#deeee6);color:var(--n-285442,#285442);font-size:var(--act-button-sm)} @media(max-width:480px){.matching-playfield{min-height:347px}.matching-leaderboard{padding:12px 8px;gap:10px}.matching-rank-row{gap:6px;padding:8px 6px}} /* One compact toolbar for progress, optional game time/score, and close. */ .activity-toolbar,.student-inline-activity .activity-toolbar{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;width:min(100%,620px);margin:0 auto 8px;padding:0;border:0} .activity-toolbar.learning-item-heading,.student-inline-activity .activity-toolbar.learning-item-heading{display:flex;gap:8px} .activity-toolbar .learning-item-navigation{display:flex;align-items:center;justify-content:flex-start;gap:0;min-width:0;flex-shrink:0} .activity-toolbar .learning-item-arrow{width:32px;height:44px;border-radius:7px;font-size:25px} .activity-toolbar .learning-item-navigation .study-position,.activity-toolbar .learning-item-navigation .reading-position{min-width:36px;font-size:var(--act-toolbar,14px);line-height:1.3} .activity-toolbar>.secondary,.student-inline-activity .activity-toolbar>.secondary{flex-shrink:0;min-height:36px;padding:6px 9px;border-radius:10px;font-size:11px;line-height:1.3} .activity-toolbar .activity-stats{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0;flex:1;padding:0;margin:0} .activity-toolbar .matching-clock,.activity-toolbar .matching-score{display:flex;align-items:baseline;gap:5px;white-space:nowrap;text-align:left} .activity-toolbar .matching-hud-label{font-size:9px;line-height:1.2;white-space:nowrap} .activity-toolbar .matching-hud strong{font-size:19px;font-weight:700;line-height:1.1} .activity-toolbar .matching-progress{font-size:11px;white-space:nowrap}.activity-toolbar .matching-progress strong{font-size:14px} .activity-toolbar .matching-progress span{font-size:10px} @media(max-width:360px){.activity-toolbar.learning-item-heading:has(.activity-stats),.student-inline-activity .activity-toolbar.learning-item-heading:has(.activity-stats){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px}.activity-toolbar.learning-item-heading:has(.activity-stats)>.learning-item-navigation{grid-column:1;grid-row:1}.activity-toolbar.learning-item-heading:has(.activity-stats)>.secondary{grid-column:2;grid-row:1}.activity-toolbar.learning-item-heading:has(.activity-stats)>.activity-stats{grid-column:1/-1;grid-row:2;justify-content:center;gap:20px;padding-bottom:5px}.activity-toolbar .matching-hud strong{font-size:18px}.matching-heading.activity-toolbar{gap:7px}.matching-heading.activity-toolbar .activity-stats{gap:8px}.matching-heading.activity-toolbar .matching-progress span{display:none}} /* Inline home styles load later; retain the shared toolbar's compact geometry. */ :is(#studyPanel,#readingActivity) .activity-toolbar{margin:0 auto 8px;padding:0;border:0;gap:10px;min-height:44px;align-items:center} :is(#studyPanel,#readingActivity) .activity-toolbar>.secondary{min-height:36px;padding:6px 9px;font-size:11px;border-radius:10px} :is(#studyPanel,#readingActivity) .study-entry-heading.activity-toolbar{justify-content:flex-end} /* The Day reading score updates in place without disturbing audio or recording. */ #readingActivity .reading-day-score{display:flex;align-items:baseline;gap:4px;margin-left:auto;white-space:nowrap;color:var(--n-42654a,#42654a);font-variant-numeric:tabular-nums} #readingActivity .reading-day-score>span{font-size:9px;line-height:1.2} #readingActivity .reading-day-score>strong{font-size:18px;font-weight:750;line-height:1.1} #readingActivity .reading-day-score>small{font-size:10px;font-weight:500;color:var(--n-71826b,#71826b)} #readingActivity .reading-complete{padding:8px 0 4px;text-align:center} #readingActivity .reading-complete>button{width:100%;min-height:44px;padding:11px 20px;font-size:15px} /* Immediate card press feedback; scores still wait for the saved answer. */ .word-matching .matching-card{transition:none} .word-matching .matching-card:active:enabled{background:var(--n-d9eee5,#d9eee5);border-color:var(--n-4c957a,#4c957a);transform:scale(.98)} .sentence-answer.is-wrong{border-color:var(--i-d47b81,#d47b81);background:var(--i-fff0f0,#fff0f0);animation:builder-letter-shake .42s ease-in-out both} .sentence-answer.is-wrong .sentence-chunk{color:var(--i-b63036,#b63036);background:var(--i-ffe8e9,#ffe8e9);border-color:var(--i-d47b81,#d47b81)} @media(prefers-reduced-motion:reduce){.sentence-answer.is-wrong{animation:none}.word-matching .matching-card:active:enabled{transform:none}} .activity-mode-entry{--mode-practice:var(--i-e3ecd9,#e3ecd9);--mode-border:var(--i-bdcfae,#bdcfae);--mode-ink:var(--i-425b32,#425b32);--mode-muted:var(--i-526647,#526647);--mode-ranking:var(--i-597445,#597445);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:12px;min-height:290px;padding:22px 16px;border:1px solid var(--n-d3dfc9,#d3dfc9);border-radius:18px;background:var(--n-f0f5ea,#f0f5ea)} .activity-mode-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:125px;padding:18px 9px;border:1px solid var(--mode-border);border-radius:15px;background:var(--mode-practice);color:var(--mode-ink);font:inherit;cursor:pointer;box-shadow:0 3px 12px #254d3210} .activity-mode-button strong{white-space:nowrap}.activity-mode-button small{color:var(--mode-muted)} .activity-mode-button.is-ranking{color:var(--i-ffffff,#fff);background:var(--mode-ranking);border-color:var(--mode-ranking)}.activity-mode-button.is-ranking small{color:var(--i-ffffff,#fff)}.activity-mode-button:disabled{opacity:.5;cursor:default}.activity-mode-button:focus-visible{outline:3px solid var(--mode-ranking);outline-offset:3px} .quiz-entry>.activity-mode-entry{--mode-practice:var(--i-f9e2d5,#f9e2d5);--mode-border:var(--i-dfbba8,#dfbba8);--mode-ink:var(--i-85452e,#85452e);--mode-muted:var(--i-855b49,#855b49);--mode-ranking:var(--i-9b533b,#9b533b);background:var(--n-fff3ed,#fff3ed);border-color:var(--n-f0d7ca,#f0d7ca)}.is-sentence .quiz-entry>.activity-mode-entry{--mode-practice:var(--i-e9e0f5,#e9e0f5);--mode-border:var(--i-c9b8df,#c9b8df);--mode-ink:var(--i-654781,#654781);--mode-muted:var(--i-6b577d,#6b577d);--mode-ranking:var(--i-765397,#765397);background:var(--i-f2f1fb,#f2f1fb);border-color:var(--i-dfdaf0,#dfdaf0)} .matching-playfield>.activity-mode-entry{--mode-practice:var(--i-d7eae4,#d7eae4);--mode-border:var(--i-aaccc0,#aaccc0);--mode-ink:var(--i-285c4c,#285c4c);--mode-muted:var(--i-4b6a60,#4b6a60);--mode-ranking:var(--i-347567,#347567);min-height:100%;position:absolute;inset:0;border-radius:8px;background:var(--n-e7f2ee,#e7f2ee);border-color:var(--matching-activity-border,var(--n-d4e6df,#d4e6df))} .activity-challenges{flex-shrink:0;display:inline-flex;align-items:baseline;justify-content:center;gap:3px;white-space:nowrap;color:var(--i-7c775e,#7c775e);font-size:9px;line-height:1.3}.activity-challenges strong{font-size:13px;color:var(--i-47745a,#47745a)}.activity-challenges small{font-size:9px} .activity-toolbar:has(.activity-challenges){column-gap:6px}.activity-toolbar:has(.activity-challenges) .activity-stats{gap:8px}.activity-toolbar:has(.activity-challenges) .matching-clock,.activity-toolbar:has(.activity-challenges) .matching-score{gap:3px} .reading-practice-actions{display:flex;justify-content:center;gap:10px;margin:16px 0 0}.reading-practice-actions>button{min-width:100px;min-height:44px;font-size:14px}.reading-practice-note{margin:14px 0 0;color:var(--n-6e806f,#6e806f);text-align:center;font-size:12px;line-height:1.6} .activity-challenges{flex-direction:column;align-items:center;gap:0;line-height:1.15}.activity-challenges-count{display:flex;align-items:baseline;gap:1px}.activity-toolbar:has(.activity-challenges) .activity-stats{min-width:max-content} @media(max-width:480px){.activity-toolbar:has(.activity-challenges):has(.activity-stats){display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;gap:0 8px!important}.activity-toolbar:has(.activity-challenges)>.learning-item-navigation,.activity-toolbar:has(.activity-challenges)>.matching-progress{grid-column:1;grid-row:1}.activity-toolbar:has(.activity-challenges)>.activity-challenges{grid-column:2;grid-row:1}.activity-toolbar:has(.activity-challenges)>.secondary{grid-column:3;grid-row:1}.activity-toolbar:has(.activity-challenges)>.activity-stats{grid-column:1/-1;grid-row:2;justify-content:center;gap:18px;padding:3px 0 4px}} @media(max-width:360px){.activity-toolbar:has(.activity-challenges){flex-wrap:wrap}.activity-toolbar.learning-item-heading:has(.activity-challenges){grid-template-columns:minmax(0,1fr) auto auto}.activity-toolbar.learning-item-heading:has(.activity-challenges)>.activity-challenges{grid-column:2;grid-row:1}.activity-toolbar.learning-item-heading:has(.activity-challenges)>.secondary{grid-column:3;grid-row:1}.activity-mode-entry{padding:15px 10px;gap:9px}.activity-mode-button{min-height:115px}.activity-challenges{font-size:8px}.activity-challenges strong{font-size:12px}} /* Games keep progress, allowance, clock, points and close in one short row. */ #studyPanel{container-name:study-panel;container-type:inline-size} #studyPanel .compact-game-toolbar{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:5px!important;min-height:44px;margin-bottom:5px} #studyPanel .compact-game-toolbar:not(:has(.activity-challenges)){grid-template-columns:minmax(0,1fr) auto} #studyPanel .compact-game-toolbar>.learning-item-navigation,#studyPanel .compact-game-toolbar>.matching-progress,#studyPanel .compact-game-toolbar>.activity-challenges,#studyPanel .compact-game-toolbar>.activity-stats,#studyPanel .compact-game-toolbar>.secondary{grid-area:auto} #studyPanel .compact-game-toolbar .learning-item-arrow{width:24px;height:44px;font-size:22px} #studyPanel .compact-game-toolbar .study-position{min-width:26px;font-size:12px} #studyPanel .compact-game-toolbar .matching-progress{margin:0;font-size:11px}#studyPanel .compact-game-toolbar .matching-progress strong{font-size:13px}#studyPanel .compact-game-toolbar .matching-progress>span{display:none} #studyPanel .compact-game-toolbar>.activity-challenges{display:flex;flex-direction:row;gap:2px;align-items:baseline;white-space:nowrap;font-size:9px} #studyPanel .compact-game-toolbar .activity-challenges-label{display:none}#studyPanel .compact-game-toolbar>.activity-challenges:before{content:'도전';font-size:9px}#studyPanel .compact-game-toolbar .activity-challenges strong{font-size:12px} #studyPanel .compact-game-toolbar>.activity-stats{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;height:44px;min-width:0;align-items:center;justify-content:center;gap:14px;padding:0} #studyPanel .compact-game-toolbar .matching-clock,#studyPanel .compact-game-toolbar .matching-score{position:relative;gap:3px;min-width:0} #studyPanel .compact-game-toolbar .matching-hud-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #studyPanel .compact-game-toolbar .matching-clock:before{content:'';display:block;flex-shrink:0;width:10px;height:10px;border:1px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) center 2px/1px 4px no-repeat,linear-gradient(currentColor,currentColor) 5px 5px/3px 1px no-repeat} #studyPanel .compact-game-toolbar .matching-score:before{content:'점';font-size:9px} #studyPanel .compact-game-toolbar .matching-hud strong{font-size:17px;line-height:1.2;font-variant-numeric:tabular-nums} #studyPanel .compact-game-toolbar>.secondary{min-height:44px;padding:5px 7px;font-size:10px;border-radius:9px} .word-matching .matching-footer.is-compact{display:flex;align-items:center;gap:6px;min-height:32px;padding-top:4px;flex-wrap:wrap} .word-matching .matching-footer.is-compact .matching-feedback{flex:1;min-width:70px;min-height:0;max-height:none;margin:0;text-align:left;overflow:visible;overflow-wrap:anywhere} .word-matching .matching-footer.is-compact .matching-actions{min-height:0;gap:4px;margin:0;flex-wrap:wrap} .word-matching .matching-footer.is-compact .matching-actions button{min-height:32px;padding:4px 7px;border-radius:7px;line-height:1.3} @media(max-width:360px){#studyPanel .compact-game-toolbar{gap:3px!important}#studyPanel .compact-game-toolbar .learning-item-arrow{width:20px}#studyPanel .compact-game-toolbar>.activity-stats{gap:12px}#studyPanel .compact-game-toolbar .matching-hud strong{font-size:15px}#studyPanel .compact-game-toolbar>.secondary{padding:4px 5px}} @container study-panel (max-width:300px){#studyPanel .compact-game-toolbar{gap:3px!important}#studyPanel .compact-game-toolbar .learning-item-arrow{width:20px}#studyPanel .compact-game-toolbar>.activity-stats{gap:12px}#studyPanel .compact-game-toolbar .matching-hud strong{font-size:15px}#studyPanel .compact-game-toolbar>.secondary{padding:4px 5px}} @media(orientation:landscape){.student-inline-activity .matching-playfield{scroll-margin-block-start:88px}} /* Teacher-only Korean annotations preserve the existing learning version. */ .curriculum-sentence-choices>.curriculum-sentence-choice{padding:10px 0;border-bottom:1px solid var(--line,var(--n-e8e1d4,#e8e1d4))} .curriculum-sentence-choice>label{display:flex;align-items:flex-start;gap:9px} .curriculum-sentence-choice>.curriculum-translation-field{display:block;margin:9px 0 0 25px;color:var(--n-625849,#625849);font-size:13px} .curriculum-sentence-choice>.curriculum-translation-field[hidden]{display:none} .curriculum-translation-field>span{display:block;margin-bottom:5px} .curriculum-translation-field textarea{display:block;width:100%;min-height:62px;font-size:15px;line-height:1.6} .curriculum-translation-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 18px} .curriculum-translation-toolbar .field-help{margin:0} /* Range controls must not inherit the book editor text-field padding. */ .study-speed input[type="range"]{box-sizing:border-box;min-width:0;height:30px;margin:0;padding:0;border:0;border-radius:0;background:transparent;flex-shrink:0} /* Activity screens v2 (owner, 2026-10-28: "make the activities look like the Activities-tab previews"; "the activity window must not change size while a child answers"). Each activity is one white screen card on a soft background (dist/activity-guide.js previews): a top row with the 연습 / 랭킹 도전 pill and the timer or steps, large Andika English, raised key tiles, calm colours and the round +5 circle. Zones keep the Day's largest size (study.js measures them), so buttons never move. Only appearance changes here: scoring, timers, audio order and requests stay in study.js. */ #studyPanel{--pv-paper:var(--n-fffefb,#fffefb);--pv-line:var(--n-e6d9c6,#e6d9c6);--pv-shadow:0 10px 22px #4b341f14,0 1px 2px #4b341f0d;--pv-ink:var(--n-2f3b63,#2f3b63);--pv-text:var(--n-3d3a35,#3d3a35);--pv-muted:var(--n-6f685d,#6f685d);--pv-soft:var(--n-f4efe6,#f4efe6);--pv-brown:var(--n-5d4a2f,#5d4a2f);--pv-meaning:var(--n-6a5a43,#6a5a43);--pv-practice:var(--i-e8f1e3,#e8f1e3);--pv-practice-ink:var(--i-46733b,#46733b);--pv-ranking:var(--i-fff0d0,#fff0d0);--pv-ranking-ink:var(--i-9a5f1c,#9a5f1c);--pv-key:var(--n-fff7e6,#fff7e6);--pv-key-line:var(--n-d9cbb5,#d9cbb5);--pv-key-edge:var(--n-e6d6bd,#e6d6bd);--pv-key-ink:var(--n-5a4630,#5a4630);--pv-slot:var(--n-c9b79b,#c9b79b);--pv-glow:var(--n-ffe2a8,#ffe2a8);--pv-glow-line:var(--n-e2a948,#e2a948);--pv-good:var(--i-4c9d63,#4c9d63);--pv-good-ink:var(--i-2f7a45,#2f7a45);--pv-good-soft:var(--i-e5f4e8,#e5f4e8);--pv-good-line:var(--i-9fd2ad,#9fd2ad);--pv-bad:var(--i-d0644f,#d0644f);--pv-bad-ink:var(--i-b0402f,#b0402f);--pv-bad-soft:var(--i-fde9e4,#fde9e4);--pv-bad-line:var(--i-eba596,#eba596);--pv-go:var(--n-4a7a3f,#4a7a3f);--pv-go-line:var(--n-3f6b35,#3f6b35);--pv-mint:var(--i-e4f3ee,#e4f3ee);--pv-mint-line:var(--i-cfe5dc,#cfe5dc);--pv-mint-ink:var(--n-35524a,#35524a); --pv-i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l3 2M9 2h6'/%3E%3C/svg%3E"); --pv-i-voice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4Z'/%3E%3Cpath d='M16 9.5a4 4 0 0 1 0 5M18.5 7a7.5 7.5 0 0 1 0 10'/%3E%3C/svg%3E")} /* The name heads the screen in teacher previews; on the student home the row header shows it. */ #studyPanel>.study-activity-title{box-sizing:border-box;width:min(100%,620px);margin:0 auto 4px;color:var(--pv-brown);font-size:15px;font-weight:750;line-height:1.5;overflow-wrap:anywhere} .student-inline-activity #studyPanel>.study-activity-title{display:none} /* Toolbar above the card: arrows and counter, today's chances and a calm 닫기 pill. */ #studyPanel .activity-toolbar,.student-inline-activity #studyPanel .study-heading{width:min(100%,620px);min-height:44px;margin:0 auto 8px;padding:0;border:0} #studyPanel .activity-toolbar>[data-study="back"]{min-width:52px;min-height:44px;padding:6px 14px;border:1px solid var(--pv-line);border-radius:999px;background:var(--n-ffffff,#fff);color:var(--n-6a5f50,#6a5f50);font-size:13px;font-weight:700;box-shadow:0 1px 2px #4b341f0f} #studyPanel .activity-toolbar .learning-item-arrow{width:40px;height:44px;border-radius:12px;color:var(--n-a08b6c,#a08b6c)} #studyPanel .compact-game-toolbar{display:flex!important;align-items:center;justify-content:space-between;gap:8px!important;margin-bottom:8px} #studyPanel .compact-game-toolbar>.learning-item-navigation,#studyPanel .compact-game-toolbar>.matching-progress{margin-right:auto} #studyPanel .compact-game-toolbar .learning-item-arrow{width:36px} /* Narrow arrows keep a 44px-wide tap area. */ #studyPanel .activity-toolbar .learning-item-arrow{position:relative} #studyPanel .activity-toolbar .learning-item-arrow::after{content:'';position:absolute;inset:0 -4px} #studyPanel .compact-game-toolbar .study-position{min-width:32px;font-size:var(--act-toolbar,14px)} #studyPanel .compact-game-toolbar .matching-progress{font-size:12px}#studyPanel .compact-game-toolbar .matching-progress strong{font-size:16px} #studyPanel .compact-game-toolbar>.activity-challenges,#studyPanel .activity-toolbar>.activity-challenges{display:inline-flex;flex-direction:row;align-items:baseline;gap:3px;padding:4px 10px;border-radius:999px;background:var(--i-fff8ec,#fff8ec);color:var(--i-8a7356,#8a7356);font-size:var(--act-label);font-weight:700;line-height:1.4;white-space:nowrap} #studyPanel .activity-toolbar>.activity-challenges:before{content:none} #studyPanel .activity-toolbar .activity-challenges-label{display:inline;font-size:var(--act-label)} #studyPanel .activity-toolbar .activity-challenges strong{font-size:var(--act-toolbar,14px);font-weight:700;color:var(--pv-ranking-ink)} #studyPanel .activity-toolbar .activity-challenges small{font-size:var(--act-label)} /* The screen card. */ #studyPanel :is(.study-word-card,.timed-quiz,.word-matching,.study-finish,.study-entry-start){box-sizing:border-box;width:min(100%,620px);margin:0 auto;border:1px solid var(--pv-line);border-radius:20px;background:var(--pv-paper);box-shadow:var(--pv-shadow);color:var(--pv-text)} #studyPanel :is(.study-word-card,.timed-quiz,.word-matching){padding:14px 16px 16px} #studyPanel .study-screen-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin:0 0 10px;color:var(--pv-muted);font-size:13px;font-weight:700} #studyPanel .study-mode-pill{flex:0 0 auto;padding:4px 12px;border-radius:999px;background:var(--pv-practice);color:var(--pv-practice-ink);font-size:var(--act-label);font-weight:var(--act-w-strong);line-height:1.4;white-space:nowrap} #studyPanel .study-mode-pill.is-ranking{background:var(--pv-ranking);color:var(--pv-ranking-ink)} #studyPanel .study-screen-top.is-waiting .study-mode-pill{visibility:hidden} /* Before a mode is chosen the score pill keeps its room but says nothing (no "연습 점수" yet). */ #studyPanel .study-screen-top.is-waiting .matching-score{visibility:hidden} /* Timer and score as small pills (the visible label stays for the score; the clock shows an icon). */ #studyPanel .study-screen-top .matching-hud{display:flex;align-items:center;gap:6px;margin:0;padding:0} #studyPanel .study-screen-top :is(.matching-clock,.matching-score){display:inline-flex;align-items:center;gap:5px;min-height:30px;box-sizing:border-box;padding:3px 11px;border-radius:999px;background:var(--pv-soft);color:var(--n-6a5f50,#6a5f50);text-align:left} #studyPanel .study-screen-top .matching-clock .matching-hud-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #studyPanel .study-screen-top .matching-clock:before{content:'';flex:0 0 auto;width:15px;height:15px;background:currentColor;-webkit-mask:var(--pv-i-clock) center/contain no-repeat;mask:var(--pv-i-clock) center/contain no-repeat} #studyPanel .study-screen-top .matching-score .matching-hud-label{color:inherit;font-size:var(--act-label);font-weight:700;line-height:1} #studyPanel .study-screen-top .matching-hud strong{min-width:2ch;color:var(--pv-text);font-size:var(--act-number);font-weight:var(--act-w-strong);line-height:1.2;font-variant-numeric:tabular-nums} #studyPanel .study-screen-top .matching-clock.is-urgent{background:var(--pv-bad-soft);color:var(--pv-bad-ink)} #studyPanel .study-screen-top .matching-clock.is-urgent strong,#studyPanel .study-screen-top .matching-score.is-negative strong{color:var(--pv-bad-ink)} #studyPanel .study-progress-track{box-sizing:border-box;width:100%;height:5px;margin:-2px 0 10px;border-radius:999px;background:var(--n-efe7da,#efe7da);overflow:hidden} #studyPanel .study-progress-track>span{display:block;height:100%;border-radius:inherit;background:var(--n-d6b47a,#d6b47a);transition:width .25s ease-out} /* Invisible Day variants share a grid cell with the visible text, so the zone keeps the largest size. */ #studyPanel .study-sizer{visibility:hidden} /* 단어 읽기: spelling tiles light up letter by letter, then the word, then the meaning; then read aloud twice. */ #studyPanel .study-word-card{container-type:inline-size;text-align:center} #studyPanel .study-screen-top .study-steps{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none} #studyPanel .study-screen-top .study-steps>li{display:inline-flex;align-items:center;gap:4px;color:var(--pv-muted);font-size:0;font-weight:var(--act-w-strong);line-height:1;white-space:nowrap} #studyPanel .study-screen-top .study-steps>li:before{content:none} #studyPanel .study-screen-top .study-steps>li>span{display:grid;place-items:center;width:10px;height:10px;box-sizing:border-box;border:1.5px solid var(--n-d6c8b0,#d6c8b0);border-radius:50%;background:var(--n-ffffff,#fff);font-size:0;box-shadow:none} #studyPanel .study-screen-top .study-steps>li.is-done>span{border-color:var(--i-6b9a5d,#6b9a5d);background:var(--i-6b9a5d,#6b9a5d)} #studyPanel .study-screen-top .study-steps>li.is-done>span:after{content:none} #studyPanel .study-screen-top .study-steps>li.is-active{color:var(--n-8d5d31,#8d5d31);font-size:var(--act-label)} #studyPanel .study-screen-top .study-steps>li.is-active>span{border-color:var(--n-e3b866,#e3b866);background:var(--n-e3b866,#e3b866);box-shadow:0 0 0 3px var(--n-f6e3bd,#f6e3bd)} /* Tile size and rows come from the Day's longest word (one row up to 14 letters), so every word keeps the same box. Eight or more columns (S5's "Halloween") close the gap to 4px, and a letter never drops below the chip size (--act-chip) while the tile can hold it, so the spelling lesson's letters stay at least as large as a word chip. */ #studyPanel .study-letter-tiles{--tile:min(44px,calc((100cqi - var(--tile-gap,6px) * (var(--tile-cols,6) - 1)) / var(--tile-cols,6)));display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--tile-gap,6px);height:calc(var(--tile) * 1.15 * var(--tile-rows,1) + var(--tile-gap,6px) * (var(--tile-rows,1) - 1));margin:4px 0 12px} #studyPanel .study-letter-tiles>*{height:calc(var(--tile) * 1.15)} #studyPanel .study-letter-tile{display:grid;place-items:center;box-sizing:border-box;width:var(--tile);border:1px solid var(--n-e3dccf,#e3dccf);border-radius:calc(var(--tile) * .28);background:var(--n-faf7f1,#faf7f1);color:var(--n-5a5245,#5a5245);font-size:max(min(var(--act-chip),calc(var(--tile) * .74)),min(calc(var(--tile) * .62),var(--act-tile)));font-weight:700;line-height:1;transition:background-color .15s,border-color .15s,transform .15s} #studyPanel .study-letter-tile.is-mark{border-color:transparent;background:transparent} #studyPanel .study-letter-gap{flex:0 0 calc(var(--tile) * .4)} #studyPanel .study-letter-tile.is-done{border-color:var(--i-ecd3a3,#ecd3a3);background:var(--i-fff4dc,#fff4dc)} #studyPanel .study-letter-tile.is-lit{border-color:var(--pv-glow-line);background:var(--pv-glow);color:var(--n-3d2f1d,#3d2f1d);transform:translateY(-3px) scale(1.08)} #studyPanel .study-word{display:block;width:max-content;max-width:100%;margin:0 auto;padding:0 12px;border-radius:14px;color:var(--pv-ink);font-size:clamp(20px,calc(150cqi / var(--word-length,8)),var(--act-word));font-weight:700;line-height:var(--act-lh-word);letter-spacing:var(--act-track-word);white-space:nowrap;transition:background-color .2s} #studyPanel .study-spelling-letter.active{color:inherit;background:none;box-shadow:none;text-decoration:none} #studyPanel .study-word-card[data-stage="word"] .study-word{background:var(--pv-glow)} #studyPanel .study-meaning{display:grid;justify-items:center;align-items:center;margin:6px 0 0;color:var(--pv-meaning);font-size:var(--act-ko);font-weight:var(--act-w-ko);line-height:var(--act-lh-ko)} #studyPanel .study-meaning>*{grid-area:1/1;max-width:100%;padding:1px 12px;border-radius:999px;overflow-wrap:anywhere;word-break:keep-all;transition:background-color .2s} #studyPanel .study-word-card[data-stage="meaning"] .study-meaning>span:first-child{background:var(--pv-glow)} #studyPanel .study-phase{display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:48px;margin:14px 0 12px;padding:6px 12px;border-radius:12px;background:var(--pv-soft);color:var(--n-6a5f50,#6a5f50);font-size:var(--act-note);font-weight:var(--act-w-note);line-height:1.4;word-break:keep-all;text-wrap:balance} #studyPanel .study-phase:before{content:'';flex:0 0 auto;width:16px;height:16px;background:currentColor;-webkit-mask:var(--pv-i-voice) center/contain no-repeat;mask:var(--pv-i-voice) center/contain no-repeat} #studyPanel .study-word-card[data-stage="say"] .study-phase{background:var(--n-eef5ea,#eef5ea);color:var(--pv-practice-ink);animation:pv-say 2.4s ease-in-out infinite} @keyframes pv-say{0%,100%{box-shadow:0 0 0 0 var(--n-cfe4c600,#cfe4c600)}50%{box-shadow:0 0 0 4px var(--n-cfe4c6,#cfe4c6)}} #studyPanel .study-word-card .study-audio-controls{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin:0;flex-wrap:nowrap} #studyPanel .study-word-card .study-audio-controls button{flex:0 0 auto;width:10.4em;min-width:0;min-height:44px;padding:8px 14px;border:1px solid var(--pv-key-line);border-radius:999px;background:var(--n-ffffff,#fff);color:var(--n-6a5a43,#6a5a43);font-size:var(--act-button-sm);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);white-space:nowrap} #studyPanel .study-word-card .study-speed{flex:0 1 auto;min-width:0;gap:6px;color:var(--pv-muted);font-size:var(--act-label);white-space:nowrap} #studyPanel .study-word-card .study-speed input[type="range"]{flex:1 1 76px;width:76px;min-width:44px;accent-color:var(--n-c79b5f,#c79b5f)} #studyPanel .study-next{display:flex;justify-content:center;gap:10px;width:min(100%,620px);margin:12px auto 0} #studyPanel .study-next button{flex:1 1 0;max-width:240px;min-height:50px;border-radius:14px;font-size:var(--act-button);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui)} #studyPanel :is(.study-next,.quiz-results-actions,.matching-actions) .secondary{border:1px solid var(--pv-key-line);background:var(--n-ffffff,#fff);color:var(--n-6a5a43,#6a5a43)} #studyPanel :is(.study-next,.quiz-results-actions,.matching-actions) .primary{border:1px solid var(--pv-go-line);background:var(--pv-go);color:var(--n-ffffff,#fff)} #studyPanel :is(.study-next,.quiz-results-actions,.matching-actions) button:disabled{opacity:.45} /* The vocabulary start card and the shared finish card. */ #studyPanel .study-entry-start{gap:12px;min-height:clamp(240px,40vh,320px);padding:24px 18px;color:var(--pv-practice-ink);font-size:var(--act-title);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui)} /* The Start gate's word is a raised button with a play mark, not a label (review, 2026-10-28). */ #studyPanel .study-entry-start>span{display:inline-flex;align-items:center;gap:.45em;padding:10px 28px 10px 24px;border:1.5px solid var(--n-cfe2c5,#cfe2c5);border-radius:999px;background:var(--pv-practice);box-shadow:0 3px 0 var(--n-cfe2c5,#cfe2c5)} #studyPanel .study-entry-start>span::before{content:'';flex:0 0 auto;width:0;height:0;border-style:solid;border-width:.4em 0 .4em .64em;border-color:transparent transparent transparent currentColor} #studyPanel .study-entry-start small{color:var(--pv-muted);font-size:var(--act-note);font-weight:var(--act-w-note);line-height:1.5;text-align:center;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance} /* Inside a game card (teacher previews without modes) the start tile is a soft panel, not a second card. */ #studyPanel .timed-quiz .quiz-entry .study-entry-start{min-height:300px;border:1.5px solid var(--n-e3dccf,#e3dccf);background:var(--n-faf7f1,#faf7f1);box-shadow:none} #studyPanel .study-finish{padding:26px 18px 20px;line-height:1.6;text-align:center} #studyPanel .study-finish>span{width:84px;height:84px;margin-bottom:10px;border:0;background:var(--pv-good);color:var(--n-ffffff,#fff);font-size:40px;font-weight:700;box-shadow:0 0 0 7px var(--pv-good-soft)} #studyPanel .study-finish-badge.is-retry{background:var(--i-e3b866,#e3b866);box-shadow:0 0 0 7px var(--i-fbf0d9,#fbf0d9)} #studyPanel .study-finish h2{margin:6px 0 2px;color:var(--pv-text);font-size:var(--act-title);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);letter-spacing:0} #studyPanel .study-finish p{margin:0 0 16px;color:var(--pv-muted);font-size:var(--act-ko);font-weight:var(--act-w-ko);line-height:var(--act-lh-ko)} #studyPanel .study-finish .study-next{margin:0} /* 연습 | 랭킹 도전 tiles (owner, 2026-11-05: "연습과 도전 버튼 좀 더 예쁘게 이미지 넣어 바꿔주고 … 연습과 도전 글씨는 줄이 맞야해", "랭킹 도전으로 하자"; dist/activity-entry.js). Every tile is three rows of fixed height: the picture (--mode-art), the one-line label and a note of two reserved lines, so both labels sit on one baseline in every state and at every width; the lock and the check sit on the picture's corner. The '랭킹' chip (top edge) is only for a one-word '도전' label: activity-entry.js leaves it out while the label says 랭킹 도전. Colours come only from the --t-* tokens (every 화면 색), text sizes from --act-*. The box around the tiles keeps the size of the screen it opens (the screen sits hidden underneath). */ #studyPanel .activity-mode-entry,.book-panel #readingActivity .activity-mode-entry{--mode-art:clamp(56px,17vw,72px);--mode-label-h:calc(var(--act-title)*var(--act-lh-ui));--mode-note-lh:1.45;--mode-note-h:calc(var(--act-note)*var(--mode-note-lh)*2);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:12px;min-height:250px;box-sizing:border-box;padding:18px 16px;border:1px solid var(--pv-line,var(--n-e6d9c6,#e6d9c6));border-radius:20px;background:var(--n-fffefb,#fffefb);box-shadow:0 10px 22px #4b341f14,0 1px 2px #4b341f0d} #studyPanel :is(.quiz-entry,.matching-playfield)>.activity-mode-entry{border:0;background:transparent;box-shadow:none} #studyPanel .matching-playfield>.activity-mode-entry{position:absolute;inset:0;min-height:0;border-radius:14px} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button{--mode-bg:var(--t-success-soft);--mode-edge:color-mix(in srgb,var(--t-success) 32%,var(--t-success-soft));--mode-label:color-mix(in srgb,var(--t-success) 80%,var(--t-ink));--mode-note:var(--t-ink);position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;justify-items:center;box-sizing:border-box;min-width:0;padding:12px 8px;border:1.5px solid var(--mode-edge);border-radius:18px;background:var(--mode-bg);color:var(--mode-label);box-shadow:0 3px 0 var(--mode-edge);font:inherit;font-size:var(--act-note);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .12s ease;container-type:inline-size} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-art{position:relative;display:block;width:100%;height:var(--mode-art)} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-svg{display:block;width:100%;height:100%;overflow:visible} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button .activity-mode-label{display:block;height:var(--mode-label-h);margin-top:8px;color:var(--mode-label);font-size:var(--act-title);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);white-space:nowrap} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button .activity-mode-note{display:block;box-sizing:border-box;width:100%;height:var(--mode-note-h);margin-top:2px;color:var(--mode-note);font-size:var(--act-note);font-weight:var(--act-w-note);line-height:var(--mode-note-lh);word-break:keep-all;text-align:center;text-wrap:balance} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-kicker{position:absolute;top:0;left:50%;z-index:1;transform:translate(-50%,-50%);padding:1px 8px;white-space:nowrap;border:1px solid var(--t-primary);border-radius:999px;background:var(--t-primary);color:var(--t-on-primary);font-size:var(--act-label);font-weight:var(--act-w-strong);line-height:1.4} /* Narrow tiles (a phone held sideways splits 내 학습 in two columns: tiles of 73–95 px): a note that needs three lines gets them, in both tiles of a pair alike (they are always the same width), so no note runs over the tile's edge and no state changes a size. 6.5em of the note size is a little more than the longest note ('연습을 한 번 마치면 열려요') needs for two lines. A pair with a long label ('랭킹 도전' — owner, 2026-11-05: "랭킹 도전으로 하자" — or 이어하기) fits both labels to the tile, one size for both. '랭킹 도전' is 3.93-3.96 em wide in the page's Noto Sans KR bold (the space comes from the 글씨체 chosen) and about 4.3 em in a fallback face that draws every syllable 1 em wide (no web font), so (100cqi + 6px)/4.3 keeps it on one line: in Noto Sans KR inside the content box (at most 0.6 px into the padding on the narrowest, 73.5 px tile), in such a fallback at most 3 px into each side's 8 px padding; the tile's one column is minmax(0,1fr), so such a label overflows into the padding, centred, and never widens the column (the picture is the column's width and keeps its size in every state). Wherever that is more than --act-title (upright phones from 320 px, tablets, desktops, sideways phones from 740 px) both labels keep the full size; only narrow tiles (under 71 / 80 / 89 px of content for an --act-title of 18 / 20 / 22 px) shrink them. The line box keeps the label row's height and an empty strut of the full label size keeps the baseline exactly where it is at the full size, so 연습 and 랭킹 도전 always share one baseline. */ @container (max-width:6.5em){:is(#studyPanel,.book-panel #readingActivity) .activity-mode-button .activity-mode-note{height:calc(var(--act-note)*var(--mode-note-lh)*3)}} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-entry.has-long-label .activity-mode-button .activity-mode-label{font-size:min(var(--act-title),calc((100cqi + 6px)/4.3));line-height:var(--mode-label-h)} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-entry.has-long-label .activity-mode-button .activity-mode-label::before{content:'';font-size:var(--act-title)} /* 랭킹 도전: the theme's highlight with its primary ink. */ :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button.is-ranking{--mode-bg:color-mix(in srgb,var(--t-highlight) 45%,var(--t-card));--mode-edge:color-mix(in srgb,var(--t-primary) 30%,var(--t-highlight));--mode-label:var(--t-primary)} /* Locked (no practice yet) and used up today: calm, the label stays where it is; a locked tile has a dashed edge. */ :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button.is-ranking:is([data-state="locked"],[data-state="used"]){--mode-bg:color-mix(in srgb,var(--t-line) 30%,var(--t-card));--mode-edge:var(--t-line);--mode-label:var(--t-muted);--mode-note:var(--t-muted);box-shadow:none;cursor:default} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button.is-ranking[data-state="locked"]{border-style:dashed;border-color:color-mix(in srgb,var(--t-muted) 45%,var(--t-line))} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:is([data-state="locked"],[data-state="used"]) .activity-mode-kicker{border-color:var(--t-line);background:var(--t-card);color:var(--t-muted)} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:disabled{opacity:1;cursor:default} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-entry[aria-busy="true"] .activity-mode-button{cursor:progress} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:active:enabled{transform:scale(.97);box-shadow:0 1px 0 var(--mode-edge)} @media(hover:hover){:is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:hover:enabled{border-color:color-mix(in srgb,var(--mode-label) 45%,var(--mode-edge))}} :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:focus-visible{outline:3px solid var(--t-focus);outline-offset:3px} /* The pictures' parts (activity-entry.js PRACTICE_ART / TROPHY). */ :is(#studyPanel,.book-panel #readingActivity) .activity-mode-svg{--ma-gold:color-mix(in srgb,var(--t-highlight) 76%,var(--t-primary));--ma-edge:var(--t-primary);--ma-base:var(--t-primary);--ma-spark:color-mix(in srgb,var(--t-highlight) 35%,var(--t-primary))} .activity-mode-svg .ma-shadow{fill:var(--t-ink);fill-opacity:.08} .activity-mode-svg .ma-cover{fill:var(--t-success)} .activity-mode-svg .ma-page{fill:var(--t-card);stroke:color-mix(in srgb,var(--t-success) 55%,var(--t-line));stroke-width:1.4;stroke-linejoin:round} .activity-mode-svg .ma-rule{fill:none;stroke:color-mix(in srgb,var(--t-success) 30%,var(--t-line));stroke-width:1.6;stroke-linecap:round} .activity-mode-svg .ma-ink{fill:none;stroke:var(--t-primary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .activity-mode-svg .ma-pencil{fill:var(--ma-gold);stroke:var(--ma-edge);stroke-width:1.3} .activity-mode-svg .ma-pencil-line{fill:none;stroke:var(--ma-edge);stroke-width:1;stroke-opacity:.45} .activity-mode-svg .ma-wood{fill:color-mix(in srgb,var(--t-highlight) 35%,var(--t-card));stroke:var(--ma-edge);stroke-width:1.3;stroke-linejoin:round} .activity-mode-svg .ma-lead{fill:var(--t-ink)} .activity-mode-svg .ma-eraser{fill:var(--t-error-soft);stroke:color-mix(in srgb,var(--t-error) 55%,var(--t-error-soft));stroke-width:1.3} .activity-mode-svg .ma-band{fill:var(--t-muted)} .activity-mode-svg .ma-badge{fill:var(--t-card);stroke:var(--t-success);stroke-width:1.8} .activity-mode-svg .ma-again-arrow,.activity-mode-svg .ma-again-head{fill:none;stroke:var(--t-success);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .activity-mode-svg .ma-handle{fill:none;stroke:var(--ma-edge);stroke-width:3.2;stroke-linecap:round} .activity-mode-svg .ma-cup{fill:var(--ma-gold);stroke:var(--ma-edge);stroke-width:2.2;stroke-linejoin:round} .activity-mode-svg .ma-shine{fill:none;stroke:var(--t-card);stroke-width:2.6;stroke-linecap:round;stroke-opacity:.7} .activity-mode-svg .ma-star{fill:var(--t-card);stroke:var(--ma-edge);stroke-width:1.2;stroke-linejoin:round} .activity-mode-svg .ma-neck{fill:var(--ma-gold);stroke:var(--ma-edge);stroke-width:1.8;stroke-linejoin:round} .activity-mode-svg .ma-base{fill:var(--ma-base)} .activity-mode-svg .ma-plate{fill:var(--ma-gold)} .activity-mode-svg .ma-spark{fill:var(--ma-spark)} .activity-mode-svg .activity-mode-lock .ma-badge{stroke:var(--t-muted)} .activity-mode-svg .ma-lock-loop{fill:none;stroke:var(--t-muted);stroke-width:2.2;stroke-linecap:round} .activity-mode-svg .ma-lock-body{fill:var(--t-muted)} .activity-mode-svg .ma-check .ma-badge{fill:var(--t-success-soft)} .activity-mode-svg .ma-check-mark{fill:none;stroke:var(--t-success);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} :is(#studyPanel,.book-panel #readingActivity) :is([data-state="locked"],[data-state="used"]) .activity-mode-svg{--ma-gold:color-mix(in srgb,var(--t-line) 70%,var(--t-card));--ma-edge:color-mix(in srgb,var(--t-muted) 50%,var(--t-line));--ma-base:color-mix(in srgb,var(--t-muted) 40%,var(--t-line))} :is([data-state="locked"],[data-state="used"]) .activity-mode-svg .ma-sparkles{visibility:hidden} /* 밤 (dark): the highlight there is a dark ochre, so the cup mixed from it looked dull brown with a hollow star; an open trophy is light there too (primary + ink, like the light themes' gold), with a light star and shine. Locked and used keep their greys. */ :where(:root[data-theme="dark"]) :is(#studyPanel,.book-panel #readingActivity) .activity-mode-svg{--ma-gold:color-mix(in srgb,var(--t-primary) 62%,var(--t-ink));--ma-spark:color-mix(in srgb,var(--t-primary) 60%,var(--t-ink))} :where(:root[data-theme="dark"]) :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:not([data-state="locked"],[data-state="used"]) .activity-mode-svg .ma-star{fill:var(--t-ink)} :where(:root[data-theme="dark"]) :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:not([data-state="locked"],[data-state="used"]) .activity-mode-svg .ma-shine{stroke:var(--t-ink)} @media(max-width:400px){#studyPanel .activity-mode-entry,.book-panel #readingActivity .activity-mode-entry{gap:10px;padding-inline:10px}} @media(min-width:700px) and (min-height:560px){#studyPanel .activity-mode-entry,.book-panel #readingActivity .activity-mode-entry{--mode-art:84px}:is(#studyPanel,.book-panel #readingActivity) .activity-mode-button{padding:16px 12px}:is(#studyPanel,.book-panel #readingActivity) .activity-mode-button .activity-mode-label{margin-top:10px}} @media(prefers-reduced-motion:reduce){:is(#studyPanel,.book-panel #readingActivity) .activity-mode-button{transition:none}:is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:active:enabled{transform:none}} /* A choice or start screen keeps the size of the screen it opens: that screen sits hidden underneath. */ #studyPanel .study-stage{position:relative} #studyPanel .study-ghost{visibility:hidden} #studyPanel .study-stage-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;min-height:0} #studyPanel .study-stage-cover>.quiz-entry{display:flex;flex-direction:column;justify-content:center;gap:10px;height:100%;min-height:0} #studyPanel .study-stage-cover .activity-mode-entry{min-height:0;padding:6px 0} #studyPanel .study-stage-cover .quiz-entry>.study-entry-start{flex:1 1 auto;min-height:0} #studyPanel .study-stage-cover>.study-entry-start{box-sizing:border-box;width:100%;height:100%;min-height:0} #studyPanel .study-stage-cover .study-error{margin:0;text-align:center} /* The builders' time-up ranking fills the run's reserved area: the list scrolls inside, the buttons stay at the bottom. */ #studyPanel .study-stage-cover>.quiz-results-area{flex:1 1 auto;min-height:0} #studyPanel .study-stage-cover>.quiz-results-actions{flex:0 0 auto;margin-top:10px} #studyPanel .study-stage-cover>.study-error{flex:0 0 auto;margin-top:8px} /* 단어 짝 맞추기: a mint board of white cards; a chosen card glows yellow, a pair turns green and goes. */ #studyPanel .word-matching .matching-playfield{box-sizing:border-box;min-height:calc(24px + 4 * var(--match-card-h,60px) + 18px + 16px);padding:8px;border-radius:14px;background:var(--pv-mint)} #studyPanel .word-matching .matching-labels{padding:0 4px 6px;color:var(--n-5f8075,#5f8075);font-size:var(--act-label);font-weight:700;line-height:18px} #studyPanel .word-matching .matching-board{gap:6px} #studyPanel .word-matching .matching-column{grid-template-rows:repeat(4,var(--match-card-h,60px));gap:6px} #studyPanel .word-matching .matching-card{min-height:52px;height:100%;padding:6px 10px;border:1.5px solid var(--pv-mint-line);border-radius:12px;background:var(--n-ffffff,#fff);color:var(--pv-mint-ink);font-size:var(--act-chip);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);letter-spacing:var(--act-track-sentence);word-break:keep-all;text-wrap:balance;box-shadow:0 2px 0 var(--pv-mint-line);justify-content:center;text-align:center} #studyPanel .word-matching .matching-card[lang="ko"]{justify-content:center;text-align:center;font-size:var(--act-ko-sm);font-weight:var(--act-w-ko);line-height:var(--act-lh-ui);letter-spacing:0;word-break:keep-all} #studyPanel .word-matching .matching-ko-part{display:inline-block} #studyPanel .word-matching .matching-card:hover:enabled{background:var(--n-f6fbf9,#f6fbf9);border-color:var(--n-a8cdbc,#a8cdbc)} #studyPanel .word-matching .matching-card:active:enabled{box-shadow:0 0 0 var(--pv-mint-line);transform:translateY(2px)} #studyPanel .word-matching .matching-card.is-selected{border-color:var(--pv-glow-line);background:var(--n-fff1c7,#fff1c7);color:var(--n-5a4630,#5a4630);box-shadow:0 2px 0 var(--n-ecd3a3,#ecd3a3)} #studyPanel .word-matching .matching-card.is-matched{border-color:var(--i-7fbf98,#7fbf98);background:var(--i-c9ebd6,#c9ebd6);color:var(--pv-good-ink);box-shadow:none} #studyPanel .word-matching .matching-card.is-wrong{border-color:var(--pv-bad);background:var(--pv-bad-soft);color:var(--pv-bad-ink);box-shadow:0 2px 0 var(--pv-bad-line)} #studyPanel .word-matching .matching-card.is-wrong::after{content:'✗';position:absolute;top:4px;right:7px;color:var(--pv-bad-ink);font-size:15px;font-weight:800;line-height:1;pointer-events:none} #studyPanel .word-matching .matching-check{top:4px;right:7px;color:var(--pv-good-ink);font-size:14px} #studyPanel .matching-entry-start{border:0;border-radius:14px;background:transparent;color:var(--pv-mint-ink);font-size:var(--act-title);font-weight:var(--act-w-strong)} #studyPanel .word-matching .matching-footer.is-compact{display:flex;align-items:center;gap:8px;min-height:48px;padding-top:10px;flex-wrap:nowrap} #studyPanel .word-matching .matching-footer.is-compact .matching-feedback{flex:1;min-width:0;color:var(--pv-muted);font-size:var(--act-note);font-weight:var(--act-w-note);line-height:1.4;text-wrap:balance} #studyPanel .word-matching .matching-feedback.is-correct{color:var(--pv-good-ink)} #studyPanel .word-matching .matching-feedback.is-wrong{color:var(--pv-bad-ink)} #studyPanel .word-matching .matching-footer.is-compact .matching-actions{flex:0 0 auto;gap:6px;flex-wrap:nowrap} #studyPanel .word-matching .matching-footer.is-compact .matching-actions button{min-height:44px;padding:6px 12px;border-radius:12px;font-size:var(--act-button-sm);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);white-space:nowrap} #studyPanel .word-matching .matching-actions .matching-extend{border:1px solid var(--pv-mint-line);background:var(--n-ffffff,#fff);color:var(--pv-mint-ink)} /* Class ranking after a round (matching and both builders share these rows). */ #studyPanel .matching-leaderboard{border:0;border-radius:14px;background:var(--i-fffefb,#fffefb)} #studyPanel .matching-ranking-heading>strong{color:var(--pv-text)} #studyPanel .matching-ranking-heading>span{color:var(--pv-muted)} #studyPanel .matching-rank-row{grid-template-columns:30px minmax(0,1fr) auto;border-bottom-color:var(--i-efe7da,#efe7da);border-radius:10px} #studyPanel .matching-rank-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pv-soft);color:var(--n-6a5f50,#6a5f50);font-size:var(--act-note);font-weight:var(--act-w-strong)} #studyPanel .matching-rank-row.is-me{background:var(--i-fff4dc,#fff4dc);color:var(--pv-text);box-shadow:inset 0 0 0 2px var(--i-ecd3a3,#ecd3a3)} #studyPanel .quiz-results-actions{margin-top:12px} #studyPanel .quiz-results-actions button{min-height:48px;border-radius:14px;font-size:var(--act-button-sm)} /* The round +5 / -2 circle of the previews: it floats over the card, fades by itself and never takes input. */ #studyPanel .matching-flash{background:transparent} #studyPanel .matching-flash>span{width:76px;height:76px;aspect-ratio:auto;border-radius:50%;background:var(--pv-good);color:var(--n-ffffff,#fff);font-size:28px;font-weight:800;box-shadow:0 0 0 5px var(--n-ffffff,#fff),0 8px 20px #2f6b4040} #studyPanel .matching-flash.is-wrong>span{background:var(--pv-bad);box-shadow:0 0 0 5px var(--i-ffffff,#fff),0 8px 20px #8a2f2033} /* 단어·문장 조합: raised key tiles leave a faded placeholder when used; answers fill underlined slots. */ #studyPanel .timed-quiz{position:relative;overflow:hidden} #studyPanel .timed-quiz .word-builder{width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} #studyPanel .timed-quiz .quiz-entry{margin:0} #studyPanel .timed-quiz .quiz-entry>.activity-mode-entry{min-height:260px;padding:6px 0} #studyPanel .word-builder .builder-prompt{display:grid;justify-items:center;align-items:center;margin:0 0 8px;padding:0;border:0;background:transparent;text-align:center} /* The Korean cue, balanced so no line ends on one word. */ #studyPanel .word-builder .builder-prompt>*{grid-area:1/1;max-width:100%;margin:0;color:var(--pv-brown);font-size:var(--act-prompt);font-weight:var(--act-w-strong);line-height:var(--act-lh-ko);word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance} /* The sentence builder's cue is a whole Korean sentence over English chunks: one step smaller and lighter, so the English chunks stay the larger text (.sentence-builder also carries .word-builder). */ #studyPanel .sentence-builder .builder-prompt>*{font-size:var(--act-ko);font-weight:var(--act-w-ko)} #studyPanel .word-builder .builder-answer{display:flex;align-items:center;align-content:center;justify-content:center;flex-wrap:wrap;row-gap:.1em;min-height:max(1.6em,var(--builder-answer-h,0px));margin:4px 0 12px;font-size:clamp(20px,calc(118cqi / var(--builder-length)),var(--act-word));line-height:1.5} /* Slots follow the letter size; min-height keeps a 44px tap target when the letters are small, and each slot takes up to 90% of its share of the row (one Day-longest word fills the row at most), so a tap on a letter has room even beside narrow letters (25-34px on phones instead of 17-24px). */ #studyPanel .word-builder .builder-slot{width:auto;min-width:max(.58em,min(1em,calc(90cqi / var(--builder-length,8) - .08em)));height:1.3em;min-height:44px;padding:0 .04em;margin:0 .04em;border:0;border-bottom:.08em solid var(--pv-slot);border-radius:0;background:transparent;color:var(--pv-ink);font-weight:700;line-height:1.2} #studyPanel .word-builder .builder-slot:not(.filled)>span{visibility:hidden} #studyPanel .word-builder .builder-slot:is(.is-fixed,.correct){border-bottom-color:var(--pv-good);color:var(--pv-good-ink)} #studyPanel .word-builder .builder-slot.is-wrong{border-bottom:.08em dashed var(--pv-bad);background:linear-gradient(transparent 40%,var(--pv-bad-soft) 40%);color:var(--pv-bad-ink)} #studyPanel .word-builder .builder-slot.filled:hover:enabled{background:var(--n-fff4dc,#fff4dc)} #studyPanel .word-builder .builder-fixed{color:var(--n-7a6f5f,#7a6f5f)} #studyPanel .word-builder .builder-word{display:inline-flex;align-items:center;white-space:nowrap} #studyPanel .word-builder .builder-space{flex:0 0 .4em;height:1em} #studyPanel .word-builder .builder-answer.is-correct .builder-slot{border-bottom-color:var(--pv-good)} /* 철자 퍼즐 난이도 (쉬움/보통, dist/word-builder-level.js): a shown letter has exactly a blank's box (the border keeps its width, made transparent), so the answer row is the same size at every level; only the blanks are underlined. */ #studyPanel .word-builder .builder-slot.is-given{border-bottom-color:transparent;color:var(--pv-ink)} #studyPanel .word-builder .builder-answer.is-correct .builder-slot.is-given{border-bottom-color:transparent;color:var(--pv-good-ink)} #studyPanel .builder-tray{position:relative;display:grid;margin:0 0 6px} #studyPanel .builder-tray>.builder-bank{grid-area:1/1;display:flex;justify-content:center;align-content:flex-start;flex-wrap:wrap;gap:0;margin:0} #studyPanel .builder-tray-sizer{visibility:hidden} /* The letter keys are 행맨's keyboard keys (owner, 2026-10-31: "행맨 게임에 있는 키보드 크기로 줄여줘"; .hm-key/.hm-cap in dist/activities/hangman.js): each key's tap area is a whole tenth of the tray row (no dead gaps) and --builder-key-h tall (52px; 50px up to 340px wide, 54px from 600px, as --hm-key-h), and the raised cap is drawn inside it (::before, inset as 행맨's padding: 3px top, 4px bottom, 2.5px at each side, 1.5px up to 340px), so the insets are the gaps. Every tile is one letter at every level (dist/word-builder.js), so a row holds ten and the hidden copy (.builder-tray-sizer) wraps the same. */ #studyPanel .word-builder{--builder-key-h:52px;--builder-key-x:2.5px;--builder-key-r:10px} #studyPanel .word-builder .builder-tile{position:relative;isolation:isolate;box-sizing:border-box;display:grid;place-items:center;flex:0 0 10%;width:auto;min-width:0;height:var(--builder-key-h);min-height:0;margin:0;padding:3px var(--builder-key-x) 4px;border:0;border-radius:0;background:none;color:var(--pv-key-ink);font-size:var(--act-tile);font-weight:700;line-height:1;box-shadow:none;transition:opacity .15s,transform .1s} #studyPanel .word-builder .builder-tile::before{content:'';position:absolute;inset:3px var(--builder-key-x) 4px;z-index:-1;box-sizing:border-box;border:1.5px solid var(--pv-key-line);border-radius:var(--builder-key-r);background:var(--pv-key);box-shadow:0 3px 0 var(--pv-key-edge);transition:box-shadow .1s,background-color .15s} #studyPanel .word-builder .builder-tile:hover:enabled{background:none;transform:none} @media(hover:hover){#studyPanel .word-builder .builder-tile:hover:enabled::before{background:var(--i-fff1d6,#fff1d6)}} #studyPanel .word-builder .builder-tile:active:enabled{transform:translateY(2px)} #studyPanel .word-builder .builder-tile:active:enabled::before{box-shadow:0 1px 0 var(--pv-key-edge)} #studyPanel .word-builder .builder-tile:disabled{opacity:1} #studyPanel .word-builder .builder-tile.is-used{opacity:.28;transform:scale(.92)} #studyPanel .word-builder .builder-tile.is-used::before{box-shadow:none} #studyPanel .word-builder .builder-tile:focus-visible{outline:none} #studyPanel .word-builder .builder-tile:focus-visible::before{outline:3px solid var(--i-74baa0,#74baa0);outline-offset:1px} @media(max-width:340px){#studyPanel .word-builder{--builder-key-h:50px;--builder-key-x:1.5px;--builder-key-r:8px}} @media(min-width:600px){#studyPanel .word-builder{--builder-key-h:54px}} #studyPanel .word-builder .builder-answer.is-correct~.builder-tray .builder-bank{display:flex;visibility:hidden} #studyPanel .builder-tray>.builder-example{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:4px 10px;overflow:hidden;border-radius:14px;background:var(--n-f6faf3,#f6faf3);color:var(--n-4f6a45,#4f6a45);font-size:min(var(--act-ko),15px);line-height:var(--act-lh-sentence);letter-spacing:var(--act-track-sentence);text-align:center;text-wrap:balance} /* The example sits over the spent tray at 15px, up to three lines. The tray is one key row (50-54px) for ten keys or fewer, so the Day's example sentences sit hidden in its cell too (.is-sizer, dist/study.js builderExampleSizer): the tray keeps the tallest one's height from the first word, and an example is never cut on a 320px phone. */ #studyPanel .builder-example>span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3} #studyPanel .builder-tray>.builder-example.is-sizer{grid-area:1/1;position:static;visibility:hidden;pointer-events:none} #studyPanel .builder-result{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:8px;min-height:40px;margin:2px 0 8px;color:var(--pv-muted);font-size:var(--act-note);font-weight:var(--act-w-note);line-height:1.35;text-align:center;overflow:hidden} #studyPanel .builder-result strong{min-width:0;font-size:var(--act-ko);font-weight:var(--act-w-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #studyPanel .builder-result.retry strong{font-size:var(--act-note);font-weight:var(--act-w-strong)} /* The status line keeps two lines for any message: a hint, a result or an error (never a new row). */ #studyPanel .builder-result.is-hint{color:var(--pv-muted);font-size:var(--act-note);font-weight:var(--act-w-note);text-wrap:balance} #studyPanel .builder-result .builder-error{display:-webkit-box;max-width:100%;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--pv-bad-ink);font-size:var(--act-note);font-weight:var(--act-w-strong);line-height:1.4;white-space:normal;word-break:keep-all;overflow-wrap:anywhere} /* The red circle and the score pill already show the -2; the line keeps the words. */ #studyPanel .builder-result.retry .quiz-score-feedback{display:none} #studyPanel .builder-result.passed strong{color:var(--pv-good-ink)} #studyPanel .builder-result.retry strong{color:var(--pv-bad-ink)} #studyPanel .builder-result.retry strong::before{content:'✗ '} #studyPanel .builder-result .quiz-score-feedback{margin:0;padding:2px 9px;border-radius:999px;background:var(--pv-good-soft);color:var(--pv-good-ink);font-size:var(--act-note);font-weight:var(--act-w-strong)} #studyPanel .builder-result .quiz-score-feedback.is-negative{background:var(--pv-bad-soft);color:var(--pv-bad-ink)} #studyPanel .word-builder .builder-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0} #studyPanel .word-builder .builder-actions button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;padding:6px 8px;border:1px solid var(--pv-key-line);border-radius:12px;background:var(--n-ffffff,#fff);color:var(--n-6a5a43,#6a5a43);font-size:var(--act-button-sm);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);white-space:nowrap} #studyPanel .word-builder .builder-actions button svg{width:16px;height:16px;flex:0 0 auto} #studyPanel .word-builder .builder-actions button:disabled{opacity:.4} #studyPanel .builder-next-slot{display:flex;align-items:center;justify-content:center;min-height:50px;margin:8px 0 0} #studyPanel .word-builder .builder-next{width:min(100%,320px);min-height:48px;margin:0;padding:10px 24px;border:1px solid var(--pv-go-line);border-radius:14px;background:var(--pv-go);color:var(--n-ffffff,#fff);font-size:var(--act-button);font-weight:var(--act-w-strong)} #studyPanel .word-builder .builder-next:disabled{opacity:.5} /* The done count stays for screen readers; the progress line under the top row shows it. */ #studyPanel .word-builder .builder-progress{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Sentence chunks, as in the preview (owner's recording, 2026-10-28): the answer row is one underlined slot per chunk and the tray holds raised chunk tiles; both reserve the Day's most lines (--sentence-answer-h, --sentence-tray-h from study.js). Every chunk is one 44px line, so the zones stay exact. Once graded, the next step (다음 문장 / 다시 도전하기) shows over the spent tray. */ #studyPanel .sentence-builder .sentence-answer{position:relative;box-sizing:border-box;display:flex;justify-content:center;align-content:flex-start;align-items:flex-end;flex-wrap:wrap;gap:4px 6px;min-height:var(--sentence-answer-h,92px);margin:4px 0 2px;padding:0;border:0;background:transparent} #studyPanel .sentence-builder .sentence-answer.is-wrong{background:transparent} #studyPanel .sentence-builder .sentence-slot{box-sizing:border-box;flex:0 0 auto;min-width:44px;height:44px;border-bottom:2.5px solid var(--pv-slot)} #studyPanel .sentence-builder .sentence-chunk{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-width:44px;height:44px;min-height:44px;margin:0;padding:0 11px;border:1.5px solid var(--pv-key-line);border-radius:12px;background:var(--pv-key);color:var(--pv-key-ink);font-size:var(--act-chunk,clamp(14px,4.35vw,17px));font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 0 var(--pv-key-edge);transition:opacity .15s,transform .12s} #studyPanel .sentence-builder .sentence-chunk:hover:enabled{border-color:var(--pv-key-line);background:var(--n-fff1d6,#fff1d6)} #studyPanel .sentence-builder .sentence-chunk:active:enabled{box-shadow:0 1px 0 var(--pv-key-edge);transform:translateY(2px)} #studyPanel .sentence-builder .sentence-chunk:disabled{opacity:1;cursor:default} #studyPanel .sentence-bank .sentence-chunk.is-used{opacity:.28;transform:scale(.94);box-shadow:none} #studyPanel .sentence-answer .sentence-chunk.selected{border:0;border-bottom:2.5px solid var(--pv-slot);border-radius:8px 8px 0 0;background:transparent;color:var(--pv-ink);box-shadow:none} #studyPanel .sentence-answer .sentence-chunk.selected:hover:enabled{background:var(--n-fff4dc,#fff4dc)} #studyPanel .sentence-answer .sentence-chunk.selected:active:enabled{transform:none;box-shadow:none} #studyPanel .sentence-answer.is-correct .sentence-chunk.selected{border-bottom-color:var(--pv-good);color:var(--pv-good-ink)} #studyPanel .sentence-answer.is-wrong .sentence-chunk.selected{border-bottom-color:var(--pv-bad);background:var(--pv-bad-soft);color:var(--pv-bad-ink)} #studyPanel .sentence-answer:is(.is-correct,.is-wrong)::after{position:absolute;top:-6px;right:-4px;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--i-ffffff,#fff);border-radius:50%;color:var(--i-ffffff,#fff);font-size:13px;font-weight:800;line-height:1} #studyPanel .sentence-answer.is-correct::after{content:'✓';background:var(--pv-good)} #studyPanel .sentence-answer.is-wrong::after{content:'✗';background:var(--pv-bad)} #studyPanel .sentence-builder .sentence-tray{position:relative;display:grid;margin:0 0 10px} #studyPanel .sentence-builder .sentence-bank{grid-area:1/1;box-sizing:border-box;display:flex;justify-content:center;align-content:flex-start;flex-wrap:wrap;gap:6px;min-height:max(52px,var(--sentence-tray-h,94px));margin:0;padding:0} #studyPanel .sentence-tray.has-next .sentence-bank{visibility:hidden} #studyPanel .sentence-tray>.builder-next-slot{grid-area:1/1;z-index:1;min-height:0;margin:0} #studyPanel .sentence-builder .builder-result{margin:0 0 6px} @media(max-width:480px){ #studyPanel :is(.study-word-card,.timed-quiz,.word-matching){padding:12px 12px 14px;border-radius:18px} #studyPanel .word-builder .builder-actions button{padding:6px 4px} /* Chunk text follows the width (--act-chunk): 14px at 320, 16px at 375. */ #studyPanel .sentence-builder .sentence-chunk{padding:0 9px} } @media(max-width:360px){ #studyPanel .study-word-card .study-audio-controls{gap:6px} #studyPanel .study-word-card .study-audio-controls button{width:9.2em;padding:8px 6px} #studyPanel .study-word-card .study-speed{gap:4px} #studyPanel .study-word-card .study-speed input[type="range"]{width:56px} #studyPanel .activity-toolbar{flex-wrap:nowrap} #studyPanel .builder-result{min-height:40px} #studyPanel .builder-result strong{white-space:normal;text-overflow:clip} #studyPanel .study-screen-top :is(.matching-clock,.matching-score){padding:3px 8px} #studyPanel .activity-toolbar .activity-challenges-label{display:none} /* Same short form as the reading toolbar: "도전 2/2", never a bare 2/2 beside the 1/5 position. */ #studyPanel .activity-toolbar>.activity-challenges::before{content:'도전';font-size:var(--act-label)} #studyPanel .sentence-builder .sentence-chunk{padding:0 8px} #studyPanel :is(.study-word-card,.timed-quiz,.word-matching){padding-left:10px;padding-right:10px} #studyPanel .word-builder .builder-label-extra{display:none} } @media(max-width:340px){ /* 6px keeps the widest S5 chunk ("thirty thousand jack-o'-lanterns") 2px inside a 320px card. */ #studyPanel .sentence-builder .sentence-chunk{padding:0 6px} } @media(prefers-reduced-motion:reduce){ #studyPanel .study-progress-track>span,#studyPanel .study-letter-tile,#studyPanel .study-word,#studyPanel .study-meaning>*{transition:none} #studyPanel .study-letter-tile.is-lit{transform:none} #studyPanel .study-word-card[data-stage="say"] .study-phase{animation:none} #studyPanel .word-matching .matching-card:active:enabled,#studyPanel .word-builder .builder-tile:active:enabled,#studyPanel .sentence-builder .sentence-chunk:active:enabled,:is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:active:enabled{transform:none} #studyPanel .word-builder .builder-tile.is-used,#studyPanel .sentence-bank .sentence-chunk.is-used{transform:none} } /* activity-host.js: a plug-in screen still downloading (about a game card's height; the text is for screen readers). */ .activity-module-placeholder{position:relative;min-height:440px;border:1px solid var(--line,var(--n-e7dfd1,#e7dfd1));border-radius:18px;background:var(--surface-2,var(--n-faf7f0,#faf7f0))} .activity-module-placeholder>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* One entry tile (activity-entry.js 'practice' or 'ranking'): the same box as the two tiles, so the window keeps its size; the tile is centred at about one tile and a half (2026-11-05: a picture tile, not a wide bar). */ .activity-mode-entry.is-single,:is(#studyPanel,.book-panel #readingActivity) .activity-mode-entry.is-single{grid-template-columns:minmax(0,1fr);justify-items:center} .activity-mode-entry.is-single>.activity-mode-button{width:min(100%,240px)} /* 화면 색 (2026-10-31): only the four other colour sets (바다·숲·딸기·밤); 지금 keeps every line above. :where() gives the set's condition no weight, so each line below wins over the one it follows and nothing else. The 연습 / 랭킹 도전 tiles' small line is drawn at full strength (at .85 it fell below 4.5:1 on the tile), and the activity screens' focus rings take the set's --t-focus (at least 3:1 on the page, the card and the tiles in every set). */ :where(:root[data-theme]:not([data-theme="classic"])) :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button small{opacity:1} :where(:root[data-theme]:not([data-theme="classic"])) .word-builder button:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) .word-builder:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) .word-matching .matching-card:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) .study-entry-start:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) .matching-entry-start:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) .activity-mode-button:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) :is(#studyPanel,.book-panel #readingActivity) .activity-mode-button:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) #studyPanel .word-builder .builder-tile:focus-visible::before{outline-color:var(--t-focus)}