:root{--matching-activity-bg:var(--i-eef6f4,#eef6f4);--matching-activity-border:var(--i-d4e6df,#d4e6df)}
.student-home-view{--home-ink:var(--n-403b35,#403b35);--home-muted:var(--n-716d63,#716d63);--home-line:var(--n-eee3d5,#eee3d5);--home-coral:var(--n-da725e,#da725e);--home-sage:var(--n-6e8e78,#6e8e78);--home-gold:var(--i-b08a39,#b08a39);color:var(--home-ink);max-width:850px;margin:0 auto 28px}
.student-home-view svg{width:24px;height:24px;flex-shrink:0}
/* 내 학습's greeting row is the title row every tab shares (student-tabs.css .student-tab-head: height, place, slot); its
   right slot is empty since 새로고침 · 로그아웃 moved to the brand header (student-tabs.css .header-tools, 2026-10-30). */
.student-welcome{display:flex;align-items:center;gap:8px}
.student-identity{min-width:0;max-width:35%;flex:0 1 auto}
.student-welcome h1{font-size:14px;font-weight:700;letter-spacing:-.3px;line-height:22px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-welcome h1 span{color:var(--home-coral)}
.student-class-chip{display:flex;align-items:center;gap:4px;max-width:28%;min-width:0;flex-shrink:1;border:1px solid var(--n-d5e2d8,#d5e2d8);background:var(--n-edf4ed,#edf4ed);color:var(--n-567663,#567663);border-radius:20px;padding:1px 7px;font-size:10px;line-height:18px;font-weight:700}
.student-class-chip svg{width:12px;height:12px}
.student-class-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-home-view button:focus-visible{outline:3px solid var(--n-d4916b,#d4916b);outline-offset:4px}
/* The book picker (2026-11-11, owner: "내 학습에 나오는 책을 전체 펼쳐서 고를 수 있게 해주고 UI를 지금 창과 어울리고 넘기는걸
   자연스럽게 해줘 앞에 번호 붙여주고"; student-home.js setPicker): one card. Its row shows the chosen book (number, title,
   책 고르기 and a chevron) and never changes size; the whole numbered list opens right under it inside the same card
   (rows like 복습's 책 고르기 list: number, title, a check on the chosen one, a thin line between rows, 48 px each).
   Only the box's height moves (JS, the activity rows' 260 ms; .is-sliding clips it meanwhile), so the Day strip and the
   rows under the card glide with it. */
.student-book-picker{background:var(--n-fffdf8,#fffdf8);border:1px solid var(--home-line);border-radius:20px;padding:4px 16px;box-shadow:0 6px 26px #6d513706}
.student-book-box{position:relative;min-width:0}
.student-book-box.is-sliding{overflow:hidden}
.student-book-current{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;min-width:0;min-height:56px;margin:0;padding:6px 4px;border:0;border-radius:12px;background:transparent;color:var(--home-ink);text-align:left;box-shadow:none;scroll-margin-top:12px}
button.student-book-current{cursor:pointer}
button.student-book-current:hover:not(:disabled){filter:none;background:transparent}
button.student-book-current:active:not(:disabled){transform:none}
.student-home-view .student-book-current:focus-visible,.student-home-view .student-book-option:focus-visible{outline-offset:-3px}
.student-book-number{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;box-sizing:border-box;border-radius:9px;background:var(--n-f6e7d6,#f6e7d6);color:var(--n-8d5d31,#8d5d31);font-family:var(--font-en),Arial,sans-serif;font-size:13px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.student-book-title{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-family:var(--font-en),Arial,'Noto Sans KR',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.35px;line-height:1.25}
.student-book-more{flex:none;color:var(--n-a94c31,#a94c31);font-size:12px;line-height:1.5;font-weight:700;white-space:nowrap}
.student-home-view .student-book-arrow{flex:none;width:16px;height:16px;color:var(--n-b3a18a,#b3a18a);transition:transform .26s cubic-bezier(.33,1,.68,1)}
.student-book-current[aria-expanded="true"] .student-book-arrow{transform:rotate(180deg)}
.student-book-area{min-width:0}
.student-book-list{list-style:none;margin:0;padding:0 0 4px}
.student-book-list>li{min-width:0;border-top:1px solid var(--home-line)}
.student-book-option{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;min-width:0;min-height:48px;margin:0;padding:6px 4px;border:0;border-radius:0;background:transparent;color:var(--home-ink);text-align:left;box-shadow:none;cursor:pointer}
.student-book-option:hover:not(:disabled){filter:none;background:var(--n-fff6ea,#fff6ea)}
.student-book-option:active:not(:disabled){transform:none}
.student-book-option .student-book-number{background:transparent;font-size:13px}
.student-book-option.is-selected .student-book-number{background:var(--n-f6e7d6,#f6e7d6)}
.student-book-name{flex:1;min-width:0;overflow-wrap:anywhere;font-family:var(--font-en),Arial,'Noto Sans KR',sans-serif;font-size:15px;font-weight:600;letter-spacing:-.3px;line-height:1.3}
.student-book-option.is-selected .student-book-name{font-weight:800}
.student-book-check{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;color:var(--t-success);visibility:hidden}
.student-home-view .student-book-check svg{width:16px;height:16px;stroke-width:2.6}
.student-book-option.is-selected .student-book-check{visibility:visible}
.student-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.student-activities{margin-top:30px}
.student-activities-heading{margin:0 0 18px;padding:0 2px}
.student-activities-heading h2{font-family:var(--font-en),Arial,'Noto Sans KR',sans-serif;font-size:22px;line-height:1.35;letter-spacing:-.5px;font-weight:700;overflow-wrap:anywhere;margin:8px 0 6px}
.student-activities-heading p{font-size:12px;color:var(--home-muted)}
.student-activity-list{display:grid;grid-template-columns:1fr;gap:12px;list-style:none;margin:0;padding:0}
.student-activity-list li{min-width:0}
.student-activity-button{--activity-gap:14px;--stamp-size:36px;--stamp-gap:12px;display:flex;align-items:center;gap:var(--activity-gap);width:100%;min-height:93px;padding:17px 19px;border:1px solid var(--n-edddcd,#edddcd);border-radius:18px;background:var(--n-fffaf3,#fffaf3);color:var(--home-ink);text-align:left;box-shadow:0 3px 10px #74563703}
.student-activity-button:hover:not(:disabled){background:var(--n-fff5e9,#fff5e9);filter:none;box-shadow:0 5px 18px #7456370a}
.student-activity-number{flex-shrink:0;font-family:var(--font-en),Arial,sans-serif;font-size:12px;font-weight:700;color:var(--n-bcae9b,#bcae9b);font-variant-numeric:tabular-nums;width:13px;text-align:center}
.student-activity-icon{display:grid;place-items:center;flex-shrink:0;width:49px;height:49px;border-radius:14px;color:var(--i-b58639,#b58639);background:var(--i-f8e9bd,#f8e9bd)}
.student-activity-icon svg{width:26px;height:26px}
.student-activity-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.student-activity-copy strong{font-size:17px;line-height:1.35;font-weight:800;letter-spacing:-.6px}
.student-activity-copy>span{font-size:11px;color:var(--home-muted);line-height:1.5;overflow-wrap:anywhere}
.student-activity-button>.student-activity-arrow{width:18px;height:18px;color:var(--n-b3a18a,#b3a18a)}
.activity-reading{background:var(--i-f3f7ef,#f3f7ef);border-color:var(--i-dce7d5,#dce7d5)}
.activity-reading .student-activity-icon{background:var(--i-dfebd5,#dfebd5);color:var(--i-739363,#739363)}
.activity-reading:hover:not(:disabled){background:var(--i-eef5e7,#eef5e7)}
.activity-quiz{background:var(--i-fff3ed,#fff3ed);border-color:var(--i-f0d7ca,#f0d7ca)}
.activity-quiz .student-activity-icon{background:var(--i-f8d9c9,#f8d9c9);color:var(--i-c77a58,#c77a58)}
.activity-quiz:hover:not(:disabled){background:var(--i-ffede4,#ffede4)}
.activity-sentence-builder{background:var(--i-f2f1fb,#f2f1fb);border-color:var(--i-dfdaf0,#dfdaf0)}
.activity-sentence-builder .student-activity-icon{background:var(--i-e5dff7,#e5dff7);color:var(--i-8a70ad,#8a70ad)}
.activity-sentence-builder:hover:not(:disabled){background:var(--i-edeaf8,#edeaf8)}
.activity-word-matching{background:var(--matching-activity-bg);border-color:var(--matching-activity-border)}
.activity-word-matching .student-activity-icon{background:var(--i-d7eae4,#d7eae4);color:var(--i-618b7e,#618b7e)}
.activity-word-matching:hover:not(:disabled){background:var(--i-e7f2ee,#e7f2ee)}.activity-word-matching.is-active:hover:not(:disabled){background:var(--matching-activity-bg)}
.student-activity-button[aria-busy="true"] .student-activity-arrow{opacity:0}
.student-home-status{color:var(--n-a26040,#a26040);font-size:13px;line-height:1.7;margin-top:16px}
.student-home-status:empty{display:none}
.student-home-empty{text-align:center;padding:54px 24px;background:var(--n-fffdf8,#fffdf8);border:1px solid var(--home-line);border-radius:24px}
.student-empty-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:var(--n-f5e8d1,#f5e8d1);color:var(--n-b39359,#b39359);margin:0 auto 22px}
.student-empty-icon svg{width:32px;height:32px}
.student-home-empty h2{font-size:19px;margin:0 0 12px;line-height:1.5}
.student-home-empty p{font-size:13px;color:var(--home-muted);line-height:1.9}
.learning-navigator{max-width:850px;margin:0 auto 18px;padding:18px 20px 16px;border:1px solid var(--n-eee3d5,#eee3d5);border-radius:20px;background:var(--n-fffdf8,#fffdf8);color:var(--n-403b35,#403b35);box-shadow:0 6px 26px #6d513706}
.learning-navigator[hidden],.learning-navigator [hidden]{display:none!important}
.learning-nav-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.learning-nav-heading>div{min-width:0}
.learning-nav-heading h1{font-family:var(--font-en),Arial,'Noto Sans KR',sans-serif;font-size:22px;line-height:1.35;letter-spacing:-.5px;margin:5px 0 0;overflow-wrap:anywhere}
.learning-nav-heading p{font-size:12px;color:var(--n-716d63,#716d63);line-height:1.6;margin-top:5px}
.learning-nav-heading>button{flex-shrink:0;font-size:12px;padding:9px 12px}
.learning-activity-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.learning-activity-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:46px;padding:10px 8px;border:1px solid var(--n-e7dac8,#e7dac8);border-radius:11px;background:var(--n-faf5ec,#faf5ec);color:var(--n-6d6050,#6d6050);font-size:14px;font-weight:700;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.learning-activity-tab svg{width:18px;height:18px;flex-shrink:0}
.learning-activity-tab.selected{border-color:var(--n-a94c31,#a94c31);background:var(--n-fff0e7,#fff0e7);color:var(--n-a94c31,#a94c31);box-shadow:inset 0 -2px var(--n-a94c31,#a94c31)}
.learning-activity-tab:hover:not(:disabled){background:var(--n-fff0e7,#fff0e7);filter:none}
.learning-activity-tab:disabled{opacity:.45;cursor:not-allowed}
.learning-day-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding-top:12px;border-top:1px solid var(--n-eee3d5,#eee3d5)}
.learning-day-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:53px;padding:7px 4px;border:1px solid var(--n-e7dac8,#e7dac8);border-radius:9px;background:var(--n-fffaf2,#fffaf2);color:var(--n-6d6050,#6d6050);font-size:14px;font-weight:700;line-height:1.4;text-align:center}
.learning-day-tab strong{font-size:14px;line-height:1.4}
.learning-day-tab small{display:block;max-width:100%;color:var(--n-817263,#817263);font-size:10px;line-height:1.4;font-weight:400;overflow-wrap:anywhere}
.learning-day-tab.selected{border-color:var(--n-a94c31,#a94c31);background:var(--n-a94c31,#a94c31);color:var(--n-ffffff,#fff);box-shadow:0 3px 9px var(--n-a94c3114,#a94c3114)}
.learning-day-tab.selected small{color:var(--n-fff3eb,#fff3eb)}
.learning-day-tab:hover:not(:disabled):not(.selected){background:var(--n-fff0e7,#fff0e7);filter:none}
.learning-day-tab:disabled{opacity:.45;background:var(--n-f5f1e9,#f5f1e9);cursor:not-allowed}
.learning-nav-note{color:var(--n-716d63,#716d63);font-size:12px;line-height:1.7;margin-top:10px}
.learning-nav-note:empty{display:none}.learning-nav-note.warning{color:var(--i-a94c31,#a94c31)}
.learning-navigator button:focus-visible{outline:3px solid var(--n-93452e,#93452e);outline-offset:3px}
body[data-activity-learning="true"] .page-title,body[data-activity-learning="true"] .book-tabs{display:none}
body[data-activity-learning="true"] .reading-selector>.reading-selector-heading:first-child,body[data-activity-learning="true"] .reading-days{display:none}
body[data-activity-learning="true"] #studyPanel,body[data-activity-learning="true"] #readingPanel{max-width:850px;margin:0 auto 40px}
.learning-quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.learning-quiz-choices button{display:flex;flex-direction:column;gap:8px;align-items:center;padding:24px 14px;min-height:90px}.learning-quiz-choices small{font-size:12px;color:var(--muted)}
@media(min-width:680px){.student-activity-list{grid-template-columns:repeat(2,minmax(0,1fr))}.student-book-picker{padding:4px 22px}.student-activity-button{--activity-gap:12px;padding:19px 17px}}
@media(max-width:420px){.student-book-picker{padding:4px 10px;border-radius:18px}.student-book-current,.student-book-option{gap:8px}.student-book-title{font-size:16px}.student-activity-button{padding:15px 13px;gap:12px;min-height:85px}.student-activity-icon{width:44px;height:44px;border-radius:12px}.student-activity-copy strong{font-size:16px}.student-activity-copy>span{font-size:10px}}
@media(max-width:600px){.learning-navigator{padding:15px 13px 13px;border-radius:18px;margin-bottom:14px}.learning-nav-heading{gap:10px;margin-bottom:13px;align-items:flex-start}.learning-nav-heading h1{font-size:19px}.learning-nav-heading>button{font-size:11px;padding:8px 10px}.learning-activity-tabs{gap:5px;margin-bottom:10px}.learning-activity-tab{font-size:12px;padding:9px 4px;gap:4px;min-height:46px}.learning-activity-tab svg{width:15px;height:15px}.learning-day-tabs{gap:4px;padding-top:10px}.learning-day-tab{font-size:12px;padding:7px 2px;min-height:51px}.learning-day-tab strong{font-size:12px}.learning-day-tab small{font-size:9px}.learning-nav-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.student-activity-button,.student-home-view .student-book-arrow{transition:none}}
/* Day first, with each lesson kept directly under its activity. */
.student-activities{margin-top:20px}
/* 내 학습 Day strip (2026-11-06, owner: "학생 창 회차 선택 박스를 누르면 깜빡이는게 보여 … 선생님 숙제 관리 탭에 여러 반을 좌우로
   넘기는 설계 똑같이 적용해 다시 만들어줘"): the teacher's 숙제관리 반 strip (teacher-home.css .teacher-class-tabs, behaviour in
   dist/tab-strip.js) — one row of boxes that swipes left and right with a thin bar under it, snaps to box starts, fades an
   edge while boxes hide beyond it (data-fade), and the same boxes (selected: cream with a 2 px gold edge). Its height is
   fixed (overflow-y hidden), so a book of 30 Days, whose bar shows, is as tall as a book of 5. A tap changes the
   selection in one frame: no tap highlight, no colour transition, no :active nudge, no sticky hover on touch, and the
   selected edge's second pixel is an inset shadow, so a box never changes size (a strip of uneven boxes never moves). */
.student-day-tabs{display:flex;gap:7px;box-sizing:border-box;height:59px;margin:0;padding:1px 1px 11px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;container:day-strip/inline-size}
.student-day-tabs button{flex:1 0 58px;box-sizing:border-box;max-width:170px;height:47px;margin:0;padding:0 6px;border:1px solid var(--n-d5ccbd,#d5ccbd);border-radius:11px;background:var(--n-e8e0d3,#e8e0d3);color:var(--n-6b6155,#6b6155);font-size:15px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:clip;text-overflow:ellipsis;scroll-snap-align:start;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:none}
/* A box is never narrower than its label (overflow:clip keeps the flex minimum at the label's width; past 170 px it ends
   in …). A book with Day 10 or later (data-wide) starts every box at the width of 'Day 00', so its boxes are one width. */
.student-day-tabs[data-wide] button{flex-basis:66px}
@media(max-width:600px){.student-day-tabs button{font-size:14px}.student-day-tabs[data-wide] button{flex-basis:62px}}
/* From 680 px, where the teacher's boxes are 90 px each (teacher-home.css), a strip with room for five of them has the same
   90 px boxes, however many Days (review 2026-11-06: they stretched to 112 px on a desktop). The landscape half column,
   narrower than that, keeps sharing its width, so a book of five Days still shows whole there. */
@media(min-width:680px){@container day-strip (min-width:480px){.student-day-tabs button,.student-day-tabs[data-wide] button{flex:0 0 90px}}}
.student-day-tabs button.selected{border-color:var(--n-c79b5f,#c79b5f);background:var(--n-fff3d3,#fff3d3);color:var(--n-4d3920,#4d3920);box-shadow:inset 0 0 0 1px var(--n-c79b5f,#c79b5f)}
.student-day-tabs button:hover:not(:disabled){filter:none}
.student-day-tabs button:active:not(:disabled){transform:none}
@media (hover:hover) and (pointer:fine){.student-day-tabs button.inactive:hover:not(:disabled){background:var(--n-fff0df,#fff0df)}}
.student-day-tabs button:disabled{opacity:.6}
/* The focus ring is drawn inside the box (the strip clips what lies outside it); also in the teacher's 학생 화면 미리보기 (#studyPanel). */
.student-home-view .student-day-tabs button:focus-visible,.book-panel .student-day-tabs button:focus-visible{outline-offset:-4px}
/* The star on the Day to do (2026-11-06, owner: "작은 별같은게 빛나다가 해당 회차를 누르면 반짝임을 멈추는 느낌으로 너무 아이콘 크지 않게"
   … "회차 칸 안에 작게 만들어줘"; student-home.js dayStar): 10 px in the box's top-right corner, laid over the box
   (absolute, inside its rounded edge), so the box, the strip and the 'Day n' label never move, in the set's primary colour
   (--t-primary: every 화면 색, 3:1 or more on both box colours). It twinkles gently (fades and shrinks a little, 1.6 s)
   until the child taps that box, then stays still; with reduced motion it is still from the start. Only 내 학습 has it.
   (Two classes: .student-home-view svg sizes every icon of the home at 24 px.) */
.student-home-view .student-day-tabs button{position:relative}
.student-day-tabs .student-day-star{position:absolute;top:3px;right:3px;width:10px;height:10px;fill:var(--t-primary);stroke:var(--t-primary);stroke-width:2;stroke-linejoin:round;pointer-events:none}
.student-day-tabs .student-day-star[data-day-star="twinkle"]{animation:student-day-star-twinkle 1.6s ease-in-out infinite}
@keyframes student-day-star-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@media(prefers-reduced-motion:reduce){.student-day-tabs .student-day-star[data-day-star]{animation:none}}
.student-day-tabs[data-fade="end"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)}
.student-day-tabs[data-fade="start"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px);mask-image:linear-gradient(90deg,transparent,#000 16px)}
.student-day-tabs[data-fade="both"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.student-day-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;color:var(--n-8b7252,#8b7252);font-size:12px}
.student-day-tools>span{font-weight:700}
.student-day-tools button{border:0;background:transparent;color:var(--n-8d533c,#8d533c);padding:7px 0;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.student-activity-list{grid-template-columns:1fr!important;gap:12px}
.student-activity-button{min-height:79px;padding:14px 17px}
.student-activity-button.is-active{border-radius:18px 18px 0 0;border-bottom-color:transparent}
.student-activity-button.is-active .student-activity-arrow{transform:rotate(180deg)}
.student-activity-button>.student-activity-arrow{width:18px;height:18px;margin-left:calc(var(--stamp-size) - var(--activity-gap));transition:transform .18s ease}
@media(max-width:420px){.student-activity-button{--activity-gap:7px;--stamp-size:29px;--stamp-gap:10px;padding-inline:11px;gap:var(--activity-gap)}.student-activity-number{width:11px;font-size:10px}.student-activity-icon{width:32px!important;height:36px!important;border-radius:10px}.student-activity-icon svg{width:23px;height:23px}.student-activity-copy strong{font-size:14px;letter-spacing:-.5px}.student-activity-button>.student-activity-arrow{width:16px;height:16px}}
@media(prefers-reduced-motion:reduce){.student-activity-button>.student-activity-arrow{transition:none}}
/* The count line keeps its place while a Day's counts are read, so the row labels never move (2026-10-30); it is one line
   (a long reason shortens with an ellipsis; the name never does), so every row keeps one height. */.student-activity-copy>.student-activity-count{min-height:1.5em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-inline-activity{border:1px solid var(--n-edddcd,#edddcd);border-top:0;border-radius:0 0 18px 18px;padding:4px 16px 18px;background:var(--n-fffdf8,#fffdf8)}
.student-inline-activity[hidden]{display:none!important}
/* Slide open (student-home.js slideRow): the row's height moves while its screen, already at full size, is uncovered;
   closing folds an empty frame of the screen (.student-inline-fold) that keeps the open row's look. */
.student-activity-list>li{position:relative}
.student-activity-list>li.is-sliding{clip-path:inset(-40px 0 0 0 round 0 0 18px 18px)}
.student-inline-fold{position:absolute;left:0;right:0;bottom:0;border:1px solid var(--n-edddcd,#edddcd);border-top:0;border-radius:0 0 18px 18px;background:var(--n-fffdf8,#fffdf8);pointer-events:none}
.student-activity-list>li:has(>.student-inline-fold) .student-activity-button{border-radius:18px 18px 0 0;border-bottom-color:transparent}
.student-activity-loading-heading{display:flex;justify-content:flex-end;padding:0 0 10px;border-bottom:1px solid var(--n-eee3d5,#eee3d5)}
.student-activity-loading-heading button{font-size:12px;padding:7px 12px}
.student-activity-loading{display:grid;place-items:center;min-height:250px;padding:24px;text-align:center;color:var(--n-8b6146,#8b6146);font-size:15px}
.student-activity-loading-start{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;min-height:300px;margin-top:12px;border:1px solid var(--n-e7dfd1,#e7dfd1);border-radius:16px;background:var(--n-f5f4ed,#f5f4ed);color:var(--n-8b887d,#8b887d);opacity:1;cursor:wait}
.student-activity-loading-start strong{font-size:clamp(30px,7vw,42px);font-weight:800}
.student-activity-loading-start span{font-size:13px;font-weight:400}
.student-activity-list>[data-home-activity-row="word-matching"] .student-activity-loading-start{background:var(--matching-activity-bg);border-color:var(--matching-activity-border);color:var(--i-506e62,#506e62)}
.student-inline-activity .book-panel{margin:0!important;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.student-inline-activity .study-heading,.student-inline-activity .reading-selector{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--n-eee3d5,#eee3d5)}
.study-position,.reading-position{font-size:var(--act-toolbar,14px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--n-8b6146,#8b6146)}
.learning-item-heading,.student-inline-activity .learning-item-heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0}
.learning-item-navigation{grid-column:2;display:flex;align-items:center;justify-content:center;gap:5px}
.learning-item-navigation .study-position,.learning-item-navigation .reading-position{min-width:42px;text-align:center;white-space:nowrap}
.learning-item-heading>.secondary{grid-column:3;justify-self:end}
.learning-item-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--n-a65035,#a65035);border-radius:10px;font-size:30px;line-height:1}
.learning-item-arrow:hover:not(:disabled){background:var(--n-f9ecdf,#f9ecdf);filter:none}
.learning-item-arrow:disabled{color:var(--n-cfc6ba,#cfc6ba);opacity:.6;cursor:default}
.learning-item-arrow:focus-visible{outline:2px solid var(--n-a65035,#a65035);outline-offset:2px}
.student-inline-activity .study-heading>.secondary,.student-inline-activity .reading-selector>.secondary,.inline-close{font-size:12px;padding:7px 12px}
.student-inline-activity .study-word-card,.student-inline-activity .study-quiz-card{padding:16px 12px;border-radius:12px;background:var(--n-ffffff,#fff);border-color:var(--n-eee3d5,#eee3d5)}
.student-inline-activity .study-rounds{margin-bottom:12px}
.student-inline-activity .study-audio-controls{justify-content:center;gap:10px}
.student-inline-activity .study-next{margin-top:12px;gap:9px}
.student-inline-activity .study-next button{padding:10px 12px}
.student-inline-activity .study-empty,.student-inline-activity .study-finish{padding:20px 14px}
.student-inline-activity .study-quiz-instruction{font-size:12px;margin-bottom:12px}
.student-inline-activity .study-writing-prompt{font-size:19px;margin:10px 0 18px}
.student-inline-activity .study-answer-label textarea{font-size:17px;padding:10px;min-height:84px}
.student-inline-activity .study-result{padding:14px;margin-top:12px}
.student-inline-activity .study-result>strong{font-size:16px}
.student-inline-activity .study-result .study-model{font-size:18px}
.student-inline-activity .reading-top{justify-content:flex-end;margin-bottom:10px}
.student-inline-activity .reading-target{padding:18px 14px;margin:10px 0}
.student-inline-activity .reading-target p{font-size:23px}
.student-inline-activity .reading-record-row{margin:12px 0}
.student-inline-activity .reading-controls textarea[hidden]{display:none}
.student-inline-activity .reading-controls textarea{min-height:64px;font-size:15px;padding:10px}
.student-inline-activity .reading-auto-status{font-size:12px;padding:8px;margin:8px 0}
.student-inline-activity .reading-listening-tools{margin:0;gap:10px}
.student-inline-activity .record-caption{font-size:12px}
body[data-inline-learning="true"] .page-title,body[data-inline-learning="true"] .book-tabs,body[data-inline-learning="true"] .speech-guide{display:none!important}
body[data-inline-learning="true"] #speechFeedback{display:none}
.student-inline-activity #speakingPanel{grid-template-columns:1fr;gap:12px}
.student-inline-activity .inline-close{justify-self:end;grid-column:1/-1}
.student-inline-activity .coach-card,.student-inline-activity .privacy-note,.student-inline-activity #scoreExample,.student-inline-activity .outline-badge,.student-inline-activity .input-kind,.student-inline-activity .input-foot>span:first-child{display:none}
.student-inline-activity .score-card:has(.score-empty){display:none}
.student-inline-activity .question,.student-inline-activity .activity{padding:18px}
.student-inline-activity .question h2{font-size:22px}
.student-inline-activity .question-body{margin:14px 0 8px}
.student-inline-activity .question-number{font-size:13px;white-space:nowrap;font-family:var(--font-en),Arial,sans-serif;font-style:normal}
.student-inline-activity .topic,.student-inline-activity .question-label{display:none}
.student-inline-activity .steps{padding:12px;gap:6px}
.student-inline-activity .steps li{font-size:11px}
.student-inline-activity .score-card{padding:18px}
.learning-quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.learning-quiz-choices button{font-size:13px;min-height:52px;padding:12px 8px}
.day-overview-modal{width:min(94vw,900px);max-width:900px;max-height:90dvh;padding:0;border-color:var(--n-d8cbb9,#d8cbb9);border-radius:18px;color:var(--n-403b35,#403b35);background:var(--n-fffaf2,#fffaf2)}
.day-overview-modal[open]{display:flex;flex-direction:column}
/* 단어 · 문장 전체 보기 (dist/day-overview.js), denser on 2026-11-05 (owner: "단어와 문장이 한 화면에 더 많이 보이도록 박스 크기
   조정하고 누르면 영어를 읽어주도록"): words are small cards in a grid that fills the width (2 a row on phones, 5 in the
   900 px dialog), sentences compact rows (2 a row from 700 px); each card is a button that plays the English, with a
   speaker that turns the accent colour while it plays. Text sizes are the --act-* roles (chip, ko-sm, label, note). */
.day-overview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 18px 8px;flex-shrink:0}
.day-overview-heading h2{font-size:20px;margin:0 0 2px}
.day-overview-heading p{font-size:12px;line-height:1.5;margin:0;color:var(--n-827561,#827561);overflow-wrap:anywhere}
.day-overview-heading button{font-size:12px;padding:8px 12px}
.day-overview-tabs{display:flex;align-items:center;gap:8px;padding:0 18px 10px;flex-shrink:0}
.day-overview-tabs>[data-overview-kind]{border:1px solid var(--n-d5c8b3,#d5c8b3);background:var(--n-ece4d6,#ece4d6);color:var(--n-786650,#786650);border-radius:8px;padding:8px 18px;font-size:13px}
.day-overview-tabs>[data-overview-kind].selected{background:var(--n-a95037,#a95037);border-color:var(--n-a95037,#a95037);color:var(--n-ffffff,white)}
.day-overview-count{display:inline-block;white-space:nowrap;color:var(--n-887a66,#887a66)}
/* 가리기 (2026-11-05, owner: "버튼을 하나로 만들어서 1번 누르면 한글 가려지고 2번 누르면 영어 가려지고 3번 누르면 다시 둘다
   보이는 방식으로"): one pill button (the .secondary colours) at the right end of the 단어 | 문장 row. Its label names the next
   tap; the three labels share one grid cell (two hidden), so it keeps the widest label's width in every font and nothing
   moves when it changes. 44 px for a finger; the -4 px block margins keep the row as tall as before. */
button.day-overview-hide{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;box-sizing:border-box;min-height:44px;margin:-4px 0 -4px auto;padding:0 13px 0 11px;border-radius:999px;font-size:var(--act-button-sm);line-height:var(--act-lh-ui);white-space:nowrap}
button.day-overview-hide:active:not(:disabled){transform:none}
button.day-overview-hide:focus-visible{outline:3px solid var(--focus,var(--n-93452e,#93452e));outline-offset:2px}
.day-overview-hide-icon{flex-shrink:0;width:16px;height:16px}
.day-overview-hide[data-overview-hide="english"] [data-hide-icon="hide"],.day-overview-hide:not([data-overview-hide="english"]) [data-hide-icon="show"]{display:none}
.day-overview-hide-labels{display:grid;text-align:center}
.day-overview-hide-labels>span{grid-area:1/1}
.day-overview-hide-sizer{visibility:hidden}
.day-overview-scroll{overflow-y:auto;min-height:0;padding:10px 12px;background:var(--n-e8e2d8,#e8e2d8);border-top:1px solid var(--n-d9cdbd,#d9cdbd);overscroll-behavior:contain;scrollbar-gutter:stable}
.day-overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;list-style:none;margin:0;padding:0}
.day-overview-grid.is-sentences{grid-template-columns:1fr}
.day-overview-grid>li{display:flex;min-width:0}
.day-overview-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"num en say" ". ko say";align-items:baseline;align-content:start;column-gap:8px;row-gap:1px;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:7px 10px;background:var(--n-fffefb,#fffefb);border:1px solid var(--n-dfd3c1,#dfd3c1);border-radius:8px;box-shadow:0 2px 5px #59432809;color:inherit;font:inherit;text-align:left;overflow-wrap:anywhere;transition:none}
button.day-overview-item{cursor:pointer}
button.day-overview-item:hover{border-color:var(--n-d5c8b3,#d5c8b3);background:var(--n-fffefb,#fffefb);filter:none}
button.day-overview-item:active:not(:disabled){transform:none}
button.day-overview-item:focus-visible{outline:3px solid var(--focus,var(--n-93452e,#93452e));outline-offset:2px}
.day-overview-number{grid-area:num;min-width:1.5em;color:var(--n-a28d70,#a28d70);font-size:var(--act-label);font-weight:var(--act-w-strong);line-height:var(--act-lh-ui);font-variant-numeric:tabular-nums}
.day-overview-english{grid-area:en;font-family:var(--font-en),Arial,sans-serif;font-size:var(--act-chip);font-weight:var(--act-w-strong);line-height:var(--act-lh-word);letter-spacing:var(--act-track-word)}
.day-overview-item .day-overview-korean{grid-area:ko;font-size:var(--act-ko-sm);font-weight:var(--act-w-ko);line-height:1.4;color:var(--n-7c7163,#7c7163)}
.day-overview-item .is-concealed{visibility:hidden;user-select:none}
.day-overview-grid.is-sentences .day-overview-english{line-height:var(--act-lh-sentence);letter-spacing:var(--act-track-sentence)}
.day-overview-speaker{grid-area:say;align-self:center;width:16px;height:16px;color:var(--n-a28d70,#a28d70)}
button.day-overview-item.is-playing{border-color:var(--n-a95037,#a95037);box-shadow:0 0 0 1px var(--n-a95037,#a95037)}
button.day-overview-item.is-playing .day-overview-speaker{color:var(--n-a95037,#a95037)}
@media (prefers-reduced-motion:no-preference){button.day-overview-item.is-playing .day-overview-speaker{animation:day-overview-say 1s ease-in-out infinite}}
@keyframes day-overview-say{50%{opacity:.4}}
.day-overview-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* A sound that could not play says so over the list's foot (never a line in the flow: nothing moves). */
.day-overview-status{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:8px 12px;border-radius:10px;background:var(--n-4d3920,#4d3920);color:var(--n-ffffff,#fff);font-size:var(--act-note);font-weight:var(--act-w-note);line-height:1.45;text-align:center;word-break:keep-all;pointer-events:none}
.day-overview-status:empty{display:none}
@media (min-width:700px){.day-overview-grid.is-sentences{grid-template-columns:repeat(2,minmax(0,1fr))}}
.day-overview-empty{text-align:center;padding:30px;color:var(--n-827561,#827561)}
@media(max-width:600px){.student-inline-activity{padding:4px 12px 14px}.student-activity-button{min-height:73px;padding:12px 13px}.student-activity-icon{width:42px;height:42px}.day-overview-heading{padding:12px 14px 8px}.day-overview-tabs{padding:0 14px 10px}.day-overview-tabs>[data-overview-kind]{padding:8px 12px}.day-overview-scroll{padding:8px}.day-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.day-overview-grid.is-sentences{grid-template-columns:1fr}.day-overview-item{padding:6px 8px;column-gap:6px}.student-inline-activity .question-number{display:none}}
@media(max-width:360px){.student-activity-button{--activity-gap:5px;padding-inline:10px}}

/* Keep the authenticated student home focused on the learning content. */
body[data-view="student"]:has(.student-home-view) .header{min-height:38px;padding:0 18px;gap:10px;flex-wrap:nowrap}
body[data-view="student"]:has(.student-home-view) .header .brand{gap:6px;margin-right:0}
body[data-view="student"]:has(.student-home-view) .header .brand-logo{width:27px;height:22px}
body[data-view="student"]:has(.student-home-view) .header .brand-name{font-size:14px;line-height:1.2;letter-spacing:-.5px}
body[data-view="student"]:has(.student-home-view) .header .brand-name small,
body[data-view="student"]:has(.student-home-view) .header .header-caption{display:none}
body[data-view="student"]:has(.student-home-view) main{padding-top:0}

/* 기록 도전 (2026-11-11, owner: "지금 내 학습에 랭킹 도전이 많이 지저분해 보여. 랭킹 도전 완전히 바꿔서 기록 도전으로 … 자신의
   예전 기록과 싸우는 형식 … 그래프로 … 회차를 누르면 … 분야별 점수 … 어디 연습을 더 하고 도전하라고"): the card that took the class
   Day ranking's place (dist/record-card.js). One calm surface: the Day's title with the latest score, a 0–100 plot with one
   point an attempt joined by a line (one colour; the best has a star, one in progress a hollow dashed point), a summary
   row of the shown attempt, and — when that row or a point is tapped — its activities and a coaching line. The header
   (three fixed lines), the plot (a fixed height) and the summary row's slot keep
   their sizes while the record is read, when it is empty and when it fails, so nothing moves when it arrives. Colours are
   the theme's --t-* tokens (every 화면 색, 밤 included). */
.student-day-ranking{margin-top:26px;padding:18px 16px 14px;border:1px solid var(--t-line);border-radius:18px;background:var(--t-card);color:var(--t-ink)}
.record-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.record-head-copy{min-width:0}
.record-head :is(h3,h4){margin:0;font-size:18px;line-height:26px;letter-spacing:-.5px;word-break:keep-all}
.record-change{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:22px;margin:4px 0 0;color:var(--t-muted);font-size:13px;line-height:22px;font-weight:700}
.record-change.is-up{color:var(--t-success)}
.record-best-chip{display:inline-flex;align-items:center;gap:3px;padding:0 8px;border-radius:11px;background:var(--t-highlight);color:var(--t-ink);font-size:11.5px;line-height:22px;font-weight:700;white-space:nowrap}
.record-card .record-star{flex:0 0 auto;width:11px;height:11px;fill:var(--t-primary);stroke:none}
.record-progress{min-height:18px;margin:0;color:var(--t-muted);font-size:11.5px;line-height:18px}
.record-score{flex:0 0 auto;margin:0;text-align:right}
.record-score-caption{display:block;color:var(--t-muted);font-size:11px;line-height:16px}
.record-score>strong{display:block;color:var(--t-primary);font-size:34px;line-height:40px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.record-score>strong small{margin-left:2px;color:var(--t-muted);font-size:13px;font-weight:600;letter-spacing:0}
.record-chart{--record-plot:112px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 6px;height:calc(var(--record-plot) + 48px);margin-top:8px}
.record-axis{display:flex;flex-direction:column;justify-content:space-between;height:var(--record-plot);margin-top:24px;color:var(--t-muted);font-size:10px;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.record-axis span:first-child{transform:translateY(-50%)}
.record-axis span:last-child{transform:translateY(50%)}
.record-plot-box{position:relative;min-width:0;height:100%}
.record-plot{position:relative;height:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.record-plot::-webkit-scrollbar{display:none}
.record-card .record-grid{position:absolute;left:0;top:24px;display:block;width:100%;height:var(--record-plot);fill:none;stroke:var(--t-line);stroke-width:1;pointer-events:none}
/* The line (owner: "그래프프는 선 형식으로 해줘"): the track is as wide as its columns (72 px a column while they fit, never
   under 44 px: then the plot scrolls sideways and the line goes on through it), and the line's SVG is stretched over
   exactly that width — one viewBox unit a column, 100 units the plot's height, a stroke that does not scale. The dots
   and values are HTML inside each column's button, above the line (z-index), so a dot stays round at any stretch. One
   colour (the set's primary), a 2 px line, 10 px dots with a ring of the card's colour; no gradient, no area fill. */
.record-track{position:relative;width:max-content;min-width:min(100%,calc(var(--record-count,1)*72px));height:100%}
.record-card .record-line{position:absolute;left:0;top:24px;z-index:1;display:block;width:100%;height:var(--record-plot);overflow:visible;fill:none;stroke:var(--t-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.record-card .record-line-dashed{stroke-width:1.5;stroke-dasharray:4 4}
.record-cols{display:flex;height:100%;margin:0;padding:0;list-style:none}
.record-col{flex:1 0 44px;min-width:44px;height:100%;border-radius:8px}
.record-col.is-selected{background:color-mix(in srgb,var(--t-primary) 9%,transparent)}
.record-point{display:grid;grid-template-rows:24px var(--record-plot) 24px;justify-items:center;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--t-ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.record-point-plot{position:relative;grid-row:2;display:block;width:100%;height:100%}
.record-point-dot{position:absolute;left:50%;z-index:2;box-sizing:border-box;width:10px;height:10px;margin:0 0 -5px -5px;border-radius:50%;background:var(--t-primary);box-shadow:0 0 0 2px var(--t-card)}
.record-point-value{position:absolute;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:1px;margin-bottom:9px;font-size:11px;line-height:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 2px var(--t-card),0 0 2px var(--t-card),0 0 3px var(--t-card)}
.record-col.is-selected .record-point-dot{width:14px;height:14px;margin:0 0 -7px -7px;box-shadow:0 0 0 2px var(--t-card),0 0 0 3.5px var(--t-primary)}
.record-col.is-selected .record-point-value{margin-bottom:12px;font-size:12px}
.record-col.is-progress .record-point-dot{border:1.5px dashed var(--t-primary);background:var(--t-card)}
.record-col.is-progress .record-point-value{color:var(--t-muted);font-weight:600}
.record-point-label{grid-row:3;align-self:center;padding:0 6px;border-radius:9px;color:var(--t-muted);font-size:11px;line-height:18px;white-space:nowrap}
.record-col.is-selected .record-point-label{background:var(--t-primary);color:var(--t-on-primary);font-weight:700}
.record-point:focus-visible{outline:2px solid var(--t-focus);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.record-point:hover{background:var(--t-accent-soft)}}
.record-empty{position:absolute;inset:24px 0 24px;display:grid;place-content:center;justify-items:center;gap:2px;margin:0;padding:0 8px;color:var(--t-muted);font-size:12px;line-height:1.6;text-align:center;word-break:keep-all}
.record-empty strong{color:var(--t-ink);font-size:14px}
.record-chart.is-message{display:grid;grid-template-columns:1fr;place-content:center;justify-items:center;gap:8px}
.record-message{margin:0;color:var(--t-muted);font-size:12.5px;line-height:1.6;text-align:center;overflow-wrap:anywhere}
.record-retry{min-height:44px;padding:8px 16px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-surface);color:var(--t-ink);font-size:13px}
/* The summary row (owner: "동그라미 친 부분은 누르면 확장 되고"): the shown attempt on one line and, under it, what a tap
   does (and '보충 n개' when an activity needs more practice). Its slot keeps 52 px in every state of the card. */
.record-summary-slot{height:52px;margin-top:6px}
.record-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:center;gap:0 8px;width:100%;height:100%;margin:0;padding:6px 10px 6px 12px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-surface);color:var(--t-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.record-summary-main{display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden;font-size:13.5px;line-height:20px;white-space:nowrap}
.record-summary-main i{color:var(--t-muted);font-style:normal}
.record-summary-main span{color:var(--t-muted);font-size:12px}
.record-summary-score{font-variant-numeric:tabular-nums}
.record-summary-score small{margin-left:1px;font-size:.78em;font-weight:600}
.record-summary-sub{grid-column:1;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;color:var(--t-muted);font-size:11.5px;line-height:18px;white-space:nowrap}
.record-weak-hint{display:inline-flex;align-items:center;gap:4px;color:var(--t-ink);font-weight:700}
.record-weak-hint::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--t-error)}
.record-card .record-chevron{grid-column:2;grid-row:1/span 2;width:20px;height:20px;fill:none;stroke:var(--t-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.record-summary[aria-expanded="true"] .record-chevron{transform:rotate(180deg)}
.record-summary[aria-expanded="true"] .record-when-closed,.record-summary[aria-expanded="false"] .record-when-open{display:none}
.record-summary:focus-visible{outline:2px solid var(--t-focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.record-summary:hover{background:var(--t-accent-soft)}}
.record-detail{overflow:hidden}
.record-detail-inner{margin-top:6px;padding:10px 14px 12px;border-radius:12px;background:var(--t-surface)}
.record-kind-score small{margin-left:1px;font-size:.78em;font-weight:600}
.record-kinds{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.record-kind{display:grid;grid-template-columns:5.6em minmax(24px,1fr) 3.1em 4.4em;align-items:center;gap:8px;min-height:28px;font-size:13px;line-height:20px}
.record-kind-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.record-kind-track{display:block;height:8px;border-radius:4px;background:var(--t-line);overflow:hidden}
.record-kind-track>span{display:block;height:100%;border-radius:4px;background:var(--t-primary);opacity:.75}
.record-kind-score{text-align:right;font-variant-numeric:tabular-nums}
.record-kind-raw{color:var(--t-muted);font-size:10.5px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.record-kind-none{grid-column:3/5;color:var(--t-muted);font-size:11.5px;text-align:right;white-space:nowrap}
.record-kind.is-weak .record-kind-name::after{content:'';display:inline-block;width:6px;height:6px;margin-left:5px;border-radius:50%;background:var(--t-error);vertical-align:2px}
.record-coach{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--t-line);font-size:13px;line-height:1.6;font-weight:600;word-break:keep-all;overflow-wrap:anywhere}
.record-coach-rest{display:block;color:var(--t-muted);font-size:11.5px;font-weight:500}
.record-coach-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.record-practice{flex:1 1 130px;min-height:44px;padding:8px 12px;border:0;border-radius:11px;background:var(--t-primary);color:var(--t-on-primary);font-size:13.5px;font-weight:700;word-break:keep-all}
.record-refresh-error{margin:8px 0 0;color:var(--t-muted);font-size:11px;line-height:1.6;text-align:center}
.record-refresh-error button{min-height:44px;border:0;padding:4px 6px;color:var(--t-ink);background:transparent;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
/* The same card, read only, on a report page (a parent's Day detail; dist/record-card.js mountRecordReport). */
.record-report{margin:14px 0 0;padding:14px 12px 12px;border:1px solid var(--t-line);border-radius:14px;background:var(--t-card);color:var(--t-ink);text-align:left}
.record-report:empty{display:none}
@media(max-width:420px){.student-day-ranking{margin-top:22px;padding:16px 12px 12px}.record-kind{grid-template-columns:5.2em minmax(20px,1fr) 2.9em 4.2em;gap:6px}}

/* Landscape keeps the student, the book and the Day ranking beside an independently scrolling lesson. */
@media(orientation:landscape){
 body[data-view="student"]:has(.student-home-view .student-activities){height:100dvh;overflow:hidden}
 body[data-view="student"]:has(.student-home-view .student-activities) main,
 body[data-view="student"]:has(.student-home-view .student-activities) #schoolPanel,
 body[data-view="student"]:has(.student-home-view .student-activities) #schoolContent,
 body[data-view="student"]:has(.student-home-view .student-activities) #studentHome{width:100%;max-width:none;height:100dvh;min-height:0;margin:0;padding:0}
 body[data-view="student"]:has(.student-home-view .student-activities) .header{position:fixed;top:0;left:0;z-index:15;width:50%;height:38px;min-height:38px;padding:0 16px 0 max(16px,env(safe-area-inset-left,0px))}
 body[data-view="student"]:has(.student-home-view .student-activities) main>footer{display:none}
 /* The left column (student, book, Day ranking) scrolls as one, like every other tab's left column (owner, 2026-11-06:
    "화면 가로로 했을때 랭킹은 왼쪽 화면으로"); the right column is pinned (sticky) beside it and scrolls on its own, so
    its width, and every activity screen in it, stay exactly as before. This scroller's bar is hidden: it would sit at the
    right edge beside the right column's own bar and narrow it on a desktop. */
 .student-home-view:has(.student-activities){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto 1fr;max-width:none;height:100dvh;min-height:0;margin:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none}
 .student-home-view:has(.student-activities)::-webkit-scrollbar{display:none}
 .student-home-view:has(.student-activities)>.student-welcome{grid-column:1;grid-row:1;margin:38px 16px 0}
 .student-home-view:has(.student-activities)>.student-book-picker{grid-column:1;grid-row:2;margin:0 16px;padding:4px 12px}
 /* The folded row comes back under the fixed brand header (38 px), never behind it. */
 .student-home-view:has(.student-activities) .student-book-current{scroll-margin-top:50px}
 .student-home-view:has(.student-activities)>.student-activities{grid-column:2;grid-row:1/5;position:sticky;top:0;align-self:start;height:100dvh;min-height:0;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;overscroll-behavior-y:contain;scrollbar-gutter:stable;margin:0;padding:12px 16px 20px;border-left:1px solid var(--home-line)}
 /* Answer renders must not anchor to a later row or clamp the current view
    when feedback disappears. Keep one viewport of scroll room while open. */
 .student-home-view:has(.student-activities)>.student-activities:has(.student-inline-activity:not([hidden]),.student-inline-fold){padding-bottom:calc(100dvh + 20px)}
 /* The Day ranking board (owner, 2026-11-06: "화면 가로로 했을때 랭킹은 왼쪽 화면으로", an arrow from the board to the empty
    room under the book picker): the left column, right under the book picker, in view beside the rows and an open
    activity. A board taller than the room scrolls with the left column (so does the open book list above it; the bands
    have no sticky titles). A reading error and its 다시 불러오기 come before the waiting bands, inside the first view. */
 .student-home-view:has(.student-activities)>.student-day-ranking:not([hidden]){grid-column:1;grid-row:3;min-width:0;margin:12px 16px 0}
 .student-home-view:has(.student-activities)>.student-home-status{grid-column:1;grid-row:4;max-height:20dvh;overflow:auto;margin:0 16px 6px;font-size:11px}
 /* An empty status line still holds the room under the left column (the bar's, student-tabs.css), so the board ends above it. */
 .student-home-view:has(.student-activities)>.student-home-status:empty{display:block}
 .student-home-view .student-activity-button{--activity-gap:10px;--stamp-size:32px;padding:15px 12px;min-height:82px}
 .student-home-view .student-activity-icon{width:38px;height:42px}
 .student-home-view .student-activity-copy strong{font-size:16px}
 body[data-view="student"]:has(.student-home-view .student-activities) #schoolNotice:not(:empty){position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:calc(50% + 12px);bottom:6px;z-index:20;max-height:30dvh;overflow:auto}
 body[data-view="student"]:has(.student-home-view .student-activities) #speechFeedback:not([hidden]){position:fixed;left:calc(50% + 12px);right:max(12px,env(safe-area-inset-right,0px));bottom:6px;z-index:20;max-height:30dvh;overflow:auto}
}
@media(orientation:landscape) and (max-height:480px){
 .student-home-view:has(.student-activities)>.student-book-picker{padding-block:2px}
 .student-home-view .student-book-current{min-height:48px}
 /* A landscape phone: the card sits closer under the book picker and its plot is lower. */
 .student-home-view:has(.student-activities)>.student-day-ranking:not([hidden]){margin-top:8px;padding:12px 12px 10px}
 .student-home-view .record-chart{--record-plot:84px}
 .student-home-view .record-score>strong{font-size:28px;line-height:34px}
}
@media(orientation:landscape) and (max-width:900px){
 .student-home-view .student-activity-button{--activity-gap:7px;--stamp-size:29px;--stamp-gap:10px;padding-inline:11px;gap:var(--activity-gap)}
 .student-home-view .student-activity-number{width:11px;font-size:10px}
 .student-home-view .student-activity-icon{width:32px!important;height:36px!important;border-radius:10px}
 .student-home-view .student-activity-icon svg{width:23px;height:23px}
 .student-home-view .student-activity-copy strong{font-size:14px;letter-spacing:-.5px}
 .student-home-view 
 .student-home-view .student-activity-button>.student-activity-arrow{width:16px;height:16px}
}


/* A class may show 1-5 activities; without any the list explains why. */
.student-activity-empty{margin:4px 0 0;padding:22px 16px;border:1px dashed var(--n-e2d6c4,#e2d6c4);border-radius:16px;background:var(--n-fffdf8,#fffdf8);color:var(--home-muted);font-size:13px;line-height:1.7;text-align:center}
/* An activity that could not open: the reason inside its row, with 다시 시도 (school.js showActivityFailure). */
.student-activity-failure{display:grid;justify-items:center;align-content:center;gap:14px;min-height:180px;padding:24px 16px;text-align:center}
.student-activity-failure p{margin:0;color:var(--i-9a4b2c,#9a4b2c);font-size:var(--act-ko,16px);font-weight:700;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.student-activity-failure button{min-width:140px;min-height:48px;font-size:var(--act-button,16px)}
/* A game screen still loading: a neutral block about a game card's height (the status text is for screen readers). */
.student-activity-loading.is-module{min-height:440px;margin-top:12px;padding:0;border:1px solid var(--line,var(--n-e7dfd1,#e7dfd1));border-radius:18px;background:var(--surface-2,var(--n-faf7f0,#faf7f0))}

/* The row state chip (2026-11-05, owner's answers: "학습 완료 자리에 "도전 잠김" -> "도전 열림" -> 랭킹 도전 한 번이라도 하면
   "학습 완료" 한 번 상태가 바뀌면 쭉 유지"): 도전 잠김 (lock, quiet) → 도전 열림 (open lock, the accent) → 학습 완료 (check, green)
   on a ranking row; 학습 완료 alone on the others. Where it sits (2026-11-05, owner: "학습 완료 / 도전 잠김 버튼 있잖아 위치
   변경해서 엑티비티 도장 두개 아래에 배치시키고, 도장과 엑티비티 명칭은 라인이 맞도록 배치해줘"): a 내 학습 row is number · icon ·
   two lines · arrow, and the two lines are one grid (.student-activity-main, the name block's children placed in it):
   line 1 is the name and, at its right end, the two stamps, centred on the name's line; line 2 is the count and, right under
   the stamps, the chip, centred on the count's line and on the stamps. The right column has one width on every row (the
   stamp room and the chip slot are fixed widths; a row without 랭킹 도전 keeps an empty stamp room, STAMP_ROOM, and a hidden
   chip keeps its slot), so every row's stamps and chip share one column and nothing moves when a chip comes or changes.
   The stamps take no height in line 1 (negative margins as tall as they are: line 1 is the name's line, so the rows keep
   their heights) and --line-gap keeps their number badges clear of the chip. One 18 px chip (four syllables and a 12 px
   icon in a 4em + 29px slot). Colours are the theme's --t-* tokens (every 화면 색, 밤 included); 학습 완료 is ink on the soft
   green with a green check (the old green-on-green mark was 4.13:1). */
.student-activity-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--activity-gap);row-gap:var(--line-gap);flex:1 1 0;min-width:0}
.student-activity-main>.student-activity-copy{display:contents}
.student-activity-main>.student-activity-copy>strong{grid-row:1;grid-column:1;min-width:0;white-space:nowrap}
.student-activity-main>.student-activity-copy>.student-activity-count{grid-row:2;grid-column:1}
.student-activity-main>.student-activity-today{grid-row:2;grid-column:2;justify-self:center;height:16px;color:var(--t-muted);font-size:10.5px;line-height:16px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.student-activity-status{display:flex;grid-row:1;grid-column:2;justify-self:center;width:calc(4em + 29px);height:18px;font-size:11px;line-height:16px}
.student-activity-state{display:flex;align-items:center;justify-content:center;gap:3px;box-sizing:border-box;width:100%;min-width:0;padding:1px 8px 1px 6px;border-radius:10px;font-size:11px;line-height:16px;font-weight:700;white-space:nowrap}
.student-activity-state[hidden]{display:none}
/* While a row shows no chip (a Day's reason such as 이 Day에는 없어요 comes with none), its count may run on into the empty
   slot instead of shortening. */
.student-activity-main:has(>.student-activity-status>.student-activity-state[hidden]) .student-activity-count{overflow:visible;text-overflow:clip}
.student-activity-state.is-locked{background:var(--t-surface);color:var(--t-muted);box-shadow:inset 0 0 0 1px var(--t-line)}
.student-activity-state.is-open{background:var(--t-accent-soft);color:var(--t-primary)}
.student-activity-state.is-done{background:var(--t-success-soft);color:var(--t-ink)}
.student-home-view .student-activity-state.is-done svg{color:var(--t-success)}
.student-home-view .student-activity-state svg{width:12px;height:12px;flex:0 0 auto;stroke-width:2.6}
.student-home-view .student-activity-state:is(.is-locked,.is-open) svg{stroke-width:2.2}
/* The two lines per breakpoint. The rows keep their heights (73 px phones, 79 px tablets, 82 px landscape) with the two lines
   centred in them as before (the padding only leaves them room), and the stamps keep the sizes they had before the two
   lines (29 px phones and landscape phones, 36 px tablets, 32 px wide landscape; a 스피킹 게임 row, no data-home-activity,
   still has them) wherever the row fits them above the name. Only 421–600 px portrait (73 px rows, 17 px names) cannot fit
   36 px stamps above the name with the chip under them: there they are 32 px, the largest that fits. --line-gap (name
   line to count line) is the smallest that keeps their number badges about 3 px above the chip (review 2026-11-05: the
   first version shrank them to 26/28/32 px, more than the rows need). */
.student-activity-button[data-home-activity]{--stamp-size:36px;--line-gap:3px;padding-block:8px}
@media(min-width:421px) and (max-width:600px) and (orientation:portrait){.student-activity-button[data-home-activity]{--activity-gap:10px;--stamp-size:32px;--stamp-gap:10px;--line-gap:3px}}
@media(max-width:420px),(max-width:900px) and (orientation:landscape){.student-activity-button[data-home-activity]{--stamp-size:29px;--line-gap:3px}}
@media(min-width:901px) and (orientation:landscape){.student-home-view .student-activity-button[data-home-activity]{--stamp-size:32px;--line-gap:3px}}
/* On phones the arrow follows the right column at the row's gap (its stamp-sized margin would take the name's room); the
   smallest landscape phones (568 × 320: a 251 px row in the right column) take 5 px gaps and 8 px sides. */
@media(max-width:600px) and (orientation:portrait),(max-width:900px) and (orientation:landscape){.student-activity-button[data-home-activity]>.student-activity-arrow{margin-left:0}}
@media(orientation:landscape) and (max-width:650px){.student-home-view .student-activity-button[data-home-activity]{--activity-gap:5px;padding-inline:8px}}
/* The Day's line under the Day tools: 학습 완료 n/m (rows with material on this Day), one 18px line, kept while unknown. */
.student-day-progress{min-height:18px;margin:-6px 0 12px;font-size:12px;line-height:18px}
.student-day-progress>span{display:block;color:var(--n-8b6146,#8b6146);font-weight:700}
.student-day-progress[data-done="all"]>span{color:var(--i-2a8058,#2a8058)}
/* 화면 색 (2026-10-31): in the four other colour sets the 내 학습 focus ring is the set's --t-focus (the shared coral ring
   was below 3:1 on the page); 지금 keeps it. */
:where(:root[data-theme]:not([data-theme="classic"])) .student-home-view button:focus-visible{outline-color:var(--t-focus)}