/* ============================================================
   십자말풀이 전용 스타일
   - 신문 지면 모티프: 굵은 검은 테두리, 각진 칸, 큰 글씨
   - 음절 타일이 주 입력이라 손가락으로 눌리는 크기를 최우선으로
   ============================================================ */

.cw-wrap {
  --cw-line: #2b2620;          /* 격자 선(먹색) */
  --cw-block: #2b2620;         /* 검은 칸 */
  --cw-cell: #fffdf8;          /* 빈 칸 종이색 */
  --cw-cell-on: #f6e2c9;       /* 지금 쓰는 칸 */
  --cw-slot-on: #fdf3e4;       /* 지금 쓰는 낱말 줄 */
  --cw-wrong: #d9534f;
  --cw-fixed: #8c6a2f;         /* 힌트로 열어 준 칸 글씨 */
}
/* 다크: 시스템 설정을 따르되 토글로 명시 지정하면 그것이 우선(common.css와 같은 방식) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cw-wrap {
    /* 다크에서 빈 칸과 검은 칸이 비슷해 보이면 어디에 글자를 넣는지 알 수 없다.
       빈 칸은 바탕보다 밝게, 검은 칸은 거의 새까맣게 벌려 둔다. */
    --cw-line: #8a7f6c;
    --cw-block: #0a0806;
    --cw-cell: #383025;
    --cw-cell-on: #6b5024;
    --cw-slot-on: #4c3d26;
    --cw-fixed: #f0d18e;
  }
}
:root[data-theme="dark"] .cw-wrap {
  --cw-line: #6b6152;
  --cw-block: #100d09;
  --cw-cell: #221d16;
  --cw-cell-on: #4a3a22;
  --cw-slot-on: #2f2618;
  --cw-fixed: #d8b877;
}

/* ---- 고르기 줄 ---- */
.cw-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.cw-chips { display: flex; gap: 6px; }
.cw-chip {
  font: inherit;
  font-size: 15px;
  padding: 8px 16px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 3px;
  cursor: pointer;
  min-height: 42px;
}
.cw-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.cw-nav { display: flex; align-items: center; gap: 6px; }
.cw-nav-btn {
  font: inherit;
  min-width: 44px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 3px;
  cursor: pointer;
}
.cw-nav-btn:hover { border-color: var(--color-primary); }
.cw-count {
  font-variant-numeric: tabular-nums;
  min-width: 86px;
  text-align: center;
  font-size: 15px;
  color: var(--color-text-sub);
}
.cw-count b { color: var(--color-text); font-size: 18px; }
.cw-lv {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
}

/* ---- 판 ---- */
.cw-stage {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.cw-status {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-sub);
  margin-bottom: var(--space-3);
}
.cw-status b { color: var(--color-text); font-variant-numeric: tabular-nums; }

.cw-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  width: min(100%, 430px);
  margin: 0 auto;
  border: 3px solid var(--cw-line);
  background: var(--cw-line);
  touch-action: manipulation;
}
.cw-cell {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--cw-line);
  background: var(--cw-cell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(19px, 5.6vw, 27px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  padding: 0;
  font-family: inherit;
}
.cw-cell.is-block {
  background: var(--cw-block);
  cursor: default;
}
.cw-cell.in-slot { background: var(--cw-slot-on); }
.cw-cell.is-cur { background: var(--cw-cell-on); }
.cw-cell.is-fixed { color: var(--cw-fixed); }
.cw-cell.is-wrong { color: var(--cw-wrong); text-decoration: line-through; }
.cw-cell .cw-no {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 500;
  color: var(--color-text-sub);
  line-height: 1;
}

/* ---- 지금 푸는 낱말 안내 ---- */
.cw-now {
  margin: var(--space-4) auto 0;
  max-width: 560px;
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg);
  padding: 10px 14px;
  border-radius: 0 3px 3px 0;
  min-height: 58px;
}
.cw-now-head {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: .02em;
}
.cw-now-text { font-size: 16px; line-height: 1.5; margin-top: 2px; }

/* ---- 음절 타일 ---- */
.cw-bank {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.cw-tile {
  font: inherit;
  font-size: clamp(18px, 4.6vw, 22px);
  font-weight: 700;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 6px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.cw-tile:active { transform: translateY(1px); }
.cw-tile:hover { border-color: var(--color-primary); }

/* ---- 버튼 줄 ---- */
.cw-tools {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.cw-btn {
  font: inherit;
  font-size: 15px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 3px;
  cursor: pointer;
}
.cw-btn:hover { border-color: var(--color-primary); }
.cw-btn-main {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.cw-msg {
  text-align: center;
  min-height: 22px;
  margin-top: var(--space-3);
  font-size: 15px;
  color: var(--color-primary);
}

/* ---- 단서 목록 ---- */
.cw-clues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (max-width: 640px) {
  .cw-clues { grid-template-columns: 1fr; gap: var(--space-4); }
}
.cw-clues h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--cw-line);
}
.cw-clue-list { list-style: none; margin: 0; padding: 0; }
.cw-clue-item {
  display: flex;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.45;
}
.cw-clue-item:hover { background: var(--color-bg); }
.cw-clue-item.is-cur { background: var(--cw-slot-on); }
.cw-clue-item.is-done { color: var(--color-text-sub); }
.cw-clue-no { font-weight: 700; min-width: 20px; text-align: right; }

.cw-source {
  margin-top: var(--space-4);
  font-size: 13px;
  color: var(--color-text-sub);
  text-align: center;
}

/* ---- 완성 알림 ---- */
.cw-done {
  margin-top: var(--space-4);
  border: 2px solid var(--color-primary);
  background: var(--color-primary-weak);
  border-radius: 3px;
  padding: var(--space-4);
  text-align: center;
}
.cw-done p { margin: 0 0 4px; }
.cw-done-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cw-done { background: rgba(194,59,48,.14); }
}
:root[data-theme="dark"] .cw-done { background: rgba(194,59,48,.14); }

/* 데스크톱 키보드 입력을 받는 숨은 입력칸 */
.cw-hidden-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  pointer-events: none;
}