/* ==========================================================================
   아빠수학 연산 노트 — 지면 스타일
   화면은 유동형 책 지면, 인쇄는 A4 고정 판형.
   ========================================================================== */

:root {
  --paper:      #fffdf8;
  --paper-edge: #efe9dd;
  --ink:        #21262f;
  --ink-soft:   #4d5563;
  --muted:      #8b9199;
  --rule:       #e2dcce;
  --rule-soft:  #efeade;

  /* 단원 색 — 흰 글자를 얹는 배지·버튼으로도 쓰이므로 대비 4.5:1 이상 */
  --u-a: #c5502c;
  --u-b: #1d7078;
  --u-c: #5a49b0;
  --u-d: #8a6a12;
  --u-e: #2c60ac;

  --ok:   #1f9254;
  --bad:  #d3453c;

  --accent: var(--u-a);

  --page-w: 860px;
  --pad-x:  clamp(20px, 4.5vw, 56px);

  --font: 'Pretendard', 'Pretendard Variable', -apple-system, 'Apple SD Gothic Neo',
          'Malgun Gothic', 'Segoe UI', system-ui, sans-serif;
  --font-num: 'Pretendard', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* <s> 는 부가 설명을 감싸는 용도로만 쓴다 — 취소선은 끈다 */
s { text-decoration: none; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #e9e4d9;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,.05), transparent 55%);
  min-height: 100vh;
  font-feature-settings: 'tnum' 1;
}

/* ── 상단 도구 막대 ───────────────────────────────────────── */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px clamp(12px, 3vw, 24px);
  background: rgba(255, 253, 248, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 12px rgba(0,0,0,.05);
}

.toolbar__brand {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.02em;
  margin-right: 4px;
  white-space: nowrap;
}
.toolbar__brand span { color: var(--muted); font-weight: 600; }

.toolbar__spacer { flex: 1 1 auto; }

.btn {
  appearance: none;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s, border-color .13s, transform .08s;
}
.btn:hover  { background: #f6f2e9; border-color: #d3ccbb; }
.btn:active { transform: translateY(1px); }
.btn[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent); filter: brightness(1.07); border-color: var(--accent); }
.btn--ghost { background: transparent; }
.btn:disabled { opacity: .4; cursor: default; }

.seg { display: flex; border: 1px solid var(--rule); border-radius: 9px; overflow: hidden; background: #fff; }
.seg .btn { border: 0; border-radius: 0; }
.seg .btn + .btn { border-left: 1px solid var(--rule); }

.select {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  max-width: 46vw;
}
.select--vol { font-weight: 800; border-color: #cfc6b2; background: #fffaf0; }

/* ── 지면 ─────────────────────────────────────────────────── */

.book { padding: 26px clamp(10px, 3vw, 28px) 120px; }

/* 화면에서도 A4 한 장. 여백 비율까지 인쇄와 같게 맞춘다
   (좌우 14/210 = 6.67%, 위아래 13/297 = 4.38%).
   그래야 문항이 10개인 쪽도 20개인 쪽과 같은 크기로 보인다. */
.sheet {
  position: relative;
  width: 100%;
  max-width: var(--page-w);
  aspect-ratio: 210 / 297;
  margin: 0 auto 26px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 28px -12px rgba(0,0,0,.22);
  padding: 4.38% 6.67% 5.4%;
}
.sheet .grid { flex: 1 1 auto; min-height: 0; }
.sheet .grid__col { justify-content: space-between; }
.sheet[data-work] .grid__col { justify-content: space-between; }

/* 지면 안쪽 얇은 테두리 — 문제집 판면 느낌 */
.sheet::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  pointer-events: none;
}

.sheet__foot {
  position: absolute;
  left: 6.67%;
  right: 6.67%;
  bottom: 2.4%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .02em;
}
.sheet__foot b { font-weight: 700; color: var(--ink-soft); font-size: 12.5px; }

/* ── 회차 머리말 ──────────────────────────────────────────── */

.head { position: relative; }

.head__unit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .01em;
  margin-bottom: 12px;
}
.head__unit i {
  font-style: normal;
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  padding: 2.5px 9px;
  font-size: 11.5px;
  letter-spacing: .04em;
}

.head__main { display: flex; align-items: flex-start; gap: 16px; }

.head__no {
  flex: none;
  width: 58px; height: 58px;
  border-radius: 15px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1;
  box-shadow: 0 6px 14px -8px var(--accent);
}
.head__no small { display: block; font-size: 9.5px; font-weight: 700; opacity: .8; letter-spacing: .12em; }
.head__no b     { display: block; font-size: 26px; font-weight: 800; margin-top: 3px; letter-spacing: -.02em; }

.head__text { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.head__title { margin: 0; font-size: clamp(19px, 3.4vw, 23px); font-weight: 800; letter-spacing: -.03em; }
.head__sub   { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }

/* 날짜 · 시간 · 점수 기록칸 */
.head__log {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.logbox {
  flex: 1 1 0;
  min-width: 96px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: 7px 11px 8px;
}
.logbox span { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.logbox b {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  min-height: 20px;
  letter-spacing: .02em;
}
.logbox b em { font-style: normal; color: var(--rule); font-weight: 500; }
.logbox--score b { color: var(--accent); }

/* ── 원리 상자 ────────────────────────────────────────────── */

.guide {
  margin: 18px 0 0;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  position: relative;
}
.guide__tag {
  position: absolute;
  top: -10px; left: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 20px;
}
.guide__text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.guide__text b { color: var(--accent); font-weight: 800; }

.guide__demo {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 26px);
  flex-wrap: wrap;
  margin-top: 12px;
}

.steps { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: clamp(15px, 2.6vw, 18px); font-weight: 600; }
.steps s { text-decoration: none; color: var(--muted); font-weight: 500; }
.steps .last { color: var(--accent); font-weight: 800; }

/* 풀이 줄이 둘 이상이면 나란히가 아니라 위아래로 쌓는다. */
.guide__demo--rows { flex-direction: column; align-items: flex-start; gap: 6px; }

/* 수 가르기 도식 */
.bond { flex: none; }
.bond svg { display: block; overflow: visible; }
.bond text { font-family: var(--font-num); font-weight: 700; }

/* ── 문제 판 ──────────────────────────────────────────────── */

.grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 단 사이 여백은 좌우 단이 절반씩 나눠 가진다.
     column-gap 과 padding-left 를 같이 주면 여백이 두 번 들어가
     오른쪽 단만 좁아진다 — 긴 식이 오른쪽에서만 줄이 넘쳤던 원인.
     지면 폭은 고정인데 vw 로 잡으면 창 크기에 따라 단이 좁아진다. */
  --gut: 15px;
  column-gap: 0;
}
.grid__col { display: flex; flex-direction: column; padding-right: var(--gut); }
.grid__col + .grid__col {
  border-left: 1.5px dashed var(--rule);
  padding-left: var(--gut);
  padding-right: 0;
}

/* 식이 긴 회차는 한 단으로 펴서 한 줄에 담는다 */
/* 한 단짜리는 트랙 최소 폭을 0 으로 묶는다 — 1fr 의 auto 최소값이
   가장 긴 식만큼 트랙을 넓혀 지면 밖으로 몇 px 밀어내기 때문이다. */
.grid--wide { grid-template-columns: minmax(0, 1fr); }
.grid--wide .grid__col { padding-right: 0; }

.q {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  min-height: 46px;
  border-bottom: 1px dotted transparent;
}
.q + .q { border-top: 1px dotted var(--rule-soft); }

.q__no {
  flex: none;
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  font-family: var(--font-num);
}

/* 간격은 <b>기호가 가진다</b>. 모든 토막 사이에 똑같은 gap 을 주면
   2x 도 「2 x」로 벌어지고 [2] 안쪽도 뜬다. 붙여 쓰는 자리는 붙어야 한다. */
.q__body {
  --xgap: 0px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  font-family: var(--font-num);
  /* --fit: 단 폭에 못 담는 긴 식만 app.js 가 낮춰 준다 (fitRows) */
  font-size: calc(clamp(16px, 2.9vw, 19px) * var(--fit, 1));
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
}

/* =, → 로 묶인 한 덩어리. 한 줄에 담기면 한 줄로 두되,
   너무 길면 <b>낱말 사이에서 줄을 바꾼다</b>. */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
}
/* 토막 안의 낱말은 절대 <b>눌리지 않는다</b>. flex 는 자리가 모자라면 아이를 눌러
   버리는데, 그러면 「케이블카」가 한 글자씩 세로로 쌓여 읽을 수 없게 된다.
   눌리는 대신 다음 줄로 넘어가야 한다. */
.seg > * { flex-shrink: 0; }
.q__body .op { color: var(--ink-soft); font-weight: 500; padding: 0 .3em; }
.q__body .eq { color: var(--ink-soft); font-weight: 500; padding: 0 .42em; }

/* 「나머지」 같은 낱말, 화살표, 괄호 */
.word {
  font-family: var(--font);
  font-size: .74em;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: -.02em;
  padding: 0 .34em;
}
.arrow { color: var(--accent); font-weight: 700; padding: 0 .42em; }
.comma { color: var(--ink-soft); font-weight: 500; padding-right: .24em; }

/* 괄호 — 늘이는 것은 <b>안에 분수나 답칸이 든 것만</b>.
   한 줄짜리까지 늘이면 [2] 가 커다란 알약처럼 보인다. */
.paren {
  color: var(--accent);
  font-weight: 400;
  display: inline-block;
  padding: 0 .5px;
  margin: 0 .04em;
}
.paren--tall {
  transform: scaleY(1.85);
  transform-origin: center;
  margin: 0 .07em;
}

/* 채점 표시 */
.q__mark {
  flex: none;
  width: 22px;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  opacity: 0;
  transition: opacity .18s;
}
.q.is-ok  .q__mark { opacity: 1; color: var(--ok); }
.q.is-bad .q__mark { opacity: 1; color: var(--bad); }
.q.is-bad .box.is-correct-slot,
.q.is-bad .ansfrac.is-correct-slot { border-color: var(--ok); background: rgba(31,146,84,.05); }
.q .box.is-incorrect-slot,
.q .ansfrac.is-incorrect-slot { border-color: var(--bad); background: rgba(211,69,60,.05); }

.q__fix {
  flex: none;
  margin-left: 2px;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(211,69,60,.1);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bad);
  white-space: nowrap;
}

/* ── 네모칸 (답란) ────────────────────────────────────────── */

.box {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  flex: none;                 /* 입력칸의 기본 폭에 끌려가지 않게 */
  border: 2px solid var(--ink-soft);
  border-radius: 5px;
  background: #fff;
  width: 3.05em;              /* 세 자리까지 들어간다. 넓히면 식이 줄바꿈된다 */
  height: 1.95em;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: .96em;
  text-align: center;
  color: var(--accent);
  padding: 0 .25em;
  -moz-appearance: textfield;
}
.box input::-webkit-outer-spin-button,
.box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.box input::placeholder { color: transparent; }

/* ── 계수·지수 나눠 쓰는 답란 ──────────────────────────────
   긴 문자식 전체를 키보드로 치지 않고, 완성될 꼴을 먼저 보여 준 뒤
   빨간 필기 예시처럼 부호·계수·지수만 작은 칸에 적는다. */
.answer-form {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: .7em;
  row-gap: .32em;
}
.answer-form__equation {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.answer-form__template {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2em;
  min-height: 1.72em;
  padding: .08em .42em;
  border: 1.6px solid var(--ink-soft);
  border-radius: 5px;
  background: rgba(255,255,255,.9);
  color: var(--accent);
  white-space: nowrap;
}
.answer-form__fields {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .28em .58em;
  font-family: var(--font-num);
  font-size: .76em;
  color: var(--ink-soft);
  font-weight: 800;
}
.answer-form__field {
  display: inline-flex;
  align-items: center;
  gap: .2em;
  white-space: nowrap;
}
.answer-form__field .box,
.answer-form__field .box--wide {
  width: 2.35em;
  height: 1.72em;
  border-width: 1.5px;
  border-radius: 4px;
}
.answer-form__field .box input { padding: 0 .08em; }

/* 부호는 모바일 키보드 대신 + / − 두 단추로 고른다. 선택값은 숨은 input 에
   남겨 두므로 기존 채점·쪽 지우기 흐름을 그대로 쓴다. */
.signslot {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 1.72em;
  border: 1.5px solid var(--ink-soft);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.signslot input.ans--sign {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.signslot__choices { display: inline-flex; }
.signslot__choices button {
  width: 2em;
  border: 0;
  border-right: 1px solid var(--rule);
  background: #fff;
  color: var(--ink-soft);
  font: 900 1em/1 var(--font-num);
  cursor: pointer;
}
.signslot__choices button:last-child { border-right: 0; }
.signslot__choices button.is-selected {
  background: color-mix(in srgb, var(--accent) 14%, white);
  color: var(--accent);
}
.signslot .box__answer { min-width: 2.35em; }
.q.is-ok .signslot { border-color: var(--ok); background: rgba(31,146,84,.05); }
.q.is-bad .signslot { border-color: var(--bad); background: rgba(211,69,60,.05); }
.sheet.show-answers .signslot__choices { display: none; }
.sheet.show-answers .signslot .box__answer { display: flex; }

/* ── 활용(서술형) 지면 ─────────────────────────────────────
   아버지 노트 그대로 왼쪽 4문제 · 오른쪽 4문제. 사이는 풀이 자리. */

.wgrid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  --gut: 14px;
  column-gap: 0;
  margin-top: 18px;
}
.wgrid__col { display: flex; flex-direction: column; padding-right: var(--gut); }
.wgrid__col + .wgrid__col {
  border-left: 1.5px dashed var(--rule);
  padding-left: var(--gut);
  padding-right: 0;
}

.w {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0 6px;
  min-height: 0;
}
.w + .w { border-top: 1px dotted var(--rule); }

.w__no {
  flex: none;
  width: 21px; height: 21px;
  margin-top: 1px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  display: grid; place-content: center;
  font-family: var(--font-num);
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
}
.w__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.w__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink);
  word-break: keep-all;
  white-space: pre-wrap;           /* 「2/5    6/10    8/20」 처럼 늘어놓은 보기의 빈칸을 살린다 */
}
.w__work { flex: 1 1 auto; min-height: 26px; }
/* 글 속 분수 — 약분과 통분처럼 분수가 문제의 몸통이면 기본 .78em 으로는 분모가 안 읽힌다 */
.w__text .frac { font-size: .9em; margin: .1em .14em; }

.w__ans {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.w__ans .box { width: 4.4em; height: 1.7em; border-width: 1.5px; }
.w__ans em { font-style: normal; color: var(--ink-soft); }
/* 답칸 모양(□/□ , □/□)이 있는 서술형 — 분수 칸은 작게, 여럿이면 줄을 바꾼다 */
.w__at { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
         color: var(--ink); font-size: 14px; }
.w__at .box { width: 2.4em; height: 1.5em; }
.w__at .frac { font-size: 1em; }
.w__at .frac .box { width: 2.2em; height: 1.45em; }

.w.is-ok  .box { border-color: var(--ok); background: rgba(31,146,84,.05); }
.w.is-bad .box { border-color: var(--bad); background: rgba(211,69,60,.05); }
.w .q__mark { flex: none; width: 18px; margin-top: 1px; font-size: 16px; }
.sheet.show-answers .w .box input { display: none; }
.sheet.show-answers .w .box__answer { display: flex; }

/* ── 분수 답란 ──────────────────────────────────────────────
   정답이 분수면 분자·분모를 따로 채운다. 가로선을 사이에 두고 칸 두 개. */

.ansfrac {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 3px;
  padding: 2px 4px;
  border: 2px solid var(--ink-soft);
  border-radius: 5px;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.ansfrac:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }

.ansfrac__stack { display: inline-flex; flex-direction: column; align-items: stretch; }
.ansfrac__stack input:first-child { border-bottom: 1.8px solid var(--ink-soft); }

.ansfrac input.ans {
  width: 2.1em;
  height: 1.15em;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: .84em;
  line-height: 1;
  text-align: center;
  color: var(--accent);
  padding: 1px 0;
}
.ansfrac--mixed > input.ans { height: 2.4em; font-size: .92em; }

.q.is-ok  .ansfrac { border-color: var(--ok); background: rgba(31,146,84,.05); }
.q.is-ok  .ansfrac input, .q.is-ok .ansfrac__stack input:first-child { color: var(--ok); }
.q.is-bad .ansfrac { border-color: var(--bad); background: rgba(211,69,60,.05); }
.q.is-bad .ansfrac input { color: var(--bad); }

.sheet.show-answers .ansfrac input { display: none; }
.sheet.show-answers .ansfrac .box__answer { display: flex; }
.ansfrac .box__answer { display: none; align-items: center; font-weight: 800; color: var(--ok); }

/* ── 풀이 자리가 필요한 지면 ────────────────────────────────
   연산이 긴 회차는 한 쪽에 12문제만 싣고 줄 사이를 비워 둔다.
   따로 모눈을 깔지 않고, 문제 아래 여백을 그대로 쓰게 한다. */

.sheet[data-work] .q {
  align-items: flex-start;
  min-height: 96px;
  padding: 12px 0 0;
}
.sheet[data-work] .q__no,
.sheet[data-work] .q__mark { margin-top: 2px; }
.sheet[data-work] .q + .q { border-top: 1px dotted var(--rule); }

/* 이어지는 쪽의 머리말은 얇게 */
.head--cont .head__no { width: 44px; height: 44px; border-radius: 11px; }
.head--cont .head__no b { font-size: 19px; }
.head--cont .head__title { font-size: 18px; }
.head__title s { font-size: .62em; font-weight: 700; color: var(--muted); margin-left: 6px; }

/* 분수의 분자·분모 자리에 놓이는 네모칸은 작게 */
.frac .box, .mixed > .whole .box { width: 1.9em; height: 1.35em; border-width: 1.5px; border-radius: 3px; }
.frac .box input { font-size: .9em; }
.box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(221,106,68,.14); }

.q.is-ok  .box { border-color: var(--ok); background: rgba(31,146,84,.05); }
.q.is-ok  .box input { color: var(--ok); }
.q.is-bad .box { border-color: var(--bad); background: rgba(211,69,60,.05); }
.q.is-bad .box input { color: var(--bad); }

/* 정답 보기 */
.sheet.show-answers .box input { color: var(--muted); }
.box__answer {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: .96em;
  color: var(--ok);
}
.sheet.show-answers .box input { display: none; }
.sheet.show-answers .box__answer { display: flex; }

/* 지면 밖 동작 줄 — 종이 안에는 두지 않는다 */
.sheet__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: var(--page-w);
  margin: -12px auto 30px;
}
.sheet__actions .btn { font-size: 13.5px; padding: 8px 14px; }

/* ── 분수 조판 ────────────────────────────────────────────── */

.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  font-size: .78em;
  line-height: 1.06;
  margin: 0 .12em;
  position: relative;
  top: -.04em;
}

/* ── 근호 ─────────────────────────────────────────────────
   기호와 덮는 줄을 따로 둔다. 줄은 <b>근호 안쪽만</b> 덮어야
   √3 × 2 가 √(3×2) 로 읽히지 않는다. */
.sqrt {
  display: inline-flex;
  align-items: stretch;
  line-height: 1;
  margin: 0 .04em;
}
.sqrt__sign {
  font-style: normal;
  font-size: 1.16em;
  line-height: 1;
  display: flex;
  align-items: flex-end;
  margin-right: -.04em;
}
.sqrt__rad {
  display: inline-flex;
  align-items: center;
  border-top: .075em solid currentColor;
  padding: .12em .18em 0 .06em;
}
/* 근호 안에 분수가 오면 줄이 위로 더 올라가야 한다 */
.sqrt__rad .frac { margin-top: .04em; }
.frac > span { display: block; padding: 0 .22em; }
.frac > .num { border-bottom: 1.6px solid currentColor; padding-bottom: .06em; }
.frac > .den { padding-top: .06em; }

.mixed { display: inline-flex; align-items: center; vertical-align: middle; gap: .1em; }
.mixed > .whole { font-weight: inherit; }

/* ── 표지 · 차례 ──────────────────────────────────────────── */

.cover { text-align: center; padding-top: clamp(40px, 9vw, 84px); padding-bottom: clamp(40px, 9vw, 84px); }
.cover__kicker { font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--muted); }
.cover__title  { margin: 16px 0 0; font-size: clamp(34px, 7vw, 52px); font-weight: 800; letter-spacing: -.045em; }
.cover__vol    { margin: 12px 0 0; font-size: clamp(18px, 3.6vw, 24px); font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
.cover__grade  { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.cover__rule   { width: 62px; height: 3px; background: var(--accent); border-radius: 2px; margin: 26px auto; }
.cover__meta   { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.cover__meta div {
  border: 1px solid var(--rule); border-radius: 10px; background: #fff;
  padding: 10px 16px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600;
}
.cover__meta b { display: block; font-size: 20px; color: var(--ink); margin-bottom: 2px; }
.cover__name { margin: 34px auto 0; max-width: 320px; text-align: left; }
.cover__name label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; letter-spacing: .04em; }
.cover__name .line { border-bottom: 1.5px solid var(--rule); height: 30px; }

.toc__title { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.toc__lead  { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-soft); }
.toc__unit  { margin-top: 20px; }
.toc__unit > h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 14px; font-weight: 800; letter-spacing: -.01em;
}
.toc__unit > h3 i {
  font-style: normal; font-size: 11px; font-weight: 800; color: #fff;
  border-radius: 20px; padding: 3px 9px; letter-spacing: .04em;
}
.toc__rows { border-top: 1.5px solid var(--rule); }
.toc__row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13.5px;
  cursor: pointer;
  background: none; border-left: 0; border-right: 0; width: 100%; text-align: left;
  font-family: inherit; color: inherit;
}
.toc__row:hover { background: #faf6ec; }
.toc__row b { flex: none; width: 40px; font-weight: 800; font-family: var(--font-num); }
.toc__row span { flex: 1 1 auto; font-weight: 600; }
.toc__row s { flex: none; text-decoration: none; color: var(--muted); font-size: 12px; }
.toc__row em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ok); }

/* ── 정답 지면 ────────────────────────────────────────────── */

.key__title { margin: 0 0 16px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.key__round { break-inside: avoid; margin-bottom: 12px; }
.key__round h4 {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 800;
  display: flex; align-items: baseline; gap: 7px;
}
.key__round h4 b { font-family: var(--font-num); color: var(--accent); }
.key__round h4 s { text-decoration: none; font-weight: 600; color: var(--muted); }
.key__list {
  display: grid;
  grid-template-columns: repeat(var(--keycols, 8), minmax(0, 1fr));
  gap: 3px 8px;
  font-size: 12px;
  font-family: var(--font-num);
}
.key__list span { display: flex; gap: 4px; min-width: 0; padding: 2px 0; border-bottom: 1px dotted var(--rule-soft); }
.key__list i { font-style: normal; color: var(--muted); width: 18px; text-align: right; }
.key__list b { --xgap: 2px; font-weight: 700; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1px; }
.key__list b em { font-style: normal; color: var(--muted); margin-right: 2px; }

/* ── 집중 모드 ────────────────────────────────────────────── */

.focus { max-width: 620px; margin: 0 auto; padding: 26px clamp(12px, 4vw, 20px) 110px; }

.focus__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.focus__track { flex: 1 1 auto; height: 7px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.focus__fill  { height: 100%; background: var(--accent); border-radius: 10px; transition: width .3s cubic-bezier(.4,0,.2,1); }
.focus__count { font-size: 13px; font-weight: 800; font-family: var(--font-num); color: var(--ink-soft); white-space: nowrap; }

.focus__card {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 34px -16px rgba(0,0,0,.28);
  padding: clamp(24px, 6vw, 40px) clamp(20px, 5vw, 36px);
  text-align: center;
}
.focus__meta { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.focus__sub  { margin: 6px 0 22px; font-size: 13px; color: var(--muted); }

.focus__q {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  font-family: var(--font-num);
  font-size: clamp(26px, 7.5vw, 40px);
  font-weight: 700;
  letter-spacing: -.01em;
  min-height: 1.8em;
}
.focus__q .op, .focus__q .eq { color: var(--ink-soft); font-weight: 500; }
.focus__q .box { width: 2.6em; height: 1.5em; border-width: 3px; border-radius: 9px; }
.focus__q .box input { font-size: .92em; }

/* 활용·그래프 문항도 한 문제씩에서 문제 글과 그림을 함께 보여 준다. */
.focus__q--word {
  display: block;
  font-family: inherit;
  font-size: clamp(16px, 4vw, 19px);
  font-weight: 650;
  line-height: 1.65;
  letter-spacing: -.01em;
  text-align: left;
}
.focus__word { margin: 0; word-break: keep-all; }
.focus__visual { width: min(100%, 300px); margin: 16px auto 0; }
.focus__visual .graph { display: block; width: 100%; max-height: 250px; margin: 0 auto; }

/* 지면에서 계수·지수를 나눠 쓰는 문제는 한 문제씩에서도
   같은 답안 틀을 보여 준다. 모바일에서 누르기 쉬운 크기를 최소로 잡았다. */
.focus__q--form { margin-top: 8px; font-size: clamp(21px, 5.8vw, 31px); }
.answer-form--focus { justify-content: center; row-gap: .72em; }
.answer-form--focus .answer-form__equation,
.answer-form--focus .answer-form__fields { justify-content: center; }
.answer-form--focus .answer-form__fields { width: 100%; font-size: .72em; gap: .65em 1em; }
.answer-form--focus .answer-form__field .box,
.answer-form--focus .answer-form__field .box--wide,
.answer-form--focus .signslot { min-height: 2.1em; }
.focus__form-check { margin-top: 20px; }
.focus__form-check .btn { min-width: 132px; min-height: 46px; font-size: 15px; }

/* ── 보기 (집중 모드) ─────────────────────────────────────── */

.choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 12px 14px;
  border: 2px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .13s, background .13s, transform .08s;
}
.choice:hover:not(:disabled) { border-color: var(--accent); background: #fffdf7; }
.choice:active:not(:disabled) { transform: translateY(1px); }
.choice:disabled { cursor: default; }

.choice > i {
  flex: none;
  font-style: normal;
  font-size: 17px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.choice > span {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-num);
  font-size: clamp(19px, 4.6vw, 24px);
  font-weight: 700;
}
.choice .frac { font-size: .8em; }

.choice.is-ok {
  border-color: var(--ok);
  background: rgba(31,146,84,.08);
}
.choice.is-ok > i, .choice.is-ok > span { color: var(--ok); }
.choice.is-bad {
  border-color: var(--bad);
  background: rgba(211,69,60,.06);
  opacity: .75;
}
.choice.is-bad > i, .choice.is-bad > span { color: var(--bad); }
.choice:disabled:not(.is-ok):not(.is-bad) { opacity: .4; }

@media (max-width: 480px) {
  .choices { grid-template-columns: 1fr; gap: 8px; }
  .choice { min-height: 56px; }
}

.focus__fb {
  margin-top: 18px;
  min-height: 30px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.focus__fb.ok  { color: var(--ok); }
.focus__fb.bad { color: var(--bad); }
.focus__fb small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }

.focus__actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.focus__actions .btn { padding: 11px 24px; font-size: 15px; }

.focus__done { text-align: center; padding: 20px 0; }
.focus__done .score { font-size: clamp(40px, 11vw, 60px); font-weight: 800; color: var(--accent); letter-spacing: -.04em; }
.focus__done .score s { text-decoration: none; font-size: .42em; color: var(--muted); font-weight: 700; }
.focus__done p { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.focus__wrong { margin-top: 22px; text-align: left; }
.focus__wrong h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--bad); }
.focus__wrong ul { margin: 0; padding: 0; list-style: none; font-family: var(--font-num); font-size: 14px; }
.focus__wrong li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px dotted var(--rule);
}
.focus__wrong li i {
  flex: none; font-style: normal; width: 22px; height: 22px;
  border: 1.5px solid var(--rule); border-radius: 50%;
  display: grid; place-content: center;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.focus__wrong li .expr { flex: 1 1 auto; font-weight: 700; }
.focus__wrong li s { flex: none; color: var(--bad); font-size: 12.5px; font-weight: 700; }

/* 인라인 식 — 낱자 사이 간격을 지면과 같게 */
.expr { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.expr .op, .expr .eq { color: var(--ink-soft); font-weight: 500; }

/* ── 풀이 공간 (집중 모드) ────────────────────────────────── */

.work {
  margin-top: 20px;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  background: #fffdf8;
  overflow: hidden;
  text-align: left;
}
.work__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
  list-style: none;
}
.work__head::-webkit-details-marker { display: none; }
.work__head::before {
  content: '▸';
  color: var(--muted);
  transition: transform .15s;
}
.work[open] .work__head::before { transform: rotate(90deg); }
.work__head s { font-size: 11.5px; font-weight: 600; color: var(--muted); }

.work__paper {
  min-height: 76px;
  max-height: 190px;
  overflow-y: auto;
  margin: 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule-soft) 33px 34px);
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 700;
}
.work__line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  flex-wrap: wrap;
}
.work__line .op, .work__line .eq { color: var(--ink-soft); font-weight: 500; }
.work__line .frac { font-size: .8em; }
.work__line--cur { color: var(--accent); }

.caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  background: var(--accent);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.work__pad { padding: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.work__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1 1 168px; }
.work__ops  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1 1 168px; align-content: start; }

.wkey {
  font: inherit;
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 700;
  padding: 11px 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background .1s, transform .06s;
}
.wkey:active { background: #f2ece0; transform: translateY(1px); }
.wkey--soft { font-family: var(--font); font-size: 13px; color: var(--ink-soft); background: #f7f3ea; }
.wkey--op   { color: var(--accent); font-size: 20px; }
.wkey--word { font-family: var(--font); font-size: 13px; grid-column: span 2; }
.wkey--ten  { font-size: 16px; color: var(--ink-soft); }

/* 분수 키 — 모양으로 알아보게 */
.frackey { display: inline-block; width: 13px; height: 15px; position: relative; vertical-align: -2px; }
.frackey::before, .frackey::after {
  content: ''; position: absolute; left: 3px; width: 7px; height: 5px;
  border: 1.5px solid currentColor; border-radius: 1px;
}
.frackey::before { top: 0; }
.frackey::after  { bottom: 0; }

/* 숫자 키패드 (쓰지 않지만 지면 인쇄 규칙이 참조) */
.pad { display: none; }

/* ── 하단 고정 막대 ───────────────────────────────────────── */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(12px, 3vw, 24px);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(255, 253, 248, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -2px 16px rgba(0,0,0,.07);
}
.dock__status { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--ink-soft); min-width: 0; }
.dock__status b { color: var(--accent); font-weight: 800; }

/* ── 인쇄 설정 패널 ───────────────────────────────────────── */

.dialog { border: 0; padding: 0; border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); max-width: 400px; width: calc(100vw - 32px); }
.dialog::backdrop { background: rgba(20,18,14,.45); }
.dialog__in { padding: 22px; background: var(--paper); }
.dialog h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.dialog p  { margin: 0 0 16px; font-size: 13px; color: var(--ink-soft); }
.print-scope { border: 0; padding: 0; margin: 0 0 14px; }
.print-scope legend { margin-bottom: 7px; padding: 0; font-size: 13px; font-weight: 800; }
.print-scope__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.print-scope__choice { position: relative; cursor: pointer; }
.print-scope__choice input { position: absolute; opacity: 0; pointer-events: none; }
.print-scope__choice span {
  display: flex; align-items: center; justify-content: center; min-height: 39px;
  padding: 8px 10px; border: 1px solid var(--rule); border-radius: 9px;
  background: #fff; color: var(--ink-soft); font-size: 13px; font-weight: 750;
}
.print-scope__choice input:checked + span {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, white); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.print-scope__choice input:focus-visible + span { outline: 3px solid #ffd55f; outline-offset: 2px; }
.field { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.field span { display: block; margin-bottom: 5px; }
.field .row { display: flex; gap: 8px; align-items: center; }
.field input[type='number'] {
  font: inherit; font-weight: 700; padding: 8px 10px; width: 80px;
  border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink);
}
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }
.check--duplex { margin-top: 12px; margin-bottom: 5px; font-weight: 800; }
.dialog p.print-range__hint { margin: -5px 0 12px; color: var(--muted); font-size: 12px; }
.dialog p.print-duplex-note {
  margin: 0 0 10px 25px; padding: 9px 11px; border-radius: 9px;
  background: #fff3cf; color: #6b5312; font-size: 12px; font-weight: 650; line-height: 1.55;
}
.dialog__foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* 실제 인쇄 직전에만 만드는 양면 보정용 빈 쪽은 화면에서는 보이지 않는다. */
.print-duplex-blank { display: none; }

/* ── 인쇄 미리보기 ────────────────────────────────────────── */

.preview {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: #55504a;
}

.preview__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px clamp(12px, 3vw, 20px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 14px rgba(0,0,0,.25);
}
.preview__title { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.preview__count {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: #fff; border: 1px solid var(--rule);
  border-radius: 20px; padding: 3px 10px;
  white-space: nowrap;
}

.preview__frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #55504a;
}

/* ── 좁은 화면 ────────────────────────────────────────────── */

@media (max-width: 640px) {
  .book { padding: 14px 10px 110px; }
  /* 좁은 화면에서는 A4 비율을 풀고 내용만큼 늘린다 — 손에 든 화면은 종이가 아니다 */
  .sheet { aspect-ratio: auto; border-radius: 2px; padding: 22px 18px 48px; }
  .sheet::before { inset: 6px; }
  .sheet__foot { left: 18px; right: 18px; bottom: 16px; }
  .sheet .grid__col { justify-content: flex-start; }

  .grid { grid-template-columns: 1fr; }
  .grid__col + .grid__col { border-left: 0; padding-left: 0; }
  .grid__col + .grid__col .q:first-child { border-top: 1px dotted var(--rule-soft); }

  .q { min-height: 52px; }
  .head__no { width: 50px; height: 50px; border-radius: 13px; }
  .head__no b { font-size: 22px; }
  .head__log .logbox { min-width: 0; padding: 6px 9px 7px; }
  .logbox b { font-size: 13px; }

  .pad { display: grid; }
  .toolbar__brand { font-size: 14px; }
  .toolbar .btn { padding: 8px 11px; font-size: 13px; }
}

/* 손가락 입력 기기에서는 키패드를 쓰도록 시스템 키보드를 유도하지 않음 */
@media (hover: none) and (pointer: coarse) {
  .pad { display: grid; }
}


/* 인쇄 판형은 assets/print.css 로 분리했다.
   index.html 에서 media="print" 로 붙고, 미리보기 iframe 에서는 media 없이 붙는다. */

/* ── 3단 풀이 · 점수 칩 (활용 지면) ─────────────────────────
   기록 칸(공부한 날·걸린 시간)을 빼고 그 자리에 풀이 세 층을 넣는다.
   맞은 개수는 머리말 오른쪽 위로 옮겨 채점 표시를 그대로 살린다. */

.scorechip {
  flex: none;
  margin-left: auto;
  text-align: right;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: 6px 11px 7px;
}
.scorechip span {
  display: block;
  font-size: 10.5px; font-weight: 700;
  color: var(--muted); letter-spacing: .04em;
}
.scorechip b {
  display: block; margin-top: 2px;
  font-family: var(--font-num);
  font-size: 15px; font-weight: 800; color: var(--accent);
}
.scorechip b em { font-style: normal; color: var(--rule); font-weight: 500; }

.ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.way {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: 8px 11px 9px;
  min-width: 0;
}
.way__tag {
  display: block;
  font-size: 10.5px; font-weight: 800;
  color: var(--accent); letter-spacing: .02em;
}
.way__a {
  margin: 5px 0 0;
  font-size: 12px; line-height: 1.45;
  color: var(--ink-soft);
  word-break: keep-all;
}
.way__b {
  margin: 3px 0 0;
  font-family: var(--font-num);
  font-size: 12.5px; font-weight: 700; line-height: 1.45;
  color: var(--ink);
}

/* ── 중학교 과정에서 새로 쓰는 기호 ───────────────────────────
   문자(x·y·a·b)는 기울인 세리프로, 지수는 위첨자로, 부등호와
   비의 기호는 등호처럼 양옆을 띄운다. */

.var {
  font-family: "Times New Roman", var(--font-num), serif;
  font-style: italic;
  font-weight: 600;
  padding: 0 .5px;
}
/* 지수 — 밑과 한 덩어리(.pw)로 묶어야 자리가 잡힌다.
   식 줄이 flex 라 낱개로 두면 가운데정렬에 걸려 밑의 허리에 붙는다. */
.pw {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}
.pow {
  font-family: var(--font-num);
  font-size: .58em;
  font-weight: 700;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  top: -.72em;              /* 제 크기 기준 — 밑 글자의 약 0.42em 위 */
  margin-left: .5px;
}
/* 늘어난 괄호는 글자보다 훨씬 높아, 지수도 그만큼 더 올린다 */
.pw--paren .pow { top: -1.5em; }
/* 순열·조합 기호 ₙPᵣ — 앞뒤에 작은 글씨가 하나씩 붙는다.
   .seg 가 flex 라 낱개로 두면 첨자가 허리에 붙으므로 한 덩어리로 묶는다. */
.nck {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--font-num);
}
.nck > b {
  font-family: "Times New Roman", serif;
  font-weight: 600;
  font-size: 1.02em;
}
/* 행렬 — 둥근 괄호는 양쪽 가짜 요소의 테두리를 타원으로 굽혀 그린다.
   괄호는 행렬 높이를 따라 늘어나므로 몇 줄짜리든 알맞게 감싼다. */
.mat {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  margin: 0 .2em;
}
.mat::before, .mat::after {
  content: '';
  flex: 0 0 .34em;
  border: 1.4px solid currentColor;
}
.mat::before { border-right: 0; border-radius: .6em 0 0 .6em / 50% 0 0 50%; }
.mat::after  { border-left: 0;  border-radius: 0 .6em .6em 0 / 0 50% 50% 0; }
.mat__g {
  display: inline-grid;
  column-gap: .8em;
  row-gap: .18em;
  padding: .2em .18em;
  justify-items: center;
  align-items: center;
}
.mat__c { display: inline-flex; align-items: center; white-space: nowrap; }
/* 칸 안의 식은 좁게 — 연산 기호를 본문처럼 벌리면 「3x − 5 , 2」 가 한 칸처럼 이어 보인다 */
.q__body .mat__c .op { padding: 0 .12em; }
/* 칸 맨 앞의 빼기표는 부호다 — 연산 기호처럼 양옆을 벌리면 「− 3」이 된다 */
.mat__c > .op:first-child { padding-left: 0; padding-right: .06em; }
/* 아래첨자 a_ij — 첨자도 문자라 기울여 쓴다 */
.sb { display: inline-block; white-space: nowrap; line-height: 1; }
.sb sub {
  font-family: "Times New Roman", serif;
  font-style: italic;
  font-size: .62em;
  font-weight: 600;
  vertical-align: baseline;
  position: relative;
  top: .32em;
  margin-left: .5px;
}
.fact { font-weight: 700; font-family: var(--font-num); margin-left: .5px; }
.nck sub {
  font-size: .6em;
  font-weight: 700;
  vertical-align: baseline;
  position: relative;
  top: .28em;
  margin: 0 .3px;
}
.rel   { color: var(--ink-soft); font-weight: 500; padding: 0 3px; }
.ratio { color: var(--ink-soft); font-weight: 600; padding: 0 3px; }

/* 문자식을 쓰는 답란 — 「3x − 1」 처럼 여러 글자가 들어간다 */
.box--wide { width: 6.6em; }
.box--wide input.ans--text {
  font-family: "Times New Roman", var(--font-num), serif;
  font-style: italic;
  font-weight: 700;
  font-size: .96em;
  letter-spacing: 0;
}
.dots { color: var(--ink-soft); letter-spacing: .06em; padding: 0 2px; }

/* ── 쪽 번호 ──────────────────────────────────────────────
   시중 문제집처럼 바닥글 바깥쪽 끝에 숫자만. 배지가 아니라 활자로.
   넘기며 찾는 것이 일이라 본문보다 조금 크고 진하게 둔다. */
.pageno {
  flex: none;
  padding-left: 11px;
  border-left: 1px solid var(--rule);
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink-soft);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.dock__page {
  font-family: var(--font-num);
  font-size: .82rem;
  font-weight: 800;
  color: var(--muted);
  padding: 0 .6rem;
  white-space: nowrap;
}

/* ── 간격 마무리 ─────────────────────────────────────────
   gap 을 없앤 뒤, 답칸·분수·부등호처럼 숨 쉴 자리가 필요한 것만
   자기 여백을 갖는다. em 이라 인쇄·작은 판형에서도 같은 비율로 준다. */
/* 분수·답칸도 제 여백을 갖지 않는다 — 옆이 기호면 기호가 띄워 주고,
   옆이 수나 문자면 붙어야 맞다. (−9/4) 는 붙고, 1/2 x 도 붙는다. */
.q__body .box, .q__body .ansfrac { margin: 0; }
.q__body .frac  { margin: 0; }
.q__body .mixed { margin: 0; }
.q__body .rel   { padding: 0 .38em; }
.q__body .ratio { padding: 0 .34em; }
.q__body .dots  { padding: 0 .16em; }

/* ── 좌표평면 그림 ─────────────────────────────────────────
   시중 문제집처럼 그래프를 보고 푸는 문항. 그림은 문항 위,
   식과 답칸은 그 아래에 둔다 — 한 줄에 넣으면 눈금이 안 보인다. */
.q--graph { align-items: flex-start; padding: 10px 0; min-height: 0; }
.q--graph .q__fig { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.q--graph .q__body { flex: 0 0 auto; justify-content: center; }
.sheet[data-graph] .grid__col { justify-content: space-around; }

.graph {
  width: 100%;
  max-width: 168px;
  height: auto;
  display: block;
  overflow: visible;
}
.graph .gx { stroke: var(--rule); stroke-width: .6; }          /* 모눈 */
.graph .ax { stroke: var(--ink); stroke-width: 1.5; fill: var(--ink); }
.graph .gd { stroke: var(--ink-soft); stroke-width: .9; stroke-dasharray: 3 2.4; }
.graph .cv { stroke: var(--accent); stroke-width: 2.2; fill: none;
             stroke-linecap: round; stroke-linejoin: round; }
.graph .pt { fill: var(--accent); stroke: var(--paper); stroke-width: 1.2; }
.gchoices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 6px; margin: 4px 0; }
.gchoice { margin: 0; min-width: 0; }
.gchoice figcaption { font-size: 12px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.gchoice .graph { max-width: 100%; }
.gchoice .graph .gn--l { font-size: 12px; }
.gchoice .graph .gl { font-size: 11px; }
.graph .gf { fill: var(--accent); fill-opacity: .14; stroke: none; }
.graph .cv--dash { stroke-dasharray: 4 3; stroke-width: 1.4; }
.graph .gn--l { font-size: 9px; font-weight: 700; fill: var(--ink); }
.graph .gl { fill: var(--ink); font-size: 9px; font-weight: 700; font-style: italic;
             font-family: var(--font-num); }
.graph .gn { fill: var(--ink-soft); font-size: 7.5px; font-weight: 600;
             font-family: var(--font-num); text-anchor: middle; }
.graph .gp { fill: var(--ink); font-size: 9px; font-weight: 800;
             font-family: var(--font-num); }

/* 평면도형 그림 — 좌표평면이 아니라 도형 자체를 그린다 */
.fig .fg { stroke: var(--ink); stroke-width: 1.6; fill: none;
           stroke-linejoin: round; stroke-linecap: round; }
.fig .fg--fill { fill: var(--accent); fill-opacity: .13; }
.fig .fg--dark { fill-opacity: .5; }
.fig .fd { stroke: var(--ink-soft); stroke-width: 1.1; stroke-dasharray: 3.4 2.6; fill: none; }
.fig .fm { stroke: var(--accent); stroke-width: 1.1; }
.fig .fl { fill: var(--ink); font-size: 9px; font-weight: 700;
           font-family: var(--font-num); }

.fig .fl--s { font-size: 6.5px; }
.fig .fl--a { font-size: 8px; fill: var(--accent); }
.fig .fdot { fill: var(--ink); }
.fig .fr { stroke: var(--ink); stroke-width: .7; }

/* 서술형 문항에 붙는 도형 그림 — 풀이 자리 오른쪽에 낀다 */
.w__work .fig { float: right; width: 46%; max-width: 104px; margin: 2px 0 4px 8px; }
/* 선 위의 거리처럼 옆으로 긴 그림은 칸 폭을 다 쓴다 */
.graph.fig--wide { max-width: 100%; }
.w__work .fig--wide { float: none; width: 100%; max-width: 100%; margin: 2px 0 6px; }

/* 선분도 — 활용 문제를 막대 두 줄로 보이게 */
.segd { flex: 1 1 300px; min-width: 0; max-width: 420px; }
.segd__svg { display: block; width: 100%; height: auto; overflow: visible; }
.segd__name { fill: var(--ink); font-size: 12px; font-weight: 700; }
.segd__box { fill: #fff; stroke: var(--ink-soft); stroke-width: 1.5; }
.segd__box--mark { fill: var(--accent); fill-opacity: .14; stroke: var(--accent);
                  stroke-dasharray: 4 3; }
.segd__v { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font-num); }
.segd__v--mark { fill: var(--accent); font-weight: 800; }
.segd__cut { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.segd__brace { fill: none; stroke: var(--ink-soft); stroke-width: 1.3; opacity: .6; }
.segd__sum { fill: var(--ink); font-size: 12px; font-weight: 800; }

/* 쪽 이동 — 회차 고르개 옆. 번호를 직접 쳐 넣거나 ‹ › 로 한 쪽씩 */
.pager {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  font-family: var(--font-num);
}
.pager__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  padding: 0 9px;
  cursor: pointer;
}
.pager__btn:hover:not(:disabled) { background: var(--paper-edge, #f2ede1); color: var(--ink); }
.pager__btn:disabled { opacity: .35; cursor: default; }
.pager__no {
  width: 3.1em;
  border: 0;
  border-left: 1px solid var(--rule);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  padding: 7px 0;
  -moz-appearance: textfield;
}
.pager__no:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.pager__of {
  display: flex; align-items: center;
  border-right: 1px solid var(--rule);
  padding: 0 8px 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.pager__of em { font-style: normal; }
[data-mode="focus"] .pager { display: none; }   /* 한 문제씩 모드엔 쪽이 없다 */

/* ── 출처 표시 ────────────────────────────────────────────────
   교육청·평가원 기출은 숫자를 바꾸지 않고 그대로 낸다.
   대신 어느 해 어느 시험에서 나왔는지 문제 <b>위에</b> 작게 적는다. */
.q__stack { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.q__src {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--muted);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 1px 7px; background: var(--paper-soft, #fff);
  white-space: nowrap;
}
.q--graph .q__src { margin-bottom: 2px; }

/* 켤레복소수 — 글자 위의 줄. 밑줄과 달리 글자에 붙지 않게 조금 띄운다. */
.bar { display: inline-block; position: relative; padding-top: .12em; }
.bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: .04em;
  border-top: 1.4px solid currentColor;
}

/* 절댓값 막대 — 글자가 아니라 세로선으로 그린다.
   글꼴에 따라 | 가 가늘거나 짧아 보이는 것을 막는다. */
.abs {
  display: inline-block; width: 0; height: 1.02em;
  margin: 0 .16em; vertical-align: -.16em;
  border-left: 1.5px solid var(--ink-soft);
}

/* 소수 답칸 - 소수점이 든 답(132.66 · 0.0723)이 잘리지 않게 넓힌다 */
.box.box--dec { width: 4.9em; }
.w__ans .box.box--dec { width: 6em; }
.focus__q .box.box--dec { width: 4.6em; }