/* 오답노트 tab (dist/notes-tab.js) and its 다시 하기 round (dist/notes-session.js), 2026-10-29. The tab uses the shared
   column layout of student-tabs.css; the list is tab chrome (px sizes like the home), the round is an activity screen
   (--act-* sizes only, the game kit's card and buttons, one size for the whole round). */
/* 다시 하기: three buttons in one row at every width (owner, 2026-10-31: "칸을 줄이고 단어 문장 문법 다시 하기를 같은 줄에"),
   each about one button high: the label over today's count. The count has a line of its own (kept while it is unknown),
   so the three labels (alike in length) wrap alike and a count never changes a button's lines; the label's two halves
   stay whole, so a narrow button takes '단어 | 다시 하기' on two short lines, the same in all three. */
.notes-starts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.notes-starts[hidden]{display:none}
.notes-start{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;min-width:0;min-height:48px;margin:0;padding:5px 4px;border:1px solid var(--n-e8c9b4,#e8c9b4);border-radius:14px;background:var(--n-fff6ee,#fff6ee);color:var(--n-8d3f27,#8d3f27);font-family:inherit;font-size:var(--act-button-sm,13px);font-weight:var(--act-w-strong,700);line-height:var(--act-lh-ui,1.3);letter-spacing:-.2px;text-align:center;word-break:keep-all;box-shadow:0 2px 6px #7456370a;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease}
.notes-start-label{display:flex;flex-wrap:wrap;justify-content:center;column-gap:.3em;max-width:100%}
.notes-start-name{white-space:nowrap}
.notes-start-count{display:block;font-weight:var(--act-w-strong,700);color:var(--n-b4532a,#b4532a);white-space:nowrap}
.notes-start:hover:not(:disabled){filter:none}
@media(hover:hover){.notes-start:hover:not(:disabled){background:var(--n-fdeee2,#fdeee2)}}
.notes-start:focus-visible{outline:3px solid var(--n-d4916b,#d4916b);outline-offset:2px}
.notes-start:disabled{border-color:var(--home-line,var(--n-eee3d5,#eee3d5));background:var(--n-fbf8f3,#fbf8f3);color:var(--n-8b847a,#8b847a);box-shadow:none;cursor:default;opacity:1}
.notes-start:disabled .notes-start-count{color:inherit}
/* A tap that waits (the list, or the 문법 탐정 screen): the pressed colour and a deeper border, held still (no pulse
   while something loads, no-blink.test.mjs); nothing moves. */
.notes-start.is-busy{border-color:var(--n-d4916b,#d4916b);background:var(--n-fdeee2,#fdeee2);cursor:progress}
.notes-rule{min-height:19px;margin:8px 2px 0;color:var(--home-muted,var(--n-716d63,#716d63));font-size:12px;line-height:1.6}
.notes-rule.is-error{color:var(--i-b0402f,#b0402f);font-weight:700}
.student-notes-view[data-session="open"] .notes-starts,.student-notes-view[data-session="open"] .notes-rule{display:none}
.notes-list{min-height:120px}
.notes-list[hidden],.notes-session-host[hidden]{display:none}
/* The round's host keeps the inline-activity class (the shell gives it room in landscape) without the row frame of
   내 학습: the kit's toolbar and card are the frame. */
.notes-session-host.student-inline-activity{border:0;border-radius:0;padding:0;background:transparent}
.notes-state{display:grid;place-items:center;gap:10px;min-height:140px;padding:24px 16px;border:1px dashed var(--n-e2d6c4,#e2d6c4);border-radius:18px;background:var(--n-fffdf8,#fffdf8);color:var(--home-muted,var(--n-716d63,#716d63));font-size:13px;line-height:1.7;text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.notes-state p{margin:0}
.notes-state.is-empty{border-style:solid;border-color:var(--n-dfe8d6,#dfe8d6);background:var(--n-f7faf3,#f7faf3);color:var(--n-46733b,#46733b);font-weight:700}
.notes-state button{min-height:44px;padding:8px 18px}
.notes-section+.notes-section{margin-top:18px}
/* The list's place while it is read (No loading flashes, 2026-10-30): quiet rows of a card's usual height. */
.notes-item.is-placeholder{box-sizing:border-box;height:90px;border-style:dashed;background:var(--n-fffdf8,#fffdf8);cursor:default}
.notes-item.is-placeholder.is-sentence{height:100px}
.notes-section h2{display:flex;align-items:center;gap:6px;margin:0 2px 8px;color:var(--home-ink,var(--n-403b35,#403b35));font-size:14px;line-height:1.5;font-weight:800}
.notes-section h2 span{min-width:22px;padding:0 7px;border-radius:11px;background:var(--n-f4ece1,#f4ece1);color:var(--n-8b6146,#8b6146);font-size:12px;line-height:20px;text-align:center}
.notes-items{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.notes-item{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;margin:0;padding:10px 12px 10px 16px;border:1px solid var(--n-edddcd,#edddcd);border-radius:16px;background:var(--n-fffaf3,#fffaf3);color:var(--home-ink,var(--n-403b35,#403b35));font-family:inherit;text-align:left;cursor:pointer}
.notes-item:hover{filter:none}
@media(hover:hover){.notes-item:hover{background:var(--n-fff5e9,#fff5e9)}}
.notes-item:focus-visible{outline:3px solid var(--n-d4916b,#d4916b);outline-offset:2px}
.notes-item-text{display:grid;gap:2px;flex:1;min-width:0}
.notes-item-english{font-family:var(--font-en),'Noto Sans KR',sans-serif;font-size:var(--act-chip,17px);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.notes-item.is-sentence .notes-item-english{font-size:var(--act-ko,16px);font-weight:400}
.notes-item-korean{color:var(--n-5e574d,#5e574d);font-size:var(--act-ko,16px);font-weight:600;line-height:1.5;overflow-wrap:anywhere;word-break:keep-all}
.notes-item.is-sentence .notes-item-korean{font-size:13px}
/* A 문법 card marks the part 문법 탐정 made wrong (2026-10-31): the wrong words struck through in red, then the right words
   bold green on a soft green, inside the sentence's own line (no new line, so the card keeps the other cards' height
   rules). Not colour alone: the strike and the bold carry it too. */
.notes-fix-wrong{color:var(--i-b0402f,#b0402f);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--i-b0402f,#b0402f)}
.notes-fix-right{padding:0 3px;border-radius:5px;background:var(--n-dff1e7,#dff1e7);color:var(--n-1f6b47,#1f6b47);font-weight:700;text-decoration:none}
.notes-item-meta{overflow:hidden;color:var(--home-muted,var(--n-716d63,#716d63));font-size:11px;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.notes-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.notes-badge{padding:2px 8px;border-radius:10px;background:var(--n-fff3d3,#fff3d3);color:var(--n-8a6420,#8a6420);font-size:11px;line-height:16px;font-weight:700;white-space:nowrap}
.notes-today{color:var(--n-2a8058,#2a8058);font-size:11px;line-height:16px;font-weight:700;white-space:nowrap}
.notes-item-play{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--n-f4ece1,#f4ece1);color:var(--n-a94c31,#a94c31)}
.notes-item-play svg,.notes-speaker svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- The round (game kit card) ---- */
.game-review-notes .notes-card{display:grid;gap:0}
.game-review-notes .notes-stage{display:grid;min-width:0}
.game-review-notes .notes-stage>*{grid-area:1/1;min-width:0}
.game-review-notes .notes-stage-live{display:grid;gap:12px;align-content:start;min-width:0}
.game-review-notes .notes-stage-reserve{display:grid;visibility:hidden;pointer-events:none}
.game-review-notes .notes-stack{display:grid;min-width:0}
.game-review-notes .notes-stack>*{grid-area:1/1;min-width:0}
.game-review-notes .notes-sizer{display:grid;visibility:hidden;pointer-events:none}
.game-review-notes .notes-sizer>*{grid-area:1/1;min-width:0}
.game-review-notes .notes-prompt-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:100%;text-align:center}
.game-review-notes .notes-word{margin:0;color:var(--n-3d3a35,#3d3a35);font-family:var(--font-en),'Noto Sans KR',sans-serif;font-size:var(--act-word,34px);font-weight:var(--act-w-strong,700);line-height:var(--act-lh-word,1.2);letter-spacing:var(--act-track-word,.02em);overflow-wrap:anywhere}
.game-review-notes .notes-ko{margin:0;color:var(--n-4b463f,#4b463f);font-size:var(--act-prompt,17px);font-weight:var(--act-w-ko,600);line-height:var(--act-lh-ko,1.55);word-break:keep-all;overflow-wrap:anywhere}
.game-review-notes .notes-prompt-body.is-sentence{gap:10px}
.game-review-notes .notes-speaker{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;margin:0;padding:6px 14px;border:1px solid var(--n-e6d9c6,#e6d9c6);border-radius:999px;background:var(--n-ffffff,#fff);color:var(--n-a94c31,#a94c31);font-family:var(--font-en),'Noto Sans KR','Apple SD Gothic Neo',sans-serif;font-size:var(--act-button-sm,13px);font-weight:var(--act-w-strong,700);line-height:1.3;cursor:pointer}
.game-review-notes .notes-speaker[hidden]{display:none}
.game-review-notes .notes-speaker.is-big{flex-direction:column;width:96px;height:96px;padding:0;border-radius:50%;background:var(--n-fff6ee,#fff6ee);border-color:var(--n-e8c9b4,#e8c9b4)}
.game-review-notes .notes-speaker.is-big svg{width:40px;height:40px}
.game-review-notes .notes-choices{display:grid;gap:8px}
.game-review-notes .notes-choice{position:relative;display:grid;align-items:center;min-height:56px;margin:0;padding:10px 16px;border:1.5px solid var(--n-e6d9c6,#e6d9c6);border-radius:14px;background:var(--n-ffffff,#fff);color:var(--n-3d3a35,#3d3a35);font-family:var(--font-en),'Noto Sans KR','Apple SD Gothic Neo',sans-serif;font-size:var(--act-ko,16px);font-weight:var(--act-w-ko,600);line-height:var(--act-lh-ui,1.3);text-align:center;word-break:keep-all;cursor:pointer;box-shadow:0 2px 0 var(--n-e7d9c3,#e7d9c3)}
.game-review-notes .notes-choice>*{grid-area:1/1;min-width:0}
.game-review-notes .notes-choice.is-english{font-family:var(--font-en),'Noto Sans KR',sans-serif;font-size:var(--act-chip,17px);font-weight:var(--act-w-strong,700)}
.game-review-notes .notes-choice:disabled{cursor:default;opacity:1}
.game-review-notes .notes-choice.is-right{border-color:var(--i-4a7a3f,#4a7a3f);background:var(--i-dff1e7,#dff1e7);color:var(--i-24603f,#24603f)}
.game-review-notes .notes-choice.is-wrong{border-color:var(--i-e3b1a7,#e3b1a7);background:var(--i-fbe9e6,#fbe9e6);color:var(--i-b0402f,#b0402f)}
.game-review-notes .notes-choice.is-wrong .notes-choice-text{text-decoration:line-through;text-decoration-thickness:2px}
.game-review-notes .notes-choice.is-glow{border-color:var(--n-d4a133,#d4a133);box-shadow:0 0 0 3px var(--n-f6dc8f,#f6dc8f),0 2px 0 var(--n-e7d9c3,#e7d9c3);animation:notes-glow 1.2s ease-in-out infinite alternate}
.game-review-notes .is-shake{animation:notes-shake .42s ease}
.game-review-notes .notes-feedback{min-height:calc(2em * var(--act-lh-ko,1.55));margin:0;color:var(--muted);font-size:var(--act-note,13px);font-weight:var(--act-w-note,600);line-height:var(--act-lh-ko,1.55);text-align:center;word-break:keep-all}
.game-review-notes .notes-feedback.is-good,.game-review-notes .notes-feedback.is-cleared{color:var(--i-2a8058,#2a8058)}
.game-review-notes .notes-feedback.is-cleared{font-weight:var(--act-w-strong,700)}
.game-review-notes .notes-feedback.is-bad{color:var(--i-b0402f,#b0402f)}
.game-review-notes .notes-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.game-review-notes .notes-actions.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.game-review-notes .notes-actions>[hidden]{display:none}
.game-review-notes .notes-actions .game-kit-button{min-height:48px}
/* 다음 turns into the kit's primary button once the card is answered. */
.game-review-notes .notes-actions .notes-next:not(:disabled){border-color:transparent;background:var(--n-a94c31,#a94c31);color:var(--n-ffffff,#fff);box-shadow:0 2px 0 var(--n-7c3622,#7c3622)}
/* Sentence chunks: the tray of tiles and the answer row of underlined slots, both one 44px line a chunk. */
.game-review-notes .notes-chunk-row{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:6px;min-height:44px}
.game-review-notes .notes-answer{min-height:56px;padding:6px 0;border-bottom:1.5px dashed var(--n-e2d3bd,#e2d3bd)}
.game-review-notes .notes-chunk{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-width:44px;height:44px;margin:0;padding:0 11px;border:1.5px solid var(--n-e4cfa6,#e4cfa6);border-radius:12px;background:var(--n-fff8e8,#fff8e8);color:var(--n-3d3a35,#3d3a35);font-family:var(--font-en),'Noto Sans KR',sans-serif;font-size:var(--act-chunk,16px);font-weight:var(--act-w-strong,700);line-height:1.2;white-space:nowrap;box-shadow:0 2px 0 var(--n-e6d2a8,#e6d2a8);cursor:pointer}
.game-review-notes .notes-chunk.is-used{opacity:.28;box-shadow:none;cursor:default}
.game-review-notes .notes-chunk.is-placed{border:0;border-bottom:2.5px solid var(--n-c9b48f,#c9b48f);border-radius:8px 8px 0 0;background:transparent;box-shadow:none}
.game-review-notes .notes-answer-row.is-wrong .notes-chunk{border-bottom-color:var(--i-d0644f,#d0644f);background:var(--i-fbe9e6,#fbe9e6);color:var(--i-b0402f,#b0402f)}
.game-review-notes .notes-answer-row.is-correct .notes-chunk{border-bottom-color:var(--i-4a7a3f,#4a7a3f);color:var(--i-24603f,#24603f)}
.game-review-notes .notes-answer-row.is-shown .notes-chunk{border-bottom-color:var(--n-b08a39,#b08a39);color:var(--n-79562d,#79562d)}
.game-review-notes .notes-chunk:disabled{opacity:1;cursor:default}
.game-review-notes .notes-chunk.is-used:disabled{opacity:.28}
.game-review-notes .notes-finish{align-content:center}
@keyframes notes-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes notes-glow{from{box-shadow:0 0 0 2px var(--n-f6dc8f,#f6dc8f),0 2px 0 var(--n-e7d9c3,#e7d9c3)}to{box-shadow:0 0 0 5px var(--n-f6dc8f,#f6dc8f),0 2px 0 var(--n-e7d9c3,#e7d9c3)}}
@media(prefers-reduced-motion:reduce){.game-review-notes .is-shake,.game-review-notes .notes-choice.is-glow{animation:none}}
/* ⏸ 잠시 멈추기 (2026-10-31, owner: "11자로 생긴 아이콘만 동그랗게"): a 44px circle with 닫기's border right before 닫기 in every
   round's top row ('9 / 40' keeps the left, the row its 44px height; hidden in place on the result). A tap dims the
   screen under a centred card (잠깐 쉬어요 · how far · 계속 풀기 / 나중에 하기); the held round's own animations stop. */
.notes-session .game-kit-header .game-kit-progress{margin-right:auto}
.notes-session .game-kit-header>.notes-pause{box-sizing:border-box;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--n-e6d9c6,#e6d9c6);border-radius:50%;background:var(--n-ffffff,#fff);color:var(--n-a94c31,#a94c31);box-shadow:0 1px 2px #4b341f0f;cursor:pointer}
/* Filled bars (the 문법 탐정 screen outlines its own svgs: these selectors outrank it). */
.notes-session .notes-pause svg,.notes-pause-card .notes-pause-icon svg{fill:currentColor;stroke:none}
.notes-session .notes-pause svg{width:18px;height:18px}
.notes-session .notes-pause:focus-visible{outline:3px solid var(--n-d4916b,#d4916b);outline-offset:2px}
.notes-session .game-kit-header>.notes-pause.is-off{visibility:hidden}
.notes-session.is-paused .game-kit-view *{animation-play-state:paused}
.notes-pause-layer{position:fixed;inset:0;z-index:40;display:grid;place-items:center;box-sizing:border-box;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--n-403b3566,#403b3566);overscroll-behavior:contain;animation:notes-pause-in .16s ease-out}
.notes-pause-layer[hidden]{display:none}
.notes-pause-card{box-sizing:border-box;display:grid;justify-items:center;gap:8px;width:min(100%,340px);max-height:100%;overflow:auto;padding:22px 20px 20px;border:1px solid var(--n-e6d9c6,#e6d9c6);border-radius:20px;background:var(--n-fffefb,#fffefb);color:var(--n-3d3a35,#3d3a35);text-align:center;box-shadow:0 10px 30px #4b341f33}
.notes-pause-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--n-fff6ee,#fff6ee);color:var(--n-a94c31,#a94c31)}
.notes-pause-card .notes-pause-icon svg{width:24px;height:24px}
.notes-pause-title{margin:2px 0 0;color:var(--n-3d3a35,#3d3a35);font-size:var(--act-title,20px);font-weight:var(--act-w-strong,700);line-height:var(--act-lh-ui,1.3)}
.notes-pause-line{display:grid;gap:2px;margin:0 0 8px;color:var(--n-5e574d,#5e574d);font-size:var(--act-note,13px);font-weight:var(--act-w-note,600);line-height:var(--act-lh-ko,1.55);word-break:keep-all;text-wrap:balance}
.notes-pause-done{color:var(--i-3d3a35,#3d3a35);font-size:var(--act-ko,16px)}
.notes-pause-keep{white-space:nowrap}
.notes-pause-actions{display:grid;gap:8px;width:100%}
.notes-pause-actions .game-kit-button{width:100%;min-width:0;min-height:48px}
.notes-pause-actions .notes-pause-later{border:1px solid var(--n-d9cbb5,#d9cbb5);background:var(--n-ffffff,#fff);color:var(--n-6a5a43,#6a5a43);box-shadow:none}
.notes-pause-actions .game-kit-button:focus-visible{outline:3px solid var(--n-d4916b,#d4916b);outline-offset:2px}
@keyframes notes-pause-in{from{opacity:0}to{opacity:1}}
.game-kit.is-reduced-motion .notes-pause-layer{animation:none}
@media(prefers-reduced-motion:reduce){.notes-pause-layer{animation:none}}
/* A short landscape phone (568 × 320): a smaller icon and the two buttons side by side, so the card needs no scrolling. */
@media(max-height:500px){
 .notes-pause-card{width:min(100%,440px);gap:6px;padding:14px 16px}
 .notes-pause-icon{width:40px;height:40px}
 .notes-pause-card .notes-pause-icon svg{width:18px;height:18px}
 .notes-pause-line{margin-bottom:4px}
 .notes-pause-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* A short landscape phone (740 × 360): the word beside its speaker and the three choices in one row, so a card needs
   less scrolling in its column. */
@media(orientation:landscape) and (max-height:500px){
 .game-review-notes .notes-stage-live{gap:8px}
 .game-review-notes .notes-prompt-body:not(.is-sentence){flex-direction:row;gap:12px}
 .game-review-notes .notes-speaker.is-big{width:64px;height:64px}
 .game-review-notes .notes-speaker.is-big svg{width:28px;height:28px}
 .game-review-notes .notes-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
 .game-review-notes .notes-choice{padding:8px 10px}
}