/* ==========================================================================
   sudoku-maker 전용 스타일
   공통 패턴은 css/common.css, 용지 조판은 css/print-sheet.css 에 있습니다.
   여기에는 이 툴의 도메인(격자, 숫자 패드, 메모, 문제 블록)만 둡니다.

   🔴 인라인 style 금지 — 서버 CSP 가 style-src 'self' 라 style="" 은 차단됩니다.
      칸 수·지면 배치 같은 치수는 data-* 속성으로 넘기고 여기서 받습니다.
   🔴 인쇄물에는 --ink-* 만 씁니다. 화면 토큰(--color-*)을 쓰면 다크 모드에서
      밝은 회색이 되어 흰 종이에 거의 안 찍힙니다.
   ========================================================================== */

/* --- 문제 번호 입력줄 ------------------------------------------------------ */
.seed-row {
  display: flex;
  gap: var(--space-2);
}

.seed-row .text-input {
  flex: 1 1 auto;
  min-width: 0;
}

.seed-row .button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  align-self: stretch;
}

/* --- 만드는 중 표시 --------------------------------------------------------
   어려운 난이도는 여러 번 다시 만들 수 있어 진행 상황을 보여 줍니다.
   <progress> 는 표준 요소라 인라인 style 없이도 값을 바꿀 수 있습니다.
   -------------------------------------------------------------------------- */
.build-status {
  margin-top: var(--space-4);
}

.build-progress {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  appearance: none;
  -webkit-appearance: none;
}

.build-progress::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.build-progress::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.build-progress::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

/* --- 화면에서 풀기 --------------------------------------------------------- */
.play-area {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.play-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.play-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.play-pick {
  min-width: 180px;
}

.play-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.play-message {
  min-height: 1.7em;
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.play-message[data-tone="good"] {
  color: var(--color-success);
}

.play-message[data-tone="bad"] {
  color: var(--color-danger);
}

/* --- 격자(화면) -----------------------------------------------------------
   🔴 9×9 는 375px 화면에서 한 칸이 약 37px 이 됩니다. 44px 을 확보하려면 판이
      396px 을 넘어야 해서 화면 밖으로 나갑니다. 격자 칸은 WCAG 2.5.8 의
      최소치(24×24)를 넘기고, 44px 규칙은 숫자 패드·조작 버튼 쪽에서 지킵니다.
   -------------------------------------------------------------------------- */
.sd-play {
  display: grid;
  width: min(100%, 460px);
  margin: var(--space-5) auto 0;
  border: 2px solid var(--color-text);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}

.sd-play[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
.sd-play[data-n="6"] { grid-template-columns: repeat(6, 1fr); }
.sd-play[data-n="9"] { grid-template-columns: repeat(9, 1fr); }

.sd-play .sd-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: inherit;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.sd-play[data-n="9"] .sd-cell { font-size: var(--text-lg); }
.sd-play[data-n="6"] .sd-cell { font-size: var(--text-xl); }
.sd-play[data-n="4"] .sd-cell { font-size: var(--text-2xl); }

.sd-play .sd-cell.sd-last-col { border-right: 0; }
.sd-play .sd-cell.sd-last-row { border-bottom: 0; }
.sd-play .sd-cell.sd-bw { border-right: 2px solid var(--color-text); }
.sd-play .sd-cell.sd-bh { border-bottom: 2px solid var(--color-text); }

/* 처음부터 있던 숫자.
   🔴 disabled 를 쓰지 않습니다. disabled 버튼은 포커스를 받지 못해 화살표 이동 중에
      건너뛰어지고, 스크린 리더 사용자가 힌트 숫자를 읽을 방법이 없어집니다.
      대신 aria-disabled 로 알리고 입력만 막습니다(로빙 tabindex). */
.sd-play .sd-cell[aria-disabled="true"] {
  background: var(--color-bg);
  color: var(--color-text);
  cursor: default;
}

/* 고른 칸과 같은 줄·구역 */
.sd-play .sd-cell.is-peer { background: var(--color-surface-soft); }

.sd-play .sd-cell.is-selected {
  background: var(--color-surface-soft);
  box-shadow: inset 0 0 0 3px var(--color-primary);
}

/* 🔴 색만으로 알리지 않습니다 — 물결 밑줄과 아래 안내 문구를 함께 씁니다. */
.sd-play .sd-cell.is-conflict {
  color: var(--color-danger);
  text-decoration: underline wavy;
  text-underline-offset: 3px;
}

.sd-play .sd-cell:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
  z-index: 1;
}

/* 메모 숫자 */
.sd-notes {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 1px;
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-normal);
  line-height: 1;
}

.sd-notes[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.sd-notes[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

.sd-notes span {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 숫자 패드 -------------------------------------------------------------
   터치 대상 44px 규칙은 여기서 확실히 지킵니다(실제로는 52px).
   -------------------------------------------------------------------------- */
.pad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: var(--space-2);
  width: min(100%, 460px);
  margin: var(--space-4) auto 0;
}

.pad button {
  min-height: 52px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.pad button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pad button[data-done="yes"] {
  color: var(--color-text-muted);
  background: var(--color-bg);
}

.pad-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: min(100%, 460px);
  margin: var(--space-3) auto 0;
}

.pad-btn {
  flex: 1 1 100px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.pad-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
  color: var(--color-primary);
}

/* --- 인쇄 대상 고르기 ------------------------------------------------------ */
.print-scope {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

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

.sheet.is-excluded {
  display: none;
}

@media print {
  /* print-sheet.css 는 `.sheet:first-of-type` 에만 페이지 나눔 예외를 둡니다.
     앞 용지를 감추면 그 예외가 감춰진 용지를 가리켜 빈 페이지가 생기므로
     CherryTools.markPrintFirst 가 붙여 주는 .is-print-first 로 보정합니다. */
  .sheet.is-excluded {
    display: none !important;
  }

  .play-area,
  .print-scope,
  .build-status,
  .preview-toolbar {
    display: none !important;
  }

  /* 🔴 미리보기 "작업대"는 화면용 껍데기입니다. print-sheet.css 는 .container·.tool-shell·
     .result-panel·.sheet-stack 만 초기화하고 .preview-stage 는 건드리지 않아,
     그대로 두면 24px 안쪽 여백과 테두리가 인쇄에 따라 들어갑니다. */
  .preview-stage {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
}

/* --- 용지 위의 문제 블록 ---------------------------------------------------
   🔴 여기서부터는 인쇄물입니다. 색은 --ink-* 만 씁니다.
   -------------------------------------------------------------------------- */
.sheet .sd-page {
  display: grid;
  justify-items: center;
  gap: 10mm;
  margin-top: 5mm;
}

.sheet .sd-page[data-per="2"] { gap: 6mm; }

.sheet .sd-page[data-per="4"] {
  grid-template-columns: 1fr 1fr;
  gap: 8mm 6mm;
}

/* 🔴 A4 세로 예산은 297mm - 위아래 여백 15mm = 267mm 입니다.
   머리말 약 31mm + 꼬리말 약 12mm + 판 위 여백 6mm 를 빼면 문제 영역은 약 218mm.
   처음에 2문제용을 108mm 로 두었더니 한 장이 285mm 가 되어 두 장으로 잘렸습니다.
   아래 값은 실측(브라우저에서 mm 로 환산)으로 맞춘 것입니다. */
.sheet .sd-page[data-per="1"] .sd-block { width: 150mm; }
.sheet .sd-page[data-per="2"] .sd-block { width: 90mm; }

/* 🔴 긴 제목이 세 줄로 늘어나면 2문제 지면이 267mm 를 넘어 두 장으로 잘립니다.
   제목은 최대 두 줄까지만 차지하게 묶고, 위 폭은 두 줄일 때도 들어가도록 잡았습니다.
   (제목 입력은 60자 제한이고, 180mm 폭 15pt 한글은 한 줄에 약 34자 들어갑니다) */
.sheet .sheet-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sheet .sd-page[data-per="4"] .sd-block { width: 85mm; }

.sheet .sd-block {
  break-inside: avoid;
  page-break-inside: avoid;
}

.sheet .sd-block__head {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  margin-bottom: 1.5mm;
  color: var(--ink-700);
  font-size: 8.5pt;
  line-height: 1.2;
}

.sheet .sd-block__head b {
  font-weight: 700;
  color: var(--ink-900);
}

.sheet .sd-grid {
  display: grid;
  width: 100%;
  border: 1.2pt solid var(--ink-900);
}

.sheet .sd-grid[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
.sheet .sd-grid[data-n="6"] { grid-template-columns: repeat(6, 1fr); }
.sheet .sd-grid[data-n="9"] { grid-template-columns: repeat(9, 1fr); }

.sheet .sd-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-right: 0.4pt solid var(--ink-400);
  border-bottom: 0.4pt solid var(--ink-400);
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1;
}

.sheet .sd-cell.sd-last-col { border-right: 0; }
.sheet .sd-cell.sd-last-row { border-bottom: 0; }
.sheet .sd-cell.sd-bw { border-right: 1.2pt solid var(--ink-900); }
.sheet .sd-cell.sd-bh { border-bottom: 1.2pt solid var(--ink-900); }

/* 정답지에서 "원래 힌트"와 "채워 넣은 답"을 눈으로 구분합니다. */
.sheet .sd-cell.sd-fill {
  color: var(--ink-500);
  font-weight: 400;
}

.sheet .sd-page[data-per="1"] .sd-cell { font-size: 17pt; }
.sheet .sd-page[data-per="2"] .sd-cell { font-size: 12.5pt; }
.sheet .sd-page[data-per="4"] .sd-cell { font-size: 9.5pt; }

.sheet .sheet-note {
  margin: 2mm 0 0;
  color: var(--ink-500);
  font-size: 9pt;
}

/* --- 모바일 --------------------------------------------------------------- */
@media (max-width: 760px) {
  /* 🔴 375px 에서 9×9 한 칸이 29px 밖에 안 나왔습니다(.tool-shell 20px + .play-area 12px
     양쪽 = 64px 손해). 풀이 영역을 tool-shell 안쪽 여백 밖으로 빼내 칸을 37px 로 넓힙니다.
     clamp() 값은 common.css 의 .tool-shell padding 과 같은 식이어야 어긋나지 않습니다. */
  .play-area {
    margin-left: calc(-1 * clamp(20px, 4vw, 40px));
    margin-right: calc(-1 * clamp(20px, 4vw, 40px));
    padding: var(--space-4) var(--space-2);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .sd-play {
    width: auto;
    margin: var(--space-4) calc(-1 * var(--space-2)) 0;
  }

  .play-pick {
    width: 100%;
  }

  .play-stats {
    gap: var(--space-4);
  }

  .pad {
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  }
}

/* --- 움직임 줄이기 --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sd-play .sd-cell,
  .pad button {
    transition: none;
  }
}