/* 초등 공통 읽기 설정 — 모든 초등 페이지가 자기 <style> 뒤에 불러온다.
   글자 크기 단계(가/가+/가++), 넉넉한 줄 간격과 여백, 손가락으로 누르기 쉬운 크기.
   페이지의 rem 단위가 모두 html 글자 크기를 따라가므로, 여기서 html 크기만 바꾸면 전체가 함께 커진다. */

html { font-size: 17px; }
html[data-size="l"] { font-size: 19px; }
html[data-size="xl"] { font-size: 21px; }

/* 본문 크기는 모든 페이지가 같게(페이지마다 따로 정한 크기보다 우선) */
body { font-size: 1.3rem !important; line-height: 1.9; }
.q { font-size: 1.3rem !important; }
.wrap h3 { font-size: 1.35rem !important; }
.eyebrow { font-size: 1.1rem !important; }
.big { font-size: 1.4rem !important; }
p.muted { font-size: 1em !important; }
.qno, .controls label, .tag, .lbl, .lab { font-size: 1.05rem !important; }
.steps, .lin, .rhrow, .dsay, .asklabel, .dlabel, .tilsize, .ctime, .toc, .mini p, .vs p { font-size: 1em !important; }

/* 큰 덩어리 사이: 하나가 끝나고 다음이 시작되는 게 보이게 */
.wrap { gap: 80px !important; }
section, section.part, .step { gap: 24px !important; }

/* 상자 안: 본문보다 글자가 작아지지 않게, 안쪽 여백은 넉넉히 */
.box, .fb, .tip, .note, .mini, .why, .compare, .record, .cap, .readout, .hands { font-size: 1em !important; line-height: 1.85; }
.box, .fb, .tip, .note { padding: 16px 20px !important; }
.quiz, .figure, .record { padding: 22px !important; gap: 22px !important; }
.track { padding: 20px !important; gap: 20px !important; }
.msgs, .ask, .dw, .mc, .mw, .trial, .clock, .cut, .til, .pc, .lad, .dstep, .leditor, .why, .demo { gap: 16px !important; }

/* 누르는 것: 최소 48px, 서로 붙지 않게 */
.btn, .opt, .pick { min-height: 48px; }
.btns, .opts, .chips, .chiprow, .controls, .nav, .ans { gap: 12px !important; }
.chip { min-width: 48px; height: 48px !important; }
.tc .chip { min-width: 40px; height: 40px !important; }
.ansrow input, .lin input, .mrow input, .steps input { min-height: 44px; }

/* 문단은 짧게 읽히도록 */
p + p { margin-top: 0; }
.small { font-size: .95em; }

/* 설명 보기 창 (링크를 눌러도 페이지를 떠나지 않음) */
.peek { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column; background: var(--bg); }
.peek.on { display: flex; }
.peekbar { flex: none; display: flex; justify-content: center; padding: 10px 16px; background: var(--paper); border-bottom: 2px solid var(--accent); }
.peekclose { font-family: var(--display, sans-serif); font-size: 1.15rem; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--accent); color: var(--on, #fff); cursor: pointer; }
.peekframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
body.peek-open { overflow: hidden; }
/* 창 안에서 열린 페이지는 위쪽 이동 버튼을 숨겨 헷갈리지 않게 */
.in-peek .nav, .in-peek a.next { display: none !important; }

/* 단원평가 */
.exam-intro, .exam-result { display: flex; flex-direction: column; gap: 14px; }
.exam-intro .btn, .exam-again { align-self: center; }
.exam-best { font-family: var(--display, sans-serif); color: var(--muted); }
.exam-bar { height: 10px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.exam-bar span { display: block; height: 100%; background: var(--accent); }
.exam-ans .opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; }
.opt.picked { background: var(--accent); border-color: var(--accent); color: var(--on, #fff); }
.exam-score { font-family: var(--display, sans-serif); font-size: 3rem; text-align: center; color: var(--accent); line-height: 1.2; }
.exam-tags { background: var(--soft); border-radius: 16px; padding: 14px 18px; }
.exam-tags ul { margin: 6px 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; }
.exam-list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 18px; }
.exam-list li { border-left: 5px solid var(--line); padding: 6px 0 6px 14px; display: flex; flex-direction: column; gap: 8px; }
.exam-list li.ok { border-left-color: var(--div); } .exam-list li.no { border-left-color: var(--left); }
.exam-list .exam-sol { align-self: flex-start; }
.exam-a { color: var(--muted); }
.fracin { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.fracin input { font-family: var(--display, sans-serif); font-size: 1.4rem; width: 4em; padding: 4px 8px; border-radius: 10px; border: 2px solid var(--line); background: var(--soft); color: var(--ink); text-align: center; min-height: 44px; }
.fracin .bar { width: 5em; height: 3px; background: var(--ink); border-radius: 2px; }

/* 글자 크기 버튼 */
.sizebar { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-bottom: -40px; font-family: var(--display, sans-serif); color: var(--muted); font-size: 15px; }
.sizebar button { font-family: inherit; min-width: 44px; height: 38px; padding: 0 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--soft); color: var(--ink); cursor: pointer; }
.sizebar button[data-v="m"] { font-size: 15px; } .sizebar button[data-v="l"] { font-size: 17px; } .sizebar button[data-v="xl"] { font-size: 19px; }
.sizebar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on, #fff); }

/* 대분수 답 칸(분수의 덧셈과 뺄셈부터): 자연수 칸 + 분수 칸 */
.mixin { gap: 10px !important; align-items: center; }
.mixin .mwhole { font-family: var(--display, sans-serif); font-size: 1.4rem; width: 3.2em; padding: 4px 8px; border-radius: 10px; border: 2px solid var(--line); background: var(--soft); color: var(--ink); text-align: center; min-height: 44px; }
.mixin input.right { border-color: var(--div); } .mixin input.wrong { border-color: var(--left); }
.mixnote { font-size: .95rem; color: var(--muted); text-align: center; margin: 0; }
.mx { white-space: nowrap; display: inline-block; }

/* 노란 글씨 = 핵심 한 줄 규칙: 노란색 글씨는 단계마다 있는 핵심 상자(.keep) 안의 굵은 낱말에만 쓴다.
   그 밖의 강조는 흰색 굵은 글씨. (그림 속 색과 테두리는 뜻을 나타내는 색이라 그대로 둔다.)
   밝은 화면에서는 노랑이 흰 바탕에 잘 안 보여서 진한 황토색으로. */
:root { --gold-ink: #9a6400; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold-ink: var(--gold); } }
:root[data-theme="dark"] { --gold-ink: var(--gold); }
.keep b:not([class]) { color: var(--gold-ink); }

/* 나눗셈 낱말 색: <body data-terms> 페이지에서 '나누어지는 수·나누는 수·몫'을 같은 색으로(초등.js가 칠함).
   밝은 화면은 정답·오답 상자 바탕 위에서도 읽히게 조금 진하게 */
:root { --k1: #2f62d8; --k2: #b8600a; --k3: #0b7a68; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --k1: #6f98ff; --k2: #ffaa4d; --k3: #3fd0b5; } }
:root[data-theme="dark"] { --k1: #6f98ff; --k2: #ffaa4d; --k3: #3fd0b5; }
.k1, .tm.a1 { color: var(--k1); } .k2, .tm.a2 { color: var(--k2); } .k3, .tm.a3 { color: var(--k3); }
.k1, .k2, .k3 { font-weight: 700; }
.terms { margin: 8px 0 10px; padding: 10px 12px; border: 3px solid var(--gold); border-radius: 14px; background: var(--soft); }
.terms-eq { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 4px 10px; margin-top: 6px; font-family: var(--display); }
.terms-eq .op { font-size: 1.6rem; line-height: 2.6rem; }
.terms-eq .tm { display: flex; flex-direction: column; align-items: center; }
.terms-eq .tm b { font-size: 1.6rem; line-height: 2.4rem; min-width: 2.4rem; text-align: center; border-radius: 10px; padding: 0 6px; border: 2px solid currentColor; background: var(--paper); font-weight: 400; }
.terms-eq .tm span { font-size: 1rem; margin-top: 2px; }