/* style.css — 아이패드 필기 전용 레이아웃
 * 스크롤 없음(한 화면 = 한 페이지). 캔버스에 touch-action:none 을 걸어도
 * 손가락 스크롤과 충돌하지 않게 하려는 의도적 설계.
 */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* 캔버스에만 걸면 Safari 가 빠른 두 번째 탭을 더블탭 줌 후보로 붙들다 획을 취소한다 */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Apple SD Gothic Neo", -apple-system, system-ui, "Malgun Gothic", sans-serif;
  background: #eef2f7;
  color: #0f172a;
}
body {
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ────────── 헤더 ────────── */
header {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: #fff; border-bottom: 1px solid #e2e8f0;
}
/* body 의 touch-action:none 은 필기 영역만을 위한 것 —
   조작 영역까지 none 이면 브라우저가 탭 제스처를 처리하지 않아 반응이 둔해진다 */
header, footer, .overlay { touch-action: manipulation; }
/* touch-action 은 상속되지 않는다 — body 에만 걸면 main/.card 는 auto 로 남아
   Safari 가 그 위에서 탭·더블탭 제스처를 계속 저울질한다. 조상에 모두 명시한다. */
main, .card { touch-action: none; }
header { overflow: hidden; }
header select { min-width: 0; flex: 0 1 auto; }
#brand { flex: 0 0 auto; }
#brand { padding: 4px 8px; border-radius: 9px; cursor: default; }
#brand.pressing { background: #e2e8f0; }
#brand b { display: block; font-size: 16px; }
#brand small { font-size: 11px; color: #94a3b8; }

select {
  height: 40px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 9px;
  background: #fff; font-size: 14px; font-family: inherit; max-width: 240px;
}
.spacer { flex: 1; }

button {
  height: 42px; min-width: 44px; padding: 0 11px;
  border: 1px solid #cbd5e1; background: #fff; border-radius: 10px;
  font-size: 13px; font-weight: 600; font-family: inherit; color: #334155;
  white-space: nowrap;              /* 두 줄로 접히지 않게 */
  touch-action: manipulation; cursor: pointer;
  transition: transform .08s, background .12s;
}
button.on      { background: #0f172a; border-color: #0f172a; color: #fff; }
button.primary { background: #0f172a; border-color: #0f172a; color: #fff; }
button:disabled { opacity: .3; }
button:active  { transform: scale(.94); }
/* 눌렸다는 걸 눈으로 확인시켜 주는 순간 강조 */
button.flash { background: #0f172a; border-color: #0f172a; color: #fff; transform: scale(.94); }

/* ────────── 문제 영역 ────────── */
main {
  flex: 1; min-height: 0; display: grid; gap: 8px; padding: 8px;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
}

.card {
  position: relative; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 13px; overflow: hidden;
}
.card.sample { background: #f8fbff; border-color: #bfdbfe; }
.qnum {
  position: absolute; top: 6px; left: 9px; z-index: 1;
  font-size: 13px; font-weight: 700; color: #94a3b8;
}
.card.sample .qnum { color: #2563eb; }

/* 세로식 */
.vc, .hc {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
/* em 기준을 .vc 로 통일해야 밑줄 폭이 숫자 칸 폭과 정확히 맞는다 */
.vc { font-size: clamp(20px, 3.4vmin, 36px); }
.vc .row {
  display: grid; grid-template-columns: repeat(var(--cols), 1.15em);
  font-size: 1em; font-weight: 600; line-height: 1.22;
  font-variant-numeric: tabular-nums;
}
.vc .row span { text-align: center; }
/* 칸 폭(1.15em)은 숫자 행과 같게 두고 글자만 작게 — 폰트를 줄이면 칸이 어긋난다 */
.vc .carry { height: .72em; line-height: .72; color: #2563eb; }
.vc .carry span { font-size: .45em; }
.vc .rule  { height: 2px; background: #0f172a; width: calc(var(--cols) * 1.15em); margin: 3px 0 4px; }
.vc .ans span { color: #2563eb; }

/* 가로식 */
.hc {
  font-size: clamp(19px, 3.1vmin, 32px); font-weight: 600;
  font-variant-numeric: tabular-nums; gap: .35em;
}
/* 수식은 반드시 한 줄. .hc 가 세로 flex 라 감싸지 않으면 항마다 줄바꿈된다 */
.hc .line { white-space: nowrap; }
.hc .op  { padding: 0 .12em; }
.hc .box { color: #0f172a; }
/* 아이 손글씨는 인쇄체보다 크다 — 답 칸을 넉넉히 */
.hc .ans { color: #2563eb; min-width: 3.4em; display: inline-block; text-align: center; }
.hc .ans.blank { border-bottom: 2px solid #94a3b8; }
.hc.mt .ans { border: none; }
.boxans { font-size: .8em; color: #64748b; }
.boxans .ans { color: #2563eb; }

/* 필기 캔버스 — 문제 위에 올라가는 유일한 상호작용 레이어 */
canvas.ink {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; display: block;
  touch-action: none;          /* 스크롤/핀치가 필기를 가로채지 않게 */
}

/* ────────── 푸터 ────────── */
footer {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; background: #fff; border-top: 1px solid #e2e8f0;
}
#pageInfo { font-size: 13px; color: #64748b; font-variant-numeric: tabular-nums; min-width: 52px; text-align: center; }
/* 입력 진단 — 부모 모드에서만 보인다 (펜 인식 문제가 재발하면 여기서 확인) */
#probe { display: none; font-size: 11px; color: #94a3b8; font-variant-numeric: tabular-nums; }
body.parent #probe { display: inline; }

/* ────────── 부모 모드 ────────── */
body.parent header { background: #eff6ff; border-bottom-color: #bfdbfe; }
.grp { display: flex; gap: 8px; align-items: center; }
#gradeTools { display: none; }
body.parent #gradeTools { display: flex; }
body.parent #penTools   { display: none; }
body.parent select      { display: none; }   /* 채점 중엔 불필요 — 헤더 폭을 확보한다 */
body.parent #newBtn     { display: none; }
#gradeInfo { font-size: 13px; color: #1d4ed8; font-weight: 600; }

/* 채점 중에는 캔버스가 클릭을 먹지 않게 해서 카드 탭으로 O/X 를 매긴다 */
body.parent canvas.ink { pointer-events: none; }
body.parent .card:not(.sample) { cursor: pointer; }

/* 채점 표시는 카드 안에 확실히 들어와야 한다.
   "X 66" 처럼 길어지면 카드 밖으로 흘러 잘리던 것 → 알약 배지로 폭을 통제한다 */
.mark {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  max-width: calc(100% - 48px);
  padding: 2px 9px; border-radius: 999px;
  font-size: 14px; font-weight: 800; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.card.ok .mark { background: #dcfce7; }
.card.ng .mark { background: #fee2e2; }
.card.ok { background: #f0fdf4; border-color: #86efac; }
.card.ng { background: #fef2f2; border-color: #fca5a5; }
.card.ok .mark { color: #16a34a; }
.card.ng .mark { color: #dc2626; }

/* 채점 결과는 부모 모드에서만 보인다.
   학생 화면에 O/X 나 초록·빨강 배경이 남으면 그 자체가 정답 힌트가 된다.
   상태(state.grades)는 유지하고 표시만 감춘다. */
.mark { display: none; }
body.parent .mark { display: block; }
body:not(.parent) .card.ok,
body:not(.parent) .card.ng { background: #fff; border-color: #e2e8f0; }
body:not(.parent) .card.ok.sample,
body:not(.parent) .card.ng.sample { background: #f8fbff; border-color: #bfdbfe; }

/* 복습 모드 표시 */
body.review header { background: #fffbeb; border-bottom-color: #fde68a; }

/* ────────── 오버레이 공통 ────────── */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; background: rgba(15, 23, 42, .55);
}
.overlay.show { display: flex; }
.val {
  font-size: 30px; font-weight: 700; height: 1.3em; margin-bottom: 12px;
  color: #dc2626; font-variant-numeric: tabular-nums;
}
.keys button.wide { grid-column: 1 / -1; }

/* ────────── 리포트 ────────── */
.sheetbox {
  width: min(760px, 92vw); max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 18px; padding: 18px 20px 24px;
  -webkit-user-select: text; user-select: text;
}
.rhead { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rhead h2 { font-size: 18px; }
#reportBody h3 { font-size: 14px; margin: 20px 0 8px; color: #334155; }
#reportBody h3 small { font-weight: 400; color: #94a3b8; font-size: 11px; }
#reportBody .empty, #reportBody .note { font-size: 13px; color: #64748b; line-height: 1.6; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stats div { background: #f8fafc; border-radius: 12px; padding: 12px; text-align: center; }
.stats b { display: block; font-size: 22px; }
.stats span { font-size: 11px; color: #64748b; }

.bars { list-style: none; }
.bars li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.bars .nm  { flex: 0 0 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .bar { flex: 1; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.bars .bar i { display: block; height: 100%; }
.bars .pct { flex: 0 0 40px; text-align: right; font-variant-numeric: tabular-nums; }
.bars .cnt { flex: 0 0 52px; text-align: right; color: #94a3b8; font-size: 11px; }

.errs { list-style: none; }
.errs li { padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.errs .n { color: #dc2626; font-weight: 600; margin-left: 6px; }
.errs p { color: #64748b; font-size: 12px; margin-top: 3px; line-height: 1.5; }

#gate.show { display: flex; }
.pad { width: 286px; padding: 22px; background: #fff; border-radius: 20px; text-align: center; }
.pad h2 { font-size: 16px; margin-bottom: 3px; }
.pad p  { font-size: 12px; color: #64748b; margin-bottom: 14px; min-height: 2.6em; }
.dots { display: flex; gap: 12px; justify-content: center; margin-bottom: 15px; }
.dots i { width: 13px; height: 13px; border-radius: 50%; background: #e2e8f0; }
.dots i.f { background: #0f172a; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keys button { height: 52px; background: #f8fafc; border-color: #e2e8f0; font-size: 19px; }
.pad.bad { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* 인쇄 (아이패드 필기가 주 용도라 부차적) */
@media print {
  header, footer, #gate { display: none !important; }
  html, body { height: auto; overflow: visible; background: #fff; }
  main { height: auto; gap: 4mm; }
  .card { break-inside: avoid; border-color: #cbd5e1; }
  canvas.ink { display: none; }
}

/* ────────── 토스트 ────────── */
#toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(8px);
  background: rgba(15, 23, 42, .92); color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; z-index: 60; pointer-events: none;
  opacity: 0; transition: opacity .16s, transform .16s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ────────── 부모 진입 ────────── */
/* 부모가 한참 찾았다는 피드백 — 숨기지 않고 드러낸다. 정답을 지키는 건 PIN 이다. */
#parentBtn { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
body.parent #parentBtn { display: none; }
#submitInfo { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }

/* 시험용 영역 — 기능 확인이 끝나면 이 블록과 함께 지운다 */
.devacts { display: flex; gap: 8px; margin-top: 8px; }
.devacts button { height: 38px; font-size: 12px; }