/* ==========================================================================
   writing-sheets 전용 스타일
   공통 패턴은 css/common.css, 용지 조판은 css/print-sheet.css 에 있습니다.
   여기에는 이 툴의 도메인(4선지, 견본 글자, 미리보기)만 둡니다.
   색·간격은 common.css 변수만 씁니다. 용지 안쪽은 인쇄용이라 무채색을 직접 씁니다.
   ========================================================================== */

/* --- 입력 영역 ----------------------------------------------------------- */
.paste-area {
  min-height: 140px;
  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;
}

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

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

/* --- 4선지 ---------------------------------------------------------------
   🔴 아래 치수는 sheets.js 의 LINE_MM · GAP_MM · GROUP_GAP_MM 과 같아야 합니다.
      한쪽만 고치면 미리보기는 멀쩡한데 인쇄에서 마지막 줄이 다음 장으로 넘어갑니다.
   ---------------------------------------------------------------------- */
.sheet[data-size="sm"] { --line-h: 11mm; --line-gap: 2mm; }
.sheet[data-size="md"] { --line-h: 15mm; --line-gap: 2.5mm; }
.sheet[data-size="lg"] { --line-h: 20mm; --line-gap: 3mm; }

/* 🔴 아래 여섯 색은 흐트러진 것이 아니라 **사용자가 고르는 안내선 농도**입니다.
   진하게/보통/연하게 × (기준선, 강조선) 조합이라 인쇄용 먹 스케일(--ink-*)로
   통일하면 기능이 사라집니다. 통일 대상이 아닙니다. */
.sheet[data-ink="dark"] { --guide-ink: #6E6E6E; --guide-ink-strong: #4F4F4F; }
.sheet[data-ink="normal"] { --guide-ink: #9C9C9C; --guide-ink-strong: #7A7A7A; }
.sheet[data-ink="light"] { --guide-ink: #C9C9C9; --guide-ink-strong: #ADADAD; }

.write-group + .write-group {
  margin-top: 4mm; /* sheets.js GROUP_GAP_MM */
}

/* 한 칸 = 윗선 · 중간 점선 · 기준선 · 아래선.
   위선과 아래선은 요소의 테두리, 가운데 두 선은 가상 요소로 그립니다. */
.write-line {
  position: relative;
  height: var(--line-h);
  margin-bottom: var(--line-gap);
  border-top: 0.5pt solid #A6ADBB;
  border-bottom: 0.5pt solid #A6ADBB;
  overflow: hidden;
}

.write-line::before,
.write-line::after {
  position: absolute;
  right: 0;
  left: 0;
  content: "";
}

/* 중간선(점선) — 소문자 x-높이의 윗변 */
.write-line::before {
  top: 33.333%;
  border-top: 0.5pt dashed #C2C8D2;
}

/* 기준선 — 글자가 앉는 선이라 가장 진하게 */
.write-line::after {
  top: 66.667%;
  border-top: 0.9pt solid #4A5160;
}

/* 밑줄만 쓰는 모드 (고학년·문장 연습용) */
.sheet[data-rule="base"] .write-line {
  border-top: 0;
  border-bottom: 0;
}

.sheet[data-rule="base"] .write-line::before {
  display: none;
}

/* --- 견본 글자 -----------------------------------------------------------
   견본 글자는 기준선(칸 높이의 2/3 지점) 위에 정확히 앉아야 합니다.

   🔴 line-height 로 기준선을 계산하지 않습니다. 글꼴마다 ascent/descent 가 달라
      (Segoe UI 와 Arial 이 0.06em 차이) 같은 파일이 PC 마다 다른 자리에 찍힙니다.
      대신 글자 앞에 높이가 기준선까지인 빈 inline-block(앵커)을 하나 두고
      line-height 를 0 으로 눌러, 줄상자의 기준선을 앵커의 아래 모서리에 고정합니다.
      내용이 없는 inline-block 의 baseline 은 아래쪽 마진 모서리라서
      글꼴이 무엇이든 기준선 위치가 같습니다.
   🔴 아래 배율은 sheets.js 의 BASELINE_RATIO(2/3) · FONT_RATIO 와 같아야 합니다.
        cap 0.92   x 0.64   han 0.55
   ---------------------------------------------------------------------- */
.write-model {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  /* 글자 폭 어림(sheets.js charEm)을 라틴 글꼴 기준으로 잡았으므로 먼저 둡니다. */
  font-family: "Segoe UI", Arial, Helvetica, "Malgun Gothic", sans-serif;
  font-weight: var(--weight-normal);
  line-height: 0;
  color: var(--guide-ink);
  white-space: pre;
}

.write-model__anchor {
  display: inline-block;
  width: 0;
  height: calc(var(--line-h) * 0.6667); /* sheets.js BASELINE_RATIO */
  vertical-align: baseline;
}

/* 4선지에서는 윗선을 테두리로 그려 칸 안쪽이 그만큼 내려갑니다.
   앵커에서 같은 두께를 빼야 견본이 기준선 위에 정확히 앉습니다. */
.sheet[data-rule="four"] .write-model__anchor {
  height: calc(var(--line-h) * 0.6667 - 0.5pt);
}

.write-group[data-scale="cap"] .write-model {
  font-size: calc(var(--line-h) * 0.92);
}

.write-group[data-scale="x"] .write-model {
  font-size: calc(var(--line-h) * 0.64);
}

.write-group[data-scale="han"] .write-model {
  font-size: calc(var(--line-h) * 0.55);
}

/* 줄 앞에 하나만 두는 견본은 보고 따라 쓰는 기준이라 한 단계 진하게,
   줄 전체를 덮는 견본은 그 위에 덧쓰는 것이라 연하게 둡니다. */
.write-line[data-kind="sample"] .write-model {
  color: var(--guide-ink-strong);
}

/* --- 인쇄 ----------------------------------------------------------------
   페이지 나눔은 sheets.js 가 .sheet 단위로 확정하지만, 브라우저가 한 장을
   더 쪼개려 할 때를 대비해 4선 한 칸은 잘리지 않게 막아 둡니다.
   ---------------------------------------------------------------------- */
@media print {
  .write-line {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}