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

   🔴 인라인 style 금지 — 서버 CSP 가 style-src 'self' 라 style="" 은 차단됩니다.
      치수·상태는 data-* 속성으로 넘기고 여기서 받습니다.
   🔴 아래 mm 값은 fractions.js 의 ROW_MM / TAG_EXTRA_MM / COMMON_EXTRA_MM 과
      같아야 합니다. 한쪽만 고치면 "한 장에 몇 문항" 안내가 어긋납니다.
   ========================================================================== */

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

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

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

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

.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);
}

/* --- 문항 칸 --------------------------------------------------------------- */
.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-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

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

.q-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 0.8mm;
}

.q-tag {
  color: var(--ink-600);
  font-size: 0.66em;
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.q-expr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1mm 0.6mm;
  font-variant-numeric: tabular-nums;
}

/* 한 줄 높이 — fractions.js 의 ROW_MM(17/20/25) + 유형 이름 4mm + 통분 4mm */
.sheet[data-size="sm"] .q-item { min-height: 17mm; font-size: 10.5pt; }
.sheet[data-size="md"] .q-item { min-height: 20mm; font-size: 12pt; }
.sheet[data-size="lg"] .q-item { min-height: 25mm; font-size: 14pt; }

.sheet[data-size="sm"] .q-item[data-tagged="1"] { min-height: 21mm; }
.sheet[data-size="md"] .q-item[data-tagged="1"] { min-height: 24mm; }
.sheet[data-size="lg"] .q-item[data-tagged="1"] { min-height: 29mm; }

.sheet[data-size="sm"] .q-item[data-type="common"] { min-height: 21mm; }
.sheet[data-size="md"] .q-item[data-type="common"] { min-height: 24mm; }
.sheet[data-size="lg"] .q-item[data-type="common"] { min-height: 29mm; }

.sheet[data-size="sm"] .q-item[data-type="common"][data-tagged="1"] { min-height: 25mm; }
.sheet[data-size="md"] .q-item[data-type="common"][data-tagged="1"] { min-height: 28mm; }
.sheet[data-size="lg"] .q-item[data-type="common"][data-tagged="1"] { min-height: 33mm; }

/* --- 분수 표기 -------------------------------------------------------------
   분자 위, 가로선, 분모 아래. 가로선은 분자 칸의 아래 테두리라 글꼴이 기기마다
   달라도 숫자 폭에 딱 맞습니다.
   ------------------------------------------------------------------------ */
.num {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.num__sign {
  padding-right: 0.4mm;
  font-weight: var(--weight-bold);
}

.num__whole {
  padding-right: 1mm;
  font-weight: var(--weight-bold);
}

.num--plain {
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  font-weight: var(--weight-bold);
}

.frac__num {
  padding: 0 1.1mm 0.4mm;
  border-bottom: 1pt solid var(--ink-900);
}

.frac__den {
  padding: 0.4mm 1.1mm 0;
}

.q-sym {
  flex: none;
  padding: 0 0.8mm;
  font-weight: var(--weight-bold);
}

.q-txt {
  flex: none;
  font-size: 0.8em;
}

/* 크기 비교의 ○ — 여기에 >, <, = 를 써넣습니다. */
.q-circle {
  flex: none;
  width: 6.5mm;
  height: 6.5mm;
  margin: 0 1.2mm;
  border: 0.8pt solid var(--ink-700);
  border-radius: 50%;
}

/* 답 쓰는 빈칸 */
.q-blank {
  flex: 1 1 auto;
  align-self: center;
  /* 단을 1단으로 두면 남은 폭을 전부 먹어 선이 지나치게 길어집니다. 상한을 둡니다. */
  min-width: 15mm;
  max-width: 32mm;
  height: 9mm;
  margin: 0 0.8mm;
  border-bottom: 0.6pt solid var(--ink-500);
}

.q-blank[data-w="sm"] {
  flex: 0 0 auto;
  width: 13mm;
  min-width: 0;
}

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

.a-item {
  display: flex;
  align-items: center;
  gap: 1.5mm;
  min-height: 9mm;
  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 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.6mm;
  overflow-wrap: anywhere;
}

.a-value .q-sym {
  padding: 0 0.4mm;
}

/* --- 좁은 화면 ------------------------------------------------------------ */
@media (max-width: 760px) {
  .sample-row .button {
    flex: 1 1 45%;
  }
}