/* ==========================================================================
   phonics-cards 전용 스타일
   공통 패턴은 css/common.css, 용지 조판은 css/print-sheet.css 에 있습니다.
   여기에는 이 도구의 도메인(규칙 고르기, 낱말 카드, 문항 행)만 둡니다.
   색·간격은 common.css 변수만 씁니다.

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

/* --- 규칙 고르기 --------------------------------------------------------- */
.rule-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.rule-presets .preset-label {
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

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

.rule-cat {
  margin-bottom: var(--space-4);
}

.rule-cat:last-child {
  margin-bottom: 0;
}

.rule-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.rule-cat__title {
  color: var(--color-text);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.rule-cat__toggle {
  min-height: 44px; /* STYLE.md: 터치 대상 최소 44px */
  padding: var(--space-1) var(--space-3);
  font-size: 13px;
}

.rule-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-2);
}

.rule-chip {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

/* 체크 상태는 체크박스 자체로도 보입니다(색만으로 구분하지 않음). */
.rule-chip:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
  color: var(--color-primary);
}

.rule-chip:has(input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.rule-chip input {
  width: 18px;
  height: 18px;
  flex: none;
}

.rule-chip__body {
  display: block;
  min-width: 0;
}

.rule-chip__name {
  display: block;
  overflow-wrap: anywhere;
}

.rule-chip__sound {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.rule-count {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

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

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

.result-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

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

/* --- 용지 머리말 보강 -----------------------------------------------------
   🔴 머리말 높이는 phonics.js 의 CHROME_MM 에 그대로 반영돼 있습니다.
      한 줄이라도 두 줄로 늘어나면 한 장에 담기는 문항 수가 어긋나 마지막 줄이
      다음 장으로 밀립니다. 그래서 제목·정보·안내문·보기를 모두 한 줄로 묶습니다.
   -------------------------------------------------------------------------- */
.sheet-title,
.sheet-guide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-meta {
  overflow: hidden;
  flex-wrap: nowrap;
}

/* flex 기본값(shrink:1)이면 칸이 줄어들며 글자끼리 겹칩니다.
   줄이지 말고 넘치는 것만 잘라 냅니다. */
.sheet-meta span {
  flex: none;
}

.sheet-guide {
  margin: 3mm 0 0;
  padding: 1.5mm 3mm;
  border: 0.6pt solid var(--ink-900);
  border-radius: 1.5mm;
  font-size: 10pt;
  font-weight: var(--weight-bold);
}

.sheet-bank {
  display: flex;
  overflow: hidden;
  flex-wrap: nowrap;
  gap: 1.5mm 4mm;
  margin: 2.5mm 0 0;
  padding: 1.5mm 3mm;
  border: 0.5pt dashed var(--ink-500);
  font-size: 10pt;
  white-space: nowrap;
}

.sheet-bank b {
  font-weight: var(--weight-bold);
}

.sheet-bank span {
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

/* --- 규칙 글자 강조 -------------------------------------------------------
   색이 아니라 굵기와 밑줄로 구분합니다. 흑백 인쇄에서도 보입니다. */
.pc-mark {
  border-bottom: 0.8pt solid var(--ink-900);
  font-weight: var(--weight-bold);
}

/* --- ① 낱말 카드 --------------------------------------------------------- */
.card-grid {
  display: grid;
  border-top: 0.5pt dashed var(--ink-400);
  border-left: 0.5pt dashed var(--ink-400);
}

/* 카드 높이는 phonics.js 의 capacity("card").rowMm 과 같아야 합니다.
   본문 219mm ÷ 3줄 = 73mm, ÷ 4줄 = 54mm */
.card-grid[data-per="6"] {
  grid-auto-rows: 73mm;
  grid-template-columns: repeat(2, 1fr);
}

.card-grid[data-per="8"] {
  grid-auto-rows: 54mm;
  grid-template-columns: repeat(2, 1fr);
}

.card-grid[data-per="12"] {
  grid-auto-rows: 54mm;
  grid-template-columns: repeat(3, 1fr);
}

.pc-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3mm;
  border-right: 0.5pt dashed var(--ink-400);
  border-bottom: 0.5pt dashed var(--ink-400);
  gap: 2mm;
  text-align: center;
}

.pc-card__word {
  overflow-wrap: anywhere;
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.pc-card__ko {
  color: var(--ink-700);
  line-height: 1.2;
}

.pc-card__rule {
  padding: 0.3mm 1.6mm;
  border: 0.6pt solid var(--ink-500);
  border-radius: 1mm;
  color: var(--ink-700);
  font-size: 8pt;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.sheet[data-size="sm"] .card-grid[data-per="6"] .pc-card__word { font-size: 22pt; }
.sheet[data-size="md"] .card-grid[data-per="6"] .pc-card__word { font-size: 30pt; }
.sheet[data-size="lg"] .card-grid[data-per="6"] .pc-card__word { font-size: 40pt; }
.sheet[data-size="sm"] .card-grid[data-per="8"] .pc-card__word { font-size: 20pt; }
.sheet[data-size="md"] .card-grid[data-per="8"] .pc-card__word { font-size: 26pt; }
.sheet[data-size="lg"] .card-grid[data-per="8"] .pc-card__word { font-size: 34pt; }
.sheet[data-size="sm"] .card-grid[data-per="12"] .pc-card__word { font-size: 15pt; }
.sheet[data-size="md"] .card-grid[data-per="12"] .pc-card__word { font-size: 19pt; }
.sheet[data-size="lg"] .card-grid[data-per="12"] .pc-card__word { font-size: 24pt; }

.sheet[data-size="sm"] .pc-card__ko { font-size: 10pt; }
.sheet[data-size="md"] .pc-card__ko { font-size: 11.5pt; }
.sheet[data-size="lg"] .pc-card__ko { font-size: 13pt; }
.card-grid[data-per="12"] .pc-card__ko { font-size: 9.5pt; }

/* --- 문항 공통 ----------------------------------------------------------- */
.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-row {
  display: flex;
  align-items: baseline;
  gap: 2mm;
}

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

.q-ko {
  color: var(--ink-700);
  font-size: 0.78em;
  overflow-wrap: anywhere;
}

/* --- ② 빈칸 채우기 ------------------------------------------------------- */
/* 줄 높이는 phonics.js 의 ROW_MM.blank 와 같아야 합니다. 테스트가 대조합니다. */
.sheet[data-size="sm"] .row--blank { min-height: 11mm; font-size: 11pt; }
.sheet[data-size="md"] .row--blank { min-height: 13mm; font-size: 13pt; }
.sheet[data-size="lg"] .row--blank { min-height: 16mm; font-size: 16pt; }

.row--blank {
  border-bottom: 0.4pt dotted var(--ink-300);
}

/* 뜻이 길어도 줄이 접히지 않게 합니다. 접히면 한 장에 담기는 문항 수가 어긋납니다. */
.row--blank .q-ko {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bl-word {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 0.6mm;
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
}

.bl-cell {
  display: inline-block;
  min-width: 6mm;
  height: 1em;
  border: 0.7pt solid var(--ink-900);
  border-radius: 0.8mm;
  vertical-align: baseline;
}

.bl-answer {
  color: var(--ink-900);
}

/* --- ③ 같은 소리 찾기 ---------------------------------------------------- */
/* 줄 높이는 phonics.js 의 ROW_MM.circle 과 같아야 합니다.
   보기가 길어 두 줄로 접혀도 이 높이 안에 들어갑니다. */
.sheet[data-size="sm"] .row--circle { min-height: 18mm; font-size: 11pt; }
.sheet[data-size="md"] .row--circle { min-height: 21mm; font-size: 13pt; }
.sheet[data-size="lg"] .row--circle { min-height: 26mm; font-size: 16pt; }

.row--circle {
  align-items: center;
  border-bottom: 0.4pt dotted var(--ink-300);
}

.circle-base {
  display: inline-flex;
  min-width: 24mm;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 1.5mm 3mm;
  border: 0.8pt solid var(--ink-900);
  border-radius: 1.5mm;
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.circle-arrow {
  flex: none;
  color: var(--ink-600);
  font-size: 0.8em;
}

.circle-options {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 2mm 4mm;
}

.circle-option {
  display: inline-flex;
  min-width: 22mm;
  align-items: center;
  justify-content: center;
  padding: 1.2mm 2.5mm;
  border: 0.5pt solid transparent;
  border-radius: 6mm;
  overflow-wrap: anywhere;
}

.circle-option--answer {
  border-color: var(--ink-900);
  border-width: 1.2pt;
  font-weight: var(--weight-bold);
}

/* --- ④ 읽고 쓰기 연습 ----------------------------------------------------
   줄 높이는 phonics.js 의 ROW_MM.write 와 같아야 합니다.
   보기 낱말 한 줄 + 쓰기 줄 두 개 + 사이 여백을 모두 더한 값보다 커야 합니다. */
.sheet[data-size="sm"] .row--write { min-height: 26mm; }
.sheet[data-size="md"] .row--write { min-height: 32mm; }
.sheet[data-size="lg"] .row--write { min-height: 41mm; }

.row--write {
  display: block;
  border-bottom: 0.4pt dotted var(--ink-300);
}

.write-top {
  display: flex;
  align-items: baseline;
  gap: 3mm;
}

.write-model {
  overflow-wrap: anywhere;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.sheet[data-size="sm"] .write-model { font-size: 18pt; }
.sheet[data-size="md"] .write-model { font-size: 22pt; }
.sheet[data-size="lg"] .write-model { font-size: 28pt; }

.sheet[data-size="sm"] .write-top .q-ko { font-size: 10pt; }
.sheet[data-size="md"] .write-top .q-ko { font-size: 11pt; }
.sheet[data-size="lg"] .write-top .q-ko { font-size: 13pt; }

.write-lines {
  display: grid;
  gap: 2mm;
  margin-top: 2mm;
  padding-left: 9mm;
}

.write-line {
  display: block;
  border-bottom: 0.7pt solid var(--ink-500);
}

.sheet[data-size="sm"] .write-line { height: 7mm; }
.sheet[data-size="md"] .write-line { height: 9mm; }
.sheet[data-size="lg"] .write-line { height: 12mm; }

/* --- 정답지 -------------------------------------------------------------- */
.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;
}

/* --- 좁은 화면 ----------------------------------------------------------- */
@media (max-width: 760px) {
  .rule-chips {
    grid-template-columns: 1fr;
  }

  .rule-cat__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .result-tools .button {
    width: 100%;
  }
}