/* ==========================================================================
   math-worksheet 전용 스타일
   공통 패턴은 css/common.css, 용지 조판은 css/print-sheet.css 에 있습니다.
   여기에는 이 툴의 도메인(문항 칸, 세로셈, 긴 나눗셈, 정답지)만 둡니다.
   색·간격은 common.css 변수만 씁니다.

   🔴 인라인 style 금지 — 서버 CSP 가 style-src 'self' 라 style="" 은 차단됩니다.
      치수·상태는 data-* 속성으로 넘기고 여기서 받습니다.
   ========================================================================== */

/* --- 빠른 설정 ------------------------------------------------------------ */
.sample-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.sample-row .sample-label {
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.sample-row .button {
  min-height: 44px; /* STYLE.md: 터치 대상 최소 44px */
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
}

/* --- 자릿수·단 범위 선택 --------------------------------------------------- */


.range-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.range-row > div {
  flex: 1 1 0;
  min-width: 0;
}

.range-row .range-tilde {
  padding-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
}

/* --- 지면 안내 ------------------------------------------------------------ */
.capacity-hint {
  margin-top: var(--space-3);
}

/* --- 미리보기 ------------------------------------------------------------- */
/* 210mm 용지는 좁은 화면보다 넓습니다. 미리보기 영역 안에서만 가로로 스크롤시켜
   페이지 전체가 밀리지 않게 합니다. 인쇄에는 영향이 없습니다. */
.sheet-stack {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: var(--space-5);
}

.print-scope {
  margin-top: var(--space-5);
}

/* 인쇄에서 제외할 용지는 이 클래스로 감춥니다.
   🔴 hidden 속성을 쓰면 전역 [hidden]{display:none!important} 때문에
      화면 미리보기에서도 사라져 버립니다. */
.sheet.is-excluded {
  display: none;
}

@media print {
  /* print-sheet.css 는 `.sheet:first-of-type` 에만 페이지 나눔 예외를 둡니다.
     ‘정답지만’ 인쇄처럼 앞쪽 용지를 감추면 첫 번째 요소가 여전히 감춰진 용지라
     맨 앞에 빈 페이지가 생길 수 있습니다. 실제로 인쇄되는 첫 장을 JS 가 지정합니다. */
  .sheet.is-print-first {
    break-before: auto;
    page-break-before: auto;
  }
}

/* --- 용지 안내 문구 -------------------------------------------------------- */
.sheet-note {
  margin: 2mm 0 0;
  font-size: 9pt;
  color: var(--ink-700);
}

/* --- 문항 칸 --------------------------------------------------------------
   높이는 mathgen.js 의 ROW_MM 과 같아야 합니다. 검증 스크립트가 대조합니다.
   ------------------------------------------------------------------------ */
.q-grid {
  display: grid;
  gap: 3mm 6mm;
  align-items: start;
}

.q-grid[data-columns="1"] { grid-template-columns: 1fr; }
.q-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.q-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.q-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.q-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }

.q-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.q-no {
  flex: none;
  min-width: 7mm;
  font-weight: var(--weight-bold);
  font-size: 0.85em;
  color: var(--ink-700);
  text-align: right;
}

/* --- 가로셈 --------------------------------------------------------------- */
.q-h {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 1.5mm;
  min-width: 0;
}

.q-grid[data-layout="h"] .q-item { min-height: 13mm; }
.sheet[data-size="sm"] .q-grid[data-layout="h"] .q-item { min-height: 11mm; font-size: 10.5pt; }
.sheet[data-size="md"] .q-grid[data-layout="h"] .q-item { min-height: 13mm; font-size: 12pt; }
.sheet[data-size="lg"] .q-grid[data-layout="h"] .q-item { min-height: 16mm; font-size: 14pt; }

.q-expr {
  flex: none;
  white-space: nowrap;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.q-blank {
  flex: 1 1 auto;
  align-self: flex-end;
  min-width: 14mm;
  margin-bottom: 1.2mm;
  border-bottom: 0.6pt solid var(--ink-500);
}

/* --- 세로셈 (덧셈·뺄셈·곱셈) -----------------------------------------------
   숫자를 한 글자씩 고정폭 칸에 넣어 자릿수를 맞춥니다.
   글꼴이 기기마다 달라도 칸 폭이 고정이라 세로줄이 흔들리지 않습니다.
   ------------------------------------------------------------------------ */
.q-v {
  /* 세로 방향 flex + align-items:flex-start 여야 각 줄이 숫자 폭만큼만 넓어집니다.
     블록으로 두면 줄이 칸 전체를 채워 밑줄이 숫자 밖까지 길게 그어집니다. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.q-grid[data-layout="v"] .q-item { min-height: 30mm; }
.sheet[data-size="sm"] .q-grid[data-layout="v"] .q-item { min-height: 26mm; font-size: 11pt; }
.sheet[data-size="md"] .q-grid[data-layout="v"] .q-item { min-height: 30mm; font-size: 12.5pt; }
.sheet[data-size="lg"] .q-grid[data-layout="v"] .q-item { min-height: 36mm; font-size: 14.5pt; }

.q-grid[data-layout="v"] .q-item[data-op="div"] { min-height: 40mm; }
.sheet[data-size="sm"] .q-grid[data-layout="v"] .q-item[data-op="div"] { min-height: 34mm; }
.sheet[data-size="md"] .q-grid[data-layout="v"] .q-item[data-op="div"] { min-height: 40mm; }
.sheet[data-size="lg"] .q-grid[data-layout="v"] .q-item[data-op="div"] { min-height: 48mm; }

.v-row {
  display: flex;
  justify-content: flex-start;
}

.v-sign,
.v-cell {
  flex: none;
  width: 5.4mm;
  text-align: center;
  line-height: 1.35;
}

.sheet[data-size="sm"] .v-sign,
.sheet[data-size="sm"] .v-cell { width: 4.8mm; }

.sheet[data-size="lg"] .v-sign,
.sheet[data-size="lg"] .v-cell { width: 6.4mm; }

.v-sign {
  text-align: left;
  font-weight: var(--weight-bold);
}

.v-row--rule {
  padding-bottom: 0.8mm;
  border-bottom: 1pt solid var(--ink-900);
}

.v-answer {
  min-height: 8mm;
}

.q-item[data-op="mul"] .v-answer {
  /* 세로 곱셈은 부분곱을 쓸 줄이 더 필요합니다. */
  min-height: 14mm;
}

.v-answer-text {
  display: flex;
  justify-content: flex-start;
  padding-top: 0.8mm;
  font-weight: var(--weight-bold);
}

/* --- 긴 나눗셈 틀 ----------------------------------------------------------
       ─────
   12 ) 144
   가로줄은 나누어지는 수 칸의 위 테두리, 세로줄은 왼쪽 테두리입니다.
   몫은 가로줄 위 빈칸에 씁니다.
   ------------------------------------------------------------------------ */
.q-v--div {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    ". quot"
    "divisor dividend"
    ". work";
  justify-content: start;
  font-variant-numeric: tabular-nums;
}

.ld-quot {
  grid-area: quot;
  min-height: 6mm;
}

.ld-divisor {
  grid-area: divisor;
  align-self: center;
  padding-right: 1.8mm;
  font-weight: var(--weight-bold);
}

.ld-dividend {
  grid-area: dividend;
  min-width: 20mm;
  padding: 1.2mm 2mm 1.2mm 2.5mm;
  border-top: 1pt solid var(--ink-900);
  border-left: 1pt solid var(--ink-900);
  font-weight: var(--weight-bold);
}

.ld-work {
  grid-area: work;
  min-height: 9mm;
}

/* --- 정답지 --------------------------------------------------------------- */
.a-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6mm 5mm;
  font-size: 10pt;
  font-variant-numeric: tabular-nums;
}

.a-item {
  display: flex;
  gap: 1.5mm;
  align-items: baseline;
  break-inside: avoid;
  page-break-inside: avoid;
}

.a-no {
  flex: none;
  min-width: 8mm;
  color: var(--ink-600);
  font-size: 0.9em;
  text-align: right;
}

.a-value {
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

/* --- 좁은 화면 ------------------------------------------------------------ */
@media (max-width: 760px) {
  .range-row {
    flex-wrap: wrap;
  }

  .range-row .range-tilde {
    display: none;
  }

  .range-row > div {
    flex: 1 1 45%;
  }
}