/* ============ 컨트롤 ============ */
.primary-button, .secondary-button, .text-button, .back-button {
    min-height: var(--control-height);
    padding: 0 var(--space-5);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    border-radius: var(--radius); cursor: pointer;
    font-size: .96rem; font-weight: 700; letter-spacing: -.01em;
    transition: filter .15s ease, background .15s ease, border-color .15s ease, transform .12s ease;
}
.primary-button {
    border: 0; color: #16210a;
    background: linear-gradient(180deg, var(--lime), #86bf22);
    box-shadow: 0 8px 20px -10px rgb(163 230 53 / 70%);
}
.primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.secondary-button { border: 1px solid var(--line-strong); background: rgb(255 255 255 / 4%); color: var(--text); }
.secondary-button:hover { border-color: var(--cyan); background: rgb(34 211 238 / 10%); }
.text-button, .back-button { padding: 0 var(--space-3); border: 0; background: transparent; color: var(--muted); font-weight: 600; }
.text-button:hover, .back-button:hover { color: var(--text); background: rgb(255 255 255 / 7%); }
.back-button { margin: 0 0 var(--space-4) calc(var(--space-3) * -1); }
.button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }

select, input[type="number"], input[type="text"] {
    width: 100%; min-height: var(--control-height);
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--panel-2); color: var(--text);
    transition: border-color .15s ease;
}
select {
    appearance: none; padding-right: var(--space-6); cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select:hover, input:hover { border-color: var(--cyan); }

.form-error { min-height: 22px; margin: var(--space-2) 0 0; color: var(--red); font-size: .9rem; font-weight: 600; }

/* ============ 홈 ============ */

/* 로고는 사이드바에만 둔다. 홈에서 한 번 더 보여 줄 이유가 없다. */
.home-heading { margin-bottom: var(--space-7); }
.home-heading h1 { margin-bottom: var(--space-2); }
.home-heading p { margin: 0; color: var(--muted); }

/* 카드 글자에 비해 묶음 이름이 너무 작아 묻혀 있었다. 카드 제목과 비슷한
   크기로 올리고, 자간을 넓히는 대신 색으로만 구분한다. */
.home-group {
    margin: var(--space-7) 0 var(--space-4);
    color: var(--text); font-size: 1.05rem; font-weight: 800;
    letter-spacing: -.01em; text-transform: none;
}
.home-group:first-of-type { margin-top: 0; }

/* 줄을 꽉 채운다.
 *
 * 3열에 다섯 장을 넣으면 둘째 줄 오른쪽에 구멍이 하나 남고, 두 장짜리
 * 도구 묶음은 오른쪽 삼분의 일이 통째로 빈다. 격자를 6칸으로 잡고 칸 수를
 * 나눠 주면 어떤 개수든 줄이 딱 떨어진다.
 *   5장 → 2+2+2 / 3+3     2장 → 3+3     3장·6장 → 2씩 */
.home-menu {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3);
}
.home-menu > * { grid-column: span 2; }
.home-menu[data-count="1"] > * { grid-column: span 6; }
.home-menu[data-count="2"] > * { grid-column: span 3; }
.home-menu[data-count="4"] > * { grid-column: span 3; }
.home-menu[data-count="5"] > :nth-child(n+4) { grid-column: span 3; }
.home-card {
    min-height: 140px; padding: var(--space-4) var(--space-4) var(--space-5);
    display: grid; align-content: start; gap: var(--space-2);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--panel); color: var(--text); text-align: left; cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.home-card:hover { transform: translateY(-3px); box-shadow: var(--lift-strong); }
.home-card strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.home-hint { color: var(--muted); font-size: .82rem; line-height: 1.45; }

/* 화면 제목 옆의 이모지. 사이드바에서 고른 것과 같은 그림이라 지금 어느
   화면인지 눈으로 바로 잇는다. h1 은 자간을 좁혀 두어 이모지가 붙어 보이니
   왼쪽에 여백을 준다. */
.title-emoji { margin-left: .12em; font-size: .8em; letter-spacing: normal; }

/* 색 타일 위의 이모지. 기능마다 색을 달리해 위치로 기억하게 한다. */
.home-icon {
    width: 46px; height: 46px; margin-bottom: var(--space-1);
    display: grid; place-items: center;
    border-radius: 14px; font-size: 1.35rem;
    background: var(--tone-bg); box-shadow: inset 0 0 0 1px var(--tone-line);
}
.tone-cyan { --tone-bg: rgb(34 211 238 / 16%); --tone-line: rgb(34 211 238 / 40%); }
.tone-lime { --tone-bg: rgb(163 230 53 / 16%); --tone-line: rgb(163 230 53 / 40%); }
.tone-amber { --tone-bg: rgb(251 191 36 / 16%); --tone-line: rgb(251 191 36 / 40%); }
.tone-violet { --tone-bg: rgb(167 139 250 / 18%); --tone-line: rgb(167 139 250 / 42%); }
.tone-pink { --tone-bg: rgb(244 114 182 / 16%); --tone-line: rgb(244 114 182 / 40%); }
.tone-slate { --tone-bg: rgb(255 255 255 / 8%); --tone-line: rgb(255 255 255 / 16%); }
.tone-cyan:hover { border-color: rgb(34 211 238 / 55%); }
.tone-lime:hover { border-color: rgb(163 230 53 / 55%); }
.tone-amber:hover { border-color: rgb(251 191 36 / 55%); }
.tone-violet:hover { border-color: rgb(167 139 250 / 55%); }
.tone-pink:hover { border-color: rgb(244 114 182 / 55%); }
.tone-slate:hover { border-color: var(--line-strong); }

/* ============ 설정 화면 ============ */

.setting-sheet { display: grid; gap: var(--space-4); }
.setting-sheet fieldset {
    margin: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--line);
    border-radius: var(--radius-lg); background: var(--panel);
}
/* kani 처럼 제목 왼쪽에 강조 막대를 둔다.
 *
 * 브라우저는 legend 를 fieldset 테두리에 걸쳐 그린다. float 로 그 배치에서
 * 빼내면 상자 안에 보통 제목처럼 앉는다(측정: 상자 위쪽에서 16.8px 안쪽).
 * fieldset 을 grid 로 만드는 방법도 재 봤지만 legend 는 여전히 테두리에
 * 걸렸다. float 가 유일하게 통했다.
 *
 * 다만 아래 clear 규칙과 반드시 같이 있어야 한다. 폭 100% 인 float 옆에는
 * 남는 자리가 없어서, 뒤따르는 chip-group 같은 grid·flex 상자가 폭 0 으로
 * 짜부라진다. clear 없이 float 만 넣었다가 모든 설정 화면이 세로 한 줄로
 * 뭉개진 적이 있다. */
.setting-sheet legend {
    float: left; width: 100%;
    padding: 0; margin-bottom: var(--space-3);
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--text); font-size: .9rem; font-weight: 700; letter-spacing: -.01em;
}
.setting-sheet fieldset > :not(legend) { clear: both; }
.setting-sheet fieldset > p { margin: 0; }
.setting-sheet fieldset > :not(legend) + :not(legend) { margin-top: var(--space-3); }
.setting-sheet fieldset::after { content: ""; display: block; clear: both; }
.setting-sheet legend::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--cyan); }

.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    min-height: 0; padding: var(--space-3) var(--space-4);
    display: grid; gap: 2px; justify-items: center;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius);
    background: var(--panel-2); color: var(--text-soft); cursor: pointer; text-align: center;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.chip:hover { border-color: var(--cyan); color: var(--text); transform: translateY(-1px); }
.chip b { font-size: .95rem; font-weight: 700; }
.chip i { color: var(--muted); font-size: .72rem; font-style: normal; font-variant-numeric: tabular-nums; }
.chip.is-on {
    border-color: var(--cyan); background: rgb(34 211 238 / 16%); color: var(--cyan);
    box-shadow: var(--glow-cyan);
}
.chip.is-on i { color: rgb(34 211 238 / 75%); }

.setting-preview {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) var(--space-5); min-height: 96px;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #0b0c22, #12142f);
}
.setting-preview > span { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.setting-preview output {
    min-width: 4ch; color: var(--cyan);
    font-family: var(--numeric); font-size: 2.6rem; font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right;
}
.lesson-help { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.start-practice {
    width: 100%; min-height: 62px; margin-top: var(--space-2);
    font-size: 1.12rem; border-radius: var(--radius); gap: var(--space-3);
    background: linear-gradient(180deg, var(--amber), var(--amber-deep)); color: #2b1502;
    box-shadow: 0 10px 24px -12px rgb(251 191 36 / 80%);
}
.start-practice span { padding: 2px var(--space-3); border-radius: 999px; background: rgb(0 0 0 / 18%); font-size: .78rem; font-weight: 800; }

/* ============ 연습 플레이어 ============ */
.practice-player {
    width: min(var(--stage-width), calc(100% - var(--space-5)));
    min-height: min(76vh, 600px);
    margin: var(--space-6) auto;
    padding: var(--space-5) var(--space-6) var(--space-6);
    display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--space-4);
    border: 1px solid var(--line); border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #0c0d24, #14163a);
    box-shadow: var(--lift-strong);
}
.player-topline {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding-bottom: var(--space-4); border-bottom: 1px solid var(--line);
}
#player-title { color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
#problem-position {
    padding: var(--space-1) var(--space-4); border-radius: 999px;
    border: 1px solid rgb(34 211 238 / 40%); background: rgb(34 211 238 / 12%); color: var(--cyan);
    font-family: var(--numeric); font-size: 1rem; font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.player-stage { display: grid; place-items: center; align-content: center; text-align: center; }
.player-cue { min-height: 30px; margin: 0; color: var(--muted); font-size: .95rem; font-weight: 600; letter-spacing: .04em; }
#number-output {
    min-height: 230px; display: grid; place-items: center;
    color: var(--text); font-family: var(--numeric);
    font-size: clamp(5rem, 19vw, 10.5rem); font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1;
    text-shadow: 0 0 60px rgb(34 211 238 / 22%);
}
#number-output.is-countdown { color: rgb(236 238 251 / 24%); font-size: clamp(4rem, 14vw, 8rem); text-shadow: none; }
.practice-player progress { width: 100%; height: 6px; border: 0; border-radius: 999px; accent-color: var(--lime); background: rgb(255 255 255 / 10%); }
.practice-player progress::-webkit-progress-bar { background: rgb(255 255 255 / 10%); border-radius: 999px; }
.practice-player progress::-webkit-progress-value { background: linear-gradient(90deg, var(--cyan), var(--lime)); border-radius: 999px; }
.player-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

.player-rail { display: flex; gap: 4px; }
.player-rail span { flex: 1; height: 4px; border-radius: 999px; background: rgb(255 255 255 / 12%); transition: background .2s ease; }
.player-rail span.is-done { background: var(--lime); }
.player-rail span.is-now { background: var(--cyan); box-shadow: 0 0 10px -2px var(--cyan); }

/* 교재의 세로 문제표처럼 아래로 쌓인다 */
.term-stack { display: none; }
.is-stacked #number-output { display: none; }
.is-stacked .term-stack {
    display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none;
    justify-items: end; min-width: 6ch;
    font-family: var(--numeric); font-variant-numeric: tabular-nums;
    font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 700; letter-spacing: -.02em;
}
.is-stacked .term-stack li { animation: term-in .18s ease-out; }
.is-stacked .term-stack li:last-child { color: var(--cyan); }
@keyframes term-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 숫자 키패드 — 휴대폰에서 시스템 키보드 없이 답을 넣는다 */
/* 키패드가 화면을 다 차지해 부담스러웠다. 폭을 70% 로 줄인다.
   칸이 정사각형(aspect-ratio)이라 폭만 줄이면 높이도 같이 줄어든다. */
.keypad {
    margin-top: var(--space-5);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
    width: min(210px, 100%); margin-inline: auto;
}
.keypad-key {
    aspect-ratio: 1 / 1; min-height: 0; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 18px;
    background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 4%));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 2px 0 rgb(0 0 0 / 30%);
    color: var(--text);
    font-family: var(--numeric); font-size: 1.15rem; font-weight: 700; cursor: pointer;
    transition: background .12s ease, box-shadow .12s ease, transform .08s ease, color .12s ease;
}
.keypad-key:hover {
    background: linear-gradient(180deg, rgb(34 211 238 / 24%), rgb(34 211 238 / 10%));
    box-shadow: inset 0 0 0 1px rgb(34 211 238 / 55%), 0 2px 0 rgb(0 0 0 / 30%);
    color: #fff;
}
.keypad-key:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgb(34 211 238 / 55%); }
.keypad-key.is-erase {
    background: linear-gradient(180deg, rgb(244 114 182 / 22%), rgb(244 114 182 / 8%));
    box-shadow: inset 0 0 0 1px rgb(244 114 182 / 45%), 0 2px 0 rgb(0 0 0 / 30%);
    color: #ffc7e4; font-size: .95rem;
}

/* 홈 — 이어서 연습 */
.quick-start {
    width: 100%; margin-bottom: var(--space-4); padding: var(--space-5);
    display: grid; gap: var(--space-1); justify-items: start;
    border: 1px solid rgb(163 230 53 / 40%); border-radius: var(--radius-lg);
    background: linear-gradient(120deg, rgb(163 230 53 / 14%), var(--panel) 60%);
    color: var(--text); text-align: left; cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease;
}
.quick-start:hover { box-shadow: var(--glow-lime), var(--lift-strong); transform: translateY(-2px); }
.quick-kicker { color: var(--lime); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.quick-start strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; }
.quick-summary { color: var(--text-soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.quick-start b { margin-top: var(--space-2); color: var(--lime); font-size: .86rem; font-weight: 800; }

/* ============ 답안 · 결과 ============ */
.answer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.answer-grid label { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: var(--space-2); }
.answer-grid label > span { color: var(--muted); font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.answer-grid input { font-family: var(--numeric); font-variant-numeric: tabular-nums; text-align: right; }
.full-span { grid-column: 1 / -1; margin-top: var(--space-3); min-height: 56px; }

.score-card {
    margin: var(--space-5) 0 var(--space-6); padding: var(--space-6);
    display: grid; place-items: center; gap: var(--space-2);
    border: 1px solid rgb(163 230 53 / 30%); border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgb(163 230 53 / 12%), var(--panel) 72%);
}
.score-card strong { color: var(--lime); font-family: var(--numeric); font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.score-card span { color: var(--text-soft); font-size: .94rem; }
.score-card em {
    margin-top: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: 999px;
    background: rgb(255 255 255 / 8%); color: var(--text-soft);
    font-size: .8rem; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums;
}

.result-list { display: grid; gap: var(--space-2); }
.result-row {
    display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius);
    background: var(--panel);
}
.result-row > strong { font-size: .86rem; font-variant-numeric: tabular-nums; }
.result-row.is-correct { border-left-color: var(--lime); }
.result-row.is-wrong { border-left-color: var(--red); background: rgb(251 113 133 / 9%); }
.result-row p { margin: 0; font-family: var(--numeric); font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--text-soft); }
.result-row dl { display: flex; gap: var(--space-4); margin: 0; }
.result-row dt { color: var(--muted); font-size: .7rem; }
.result-row dd { margin: 0; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

/* ============ 기록 ============ */
.empty-state {
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--line-strong); border-radius: var(--radius-xl);
    text-align: center; background: var(--panel);
}
.empty-state strong { display: block; margin-bottom: var(--space-2); font-size: 1.05rem; }
.empty-state p { color: var(--muted); }
/* 요약은 넉 장이다. auto-fit 은 폭에 따라 3열이 되어 둘째 줄에 한 장만
   남겼다. 장수가 고정이니 열 수도 고정한다. 좁으면 2×2, 넓으면 한 줄. */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin: var(--space-5) 0 var(--space-6); }
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-grid article { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.stat-grid article > span { color: var(--muted); font-size: .84rem; font-weight: 600; }
/* "1일" "12초" 처럼 숫자에 한글 단위가 붙는다. 등폭 글꼴은 숫자만 있을 때
   쓴다. 여기서는 한글이 섞여 혼자 다른 글꼴로 보였다. 본문 글꼴에
   tabular-nums 만 얹어 자릿수는 그대로 맞춘다.
   "1분 00초" 가 좁은 화면에서 두 줄로 갈라져 폭을 따라 줄인다. */
.stat-grid strong {
    display: block; margin: var(--space-1) 0; color: var(--cyan);
    font-size: clamp(1.4rem, 1rem + 2vw, 2rem); font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.stat-grid p { margin: 0; color: var(--muted); font-size: .82rem; }

.record-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
table { width: 100%; border-collapse: collapse; }
caption { padding: var(--space-4) var(--space-5); text-align: left; font-weight: 800; }
th, td { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); text-align: left; white-space: nowrap; font-size: .9rem; }
th { background: rgb(255 255 255 / 4%); color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
td { color: var(--text-soft); }

/* ============ 연습장 ============ */
.builder-heading, .preview-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }
.builder-heading h1 { margin-bottom: var(--space-1); }
.worksheet-controls {
    margin: var(--space-5) 0 var(--space-2); padding: var(--space-5);
    display: grid; gap: var(--space-4);
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel);
}
.worksheet-controls fieldset { margin: 0; padding: 0 0 var(--space-4); border: 0; border-bottom: 1px solid var(--line); }
.worksheet-controls fieldset:last-child { border-bottom: 0; padding-bottom: 0; }
/* 위 .setting-sheet legend 와 같은 이유로 float + clear 를 짝으로 쓴다. */
.worksheet-controls legend {
    float: left; width: 100%;
    padding: 0; margin-bottom: var(--space-3);
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--text); font-size: .9rem; font-weight: 700;
}
.worksheet-controls fieldset > :not(legend) { clear: both; }
.worksheet-controls fieldset > :not(legend) + :not(legend) { margin-top: var(--space-3); }
.worksheet-controls fieldset::after { content: ""; display: block; clear: both; }
.worksheet-controls legend::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--cyan); }
/* display 를 주면 hidden 속성이 무력해진다. 숨김이 이기도록 못박는다. */
.worksheet-controls [data-drill-only] { display: grid; gap: var(--space-4); }
.worksheet-controls [data-drill-only][hidden] { display: none; }
.worksheet-extra { display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--space-4); align-items: end; }
.worksheet-controls label { display: grid; align-content: start; gap: var(--space-2); font-size: .84rem; font-weight: 700; color: var(--text-soft); }
.worksheet-controls .seed-field { grid-column: span 2; }
.worksheet-controls .check-field { display: flex; align-items: center; gap: var(--space-2); align-self: end; min-height: var(--control-height); }
.worksheet-controls .check-field input { width: 20px; height: 20px; accent-color: var(--cyan); }
.worksheet-controls .secondary-button { align-self: end; }
.preview-heading { margin-top: var(--space-6); }
.preview-heading h2 { margin: 0; }
.preview-heading span { color: var(--muted); font-size: .88rem; }
/* 미리보기 안은 실제 인쇄물이므로 흰 종이 그대로 둔다 */
.worksheet-preview { margin-top: var(--space-4); padding: var(--space-5); display: grid; gap: var(--space-5); overflow-x: auto; border-radius: var(--radius-lg); background: #2a2c52; }
.worksheet-page { width: min(210mm, 100%); min-height: 297mm; margin: auto; padding: 12mm 10mm; background: #fff; color: #111; box-shadow: 0 8px 26px rgb(0 0 0 / 45%); }
.worksheet-paper-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4mm 10mm; padding-bottom: 4mm; border-bottom: 2px solid #111; }
.worksheet-paper-header h2 { margin: 0; font-size: 20px; color: #111; }
.worksheet-paper-header small { color: #555; }
.worksheet-kicker { margin: 0; font-size: 9px; font-weight: 700; }
.student-fields { display: flex; gap: 6mm; font-size: 11px; }
.student-fields i { display: inline-block; width: 20mm; border-bottom: 1px solid #111; }
.paper-meta { grid-column: 1 / -1; margin: 0; font-size: 8px; text-align: right; }
.pdf-problem-groups { padding-top: 5mm; display: grid; gap: 5mm; }
.pdf-problem-band { display: grid; grid-template-columns: repeat(10, 1fr); border-top: 1px solid #111; border-left: 1px solid #111; }
.pdf-problem { min-width: 0; border-right: 1px solid #111; border-bottom: 1px solid #111; }
.pdf-problem h3 { height: 7mm; margin: 0; display: grid; place-items: center; border-bottom: 1px solid #111; font-size: 10px; color: #111; }
.pdf-problem ol { min-height: 27mm; margin: 0; padding: 2mm 1.5mm; list-style: none; font-variant-numeric: tabular-nums; }
.pdf-problem li { display: grid; grid-template-columns: .65em 1fr; font-size: 12px; line-height: 1.45; text-align: right; }
.pdf-answer-line { height: 8mm; border-top: 1px solid #111; }
.answer-key { margin: 8mm 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #aaa; border-left: 1px solid #aaa; list-style: none; }
.answer-key li { padding: 3mm; display: flex; justify-content: space-between; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; }

/* ============ 주판 놓기 ============ */

.abacus-toolbar { margin: var(--space-5) 0; display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.abacus-toolbar label { display: grid; gap: var(--space-2); font-size: .84rem; font-weight: 700; color: var(--text-soft); }
.abacus-question {
    padding: var(--space-4) var(--space-5);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-5);
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel);
}
.abacus-question > span { color: var(--muted); font-size: .88rem; font-weight: 600; }
.abacus-question strong {
    min-width: 130px; color: var(--cyan);
    font-family: var(--numeric); font-size: 2rem; font-weight: 700;
    text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}

.soroban {
    --rod-height: 336px;
    --label-space: 24px;
    --bar-top: 112px;
    --bar-height: 12px;
    --bead-height: 24px;
    --bead-ratio: 2.1;
    --earth-top: 132px;
    --digit-space: 34px;
    --earth-step: calc((var(--rod-height) - var(--earth-top) - var(--bead-height) - var(--digit-space)) / 4);
    position: relative; width: min(640px, 100%); margin: var(--space-5) auto var(--space-4); padding: 10px 18px;
    display: grid; grid-template-columns: repeat(var(--rod-count), 1fr);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #2f2118 0%, #1c130d 100%);
    box-shadow: inset 0 0 0 2px #6b4a2c, inset 0 2px 18px rgb(0 0 0 / 55%), 0 10px 30px -14px rgb(0 0 0 / 80%);
}
.abacus-rod { position: relative; min-width: 54px; display: grid; grid-template-rows: var(--label-space) 1fr var(--digit-space); }
.rod-body { position: relative; height: calc(var(--rod-height) - var(--label-space) - var(--digit-space)); }
.rod-body::after {
    content: ""; position: absolute; z-index: 2; left: -50%; right: -50%;
    top: calc(var(--bar-top) - var(--label-space)); height: var(--bar-height);
    background: linear-gradient(180deg, #e6b869 0%, #b8853c 55%, #7d5622 100%); pointer-events: none;
}
.abacus-rod:first-child .rod-body::after { left: -18px; }
.abacus-rod:last-child .rod-body::after { right: -18px; }
.place-label { align-self: center; color: #d8b98a; font-size: .72rem; font-weight: 700; text-align: center; }
.rod-line {
    position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
    background: linear-gradient(90deg, #6b4a2c, #a97d4d 45%, #6b4a2c); border-radius: 2px;
}
.abacus-bead {
    position: absolute; z-index: 3; left: 50%;
    width: min(calc(var(--bead-height) * var(--bead-ratio)), 88%);
    height: var(--bead-height); min-height: var(--bead-height); padding: 0;
    transform: translateX(-50%); border: 0; border-radius: 50% / 46%; cursor: pointer;
    background: radial-gradient(ellipse 62% 78% at 34% 26%, #ffe9ae 0%, #f0c465 34%, #cf9a3c 62%, #99671f 88%, #6d460f 100%);
    box-shadow: inset 0 -2px 3px rgb(90 56 12 / 55%), inset 0 2px 2px rgb(255 240 200 / 45%), 0 2px 4px rgb(0 0 0 / 40%);
    transition: top .16s cubic-bezier(.32, .72, .35, 1), filter .15s ease;
}
.abacus-bead:hover { filter: brightness(1.12); }
.abacus-bead:focus-visible { outline: 3px solid #ffd97a; outline-offset: 2px; }
.abacus-rod.is-touched .abacus-bead {
    background: radial-gradient(ellipse 62% 78% at 34% 26%, #ffc7b0 0%, #e07a63 32%, #c2452f 62%, #8d2418 88%, #611308 100%);
    box-shadow: inset 0 -2px 3px rgb(80 14 6 / 55%), inset 0 2px 2px rgb(255 220 205 / 40%), 0 2px 4px rgb(0 0 0 / 40%);
}
.heaven-bead { top: 8px; }
.heaven-bead.is-active { top: calc(var(--bar-top) - var(--label-space) - var(--bead-height) - 3px); }
.lower-deck { position: absolute; inset: 0; }
.lower-bead { top: calc(var(--earth-top) - var(--label-space) + (var(--bead-slot) * var(--earth-step))); }
.rod-digit { align-self: center; color: #f6e4c0; font-family: var(--numeric); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.abacus-rod.is-touched .rod-digit { color: #ffb4a2; }

.abacus-value { text-align: center; color: var(--muted); font-size: .9rem; }
.abacus-value output { margin-left: var(--space-2); color: var(--text); font-family: var(--numeric); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.abacus-feedback { min-height: 28px; margin: var(--space-3) 0 0; color: var(--red); font-weight: 700; text-align: center; }
.abacus-feedback.is-correct { color: var(--lime); }

/* 소리 켜기·끄기 */
.sound-toggle {
    min-height: 44px; padding: 0 var(--space-4);
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: rgb(255 255 255 / 4%); color: var(--muted);
    font-size: .86rem; font-weight: 700; cursor: pointer;
}
.sound-toggle[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); background: rgb(34 211 238 / 12%); }

@media (max-width: 760px) {
    /* 좁은 화면에서는 한 줄에 하나. 칸 나눔 규칙을 모두 되돌린다. */
    .home-menu { grid-template-columns: 1fr; }
    .home-menu > *, .home-menu[data-count="1"] > *, .home-menu[data-count="2"] > *,
    .home-menu[data-count="4"] > *, .home-menu[data-count="5"] > :nth-child(n+4) { grid-column: auto; }
    .home-card { min-height: 0; padding: var(--space-5); }
    .practice-player { margin: var(--space-4) auto; padding: var(--space-4); }
    .answer-grid { grid-template-columns: 1fr; }
    .result-row { grid-template-columns: 1fr; gap: var(--space-2); }
    .worksheet-controls { grid-template-columns: 1fr; }
    .worksheet-controls .seed-field { grid-column: auto; }
    .builder-heading, .preview-heading { align-items: stretch; flex-direction: column; }
    .worksheet-preview { margin-inline: calc(var(--space-4) * -1); padding: var(--space-2); }
    .worksheet-page { width: 100%; min-height: 0; padding: 12px 8px; }
    .pdf-problem-groups { gap: 12px; }
    .pdf-problem li { font-size: clamp(7px, 2.2vw, 11px); }
    .soroban { --rod-height: 286px; --bar-top: 96px; --earth-top: 114px; --bead-height: 22px; padding-inline: 8px; }
    .abacus-rod { min-width: 40px; }
    .place-label { font-size: .64rem; }
    .rod-digit { font-size: 1.05rem; }
    th, td { padding: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* ============ 구구단 ============ */
.link-button {
    min-height: 0; margin-left: auto; padding: 0;
    border: 0; background: none; color: var(--cyan);
    font-size: .8rem; font-weight: 700; cursor: pointer;
}
.link-button:hover { text-decoration: underline; }

.table-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--space-2); }
/* "2단" 은 숫자가 아니라 한글이 붙은 이름표다. 등폭 글꼴을 쓰면 옆의
   칩들과 글자 모양이 달라 혼자 튀어 보였다. 본문 글꼴로 맞춘다. */
.table-key {
    min-height: 62px; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
    background: var(--panel-2); color: var(--text);
    font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.table-key:hover { border-color: var(--cyan); transform: translateY(-1px); }
.table-key.is-on { border-color: var(--cyan); background: rgb(34 211 238 / 18%); color: var(--cyan); box-shadow: var(--glow-cyan); }

.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.mode-card {
    min-height: 76px; padding: var(--space-4);
    display: grid; gap: 2px; justify-items: start; align-content: center;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius);
    background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.mode-card:hover { border-color: var(--cyan); transform: translateY(-1px); }
.mode-card strong { font-size: .98rem; font-weight: 800; }
.mode-card span { color: var(--muted); font-size: .8rem; }
.mode-card.is-on { border-color: var(--lime); background: rgb(163 230 53 / 12%); box-shadow: var(--glow-lime); }
.mode-card.is-on strong { color: var(--lime); }

/* 배우기 */
.learn-block { margin-top: var(--space-5); }
.learn-block h2 { margin-bottom: var(--space-3); color: var(--cyan); font-size: .95rem; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.learn-row {
    padding: var(--space-3) var(--space-4);
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
    font-family: var(--numeric); font-size: 1.02rem; font-variant-numeric: tabular-nums;
}
.learn-row b { color: var(--amber); font-size: 1.15rem; }

.flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); }
.flip-card {
    min-height: 88px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel); color: var(--text-soft); cursor: pointer;
    font-family: var(--numeric); font-size: 1.05rem; font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.flip-card:hover { border-color: var(--cyan); transform: translateY(-1px); }
.flip-card.is-open { border-color: var(--amber); background: rgb(251 191 36 / 12%); }
.flip-card b { color: var(--amber); font-size: 1.7rem; font-weight: 700; }

.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel-2); }
.segmented button {
    min-height: 38px; padding: 0 var(--space-4); border: 0; border-radius: 999px;
    background: transparent; color: var(--muted); font-size: .88rem; font-weight: 700; cursor: pointer;
}
.segmented button.is-on { background: var(--cyan); color: #04121a; }

/* 퀴즈 화면 */
.quiz-player {
    width: min(var(--stage-narrow), calc(100% - var(--space-5)));
    margin: var(--space-6) auto;
    padding: var(--space-5);
    display: grid; gap: var(--space-4); justify-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #0c0d24, #14163a);
    box-shadow: var(--lift-strong);
}
.quiz-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.quiz-counter { color: var(--text-soft); font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.quiz-score { color: var(--lime); font-weight: 800; font-variant-numeric: tabular-nums; }
.quiz-player progress { width: 100%; height: 6px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 10%); }
.quiz-player progress::-webkit-progress-bar { background: rgb(255 255 255 / 10%); border-radius: 999px; }
.quiz-player progress::-webkit-progress-value { background: linear-gradient(90deg, var(--cyan), var(--lime)); border-radius: 999px; }
.quiz-prompt {
    margin: 0; color: var(--text); font-family: var(--numeric);
    font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.quiz-input {
    min-width: 4ch; min-height: 64px; padding: 0 var(--space-4);
    display: grid; place-items: center;
    border-bottom: 3px solid var(--cyan); color: var(--cyan);
    font-family: var(--numeric); font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.quiz-input.is-empty { color: rgb(34 211 238 / 35%); }
.quiz-player .keypad { margin-top: 0; width: 100%; }
.quiz-submit { width: 100%; min-height: 56px; }

@media (max-width: 760px) {
    .mode-grid { grid-template-columns: 1fr; }
    .learn-grid { grid-template-columns: 1fr; }
}

/* ============ 주판 훈련 ============ */
.how-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); color: var(--text-soft); font-size: .92rem; }
.how-list li::marker { color: var(--cyan); font-weight: 700; }

.drill-player {
    width: min(var(--stage-width), calc(100% - var(--space-5)));
    margin: var(--space-6) auto;
    padding: var(--space-5);
    display: grid; gap: var(--space-4); justify-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #0c0d24, #14163a);
    box-shadow: var(--lift-strong);
}
.drill-player .quiz-top, .drill-player progress { width: 100%; }
.drill-hint { margin: 0; color: var(--cyan); font-size: .88rem; font-weight: 700; }

/* 공개된 항은 위에서 아래로 쌓이고 아직 안 나온 항은 물음표로 남는다 */
.drill-terms {
    margin: 0; padding: var(--space-4) var(--space-5); min-width: 200px;
    list-style: none; display: grid; gap: var(--space-1); justify-items: end;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgb(255 255 255 / 4%);
    font-family: var(--numeric); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.drill-terms li.is-hidden { color: var(--muted); }
.drill-terms li.is-now { color: var(--amber); }
.drill-terms .drill-sum { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line-strong); color: var(--cyan); }
.drill-feedback { min-height: 26px; margin: 0; color: var(--muted); font-weight: 700; }
.drill-feedback.is-correct { color: var(--lime); }
.drill-player .soroban { margin: 0; }

/* ============ 수학 스프린트 ============ */
.level-picker { display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.level-step {
    width: 52px; min-height: 52px; border: 1px solid var(--line-strong); border-radius: 50%;
    background: var(--panel-2); color: var(--text); font-size: 1.4rem; font-weight: 700; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.level-step:hover { border-color: var(--cyan); background: rgb(34 211 238 / 12%); }
.level-face { display: grid; justify-items: center; gap: 2px; min-width: 140px; }
.level-face strong {
    color: var(--cyan); font-family: var(--numeric);
    font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
}
.level-face span { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.level-range { width: 100%; margin-top: var(--space-4); accent-color: var(--cyan); }
.sprint-level { margin: 0; color: var(--muted); font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============ 플래시 암산 (kani 구조) ============ */
.wizard-steps {
    margin: 0 0 var(--space-5); padding: 0; list-style: none;
    display: flex; align-items: center; justify-content: center; gap: var(--space-3);
}
.wizard-steps li { display: grid; justify-items: center; gap: 2px; opacity: .45; }
.wizard-steps li b {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius);
    font-family: var(--numeric); font-size: 1.05rem;
}
.wizard-steps li span { color: var(--muted); font-size: .72rem; font-weight: 700; }
.wizard-steps li.is-now { opacity: 1; }
.wizard-steps li.is-now b { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
.wizard-steps li.is-done { opacity: .8; }
.wizard-steps li.is-done b { border-color: var(--lime); color: var(--lime); }
.wizard-actions { display: flex; justify-content: flex-end; }

.mode-grid-big .mode-card { min-height: 178px; padding: var(--space-6) var(--space-4); justify-items: center; text-align: center; align-content: center; gap: var(--space-3); }
/* .mode-card span 보다 특정도가 높아야 한다. 같은 span 이라 클래스 하나로는
   진다. 이모지는 크게 보여야 무엇을 고르는지 한눈에 들어온다. */
.mode-card .mode-icon { font-size: 3rem; line-height: 1; color: inherit; }
.mode-grid-big .mode-card strong { font-size: 1.6rem; letter-spacing: -.03em; }
.mode-grid-big .mode-card span { font-size: .92rem; }
.mode-grid-big .mode-card .mode-icon { font-size: 3.2rem; }

/* 진행 화면: 왼쪽 숫자, 오른쪽 진행 패널 */
.flash-stage {
    width: min(var(--content-width), calc(100% - var(--space-5)));
    margin: var(--space-6) auto;
    display: grid; grid-template-columns: 1fr 260px; gap: var(--space-4);
    align-items: stretch;
}
.flash-main {
    display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    min-height: min(64vh, 520px);
    border: 1px solid var(--line); border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #0c0d24, #14163a);
    box-shadow: var(--lift-strong);
}
.flash-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.flash-count { color: var(--muted); font-family: var(--numeric); font-size: .9rem; font-weight: 700; }
.flash-view { display: grid; place-items: center; align-content: center; gap: var(--space-3); text-align: center; }
.flash-number {
    min-height: 190px; display: grid; place-items: center;
    color: var(--amber); font-family: var(--numeric);
    font-size: clamp(4rem, 15vw, 8.5rem); font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1;
    text-shadow: 0 0 8px rgb(251 191 36 / 55%), 0 0 42px rgb(251 191 36 / 35%), 0 0 90px rgb(251 191 36 / 18%);
    animation: flash-pop .16s ease-out;
}
@keyframes flash-pop { from { transform: scale(.94); opacity: .5; } to { transform: none; opacity: 1; } }
.flash-number:empty { animation: none; }
.flash-number.is-countdown {
    color: rgb(236 238 251 / 20%); text-shadow: none; animation: none;
    font-size: clamp(3.4rem, 12vw, 7rem);
}
.flash-number.is-answer {
    color: var(--cyan); border-bottom: 3px solid var(--cyan);
    min-height: 120px; padding: 0 var(--space-6); animation: none;
    text-shadow: 0 0 30px rgb(34 211 238 / 30%);
}
.flash-number.is-empty { color: rgb(34 211 238 / 35%); }
.flash-view .term-stack { display: none; }
.flash-view.is-stacked .flash-number { display: none; }
.flash-view.is-stacked .term-stack {
    display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; justify-items: end;
    font-family: var(--numeric); font-variant-numeric: tabular-nums;
    font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700;
}
.flash-view.is-stacked .term-stack { color: var(--text); }
.flash-view.is-stacked .term-stack li:last-child { color: var(--amber); text-shadow: 0 0 24px rgb(251 191 36 / 35%); }
.flash-view .keypad { margin-top: 0; }
.flash-submit { width: min(320px, 100%); min-height: 54px; }
.flash-reveal { margin: 0; color: var(--lime); font-weight: 700; }

.flash-dots { display: flex; justify-content: center; gap: 6px; }
.flash-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / 16%); }
.flash-dots span.is-on { background: var(--amber); box-shadow: 0 0 8px rgb(251 191 36 / 60%); }

.flash-side {
    padding: var(--space-4); display: grid; align-content: start; gap: var(--space-4);
    border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel);
}
.flash-side h2 { margin: 0; color: var(--muted); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.flash-slots { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.flash-slots li {
    min-height: 42px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--panel-2); color: var(--muted);
    font-family: var(--numeric); font-size: .84rem; font-weight: 700;
}
.flash-slots li.is-now { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
.flash-slots li.is-correct { border-color: rgb(163 230 53 / 45%); background: rgb(163 230 53 / 12%); color: var(--lime); }
.flash-slots li.is-wrong { border-color: rgb(251 113 133 / 45%); background: rgb(251 113 133 / 12%); color: var(--red); }
.flash-stats { margin: 0; display: grid; gap: var(--space-2); }
.flash-stats div { display: flex; align-items: baseline; justify-content: space-between; }
.flash-stats dt { color: var(--muted); font-size: .82rem; }
.flash-stats dd { margin: 0; color: var(--lime); font-family: var(--numeric); font-size: 1.3rem; font-weight: 700; }

@media (max-width: 900px) {
    .flash-stage { grid-template-columns: 1fr; }
    .flash-side { order: -1; }
    .flash-slots { grid-template-columns: repeat(10, 1fr); }
    .mode-grid-big .mode-card { min-height: 140px; padding: var(--space-5) var(--space-4); }
}

/* ============ 기록 강화 ============ */
.records-heading { margin: var(--space-7) 0 var(--space-4); color: var(--muted); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }

.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.type-card {
    padding: var(--space-5); display: grid; gap: var(--space-3);
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel);
}
.type-card header { display: flex; align-items: center; gap: var(--space-2); }
.type-icon { font-size: 1.1rem; }
.type-card header strong { font-size: .96rem; font-weight: 800; }
.trend { margin-left: auto; padding: 2px var(--space-2); border-radius: 999px; font-size: .72rem; font-weight: 800; }
.trend.is-up { background: rgb(163 230 53 / 16%); color: var(--lime); }
.trend.is-down { background: rgb(251 113 133 / 16%); color: var(--red); }
.type-rate { margin: 0; color: var(--cyan); font-family: var(--numeric); font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.type-rate i { font-size: 1.1rem; font-style: normal; }
.type-spark { color: var(--cyan); min-height: 32px; }
.spark { width: 100%; height: 32px; display: block; opacity: .85; }
.type-card dl { margin: 0; display: grid; gap: var(--space-1); }
.type-card dl div { display: flex; align-items: baseline; justify-content: space-between; }
.type-card dt { color: var(--muted); font-size: .8rem; }
.type-card dd { margin: 0; color: var(--text-soft); font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============ 주판 놓기 세션 ============ */
.abacus-session {
    width: min(var(--stage-width), calc(100% - var(--space-5)));
    margin: var(--space-6) auto;
    padding: var(--space-5);
    display: grid; gap: var(--space-4); justify-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #0c0d24, #14163a);
    box-shadow: var(--lift-strong);
}
.abacus-session .quiz-top, .abacus-session .player-rail { width: 100%; }
.abacus-session .abacus-question { width: 100%; }
.abacus-session .soroban { margin: 0; }
.abacus-session .keypad { margin-top: 0; }
.player-rail span.is-wrong { background: var(--red); }
/* 읽기 모드에서는 자리값을 가린다. 주판만 보고 읽어야 하기 때문이다. */
.rod-digit.is-masked { color: rgb(246 228 192 / 30%); }

/* 인쇄용 구구단 표 (교재 57쪽) */
.gugudan-sheet { padding-top: 6mm; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5mm; }
.gugudan-column { border: 1px solid #111; }
.gugudan-column h3 { margin: 0; padding: 2mm; border-bottom: 1px solid #111; background: #f0f0f0; color: #111; font-size: 11px; text-align: center; }
.gugudan-column ol { margin: 0; padding: 0; list-style: none; }
.gugudan-column li { display: flex; justify-content: space-between; padding: 1.6mm 3mm; border-top: 1px solid #ddd; font-size: 11px; font-variant-numeric: tabular-nums; }
.gugudan-column li:first-child { border-top: 0; }
.gugudan-column b { font-weight: 700; }

/* 힌트: 틀린 자리만 표시한다. 어떤 숫자여야 하는지는 알려주지 않는다. */
.abacus-rod.is-off .rod-line { background: linear-gradient(90deg, #7f1d1d, #ef4444 45%, #7f1d1d); }
.abacus-rod.is-off .rod-digit { color: #fca5a5; }
.abacus-rod.is-off::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: var(--radius-sm); box-shadow: inset 0 0 0 2px rgb(239 68 68 / 55%);
}

/* 스프린트 결과의 레벨별 분해 */
.level-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.level-breakdown article {
    padding: var(--space-4); display: grid; gap: 2px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.level-breakdown span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.level-breakdown strong { color: var(--cyan); font-family: var(--numeric); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.level-breakdown p { margin: 0; color: var(--text-soft); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* 주판 훈련: 남은 시간이 위에서 줄어든다 */
.drill-timebar {
    width: 100%; height: 5px; border-radius: 999px;
    background: rgb(255 255 255 / 10%); overflow: hidden;
}
.drill-timebar span {
    display: block; height: 100%; width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--lime));
    transition: width .1s linear, background .3s ease;
}
.drill-timebar span.is-low { background: linear-gradient(90deg, var(--amber), var(--red)); }
.drill-player .quiz-score { font-variant-numeric: tabular-nums; }

/* ============ 진행 화면 공통 껍데기 ============ */
.stage {
    width: min(var(--content-width), calc(100% - var(--space-7)));
    margin: 0 auto; padding: var(--space-6) 0 var(--space-8);
    display: grid; gap: var(--space-4);
}
.stage-head h1 { margin-bottom: var(--space-1); font-size: clamp(1.6rem, 1rem + 2.4vw, 2.2rem); }
.stage-head p { margin: 0; color: var(--muted); font-size: .92rem; }

.stage-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-4); align-items: start; }
.stage.is-solo .stage-body { grid-template-columns: minmax(0, 1fr); }

.stage-main {
    min-height: min(62vh, 520px);
    padding: var(--space-4) var(--space-5) var(--space-5);
    display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-3);
    border: 1px solid var(--line); border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #0c0d24, #14163a);
    box-shadow: var(--lift-strong);
}
.stage-top { display: flex; align-items: center; gap: var(--space-3); }
.stage-count { color: var(--muted); font-family: var(--numeric); font-size: .9rem; font-weight: 700; }
.stage-score { margin-left: auto; color: var(--lime); font-family: var(--numeric); font-size: .95rem; font-weight: 700; }
.stage-retry {
    min-height: 38px; padding: 0 var(--space-3);
    border: 1px solid rgb(34 211 238 / 40%); border-radius: 999px;
    background: rgb(34 211 238 / 10%); color: var(--cyan);
    font-size: .82rem; font-weight: 800; cursor: pointer;
}
.stage-retry:hover { background: rgb(34 211 238 / 18%); box-shadow: var(--glow-cyan); }
.stage-retry:disabled { cursor: default; opacity: .55; box-shadow: none; }
.stage-retry[hidden] { display: none; }
.stage-close {
    width: 38px; height: 38px; min-height: 0; padding: 0; margin-left: var(--space-2);
    display: grid; place-items: center;
    border: 1px solid var(--line-strong); border-radius: 50%;
    background: rgb(255 255 255 / 5%); color: var(--muted);
    font-size: .95rem; cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.stage-close:hover { color: var(--text); border-color: var(--red); background: rgb(251 113 133 / 14%); }

.stage-bar { width: 100%; height: 5px; border-radius: 999px; background: rgb(255 255 255 / 10%); overflow: hidden; }
.stage-bar span {
    display: block; height: 100%; width: 0;
    border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--lime));
    transition: width .25s ease, background .3s ease;
}
.stage-bar.is-time span { transition: width .1s linear, background .3s ease; }
.stage-bar span.is-low { background: linear-gradient(90deg, var(--amber), var(--red)); }

.stage-view { display: grid; place-items: center; align-content: center; gap: var(--space-4); text-align: center; }
.answer-verdict {
    position: absolute; z-index: 2;
    display: grid; place-items: center; gap: var(--space-1);
    font-family: var(--numeric); font-weight: 800; line-height: 1;
    pointer-events: none; animation: verdict-in .18s ease-out;
}
.stage-view:has(.answer-verdict) > :not(.answer-verdict) { opacity: .16; }
.answer-verdict span { font-size: clamp(7rem, 22vw, 12rem); }
.answer-verdict small { font-family: inherit; font-size: .9rem; letter-spacing: .04em; }
.answer-verdict.is-correct { color: var(--lime); text-shadow: 0 0 52px rgb(163 230 53 / 38%); }
.answer-verdict.is-wrong { color: var(--red); text-shadow: 0 0 52px rgb(251 113 133 / 38%); }
@keyframes verdict-in { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .answer-verdict { animation: none; } }

.stage-side {
    padding: var(--space-4); display: grid; align-content: start; gap: var(--space-4);
    border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel);
}
.stage-side h2 { margin: 0; color: var(--muted); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.stage-slots { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.stage-slots li {
    min-height: 40px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--panel-2); color: var(--muted);
    font-family: var(--numeric); font-size: .82rem; font-weight: 700;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.stage-slots li.is-now { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
.stage-slots li.is-correct, .stage-slots li.is-done { border-color: rgb(163 230 53 / 45%); background: rgb(163 230 53 / 12%); color: var(--lime); }
.stage-slots li.is-wrong { border-color: rgb(251 113 133 / 45%); background: rgb(251 113 133 / 12%); color: var(--red); }
.stage-stats { margin: 0; display: grid; gap: var(--space-2); }
.stage-stats div { display: flex; align-items: baseline; justify-content: space-between; }
.stage-stats dt { color: var(--muted); font-size: .82rem; }
.stage-stats dd { margin: 0; color: var(--lime); font-family: var(--numeric); font-size: 1.3rem; font-weight: 700; }

@media (max-width: 900px) {
    .stage-body { grid-template-columns: minmax(0, 1fr); }
    .stage-side { order: -1; }
    .stage-slots { grid-template-columns: repeat(10, 1fr); }
    .stage-main { min-height: 0; }
}

/* ============ 주판 코치 · 요령 ============ */
.coach {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-4);
    border: 1px solid rgb(251 191 36 / 30%); border-radius: var(--radius);
    background: rgb(251 191 36 / 8%);
}
.coach-icon { font-size: 1.3rem; line-height: 1.3; flex-shrink: 0; }
.coach p { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.6; }
.coach b { color: var(--amber); font-weight: 700; }

/* 한 번에 설정을 맞춰 주는 요령 버튼 */
.recipe-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.recipe {
    min-height: 0; padding: var(--space-2) var(--space-4);
    display: grid; gap: 1px; justify-items: start;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--panel-2); color: var(--text-soft); cursor: pointer; text-align: left;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.recipe:hover { border-color: var(--lime); color: var(--text); background: rgb(163 230 53 / 12%); transform: translateY(-1px); }
.recipe b { font-size: .88rem; font-weight: 700; }
.recipe i { color: var(--muted); font-size: .7rem; font-style: normal; }

/* 신기록 폭죽. 결과 화면 위에 잠깐 떠 있다가 스스로 사라진다.
   글자를 읽는 데 방해가 되면 안 되므로 클릭을 통과시킨다. */
.fireworks {
    position: fixed; inset: 0; z-index: 60;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* 신기록 배너.
   폭죽만으로는 축하가 전달되지 않았다. 화면의 0.19% 만 칠해져 터진 줄도
   몰랐고, 애니메이션을 줄여 달라고 설정한 사람에게는 아예 보이지 않았다.
   그림에 기대지 않고 글자로 분명히 알린다. 이쪽이 늘 보이는 쪽이다. */
.best-banner {
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--space-5);
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    border: 1.5px solid rgb(251 191 36 / 55%); border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgb(251 191 36 / 20%), rgb(244 114 182 / 14%));
    box-shadow: 0 0 28px -8px rgb(251 191 36 / 55%);
    color: var(--amber); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em;
}
.best-banner span { font-size: 1.5rem; }
.best-banner b { color: #fff2cc; font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* 새 기록이 아닐 때는 조용히 지나간다. 배너가 없으면 이 줄만 남는다. */
@media (prefers-reduced-motion: reduce) {
    .best-banner { box-shadow: none; }
}