[hidden]{display:none!important}body{background:var(--n-f3f6fc,#f3f6fc)}.book-tabs{display:flex;gap:5px;border-bottom:1px solid var(--n-dce3f0,#dce3f0);margin-bottom:25px}.book-tabs button{border:0;border-bottom:3px solid transparent;background:none;color:var(--n-67748c,#67748c);padding:16px 20px;font-size:16px;font-weight:600}.book-tabs button.selected{color:var(--blue);border-bottom-color:var(--blue)}.book-panel{border:1px solid var(--line);border-radius:22px;background:var(--n-ffffff,#fff);padding:32px;box-shadow:0 5px 20px #25356603}.setup-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px}.setup-heading h2{font-size:23px;margin-top:8px}.field-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:16px;font-weight:700;margin:21px 0 10px}.field-label span{font-size:14px;font-weight:400;color:var(--n-66728a,#66728a)}.book-panel input,.book-panel textarea{font:inherit;background:var(--n-f8faff,#f8faff);border:1px solid var(--n-dce3f0,#dce3f0);border-radius:12px;padding:16px;width:100%;line-height:1.7;color:var(--n-202b46,#202b46)}.book-panel input:focus,.book-panel textarea:focus{outline:2px solid var(--n-6683ff,#6683ff);outline-offset:2px}.book-fields{display:grid;grid-template-columns:1.2fr 1fr;gap:26px}.book-fields textarea{min-height:235px;resize:vertical}.book-panel textarea::placeholder{color:var(--n-76839b,#76839b);font-size:16px}.field-help{font-size:14px;color:var(--n-69758c,#69758c);margin-top:10px}.setup-footer{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:30px;padding-top:23px;border-top:1px solid var(--line)}.setup-footer p{font-size:14px;color:var(--n-728099,#728099)}.setup-buttons{display:flex;gap:10px;flex-wrap:wrap}.form-feedback:not(:empty){margin:18px 0;background:var(--n-fff4e7,#fff4e7);color:var(--n-80541e,#80541e);padding:14px;border-radius:10px;line-height:1.7}.book-tabs button:disabled{opacity:.48}.reading-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.reading-top h2{font-size:22px}.reading-count{font-size:14px;color:var(--n-66748e,#66748e)}.reading-dots{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:27px 0}.reading-dots div{background:var(--n-f0f3fa,#f0f3fa);border:1px solid var(--n-e0e6f0,#e0e6f0);border-radius:12px;text-align:center;padding:15px 8px;color:var(--n-6a7892,#6a7892);font-size:14px}.reading-dots div strong{display:block;font-size:23px;margin-bottom:4px}.reading-dots .current{background:var(--n-edf1ff,#edf1ff);border-color:var(--n-6d88ed,#6d88ed);color:var(--n-3457ed,#3457ed)}.reading-dots .done{background:var(--i-e8f6ef,#e8f6ef);border-color:var(--i-b6ddc5,#b6ddc5);color:var(--i-2b7451,#2b7451)}.reading-target{padding:34px 24px;border:1px solid var(--n-dbe3f8,#dbe3f8);border-radius:16px;background:var(--n-f0f4ff,#f0f4ff);text-align:center;margin-bottom:18px;min-height:150px;display:grid;place-items:center}.reading-target p{font-family:var(--font-en),Arial,sans-serif;overflow-wrap:anywhere}.reading-target.hidden-target{background:var(--n-edf0f6,#edf0f6);border:2px dashed var(--n-c6d0e2,#c6d0e2)}.reading-instruction{text-align:center;color:var(--n-69758c,#69758c);margin-bottom:18px;font-size:16px}.reading-toolbar{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.reading-controls{max-width:700px;margin:auto}.reading-controls textarea{min-height:110px;margin-top:20px;background:var(--n-fafbfe,#fafbfe)}.reading-note{font-size:14px;color:var(--n-73809a,#73809a);line-height:1.8;margin-top:20px}.reading-summary{padding:35px 0;text-align:center}.reading-summary h2{font-size:28px;margin-bottom:16px}.reading-summary p{color:var(--n-64728c,#64728c);margin-bottom:24px}.mini-note,.privacy-note,.question-label,.small-label,.eyebrow,.steps li,.input-foot,.input-kind,.score-label,.score-formula,.score-example,.outline-badge,.topic,.coach-footer,.coach-card .eyebrow{font-size:14px}.muted,.page-title p,.text-button,.segmented button{font-size:16px}.header-caption{font-size:14px}footer{font-size:14px}.question-label{letter-spacing:1px}.reading-controls .actions{justify-content:center}.reading-controls audio{margin:15px 0}.reading-badge{background:var(--i-fff0a6,#fff0a6);color:var(--i-635322,#635322);border-radius:20px;padding:8px 15px;font-size:14px;white-space:nowrap}.book-panel button:focus-visible,.book-tabs button:focus-visible{outline:3px solid var(--n-92a8ff,#92a8ff);outline-offset:4px}@media(max-width:760px){main{padding:28px 18px 0}.book-panel{padding:23px 20px}.book-fields{grid-template-columns:1fr;gap:4px}.book-fields textarea{min-height:190px}.setup-heading{align-items:flex-start}.setup-heading h2{font-size:20px}.setup-heading .secondary{font-size:14px;padding:9px 11px}.setup-footer{align-items:stretch;flex-direction:column}.setup-buttons>*{flex:1}.book-tabs{gap:0}.book-tabs button{flex:1;padding:13px 7px;font-size:14px;line-height:1.6}.reading-dots{gap:5px}.reading-dots div{font-size:12px;padding:12px 4px}.reading-dots div strong{font-size:20px}.reading-target{padding:26px 18px}.reading-top{flex-wrap:wrap}.field-label{flex-wrap:wrap}.page-title h1{font-size:24px}.reading-badge{padding:7px 10px}.steps li{font-size:14px;white-space:normal}.input-foot{flex-wrap:wrap}.language-bar{flex-wrap:wrap}.question h2{overflow-wrap:anywhere}.actions .primary{flex:1}.score-label{font-size:14px}}
.photo-actions{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}.photo-help{margin:0 0 14px}.book-fields .field-label{min-height:28px}.book-source>textarea{min-height:260px}.key-help{margin:0 0 14px}.photo-result{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;padding:14px;background:var(--n-edf3ff,#edf3ff);border:1px solid var(--n-d3dff9,#d3dff9);border-radius:12px;margin-bottom:14px;font-size:14px;overflow-wrap:anywhere}.photo-result img{width:84px;height:108px;object-fit:contain;background:var(--n-ffffff,#fff);border-radius:7px}.photo-result img:not([src]){display:none}.photo-result details textarea{min-height:140px;margin-top:8px;font-size:14px}.source-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}.source-tools>span{font-size:14px;color:var(--n-73809a,#73809a);white-space:nowrap}.source-tools .text-button{color:var(--n-3457ed,#3457ed);font-weight:600}.selection-feedback:not(:empty){padding:12px 15px;border-radius:10px;background:var(--n-eaf6ee,#eaf6ee);color:var(--n-346949,#346949);line-height:1.7;margin-top:14px;font-size:14px}.selection-feedback.warning{background:var(--i-fff4e7,#fff4e7);color:var(--i-80541e,#80541e)}.sentence-picker{margin-top:25px;border:1px solid var(--n-dae3f5,#dae3f5);border-radius:14px;background:var(--n-f9fbff,#f9fbff);padding:20px}.sentence-picker>summary{font-size:17px;font-weight:700;cursor:pointer;color:var(--n-2f466f,#2f466f)}.sentence-picker>summary span{font-size:14px;font-weight:500;color:var(--n-6b7e9e,#6b7e9e);margin-left:12px}.sentence-picker>summary:focus-visible{outline:3px solid var(--n-92a8ff,#92a8ff);outline-offset:5px}.sentence-picker[open]>summary{margin-bottom:13px}.sentence-candidates{display:grid;gap:8px;margin:15px 0;max-height:360px;overflow:auto}.sentence-choice{display:flex;align-items:flex-start;gap:12px;background:var(--n-ffffff,#fff);border:1px solid var(--n-e0e6f2,#e0e6f2);border-radius:10px;padding:13px 15px;cursor:pointer;line-height:1.65;font-size:16px}.sentence-choice:has(input:checked){background:var(--n-edf2ff,#edf2ff);border-color:var(--n-87a0ee,#87a0ee)}.book-panel .sentence-choice input{width:19px;height:19px;flex-shrink:0;margin:4px 0 0;padding:0;accent-color:var(--n-3457ed,#3457ed)}.sentence-choice span{overflow-wrap:anywhere;flex:1}.sentence-choice small{flex-shrink:0;font-size:13px;color:var(--n-4e795d,#4e795d)}.sentence-choice.already-added{background:var(--n-f2f7f4,#f2f7f4);color:var(--n-597265,#597265);cursor:default}.picker-empty{color:var(--n-718098,#718098);font-size:15px;padding:14px 0}.picker-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--n-e1e7f2,#e1e7f2);font-size:14px;color:var(--n-61728d,#61728d)}.camera-dialog{width:min(90vw,720px);max-width:720px}.camera-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.camera-dialog video{width:100%;max-height:55vh;object-fit:contain;background:var(--n-172238,#172238);border-radius:12px;margin:16px 0}.camera-dialog #cameraStatus{font-size:15px;color:var(--n-5e718d,#5e718d)}.camera-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}@media(max-width:760px){.source-tools{flex-wrap:wrap}.source-tools .text-button{font-size:14px}.sentence-picker{padding:17px 13px}.sentence-choice{padding:12px 10px;font-size:15px;gap:9px}.sentence-choice small{font-size:12px}.picker-footer{flex-wrap:wrap}.picker-footer .primary{flex:1}.photo-actions>*{flex:1}.photo-result{grid-template-columns:64px minmax(0,1fr)}.photo-result img{width:64px;height:85px}.camera-buttons>*{flex:1}.book-fields .key-help{margin-top:0}.sentence-picker>summary{font-size:16px}.photo-help{font-size:14px}}
.reading-top{flex-wrap:nowrap;gap:10px;margin-bottom:8px}
.reading-top h2{font-size:20px}.reading-badge{background:transparent;color:var(--i-4f6290,#4f6290);padding:0;font-size:14px;font-weight:600}
.reading-listening-tools{justify-content:flex-end;align-items:center;gap:14px;margin:8px 0 12px;flex-wrap:nowrap}
.reading-listening-tools .text-button{font-size:14px;white-space:nowrap}
.reading-speed{display:flex;align-items:center;gap:7px;flex:0 1 175px;min-width:120px;margin:0;padding:0;color:var(--n-6b7891,#6b7891);font-size:12px}
.reading-speed output{color:var(--n-3457ed,#3457ed);font-variant-numeric:tabular-nums;min-width:45px;white-space:nowrap}
.book-panel input#readingSpeed{width:90px;min-width:48px;height:30px;margin:0;padding:0;border:0;border-radius:0;background:transparent;accent-color:var(--n-3457ed,#3457ed);cursor:pointer}
.reading-target{margin:0;min-height:120px;padding:24px 20px}
.reading-record-row{margin:16px 0 12px;gap:5px}
.reading-record{display:flex;justify-content:center;gap:9px;width:auto;height:44px;min-width:144px;border-radius:24px;padding:0 20px;font-size:15px;font-weight:600;box-shadow:0 0 0 4px var(--n-eef1ff,#eef1ff)}
.book-panel .reading-record.recording{background:var(--i-15803d,#15803d);border-color:var(--i-15803d,#15803d);color:var(--i-ffffff,#fff);box-shadow:0 0 0 4px var(--i-dcfce7,#dcfce7);animation:none}
.reading-entry-button{display:grid;place-items:center;width:100%;min-height:300px;margin:0;border:1px solid var(--n-c8decf,#c8decf);border-radius:18px;background:var(--n-edf6ef,#edf6ef);color:var(--n-24643d,#24643d);font-size:30px;font-weight:800;cursor:pointer}
.reading-entry-button:hover{background:var(--n-e2f0e6,#e2f0e6)}.reading-entry-button:active{background:var(--n-d5e9db,#d5e9db)}.reading-entry-button:focus-visible{outline:3px solid var(--n-60a878,#60a878);outline-offset:4px}
.reading-record-row .record-caption{margin:4px 0 0;font-size:13px;text-align:center}
.reading-instruction{font-size:13px;margin:8px 0 0}.reading-controls textarea{min-height:85px;margin-top:14px;font-size:16px;padding:12px}
.reading-feedback{max-width:700px;margin:10px auto}.reading-auto-status{padding:7px 10px;margin:8px 0;font-size:13px}
@media(max-width:480px){.reading-top h2{font-size:18px}.reading-badge{font-size:12px}.reading-listening-tools{gap:10px;justify-content:space-between}.reading-listening-tools .text-button{font-size:12px}.reading-speed{gap:5px;flex-basis:144px;min-width:113px}.reading-speed label{display:none}.book-panel input#readingSpeed{width:84px}.reading-target{padding:19px 14px}.reading-note{font-size:12px}}
.reading-selector{margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--n-e0e6f2,#e0e6f2)}.reading-selector-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;color:var(--n-465778,#465778);font-size:15px}.reading-selector-heading span{font-size:14px;color:var(--n-6a7892,#6a7892)}.sentence-numbers{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}.sentence-number{display:grid;place-items:center;gap:2px;padding:8px 4px;min-height:54px;background:var(--n-f7f9ff,#f7f9ff);border:1px solid var(--n-dce3f3,#dce3f3);border-radius:10px;color:var(--n-536582,#536582)}.sentence-number strong{font-size:17px}.sentence-number small{font-size:11px}.sentence-number.selected{background:var(--n-eaf0ff,#eaf0ff);border:2px solid var(--n-3457ed,#3457ed);color:var(--n-3457ed,#3457ed)}.sentence-number.complete{background:var(--i-e8f6ef,#e8f6ef);color:var(--i-287149,#287149)}.reading-auto-status{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:14px 0;padding:12px;border-radius:10px;background:var(--n-edf5ff,#edf5ff);color:var(--n-345580,#345580);font-size:14px}.reading-auto-status .text-button{font-size:14px}.translation-label{display:block;color:var(--n-78839b,#78839b);font-size:13px;font-weight:400;margin-bottom:12px}
.reading-days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;max-width:660px;margin-bottom:18px}
.reading-day{display:grid;gap:2px;place-items:center;border:1px solid var(--n-dce3f3,#dce3f3);border-radius:10px;background:var(--n-f7f9ff,#f7f9ff);color:var(--n-566881,#566881);padding:8px 6px;min-height:48px}
.reading-day strong{font-size:14px}.reading-day small{font-size:11px;font-weight:400}
.reading-day.selected{background:var(--n-3457ed,#3457ed);border-color:var(--n-3457ed,#3457ed);color:var(--n-ffffff,white)}
.reading-day.complete:not(.selected){background:var(--i-e8f6ef,#e8f6ef);border-color:var(--i-b6ddc5,#b6ddc5);color:var(--i-287149,#287149)}
.reading-day:disabled{opacity:.55;background:var(--n-f4f5f8,#f4f5f8)}.reading-day-heading{font-size:14px;margin-bottom:9px}
.reading-selector{margin-bottom:18px;padding-bottom:16px}
@media(max-width:480px){.reading-days{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:14px}.reading-day{padding:6px;min-height:44px}.reading-selector-heading{font-size:14px}.reading-selector-heading span{font-size:12px}}
#readingActivity,.reading-target{position:relative}.reading-score-popup.matching-flash{border-radius:inherit}.reading-score-popup.is-floating{position:fixed;z-index:100}.reading-score-popup>span{align-content:center;gap:3px;line-height:1}
.reading-target.practice-bilingual{align-content:center;gap:10px}.reading-target.practice-bilingual p{margin:0}
/* 문장 읽기 screen v2 (owner, 2026-10-28: "look like the Activities-tab previews" and "the window must not change size").
   One white screen card on the soft background: a top row with the 연습 / 랭킹 도전 pill and the five round dots,
   the English large in navy with the Korean under it, calm buttons and the round red microphone. The card keeps
   the Day's largest round (book.js reserveReadingTarget), and the action row and note keep their heights, so the
   buttons never move. A state never depends on colour alone: steps carry numbers or checks, notes carry words.
   Text sizes come from the shared activity type scale (style.css --act-*, owner 2026-10-28: smaller, more readable text):
   English sentence --act-sentence, Korean-only cue --act-prompt, Korean translation --act-ko, buttons --act-button(-sm),
   the note --act-note, pills/tags/toolbar labels --act-label, the Day score --act-number. */
.book-panel #readingActivity{--rd-paper:var(--n-fffefb,#fffefb);--rd-line:var(--n-e6d9c6,#e6d9c6);--rd-shadow:0 10px 22px #4b341f14,0 1px 2px #4b341f0d;--rd-ink:var(--n-2f3b63,#2f3b63);--rd-text:var(--n-3d3a35,#3d3a35);--rd-muted:var(--n-6f685d,#6f685d);--rd-soft:var(--n-f4efe6,#f4efe6);--rd-translation:var(--n-7a6f5f,#7a6f5f);--rd-accent:var(--i-4a7a3f,#4a7a3f);--rd-accent-line:var(--i-3f6b35,#3f6b35);--rd-accent-ink:var(--i-46733b,#46733b);--rd-accent-soft:var(--i-e8f1e3,#e8f1e3);--rd-ranking:var(--i-fff0d0,#fff0d0);--rd-ranking-ink:var(--i-9a5f1c,#9a5f1c);--rd-current:var(--n-e3b866,#e3b866);--rd-current-ring:var(--n-f6e3bd,#f6e3bd);--rd-recall-line:var(--n-d6c8b0,#d6c8b0);--rd-slash:var(--n-c9b498,#c9b498);--rd-mic:var(--n-df6f50,#df6f50);--rd-mic-on:var(--n-2f8f5b,#2f8f5b);--rd-warn:var(--i-7a4f0e,#7a4f0e);--rd-warn-soft:var(--i-fff1cf,#fff1cf);--rd-bad:var(--i-9f2f2e,#9f2f2e);--rd-bad-soft:var(--i-fde6e3,#fde6e3);--rd-track:var(--n-efe7da,#efe7da);
 --rd-i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
 --rd-i-sound: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='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
 --rd-i-again: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
 --rd-i-next: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
 --rd-i-done: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E");
 --rd-i-alert: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.4'/%3E%3C/svg%3E");
 --rd-i-mic: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%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E")}
/* Toolbar above the card: arrows and counter, today's chances, the score and a calm 닫기 pill. */
.book-panel #readingActivity .activity-toolbar{width:min(100%,620px);min-height:44px;margin:0 auto 8px;padding:0;border:0}
.book-panel #readingActivity .activity-toolbar .learning-item-arrow{position:relative;width:36px;color:var(--i-a08b6c,#a08b6c)}
.book-panel #readingActivity .activity-toolbar .learning-item-arrow::after{content:'';position:absolute;inset:0 -4px}
.book-panel #readingActivity .activity-toolbar>.secondary{min-width:52px;min-height:44px;padding:6px 14px;border:1px solid var(--rd-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}
.book-panel #readingActivity .activity-toolbar>.activity-challenges{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}
.book-panel #readingActivity .activity-toolbar .activity-challenges strong{font-size:var(--act-toolbar,14px);font-weight:700;color:var(--rd-ranking-ink)}
.book-panel #readingActivity .activity-toolbar .activity-challenges small{font-size:var(--act-label)}
.book-panel #readingActivity .reading-day-score{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;min-height:30px;padding:3px 11px;border-radius:999px;background:var(--rd-soft);color:var(--n-6a5f50,#6a5f50);white-space:nowrap}
.book-panel #readingActivity .reading-day-score>:is(span,small){font-size:var(--act-label);font-weight:700;line-height:1}.book-panel #readingActivity .reading-day-score>small{font-weight:var(--act-w-note)}.book-panel #readingActivity .reading-day-score>strong{color:var(--rd-text);font-size:var(--act-number);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
/* The toolbar is ‹ position › · 오늘 도전 n/2 · 닫기 in every mode (도전 n/2 at 360px and below); 랭킹 도전 shows its
   score in the card's top row (book.js readingRankRow), so the row never wraps and the window keeps its height when
   랭킹 도전 starts. Only runs without a mode (older runs, tests) still put the score in the toolbar. */
@media(max-width:360px){.book-panel #readingActivity .activity-toolbar:not(:has(.reading-day-score)){flex-wrap:nowrap}.book-panel #readingActivity .activity-toolbar .activity-challenges-label{display:none}.book-panel #readingActivity .activity-toolbar>.activity-challenges::before{content:'도전';font-size:var(--act-label)}}
@media(max-width:480px){.book-panel #readingActivity .activity-toolbar:has(.reading-day-score){gap:4px}.book-panel #readingActivity .activity-toolbar:has(.reading-day-score) .reading-position{min-width:30px}.book-panel #readingActivity .activity-toolbar:has(.reading-day-score) .learning-item-arrow{width:30px}.book-panel #readingActivity .activity-toolbar:has(.reading-day-score) .activity-challenges-label{display:none}.book-panel #readingActivity .activity-toolbar:has(.reading-day-score)>.activity-challenges{padding:4px 8px}.book-panel #readingActivity .activity-toolbar:has(.reading-day-score)>.activity-challenges::before{content:'도전';font-size:var(--act-label)}.book-panel #readingActivity .activity-toolbar:has(.reading-day-score) .reading-day-score{padding:3px 8px}.book-panel #readingActivity .activity-toolbar:has(.reading-day-score)>.secondary{min-width:48px;padding:6px 10px}}
/* The screen card. */
.book-panel #readingActivity .reading-screen{box-sizing:border-box;width:min(100%,620px);margin:0 auto;padding:14px 16px 16px;border:1px solid var(--rd-line);border-radius:20px;background:var(--rd-paper);box-shadow:var(--rd-shadow);color:var(--rd-text)}
.book-panel #readingActivity .reading-screen>.reading-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:8px;width:auto;min-height:30px;margin:0 0 12px}
.book-panel #readingActivity .reading-badge{display:inline-flex;align-items:center;min-height:0;padding:4px 12px;border-radius:999px;background:var(--rd-accent-soft);color:var(--rd-accent-ink);font-size:var(--act-label);font-weight:700;line-height:1.4;white-space:nowrap}
.book-panel #readingActivity .reading-badge.is-ranking{background:var(--rd-ranking);color:var(--rd-ranking-ink)}
/* The five rounds as the preview's dots: three looking, two Korean-only (dashed); the active group names itself. */
.book-panel #readingActivity .reading-steps{display:flex;align-items:center;gap:8px}
.book-panel #readingActivity .reading-step-group{display:flex;flex-direction:row-reverse;align-items:center;gap:6px}
.book-panel #readingActivity .reading-step-dots{display:flex;gap:4px}
.book-panel #readingActivity .reading-step{display:grid;place-items:center;width:18px;height:18px;box-sizing:border-box;border:1.5px solid var(--n-d6c8b0,#d6c8b0);border-radius:50%;background:var(--n-ffffff,#fff);color:var(--n-9b8f7c,#9b8f7c);font-family:var(--font-en),sans-serif;font-size:var(--act-label,12px);font-weight:700;line-height:1}
.book-panel #readingActivity .is-recall .reading-step{border-style:dashed}
.book-panel #readingActivity .reading-step.is-done{border-color:var(--rd-accent);background:var(--rd-accent);color:var(--i-ffffff,#fff)}
.book-panel #readingActivity .reading-step.is-done::before{content:'';width:10px;height:10px;background:currentColor;-webkit-mask:var(--rd-i-check) center/contain no-repeat;mask:var(--rd-i-check) center/contain no-repeat}
.book-panel #readingActivity .reading-step.is-current{border-color:var(--rd-current);background:var(--rd-current);color:var(--n-ffffff,#fff);box-shadow:0 0 0 3px var(--rd-current-ring)}
.book-panel #readingActivity .reading-step-label{display:none;color:var(--n-8d5d31,#8d5d31);font-size:var(--act-label);font-weight:700;line-height:1.2;white-space:nowrap}
.book-panel #readingActivity .reading-step-group.is-active>.reading-step-label{display:inline}
.book-panel #readingActivity .reading-progress{width:100%;height:5px;margin:-4px 0 10px;border-radius:99px;background:var(--rd-track);overflow:hidden}
.book-panel #readingActivity .reading-progress>span{display:block;height:100%;border-radius:inherit;background:var(--n-d6b47a,#d6b47a);transition:width .35s ease}
/* The sentence: navy English, the Korean under it; Korean-only rounds show a 한글 뜻 tag and the Korean bold.
   book.js measures the Day's rounds in .reading-target-measure, which gets this same box, so the reserve is exact;
   120px is the floor that the score circle needs. Balanced lines keep the line count and avoid a lone last word. */
.book-panel #readingActivity :is(.reading-screen,.reading-target-measure)>.reading-target{box-sizing:border-box;display:grid;justify-items:center;align-content:center;gap:8px;width:100%;min-height:120px;margin:0 0 12px;padding:14px 8px;border:0;border-radius:16px;background:transparent;box-shadow:none;text-align:center;transition:background-color .2s,box-shadow .2s}
.book-panel #readingActivity .reading-target p{margin:0;color:var(--rd-ink);font-size:var(--act-sentence);font-weight:700;line-height:var(--act-lh-sentence);letter-spacing:var(--act-track-sentence);overflow-wrap:anywhere;text-wrap:balance}
.book-panel #readingActivity .reading-target.is-listening{background:var(--n-fff8e6,#fff8e6);box-shadow:inset 0 0 0 2px var(--n-f6e3bd,#f6e3bd)}
.book-panel #readingActivity .practice-bilingual .reading-practice-translation{width:auto;padding:0;border:0;color:var(--rd-translation);font-family:inherit;font-size:var(--act-ko);font-weight:var(--act-w-ko);line-height:var(--act-lh-ko);letter-spacing:0;word-break:keep-all}
.book-panel #readingActivity .reading-target.hidden-target{border:0;background:transparent;box-shadow:none}
.book-panel #readingActivity .reading-target.hidden-target p{color:var(--rd-text);font-family:inherit;font-size:var(--act-prompt);font-weight:var(--act-w-strong);line-height:var(--act-lh-ko);letter-spacing:0;word-break:keep-all}
.book-panel #readingActivity .reading-prompt-label{display:inline-flex;align-items:center;min-height:0;padding:3px 11px;border-radius:99px;background:var(--n-fff1d9,#fff1d9);color:var(--n-8d5d31,#8d5d31);font-size:var(--act-label);font-weight:700;line-height:1.4;white-space:nowrap;gap:.35em}
/* Buttons: one row of two, always the same height; 다음 문장 takes the same row. */
.book-panel #readingActivity .reading-practice-actions{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:104px;margin:0}
.book-panel #readingActivity .reading-practice-actions>button{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1 1 0;min-width:0;max-width:240px;min-height:54px;padding:8px 12px;border-radius:16px;font-size:var(--act-button);font-weight:700;line-height:var(--act-lh-ui)}
.book-panel #readingActivity :is(.reading-practice-actions,.reading-complete,.reading-record-row)>button.secondary{border:1px solid var(--i-d9cbb5,#d9cbb5);background:var(--i-ffffff,#fff);color:var(--i-6a5a43,#6a5a43)}
.book-panel #readingActivity :is(.reading-practice-actions,.reading-complete,.reading-record-row)>button.primary{border:1px solid var(--rd-accent-line);background:var(--rd-accent);color:var(--i-ffffff,#fff)}
.book-panel #readingActivity :is(.reading-practice-actions,.reading-complete,.reading-record-row)>button:disabled{opacity:.45}
.book-panel #readingActivity :is(.reading-practice-actions,.reading-complete,.reading-record-row)>button:not(.record)::before{content:'';flex:0 0 auto;width:20px;height:20px;background:currentColor;-webkit-mask:var(--rd-icon,var(--rd-i-next)) center/contain no-repeat;mask:var(--rd-icon,var(--rd-i-next)) center/contain no-repeat}
.book-panel #readingActivity [data-reading="listen"]{--rd-icon:var(--rd-i-sound)}
.book-panel #readingActivity [data-reading="practice-restart"]{--rd-icon:var(--rd-i-again)}
.book-panel #readingActivity [data-reading="practice-next"]{--rd-icon:var(--rd-i-check)}
.book-panel #readingActivity [data-reading="finish-day"]{--rd-icon:var(--rd-i-done)}
.book-panel #readingActivity [data-reading="next-sentence"]{flex-direction:row-reverse}
.book-panel #readingActivity [data-reading="listen"].is-playing:disabled{opacity:1;border-color:var(--n-e2b04f,#e2b04f);background:var(--n-fff1d9,#fff1d9);color:var(--n-8d5d31,#8d5d31)}
.book-panel #readingActivity [data-reading="listen"].is-playing::before{animation:reading-sound-pulse .9s ease-in-out infinite alternate}
@keyframes reading-sound-pulse{from{opacity:.4}to{opacity:1}}
/* 연습 and 랭킹 도전 share one card size: the target keeps the Day's largest round of either mode, both
   action rows keep 104px and the note keeps three lines, so no message or mode change resizes it. The
   choice before them covers that same card, hidden underneath (book.js). */
.book-panel #readingActivity .reading-stage{position:relative;width:min(100%,620px);margin:0 auto}
.book-panel #readingActivity .reading-ghost{visibility:hidden}
.book-panel #readingActivity .reading-stage-cover{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;min-height:0}
.book-panel #readingActivity .reading-stage-cover>.activity-mode-entry{flex:1 1 auto;min-height:0}
.book-panel #readingActivity .reading-stage-cover>.study-error{margin:0;text-align:center}
/* 랭킹 도전: the preview's round red microphone with its word under it; it pulses while recording. */
.book-panel #readingActivity .reading-screen>.reading-record-row{display:flex;align-items:center;justify-content:center;min-height:104px;margin:0;gap:6px}
.book-panel #readingActivity .reading-record-row>.record{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:auto;min-width:120px;height:auto;min-height:0;margin:0;padding:4px 10px;border:0;border-radius:16px;background:transparent;box-shadow:none;color:var(--rd-text);font-size:var(--act-button-sm);font-weight:700;line-height:var(--act-lh-ui);animation:none}
.book-panel #readingActivity .reading-record>span{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--rd-mic);color:var(--n-ffffff,#fff);font-size:0;box-shadow:0 6px 14px var(--n-df6f5040,#df6f5040);transition:transform .12s}
.book-panel #readingActivity .reading-record>span::after{content:'';width:30px;height:30px;background:currentColor;-webkit-mask:var(--rd-i-mic) center/contain no-repeat;mask:var(--rd-i-mic) center/contain no-repeat}
.book-panel #readingActivity .reading-record:active:enabled>span{transform:scale(.94)}
.book-panel #readingActivity .reading-record.recording>span{background:var(--rd-mic-on);box-shadow:0 6px 14px var(--i-2f8f5b40,#2f8f5b40);animation:reading-mic-pulse 1.1s ease-in-out infinite}
.book-panel #readingActivity .reading-record.recording>span::after{width:22px;height:22px;border-radius:5px;background:var(--i-ffffff,#fff);-webkit-mask:none;mask:none}
.book-panel #readingActivity .reading-record:disabled{opacity:1}
.book-panel #readingActivity .reading-record:disabled>span{background:var(--n-d9cdbb,#d9cdbb);box-shadow:none}
@keyframes reading-mic-pulse{0%,100%{box-shadow:0 0 0 0 var(--n-2f8f5b33,#2f8f5b33)}50%{box-shadow:0 0 0 10px var(--n-2f8f5b26,#2f8f5b26)}}
.book-panel #readingActivity .reading-record-row>button.primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:min(100%,280px);min-height:54px;padding:8px 20px;border-radius:16px;font-size:var(--act-button);font-weight:700;line-height:var(--act-lh-ui)}
/* The note line keeps its height (up to three lines, or a tinted warning). */
.book-panel #readingActivity .reading-practice-note{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:72px;margin:10px 0 0;padding:6px 10px;border-radius:12px;color:var(--rd-muted);font-size:var(--act-note);font-weight:var(--act-w-note);line-height:1.5;text-align:center;word-break:keep-all;text-wrap:balance}
/* book.js puts each sentence of the note in its own inline block, so lines break between sentences first;
   on tablets and PCs the 14px note needs 75px for the same three lines. */
.book-panel #readingActivity .reading-note-text>span{display:inline-block}
@media(min-width:700px) and (min-height:560px){.book-panel #readingActivity .reading-practice-note{min-height:75px}}
.book-panel #readingActivity .reading-practice-note:is(.is-retry,.is-warning){font-weight:700}
.book-panel #readingActivity .reading-practice-note:is(.is-retry,.is-warning)::before{content:'';flex:0 0 auto;width:18px;height:18px;background:currentColor;-webkit-mask:var(--rd-i-again) center/contain no-repeat;mask:var(--rd-i-again) center/contain no-repeat}
.book-panel #readingActivity .reading-practice-note.is-retry{background:var(--rd-warn-soft);color:var(--rd-warn)}
.book-panel #readingActivity .reading-practice-note.is-warning{background:var(--rd-bad-soft);color:var(--rd-bad)}
.book-panel #readingActivity .reading-practice-note.is-warning::before{-webkit-mask-image:var(--rd-i-alert);mask-image:var(--rd-i-alert)}
/* Teacher previews (no modes) start from one soft tile under the toolbar, at the card's width. */
.book-panel #readingActivity .reading-entry-button{display:grid;width:min(100%,620px);min-height:280px;margin:0 auto;border:1px solid var(--rd-line);border-radius:20px;background:var(--rd-paper);box-shadow:var(--rd-shadow);color:var(--rd-accent-ink);font-size:var(--act-title);font-weight:var(--act-w-strong)}
.book-panel #readingActivity .reading-complete{box-sizing:border-box;width:min(100%,620px);margin:0 auto;padding:22px 16px;border:1px solid var(--rd-line);border-radius:20px;background:var(--rd-paper);box-shadow:var(--rd-shadow);text-align:center}
.book-panel #readingActivity .reading-complete>.reading-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin:-8px 0 16px;text-align:left}
.book-panel #readingActivity .reading-complete>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:min(100%,300px);min-height:54px;padding:10px 20px;border-radius:16px;font-size:var(--act-button);font-weight:700;line-height:var(--act-lh-ui)}
/* The round score circle of the previews over the sentence: it fades by itself and never takes input. */
.reading-score-popup.matching-flash{background:transparent}
.reading-score-popup.matching-flash>span{width:clamp(96px,26vw,116px);height:auto;aspect-ratio:1;background:var(--n-4c9d63,#4c9d63);font-size:clamp(30px,8vw,38px);box-shadow:0 0 0 5px var(--n-ffffff,#fff),0 8px 20px #2f6b4040}
.reading-score-popup.matching-flash.is-wrong>span{background:var(--i-d0644f,#d0644f);box-shadow:0 0 0 5px var(--i-ffffff,#fff),0 8px 20px #8a2f2033}
.reading-score-popup>span>small{font-size:var(--act-label);font-weight:600}
.reading-score-verdict{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:3px 9px;border-radius:99px;background:var(--n-00000024,#00000024);font-family:var(--font-en),'Noto Sans KR',sans-serif;font-size:var(--act-label);font-weight:700;line-height:1.2}
.reading-score-popup.is-correct .reading-score-verdict::before{content:'';width:11px;height:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:480px){.book-panel #readingActivity .reading-screen{padding:12px 12px 14px;border-radius:18px}}
@media(max-width:360px){.book-panel #readingActivity .reading-steps{gap:6px}.book-panel #readingActivity .reading-step{width:16px;height:16px}.book-panel #readingActivity .reading-practice-actions>button{padding:8px}}
@media(prefers-reduced-motion:reduce){.book-panel #readingActivity .reading-progress>span,.book-panel #readingActivity .reading-target,.book-panel #readingActivity .reading-record>span{transition:none}.book-panel #readingActivity .reading-record.recording>span,.book-panel #readingActivity [data-reading="listen"].is-playing::before{animation:none}}
/* 문장 읽기 직독직해 (owner, 2026-10-30: "변환? 버튼 같은거 누르면 한글 문장이 촤락 바뀌는 효과와 함께 직독직해로 해석이 바뀌어";
   book.js koreanLine/directSwitchHTML, dist/direct-reading.js). The card's lines sit centred above a bottom row with the
   해석 | 직독직해 switch, the same place in every round and sentence. The Korean line keeps its faces in one grid cell (the
   one not chosen is hidden but keeps its room; .dr-guess, the room a reading still to come may need, is never shown), so
   a tap never moves anything; the card reserve measures them all. */
.book-panel #readingActivity .reading-target.has-direct{grid-template-rows:minmax(0,1fr) auto;align-content:stretch;gap:6px;padding-bottom:8px}
/* The preview's bordered card (학생 화면 미리보기, 체험하기) gives the switch the same air as the top. */
.book-panel #readingActivity>.reading-target.has-direct,.book-panel #readingActivity .reading-target-probe>.reading-target.has-direct{padding-bottom:14px}
.book-panel #readingActivity .reading-lines{display:grid;justify-items:center;align-content:center;gap:8px;width:100%;min-width:0}
.book-panel #readingActivity .reading-ko{display:grid;justify-items:center;width:100%;min-width:0}
.book-panel #readingActivity .reading-ko>p{grid-area:1/1;max-width:100%}
.book-panel #readingActivity .reading-ko[data-view="plain"]>.dr-direct,.book-panel #readingActivity .reading-ko[data-view="direct"]>.dr-plain,.book-panel #readingActivity .reading-ko>.dr-guess{visibility:hidden}
/* The 직독직해 line: plain Korean text with a light slash after each chunk (as 단어 설명's hints), no boxes. A chunk and its
   slash stay together (the slash never starts a line); a long chunk may wrap inside its own text. */
.book-panel #readingActivity .dr-seg{display:inline-block;max-width:100%;white-space:nowrap;transform-origin:50% 0;backface-visibility:hidden}
.book-panel #readingActivity .dr-ck{white-space:normal}
.book-panel #readingActivity .dr-sl{display:inline-block;margin:0 .34em;color:var(--rd-slash);font-family:var(--font-en),sans-serif;font-style:normal;font-weight:400;user-select:none;-webkit-user-select:none}
/* The switch: one pill, 해석 | 직독직해, a thumb under the chosen side. 32px tall, a 44px tap area. */
.book-panel #readingActivity .reading-direct-row{display:flex;justify-content:center;min-height:32px}
.book-panel #readingActivity .reading-direct-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;box-sizing:border-box;height:32px;min-height:0;margin:0;padding:3px;border:1px solid var(--rd-line);border-radius:999px;background:var(--rd-soft);color:var(--rd-muted);font-family:inherit;font-size:var(--act-button-sm);font-weight:700;line-height:1;box-shadow:none;-webkit-tap-highlight-color:transparent}
.book-panel #readingActivity .reading-direct-switch::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--n-ffffff,#fff);box-shadow:0 1px 2px #4b341f24;transition:transform .18s cubic-bezier(.2,.8,.3,1),background-color .18s}
.book-panel #readingActivity .reading-direct-switch::after{content:'';position:absolute;inset:-7px -4px}
.book-panel #readingActivity .reading-direct-switch[aria-checked="true"]::before{transform:translateX(100%);background:var(--rd-accent)}
.book-panel #readingActivity .rds-option{position:relative;z-index:1;padding:0 12px;text-align:center;white-space:nowrap;transition:color .18s}
.book-panel #readingActivity .reading-direct-switch[aria-checked="false"]>.rds-option:first-child{color:var(--rd-text)}
.book-panel #readingActivity .reading-direct-switch[aria-checked="true"]>.rds-option:last-child{color:var(--n-ffffff,#fff)}
/* Without a reading (still being made, or none now) the switch stays in its place, dimmed; a tap says why (book.js). */
.book-panel #readingActivity .reading-direct-switch:is([data-state="pending"],[data-state="none"]){cursor:default;opacity:.55}
.book-panel #readingActivity .reading-direct-switch:focus-visible{outline:3px solid var(--n-60a878,#60a878);outline-offset:3px}
/* The flip (only on a tap; a draw never carries these classes): the shown line folds away, then the other turns in — the
   직독직해 chunks one after another from the left (about 280-390 ms in all, dist/direct-reading.js DIRECT_FLIP). A tap during
   a flip (is-flip-cut) hides the half-turned face at once and turns the other in without the fold, so it never flashes. */
.book-panel #readingActivity .reading-ko.is-flip-in>.dr-plain,.book-panel #readingActivity .reading-ko.is-flip-out>.dr-direct{visibility:visible;transform-origin:50% 100%;animation:dr-fold 80ms ease-in both}
.book-panel #readingActivity .reading-ko.is-flip-in>.dr-direct .dr-seg{animation:dr-turn 200ms cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(80ms + var(--i,0) * var(--dr-step,0ms))}
.book-panel #readingActivity .reading-ko.is-flip-out>.dr-plain{transform-origin:50% 0;animation:dr-turn 200ms cubic-bezier(.2,.8,.3,1) 80ms both}
.book-panel #readingActivity .reading-ko.is-flip-cut.is-flip-in>.dr-plain,.book-panel #readingActivity .reading-ko.is-flip-cut.is-flip-out>.dr-direct{visibility:hidden;animation:none}
.book-panel #readingActivity .reading-ko.is-flip-cut.is-flip-in>.dr-direct .dr-seg{animation-delay:calc(var(--i,0) * var(--dr-step,0ms))}
.book-panel #readingActivity .reading-ko.is-flip-cut.is-flip-out>.dr-plain{animation-delay:0s}
@keyframes dr-fold{to{opacity:0;transform:perspective(420px) rotateX(70deg)}}
@keyframes dr-turn{from{opacity:0;transform:perspective(420px) rotateX(-90deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.book-panel #readingActivity .reading-direct-switch::before,.book-panel #readingActivity .rds-option{transition:none}.book-panel #readingActivity .reading-ko[class*="is-flip"] *{animation:none!important}}
/* A landscape phone (short screen): the card with the 직독직해 switch's room gives back what the switch takes, the same
   in every round and in the choice's hidden copy (the target's own padding and gap, which its reserve measures too; the
   buttons' row down to 58px and the note to two lines, 52px), so 읽었어요 sits about where it did before the switch. The
   랭킹 도전 card (its switch since 2026-10-31) keeps its 104px row for the microphone and its three-line note (72px: the
   microphone and 'not heard' lines need three), and so does the hidden copy under the 랭킹 도전 tab's choice
   (.is-ranking-card), so tapping 랭킹 도전 moves nothing and no note grows the card. */
@media(max-height:500px){.book-panel #readingActivity .reading-screen.has-direct-room:not(.is-ranking-card)>.reading-practice-actions{min-height:58px}.book-panel #readingActivity .reading-screen.has-direct-room:not(.is-ranking-card)>.reading-practice-note{min-height:52px}.book-panel #readingActivity .reading-screen.has-direct-room>.reading-target{margin-bottom:4px}.book-panel #readingActivity .reading-screen.has-direct-room .reading-target.has-direct{gap:0;padding-top:4px;padding-bottom:0}}
/* A short portrait phone (320x568, review 2026-10-31): the 랭킹 도전 card and the choice's hidden copy give back the switch
   row's room the same way (the target's padding and gap only; the microphone row and the note keep their size), so the
   note under the microphone ends on the screen as it did before the switch. */
@media(max-height:600px){.book-panel #readingActivity .reading-screen.has-direct-room.is-ranking-card>.reading-target{margin-bottom:4px}.book-panel #readingActivity .reading-screen.has-direct-room.is-ranking-card .reading-target.has-direct{gap:0;padding-top:4px;padding-bottom:0}}
/* 화면 색 (2026-10-31): only the four other colour sets; 지금 keeps every line above (see study.css's note on :where()).
   The 문장 읽기 step that is being read shows its number in ink on the gold dot (white on gold was 1.86:1), and the focus
   rings take the set's --t-focus. */
:where(:root[data-theme]:not([data-theme="classic"])) .book-panel #readingActivity .reading-step.is-current{color:var(--t-ink)}
:where(:root[data-theme]:not([data-theme="classic"])) .book-panel button:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) .book-tabs button:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) .sentence-picker>summary:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) .reading-entry-button:focus-visible,:where(:root[data-theme]:not([data-theme="classic"])) .book-panel #readingActivity .reading-direct-switch:focus-visible{outline-color:var(--t-focus)}
/* 문장 읽기 microphone (2026-11-05, dist/reading-mic.js). 연습: 말하기 holds the live waveform while it listens, the
   sentence's words light in place (colour only, so no line moves), the note shows the result (완벽해요! green, 다시 해 볼까요?
   amber) and a Korean-only round lights one dot a word. 랭킹 도전 and the teacher's preview: the waveform inside the round
   microphone while it records, three dots and 채점 중 until the grade. Every state keeps the button's size. */
.book-panel #readingActivity .rm-wave{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:28px;pointer-events:none}
.book-panel #readingActivity .rm-wave>i{display:block;width:4px;height:28px;border-radius:2px;background:currentColor;transform:scaleY(.18);transform-origin:50% 50%;transition:transform 80ms linear}
.book-panel #readingActivity .reading-practice-actions>button.rm-mic{--rd-icon:var(--rd-i-mic)}
.book-panel #readingActivity .reading-practice-actions>button.rm-mic.is-listening::before{display:none}
.book-panel #readingActivity .reading-practice-actions>button.rm-mic.is-listening:disabled{opacity:1}
.book-panel #readingActivity [data-reading="practice-retry"]{--rd-icon:var(--rd-i-again)}
.book-panel #readingActivity .reading-practice-actions>button.rm-next{--rd-icon:var(--rd-i-next);flex-direction:row-reverse}
.book-panel #readingActivity .rm-word{border-radius:4px;transition:color .12s,background-color .12s}
.book-panel #readingActivity .rm-word.is-lit{color:var(--rd-accent-ink)}
.book-panel #readingActivity .rm-word.is-missed{color:var(--rd-bad);text-decoration:underline wavy;text-decoration-thickness:1.5px;text-underline-offset:4px}
.book-panel #readingActivity .reading-practice-note:has(.rm-dots){flex-direction:column;gap:6px}
.book-panel #readingActivity .rm-dots{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:100%}
.book-panel #readingActivity .rm-dots>i{display:block;box-sizing:border-box;width:11px;height:11px;border:1.5px solid var(--rd-recall-line);border-radius:50%;transition:background-color .12s,border-color .12s}
.book-panel #readingActivity .rm-dots>i.is-lit{border-color:var(--rd-accent);background:var(--rd-accent)}
/* A graded 랭킹 도전 recording (2026-11-05) keeps its dots with the result until its save answers: the words it missed in red.
   Its words say the verdict (완벽해요! / 통과! / 한 번 더), so the note's icon stays out of the dots' column and the note keeps its
   72px. */
.book-panel #readingActivity .rm-dots>i.is-missed{border-color:var(--rd-bad)}
.book-panel #readingActivity .reading-practice-note:has(.rm-dots)::before{display:none}
.book-panel #readingActivity .reading-practice-note.is-good{background:var(--rd-accent-soft);color:var(--rd-accent-ink);font-weight:700}
.book-panel #readingActivity .reading-practice-note.is-good::before{content:'';flex:0 0 auto;width:18px;height:18px;background:currentColor;-webkit-mask:var(--rd-i-check) center/contain no-repeat;mask:var(--rd-i-check) center/contain no-repeat}
.book-panel #readingActivity .reading-record.is-live>span::after,.book-panel #readingActivity .reading-record.is-grading>span::after{display:none}
.book-panel #readingActivity .reading-record.is-live>span{animation:none;color:var(--n-ffffff,#fff)}
.book-panel #readingActivity .reading-record.is-live .rm-wave{gap:2px;height:30px}
.book-panel #readingActivity .reading-record.is-live .rm-wave>i{width:3px;height:30px}
.book-panel #readingActivity .reading-record-row>button.reading-record.is-grading:disabled{opacity:1}
.book-panel #readingActivity .reading-record.is-grading:disabled>span{background:var(--rd-accent);box-shadow:none}
.book-panel #readingActivity .rm-grading{display:inline-flex;align-items:center;gap:5px;height:12px}
.book-panel #readingActivity .rm-grading>i{display:block;width:8px;height:8px;border-radius:50%;background:var(--n-ffffff,#fff);animation:rm-grading 900ms ease-in-out infinite both}
.book-panel #readingActivity .rm-grading>i:nth-child(2){animation-delay:150ms}
.book-panel #readingActivity .rm-grading>i:nth-child(3){animation-delay:300ms}
@keyframes rm-grading{0%,80%,100%{transform:scale(.6)}40%{transform:translateY(-3px) scale(1)}}
@media(prefers-reduced-motion:reduce){.book-panel #readingActivity .rm-wave>i,.book-panel #readingActivity .rm-word,.book-panel #readingActivity .rm-dots>i{transition:none}.book-panel #readingActivity .rm-grading>i{animation:none;transform:none}}