/* ==========================================================================
   word-search 전용 스타일
   공통 패턴은 css/common.css, 용지 조판은 css/print-sheet.css 에 있습니다.
   여기에는 이 툴의 도메인(격자 그림, 풀이판, 용지 위 배치)만 둡니다.

   🔴 인라인 style 금지 — 서버 CSP 가 style-src 'self' 라 style="" 은 차단됩니다.
      치수·상태는 data-* 속성으로 받고, SVG 의 x·y·rx·transform 은 표현 속성이라 괜찮습니다.
   🔴 인쇄물에는 --color-* 를 쓰지 않습니다. 다크 모드에서 밝은 회색이 되어
      흰 종이에 거의 찍히지 않습니다. 용지 안은 --ink-* 만 씁니다.
   ========================================================================== */

/* --- 격자 그림 색 (이 툴 전용 데이터 색) --------------------------------------
   STYLE.md: 데이터 색은 UI 토큰에서 빌려 쓰지 않습니다. 접근성 때문에 토큰을
   바꿀 때 "내가 찾은 낱말"과 "정답"의 구분이 함께 흔들리기 때문입니다.
   흰 바탕(.ws-board) 대비: 바깥 테두리 3.58 · 찾음 5.23 · 정답 5.44 · 고르는 중 5.50
   — 뜻을 지닌 표시는 모두 SC 1.4.11 의 비텍스트 3:1 을 넘습니다.
   --ws-rule(칸 사이 얇은 선)만 1.29 로 낮은데, 이것은 글자를 줄 맞춰 보이게 하는
   장식선입니다. 내용은 글자(#172033, 대비 15.6)가 담고 격자의 경계는 바깥
   테두리가 표시하므로 이 선이 안 보여도 잃는 정보가 없습니다.
   🔴 색만으로 구분하지 않습니다. 정답은 파선, 찾은 낱말은 실선이고,
      낱말 목록에도 ✓ 와 취소선이 함께 붙습니다.
   -------------------------------------------------------------------------- */
.ws-board {
  --ws-frame: #7A88A1;
  --ws-rule: #DCE3EE;
  --ws-letter: #172033;
  --ws-found: #1D6FB8;
  --ws-answer: #C0392B;
  --ws-draft: #5A6A82;
}

/* --- 주제 세트 고르기 ------------------------------------------------------- */
.ws-pick {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 561px) {
  .ws-pick {
    align-items: end;
    grid-template-columns: 1fr 1fr auto;
  }
}

.ws-pick .button {
  min-height: 56px;   /* 옆에 선 select 와 밑선을 맞춥니다 */
}

.ws-textarea {
  min-height: 168px;
  resize: vertical;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

/* --- 화면에서 풀기 --------------------------------------------------------- */
.ws-play {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.ws-play__head {
  display: grid;
  gap: var(--space-1);
}

.ws-play__title {
  margin: 0;
  font-size: var(--text-lg);
}

.ws-play__head .field-hint {
  margin: 0;
}

/* 종이처럼 늘 흰 바탕입니다. 다크 모드에서도 뒤집지 않습니다 —
   연필로 푸는 종이를 흉내 낸 그림이라 반전되면 오히려 읽기 어렵습니다. */
.ws-board {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color-scheme: light;
  /* 🔴 손가락으로 낱말을 고르는 동안 페이지가 같이 스크롤되면 안 됩니다. */
  touch-action: none;
}

.ws-svg {
  display: block;
  width: 100%;
  height: auto;
}

.ws-svg--board {
  touch-action: none;
  cursor: crosshair;
}

/* --- 격자 그림 ------------------------------------------------------------- */
.ws-frame {
  fill: none;
  stroke: var(--ws-frame);
  stroke-width: 0.5;
}

.ws-rule {
  fill: none;
  stroke: var(--ws-rule);
  stroke-width: 0.25;
}

.ws-letters {
  fill: var(--ws-letter);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  letter-spacing: 0;
}

.ws-mark {
  fill: none;
  stroke-width: 0.9;
}

.ws-mark--found { stroke: var(--ws-found); }
.ws-mark--answer { stroke: var(--ws-answer); stroke-dasharray: 2.6 1.8; }
.ws-mark--draft { stroke: var(--ws-draft); stroke-dasharray: 1.4 1.4; }

.ws-answer[data-shown="no"],
.ws-mark--draft[data-shown="no"] {
  display: none;
}

/* --- 진행 상황과 낱말 목록 --------------------------------------------------- */
.ws-play__meters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin: 0;
}

.ws-play__meters .stat {
  margin: 0;
  text-align: center;
}

.ws-play__message {
  min-height: 1.7em;
  margin: 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ws-chips {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-chip {
  display: flex;
  min-height: 44px;
  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);
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
  word-break: break-all;
}

.ws-chip__mark {
  flex: none;
  width: 1.2em;
  color: var(--color-text-muted);
  text-align: center;
}

.ws-chip[data-found="yes"] {
  border-color: var(--color-success);
  background: var(--color-surface-soft);
}

.ws-chip[data-found="yes"] .ws-chip__mark {
  color: var(--color-success);
}

.ws-chip[data-found="yes"] .ws-chip__word {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* --- 인쇄 미리보기 --------------------------------------------------------- */
/* 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;
}

/* --- 용지 안 ---------------------------------------------------------------
   여기서부터는 종이입니다. --ink-* 만 씁니다(print-sheet.css 가 정의합니다).
   -------------------------------------------------------------------------- */
.ws-guide {
  margin: 0 0 3mm;
  font-size: 10pt;
  color: var(--ink-700);
}

/* 격자 폭은 칸 수에 따라 정합니다. 폭은 110mm ~ 156mm 사이에서만 움직입니다.
   (인라인 style 을 쓸 수 없어 칸 수마다 규칙을 둡니다. 10~23칸 = 확대 폴백 포함)
   🔴 상한이 폭이 아니라 **높이** 때문에 정해져 있습니다. 격자는 정사각이라
      폭이 곧 높이입니다. 최악의 경우(20칸 · 낱말 30개 · 배치 실패 안내까지)
      머리말 24 + 안내 8 + 격자 156+3 + 목록 제목 7 + 목록 8줄 45 + 안내 6 +
      꼬리말 12 = 261mm 로, 본문 높이 267mm 안에 들어옵니다.
      폭을 더 키우면 문제지가 두 장으로 갈라집니다. 실측 2026-08-25. */
.ws-paper {
  margin: 0 auto 3mm;
}

.ws-paper[data-size="10"],
.ws-paper[data-size="11"],
.ws-paper[data-size="12"],
.ws-paper[data-size="13"] { width: 110mm; }
.ws-paper[data-size="14"] { width: 112mm; }
.ws-paper[data-size="15"] { width: 120mm; }
.ws-paper[data-size="16"] { width: 128mm; }
.ws-paper[data-size="17"] { width: 136mm; }
.ws-paper[data-size="18"] { width: 144mm; }
.ws-paper[data-size="19"] { width: 150mm; }
.ws-paper[data-size="20"] { width: 156mm; }
/* 21~23칸은 사용자가 고를 수 없는 자동 확대 결과입니다. 이때는 낱말이 30개
   가까이 되고 "자리를 찾지 못한 낱말" 안내까지 붙어 가장 높아지므로,
   폭을 오히려 줄여야 한 장에 들어갑니다(실측: 150mm 일 때 268mm 로 1mm 넘침). */
.ws-paper[data-size="21"],
.ws-paper[data-size="22"],
.ws-paper[data-size="23"] { width: 142mm; }

.sheet .ws-frame { stroke: var(--ink-900); stroke-width: 0.4; }
.sheet .ws-rule { stroke: var(--ink-300); stroke-width: 0.2; }
.sheet .ws-letters { fill: var(--ink-900); font-family: "Malgun Gothic", "Segoe UI", sans-serif; }
.sheet .ws-mark--answer { stroke: var(--ink-700); stroke-dasharray: 2.6 1.8; }

.ws-list__title {
  margin: 0 0 1.5mm;
  font-size: 10.5pt;
  font-weight: 700;   /* 인쇄 글꼴(맑은 고딕)에 Bold 위 단계가 없습니다 */
  color: var(--ink-900);
}

.ws-list {
  display: grid;
  gap: 1mm 4mm;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 9.5pt;
  letter-spacing: 0.04em;
  color: var(--ink-900);
}

.ws-list[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.ws-list[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.ws-list li {
  padding-left: 4mm;
  text-indent: -4mm;
  word-break: break-all;
}

.ws-list li::before {
  content: "□ ";
  color: var(--ink-400);
}

.ws-failed {
  margin: 2mm 0 0;
  font-size: 8.5pt;
  color: var(--ink-500);
}

/* --- 모바일 ---------------------------------------------------------------- */
@media (max-width: 760px) {
  .ws-chips {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }

  .ws-play__meters {
    gap: var(--space-3);
  }
}