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

/* --- 입력 영역 ----------------------------------------------------------- */
.paste-area {
  min-height: 180px;
  font-family: var(--font-sans);
  line-height: 1.6;
  resize: vertical;
}

.sample-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

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

/* --- 검수 결과 ----------------------------------------------------------- */
.parse-report {
  margin-top: var(--space-4);
}

.parse-report summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: var(--weight-bold);
  font-size: 14px;
  color: var(--color-text);
}

.issue-list {
  margin: var(--space-3) 0 0;
  padding-left: 1.2em;
  color: var(--color-text-muted);
  font-size: 14px;
}

.issue-list li {
  margin-bottom: var(--space-1);
}

.issue-list code {
  color: var(--color-text);
}

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

/* 좁은 화면에서는 210mm 용지를 화면 폭에 맞춰 줄여 보여 줍니다.
   transform 이라 인쇄 결과에는 영향이 없습니다. */

.sheet-label {
  margin: 0 0 var(--space-2);
  font-size: 14px;
  font-weight: var(--weight-bold);
  /* 🔴 인쇄물은 --ink-* 만 씁니다. 화면 토큰(--color-*)을 쓰면 다크 모드에서
     밝은 회색이 되어 흰 종이에 1.84:1 로 찍힙니다(2026-08-19 확인). */
  color: var(--ink-500);
}

/* --- 문항 행 ------------------------------------------------------------- */
.q-cols {
  display: grid;
  gap: 8mm;
}

.q-cols[data-columns="2"] {
  grid-template-columns: 1fr 1fr;
}

.q-cols[data-columns="1"] {
  grid-template-columns: 1fr;
}

.q-col {
  display: block;
}

.q-row {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  /* 높이는 wordtest.js 의 ROW_MM 과 같아야 합니다. 테스트가 대조합니다. */
  min-height: 11mm;
  border-bottom: 0.4pt dotted var(--ink-300);
}

.sheet[data-size="sm"] .q-row { min-height: 9mm;  font-size: 10pt; }
.sheet[data-size="md"] .q-row { min-height: 11mm; font-size: 11pt; }
.sheet[data-size="lg"] .q-row { min-height: 14mm; font-size: 13pt; }

.sheet[data-spacing="tight"] .q-row { margin-bottom: 0; }
.sheet[data-spacing="normal"] .q-row { margin-bottom: 2mm; }
.sheet[data-spacing="wide"] .q-row { margin-bottom: 5mm; }

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

.q-prompt {
  flex: none;
  max-width: 46%;
  overflow-wrap: anywhere;
  font-weight: var(--weight-bold);
}

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

/* --- 정답지 -------------------------------------------------------------- */
.sheet--answer .q-answer-line {
  border-bottom: 0;
}

.sheet--answer .q-answer {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  color: var(--ink-900);
}

.answer-badge {
  display: inline-block;
  margin-left: 3mm;
  padding: 0.5mm 2mm;
  border: 0.8pt solid var(--ink-900);
  border-radius: 2mm;
  font-size: 9pt;
  font-weight: var(--weight-bold);
  vertical-align: middle;
}

/* --- 인쇄 대상 선택 ------------------------------------------------------- */
.print-scope {
  margin-top: var(--space-5);
}

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