/* 복습 tab of the student bar (dist/review-tab.js, 2026-10-29): the books the child studied, bundled into practice games.
   It sits in the shared columns of student-tabs.css (top: title, 자동 복습, picker; main: game tiles or the open round;
   side: the note) and uses the student home palette. The open round's window is the game's own fixed size. */
.student-review-view .review-auto{display:grid;gap:8px;margin:0 0 12px}
.student-review-view .review-auto[hidden]{display:none}
.review-auto-title{margin:0;font-size:13px;line-height:1.5;font-weight:800;color:var(--n-8b6146,#8b6146)}
.review-auto-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.review-auto-plan{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--n-ead9a7,#ead9a7);border-radius:16px;background:var(--n-fffaf0,#fffaf0)}
.review-auto-plan>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.review-auto-plan strong{font-size:14px;line-height:1.4;font-weight:800;color:var(--n-403b35,#403b35);overflow-wrap:anywhere}
.review-auto-plan span{font-size:12px;line-height:1.5;color:var(--n-716d63,#716d63)}
.review-auto-plan button{flex:0 0 auto;min-height:44px;padding:8px 12px;border-radius:12px;font-size:13px}

/* 배운 회차 ⇄ 모든 회차 (2026-10-30, owner: "복습 창 상단 오른쪽에 온 오프 버튼처럼 기본 "배운 회차" 한번 누르면 "모든 회차"
   이렇게 바뀌어서 한번 클릭으로 전체 책에 적용 되도록 해줘"): one switch at the right end of the title row (student-tabs.css
   .student-tab-head-slot). A 44 px tap target around a 32 px pill: a track whose knob slides (180 ms, none under reduced
   motion) and the position's words, both kept in one grid cell so the pill is as wide in both positions and nothing
   beside it moves. Inert (and faded like the picker) while a round is open. */
.review-scope-switch{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--n-5f574d,#5f574d);font-size:12px;line-height:16px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;box-shadow:none}
.review-scope-switch:hover{filter:none}
.review-scope-pill{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:32px;padding:0 11px 0 5px;border:1px solid var(--n-e3cdb6,#e3cdb6);border-radius:999px;background:var(--n-ffffff,#fff);transition:background-color 180ms ease,border-color 180ms ease}
.review-scope-track{position:relative;flex:0 0 auto;width:34px;height:20px;border-radius:999px;background:var(--n-e6dccd,#e6dccd);transition:background-color 180ms ease}
.review-scope-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--p-ffffff,#fff);box-shadow:0 1px 3px #4d392045;transition:transform 180ms ease}
.review-scope-labels{display:grid}
.review-scope-labels>span{grid-area:1/1;text-align:left}
.review-scope-switch[aria-checked="true"]{color:var(--n-4d3920,#4d3920)}
.review-scope-switch[aria-checked="true"] .review-scope-pill{border-color:var(--n-cf9d5b,#cf9d5b);background:var(--n-fff2c9,#fff2c9)}
.review-scope-switch[aria-checked="true"] .review-scope-track{background:var(--n-b9813c,#b9813c)}
.review-scope-switch[aria-checked="true"] .review-scope-knob{transform:translateX(14px)}
.review-scope-switch[aria-checked="true"] .review-scope-off,.review-scope-switch:not([aria-checked="true"]) .review-scope-on{visibility:hidden}
.review-scope-switch[aria-disabled="true"]{opacity:.6;cursor:default}
/* The keyboard ring follows the pill (not the 44 px box around it), so it stays inside the title row. */
.student-review-view .review-scope-switch:focus-visible{outline:none}
.student-review-view .review-scope-switch:focus-visible .review-scope-pill{outline:3px solid var(--n-d4916b,#d4916b);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.review-scope-pill,.review-scope-track,.review-scope-knob{transition:none}}
/* A book never studied (모든 회차 only): its row says so at its right end, inside the same row height. In 배운 회차 the
   same rows stay at the end of the list, hidden and out of reach (is-spare, its dividing line hidden with it), so
   flipping the switch never changes the picker's height. */
.review-book-mark{flex:0 0 auto;padding:0 6px;border-radius:8px;background:var(--n-e6efe9,#e6efe9);color:var(--n-4f7461,#4f7461);font-size:11px;line-height:16px;font-weight:700;white-space:nowrap}
.review-books>li.is-spare{visibility:hidden;pointer-events:none}
/* The summary's first words while 모든 회차 widens a picked book; on the narrowest phones the switch right above says
   it already, so the book names keep the room. */
.review-summary-scope{color:var(--n-8d533c,#8d533c)}
@media(max-width:359px){.review-summary-tag,.review-round-tag{display:none}}
.review-empty .review-scope-empty{min-height:44px;padding:8px 16px;border-radius:14px;color:var(--n-8d533c,#8d533c);font-size:14px;font-weight:800}

/* The picker (2026-10-30, owner: "회차 선택 칸은 없애고 위 아래 폭을 줄여줘"; then, with a phone screenshot: "책 목록 박스
   안에 담지 말고 다른 깔끔한 레이아웃으로 정리좀 해줘 바꾸기, 모두 고르기도 박스에 담지 말고 다른 형태로 변형, 그리고 바꾸기
   있는 박스 안에 어떤 책 골랐는지 다 보여주지 말고 "무슨 책 외 몇 권" 이렇게만 표시되면 깔끔할듯", "그리고 바꾸기 버튼 이름이
   적절한것 같지 않아 다른 이름으로 해줘"): a summary row of fixed height — two lines, "<first book> 외 n권" and what
   they hold — with the 책 고르기 link (접기 while open), which opens a plain list of book rows in place. A book is always
   all of its Days, so there is no Day choice. Picking or unpicking a book changes no size: the summary keeps its two
   lines (one line each; only the title is cut short, '외 n권' stays), a row looks different but keeps its height, the
   links keep their widths. */
.review-picker{border:1px solid var(--home-line,var(--n-eee3d5,#eee3d5));border-radius:18px;background:var(--n-fffdf8,#fffdf8);box-shadow:0 6px 26px #6d513706}
.review-picker[aria-disabled="true"]{opacity:.6}
.review-summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 4px 4px 12px}
.review-summary-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:34px;border:1px solid var(--n-ebd3bd,#ebd3bd);background:var(--n-f6e7d6,#f6e7d6);border-radius:7px 10px 10px 7px;color:var(--n-ad8057,#ad8057);box-shadow:inset 3px 0 var(--n-e8ceb1,#e8ceb1)}
.student-review-view .review-summary-icon svg{width:18px;height:18px}
.review-summary p{flex:1;min-width:0;margin:0;font-size:13px;line-height:18px;font-weight:700;color:var(--n-403b35,#403b35);word-break:keep-all;overflow-wrap:anywhere}
.review-summary-text{display:flex;flex-direction:column;justify-content:center;min-height:34px}
.review-summary-counts{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The books line: the tag and '외 n권' keep their size, the title alone is cut short. */
.review-summary-books{display:flex;align-items:baseline;min-width:0;font-weight:800;white-space:nowrap}
.review-summary-tag,.review-summary-more{flex:0 0 auto}
.review-summary-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.review-summary-counts{min-height:16px;font-size:12px;line-height:16px;font-weight:600;color:var(--n-716d63,#716d63)}
.review-summary-counts:empty{min-height:0}
.review-summary.is-loading p{color:var(--n-8b847a,#8b847a);font-weight:600}
.review-summary-skeleton{display:block;height:14px;max-width:14em;margin:2px 0;border-radius:6px;background:var(--n-f3ece1,#f3ece1)}
.review-summary-skeleton.is-short{max-width:9em;height:12px}
/* Counts not known yet (a picked book still on its way): a bar in the counts line at the line's own 16px. */
.review-summary-counts .review-summary-skeleton{width:9em;max-width:100%;height:12px;margin:2px 0}
.review-change.is-placeholder{box-sizing:border-box;visibility:hidden}
.review-summary.is-error p{color:var(--i-a94c31,#a94c31)}
/* 책 고르기 / 접기 and 모두 고르기 / 모두 빼기: text links in the accent colour, no box; the tap area is still 44 px high
   (padding). The toggle's two words share one grid cell (the hidden one by aria-expanded), so it keeps one width; its
   chevron turns up while the list is open. */
.review-change,.review-select-all{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px;margin:0;border:0;border-radius:10px;background:transparent;color:var(--n-a94c31,#a94c31);font-size:13px;line-height:18px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;box-shadow:none}
.review-change{gap:2px;padding:0 6px 0 10px}
/* No darkening on hover (the page's button:hover filter; a phone keeps :hover after a tap): an underline instead, only
   where a pointer hovers. */
.review-picker .review-change:hover,.review-picker .review-select-all:hover{filter:none;background:transparent}
@media(hover:hover){.review-picker .review-change:hover,.review-picker .review-select-all:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}}
.review-change-labels{display:grid}
.review-change-labels>span{grid-area:1/1;text-align:right}
.review-change[aria-expanded="true"] .review-change-closed,.review-change:not([aria-expanded="true"]) .review-change-open{visibility:hidden}
.review-change-chevron{flex:0 0 auto;width:16px;height:16px;transition:transform 180ms ease}
.review-change[aria-expanded="true"] .review-change-chevron{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.review-change-chevron{transition:none}}
.review-retry{flex:0 0 auto;min-height:44px;font-size:13px}
.review-picker-body{padding:0 12px 12px;border-top:1px solid var(--n-f0e6d8,#f0e6d8)}
.review-picker-body[hidden]{display:none}
.review-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px}
.review-picker-head h2{margin:0;font-size:13px;line-height:1.4;font-weight:800;letter-spacing:-.3px;color:var(--n-403b35,#403b35)}
.review-select-all{min-width:84px;padding:0 4px 0 10px}
.review-picker-note{min-height:18px;margin:0 0 6px;font-size:12px;line-height:18px;color:var(--n-a94c31,#a94c31);word-break:keep-all}
.review-picker-note:empty{min-height:0;margin:0}
.review-picker-note.is-reserved:empty{min-height:18px;margin:0 0 6px}
/* The books: one full-width row each, split by thin lines (no box around a book). A row is 48 px high picked or not:
   picked, its circle is filled and its title darker and bold; not picked, an empty circle and a softer title. A long
   title stays on one line, cut short. Each row starts with its number in the list and ends with the check circle
   (2026-11-05, owner: "책 고르기에서 각 책 순서에 번호를 붙여주고, 책 선택하는 v자 체크는 오른쪽으로 옮겨줘."); the number
   slot has one width (two digits, tabular), so the titles line up. */
.review-books{display:flex;flex-direction:column;margin:0 0 10px;padding:0;list-style:none}
.review-books>li{min-width:0}
.review-books>li+li{border-top:1px solid var(--n-f0e6d8,#f0e6d8)}
.review-book-row{display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:48px;margin:0;padding:6px 2px;border:0;border-radius:0;background:transparent;color:var(--n-7a7065,#7a7065);text-align:left;box-shadow:none}
.review-book-number{flex:0 0 2ch;min-width:2ch;color:var(--n-8b847a,#8b847a);font-size:13px;line-height:20px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.review-book-row[aria-pressed="true"] .review-book-number{color:var(--n-8d5d31,#8d5d31)}
.review-books .review-book-row:hover{filter:none}
@media(hover:hover){.review-books .review-book-row:hover .review-book-name{color:var(--n-4d3920,#4d3920)}}
.review-book-row[aria-pressed="true"]{color:var(--n-3d2f1f,#3d2f1f)}
.review-book-check{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;box-sizing:border-box;border:1.5px solid var(--i-cdb99d,#cdb99d);border-radius:50%;background:var(--i-ffffff,#fff);color:transparent}
.review-book-row[aria-pressed="true"] .review-book-check{border-color:var(--i-b9813c,#b9813c);background:var(--i-b9813c,#b9813c);color:var(--i-ffffff,#fff)}
.review-book-name{flex:0 1 auto;min-width:0;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-en),Arial,'Noto Sans KR',sans-serif;font-size:15px;line-height:20px;font-weight:400;letter-spacing:-.2px}
.review-book-row[aria-pressed="true"] .review-book-name{font-weight:700}
.review-done{width:100%;min-height:44px;border:0;border-radius:14px;background:var(--i-a94c31,#a94c31);color:var(--i-ffffff,#fff);font-size:15px;font-weight:800;box-shadow:0 3px 10px var(--i-a94c3124,#a94c3124)}
.review-done:hover{background:var(--i-963f27,#963f27);filter:none}

/* Game tiles: four a row at every width, in three sections — 단어 · 문장 · 파닉스, the Activities tab's order (2026-11-05,
   owner: "복습 엑티비티는 한 줄에 4개씩 나오게 ui를 변경하며 단어. 문장. 파닉스 순으로 나눠서 배치"). A tile has one fixed
   height: the icon, the name in two lines' room (a long one wraps there) and the small line in two lines' room (the
   count over 'n개 했어요', or a short reason), with the text from the --act-* sizes, so nothing in a row moves. The
   status ('복습할 교재를 골라 주세요.', a failure) sits at the right of the title in a row that keeps room for two short
   lines, so it comes and goes without moving the tiles. */
.review-games-head{display:flex;align-items:center;gap:8px;min-height:32px;margin:2px 2px 6px}
.review-games-title{flex:0 0 auto;margin:0;font-size:16px;line-height:24px;font-weight:800;letter-spacing:-.4px;color:var(--n-403b35,#403b35)}
.review-games-status{flex:1 1 auto;min-width:0;margin:0;font-size:12px;line-height:16px;color:var(--n-a94c31,#a94c31);text-align:right;word-break:keep-all}
.review-inline-retry{min-height:32px;margin-left:6px;padding:4px 10px;font-size:12px}
.review-game-sections{display:grid;gap:12px}
.review-game-section{display:grid;gap:6px;min-width:0}
.review-game-section-title{display:flex;align-items:center;gap:8px;margin:0 2px;color:var(--n-8b6146,#8b6146);font-size:var(--act-label,12px);line-height:16px;font-weight:800;letter-spacing:-.2px}
.review-game-section-title::after{content:"";flex:1;height:1px;background:var(--n-eee3d5,#eee3d5)}
.review-games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.review-games>li{min-width:0}
.review-game{--tile-icon:42px;--tile-top:9px;--tile-bottom:6px;--tile-name:calc(2.6*var(--act-button-sm,13px));--tile-line:calc(2.6*var(--act-label,12px));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;box-sizing:border-box;width:100%;height:calc(var(--tile-top) + var(--tile-icon) + 8px + var(--tile-name) + var(--tile-line) + var(--tile-bottom) + 2px);min-width:0;margin:0;padding:var(--tile-top) 3px var(--tile-bottom);border:1px solid var(--n-edddcd,#edddcd);border-radius:16px;background:var(--n-fffaf3,#fffaf3);color:var(--n-403b35,#403b35);text-align:center;box-shadow:0 3px 10px #74563703;overflow:hidden}
.review-game:hover{background:var(--n-fff5e9,#fff5e9);filter:none}
.review-game-icon{display:grid;place-items:center;flex:none;width:var(--tile-icon,42px);height:var(--tile-icon,42px);border-radius:14px;background:var(--i-f8e9bd,#f8e9bd);color:var(--i-b58639,#b58639)}
.student-review-view .review-game-icon svg{width:24px;height:24px}
@media(max-width:399px){.review-game{--tile-icon:36px}.review-game-icon{border-radius:12px}.student-review-view .review-game-icon svg{width:22px;height:22px}}
.review-game-sentence .review-game-icon{background:var(--i-e5dff7,#e5dff7);color:var(--i-8a70ad,#8a70ad)}
.review-game-phonics .review-game-icon{background:var(--i-d7eae4,#d7eae4);color:var(--i-618b7e,#618b7e)}
.review-game strong{display:flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;max-width:100%;height:var(--tile-name);font-size:var(--act-button-sm,13px);line-height:1.3;font-weight:800;letter-spacing:-.4px;word-break:keep-all;overflow-wrap:anywhere}
/* Room for two lines of the small line (the count over 'n개 했어요', or a short reason that wraps): a reason or a count
   coming or going never resizes a row. The dot between the count and 'n개 했어요' is for the words only. */
.review-game small{display:block;flex:none;max-width:100%;height:var(--tile-line);font-size:var(--act-label,12px);line-height:1.3;color:var(--n-716d63,#716d63);word-break:keep-all;overflow-wrap:anywhere}
.review-game-count,.review-game-tally{display:block;white-space:nowrap}
.review-game-sep{display:none}
.review-game-tally{color:var(--n-4f7461,#4f7461);font-weight:700}
.review-game.is-last{border-color:var(--n-dba98f,#dba98f);box-shadow:0 0 0 2px var(--n-f3d9c4,#f3d9c4)}
.review-game[aria-disabled="true"]{opacity:.55;background:var(--n-f7f2ea,#f7f2ea);box-shadow:none;cursor:default}
.review-game[aria-disabled="true"] small{color:var(--n-a26040,#a26040)}
@media(min-width:700px){.review-games{gap:10px}.review-game{--tile-top:11px;--tile-bottom:8px;padding-left:6px;padding-right:6px}}

/* The open round: a head like an open 내 학습 row, the game under it at its own size. */
.review-round{scroll-margin-top:12px}
.review-round[hidden]{display:none}
.review-round-head{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border:1px solid var(--n-edddcd,#edddcd);border-bottom-color:transparent;border-radius:18px 18px 0 0;background:var(--n-fffaf3,#fffaf3)}
.review-round-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:var(--i-f8e9bd,#f8e9bd);color:var(--i-b58639,#b58639)}
.student-review-view .review-round-icon svg{width:24px;height:24px}
.review-round-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.review-round-copy strong{font-size:16px;line-height:1.35;font-weight:800;letter-spacing:-.5px}
/* '복습 · 모든 회차 · What Can I Be? 외 2권': like the summary's books line, only the title is cut short. The head is
   narrow beside the game's count, so on phones under 400 px the '복습 · ' lead (the game says 복습 too) and under 360 px
   also the '모든 회차 · ' tag (as in the summary) leave the title its room. */
.review-round-books{display:flex;align-items:baseline;min-width:0;font-size:11px;line-height:1.5;color:var(--n-716d63,#716d63);white-space:nowrap}
.review-round-lead,.review-round-tag,.review-round-more{flex:0 0 auto}
.review-round-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:399px){.review-round-lead{display:none}}
/* 모두 n / 전체 of the game's whole list: a fixed slot (tabular figures, room for 모두 999 / 999), so the head never moves
   while it counts; the visible 모두 tells it from the game's own count of its part. With more than one set (2026-11-05)
   '세트 2/3' sits on its own line above it, inside the head's height. */
.review-round-count{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;flex:none;min-width:13ch;text-align:right;font-size:12px;line-height:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--n-716d63,#716d63);white-space:nowrap}
.review-round-set{padding:0 7px;border-radius:999px;background:var(--n-e6efe9,#e6efe9);color:var(--n-3f6b35,#3f6b35);font-size:12px;line-height:18px;font-weight:800}
.review-round-count-label{font-weight:700;color:var(--n-8b847a,#8b847a)}
.review-round-close{flex:0 0 auto;min-width:52px;min-height:44px;padding:6px 14px;border-radius:999px;font-size:13px}
.review-round-close[hidden]{display:none}
.review-round-failure{display:grid;place-items:center;align-content:center;gap:14px;min-height:440px;padding:24px 16px;border:1px solid var(--i-e7dfd1,#e7dfd1);border-radius:18px;background:var(--i-faf7f0,#faf7f0);text-align:center}
.review-round-failure p{margin:0;font-size:14px;line-height:1.7;color:var(--i-a94c31,#a94c31);word-break:keep-all}
.review-round-actions{display:flex;gap:10px;justify-content:center}
.review-round-actions button{min-width:96px;min-height:44px}

.review-note{margin:4px 0 0;padding:12px 14px;border:1px dashed var(--n-e2d6c4,#e2d6c4);border-radius:16px;background:var(--n-fffdf8,#fffdf8);color:var(--n-716d63,#716d63);font-size:12px;line-height:1.7;text-align:center;word-break:keep-all}
.review-empty{display:grid;justify-items:center;gap:12px;padding:32px 20px;text-align:center}
.review-empty-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--n-f5e8d1,#f5e8d1);color:var(--n-b39359,#b39359)}
.student-review-view .review-empty-icon svg{width:30px;height:30px}
.review-empty p{margin:0;font-size:14px;line-height:1.8;color:var(--n-5d564d,#5d564d);word-break:keep-all}
.review-go-learn{min-height:48px;padding:10px 20px;border:0;border-radius:14px;background:var(--n-a94c31,#a94c31);color:var(--n-ffffff,#fff);font-size:15px;font-weight:800;box-shadow:0 3px 10px var(--n-a94c3124,#a94c3124)}
.review-go-learn:hover{background:var(--n-963f27,#963f27);filter:none}
.student-review-view[data-review-state="empty"] .review-picker{background:var(--n-fffdf8,#fffdf8)}

/* Landscape: the picker stays open in the left column (review-tab.js keeps it shown); the right column holds the tiles
   and the round. */
@media(orientation:landscape){
 .review-picker .review-change,.review-picker .review-done{display:none}
 .review-books{margin-bottom:0}
 .review-round{scroll-margin-top:8px}
}
/* Narrow phones (under 375 px a tile is under 80 px wide): the small line gets a third line's room, so '120개 했어요'
   may wrap under the count instead of running out of its tile. */
@media(max-width:374px){.review-game{--tile-line:calc(3.9*var(--act-label,12px))}.review-game-count,.review-game-tally{white-space:normal}}
@media(max-width:360px){.review-games{gap:6px}.review-game{--tile-top:8px;padding-left:2px;padding-right:2px;border-radius:14px}.review-game strong,.review-game small{letter-spacing:-.5px}}